@extends("LaravelVueAdmin.layouts.app")

@section("htmlheader_title", "Standard Operating Procedure")
@section('class-body','sidebar-main-hidden')
@section('bg','background:#fff;')
@push('styles')
<style type="text/css">
.search {
    background-color: #f5f5f5;
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
    color: #212121;
    display: block;
    font-size: 16px;
    margin-left: 20px;
    height: 38px;
    padding: 0 40px 0 55px;
    width: auto;
    -webkit-appearance: none;
}

@media screen and (min-width: 771px) {
  .search {
    width: 500px;
    margin-left:280px;

  }
  .input-group {
      width: 400px;
      margin-left:30px;
  }
}

@media (min-width: 771px){
	.promoted-search__search-button {
	    left: 24px;
	}
}


.promoted-search__search-button {
        left: 300px;
}
.promoted-search__search-button, .promoted-search__clear-button{
	 background-color: transparent;
    border: none;
    cursor: pointer;
    height: 24px;
    padding: 0;
    position: absolute;
    top: 7px;
    width: 24px;
}


.text-form-search{
	width:auto;
	background: #ddd;
	height: 0px;
	font-size:20px;
	cursor: pointer;
	line-height:40px;
	color:#5f6368;
}
.list-sop h6{
	color:#202124;
}

.list-sop h6 i{
	color:#4285f4;
}

.list-sop{
	color:#757575;
	font-family: sans-serif;
}

.list-sop:hover {
	color:#757575;

}

.content-sop {
	margin-bottom: 0px;
}


</style>
@endpush
@section("form-search-navbar")
<form class="navbar-form navbar-left  " style="border:1px;">

    <div class="has-feedback has-feedback-left">
        <div class="group-form-navbar">
            <div class="input-group" >
              <div class="row">
	              	<a href="{{url(config('LaravelVueAdmin.adminRoute').'/sop')}}" class="link-text-form-search">
				    	<div class="text-form-search">
				    		<span>Standard Operating Procedure</span>
				    	</div>
			    	</a>
					<div class="col-md-6">
						@if(!empty($input->search))
						<input type="text" name="search" placeholder="Masukan Kata Kunci"  value="{{$input->search}}" class="search">
						@else
						<input type="text" name="search" placeholder="Masukan Kata Kunci" class="search">
						@endif
						<button class="promoted-search__search-button" aria-label="Search"><svg class="promoted-search__search-icon" viewBox="0 0 48 48"><path d="M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z"></path></svg></button>
					</div>
				</div>
            </div>
        </div>
    </div>
</form>
@endsection

@section("main-content")
<div class="row">
	<div>
		<div class="panel-heading">
			<div class="col-md-6">
				<div class="text-form-search">
          @if(!empty($input->search))
					<p class="tex">Hasil Pencarian untuk <span class="text-bold">{{$input->search}}</span></p>
          @endif
				</div>
			</div>
		</div>
		<div class="panel-body">
			<div class="col-md-6">
				@forelse($sop as $sops)
				<a href="{{url(config('LaravelVueAdmin.adminRoute').'/sop/detail/'.$sops->id)}}" class="text-semibold  list-sop">
					<div class="content-sop">
						<h6 class="text-semibold "><i class="icon-file-text3 position-left"></i>{{$sops->title}}</h6>
						<div class="list-group no-border">
							{!!str_limit($sops->description,500)!!}
						</div>
					</div>
				</a>
				<div class="heading-divided"></div>
				@empty
				<div class="content-sop">
					<div class="text-left">Data tidak ditemukan</div>
				</div>
				@endforelse
			</div>
		</div>
	</div>
</div>

@endsection