@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:25px;

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

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


.promoted-search__search-button {
        left: 48px;
}
.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;
}


.panel-group-control .panel-title > a.collapsed:before {
    content: '\e9b8';
}

.panel-group-control .panel-title > a:before {
    content: '\e9b7';
    font-family: 'icomoon';
    position: absolute;
    top: 50%;
    margin-top: -8px;
    left: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


</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')}}">
            	    	<div class="text-form-search">
            	    		<span>Standard Operating Procedure</span>
            	    	</div>
                	</a>
				<div class="col-md-6 " style="margin-left:50%; margin-right:50%;">
						@if(!empty($input->search))
						<input type="text" name="search" placeholder="Masukan Kata Kunci"  value="{{$input->search}}" class="search">
						<input type="hidden" name="departemen" placeholder="Search" value="{{$input->departemen}}" class="search">

						@else
						<input type="text" name="search" placeholder="Masukan Kata Kunci" class="search">
						<input type="hidden" name="departemen" placeholder="Search" value="{{$input->departemen}}" 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" style="margin-top:-35px;">
	<div>
		<div class="panel-heading">
			<div class="col-md-12 ">
				<div class="text-form-search">
          @if(!empty($input->search))
					<p class="" style="margin: 0 0 -15px">Hasil Pencarian untuk <span class="text-bold">{{$input->search}}</span></p>
          @endif
          <h6 class="text-muted">Departemen <span class="text-semibold">{{$department->name}}</span></h6>
				</div>
			</div>
		</div>@if(!empty($input->search))<br>@endif

		<div class="panel-body">
			<div class="col-md-12">
				@if(!empty($sopWithCategory))
					<div class="panel-group panel-group-control panel-group-control-right content-group-lg">
						@php $i=1; @endphp
						@foreach($sopWithCategory as $row)
						<div class="panel panel-white ">
							<div class="panel-heading">

                <h6 class="panel-title">
									<a data-toggle="collapse" class="collapsed"  href="#accordion-control-right-group{{$i}}">{{$row->name}} ( {{count($row->sop)}} )</a>
								</h6>
                <div class="pull-right" style="margin-right:30px; margin-top:-20px;">
                  <ul class="icons-list">
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-menu9"></i></a>
                      <ul class="dropdown-menu dropdown-menu-right">
                        <li><a href="{{url(config('LaravelVueAdmin.adminRoute') . '/sop/kategori/export/'.$row->category_id.'')}}" class=""><b><i class=" icon-file-pdf"></i></b> Export</a></li>
                      </ul>
                      </li>
                  </ul>
                </div>
							</div>

							<div id="accordion-control-right-group{{$i}}" class="panel-collapse collapse">
								<div class="panel-body">
									<ul>
									@if(!empty($row->sop))
										@foreach($row->sop as $sop)
												<li><a href="{{url(config('LaravelVueAdmin.adminRoute').'/sop/detail/'.$sop->id)}}">{{$sop->title}} <span class="text-muted">{{(!empty($sop->user_update)) ? $sop->user_update : ''}}</span></a></li>
										@endforeach
									@endif
									</ul>
								</div>
							</div>
						</div>
							@php $i++; @endphp
						@endforeach
					</div>
				@else
					<div class="text-left">Data tidak ditemukan</div>
				@endif
			</div>
		</div>
	</div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
function department(ele){
	var id = ele.data('id');
	location.href = "{{url(config('LaravelVueAdmin.adminRoute'))}}"+"/sop?search="+"{{(!empty($input->search)) ? $input->search : ''}}"+"&departemen="+id;
}
</script>
@endpush