@extends("LaravelVueAdmin.layouts.app")

@section("htmlheader_title", "SOP : ".$sop->title)
@section('class-body','sidebar-main-hidden')
@section('bg','background:#fff;')
@push('styles')
<style type="text/css">
.search {
    background-color: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0px 1px 3px 1px rgba(60,64,67,.15);
    box-sizing: border-box;
    color: #212121;
    display: block;
    font-size: 16px;
    margin-left: -20px;
    height: 48px;
    padding: 0 40px 0 55px;
    width: 100%;
    -webkit-appearance: none;
}

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


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

@media (min-width: 771px){
 .promoted-search__container {
    background-image: url(https://ssl.gstatic.com/support/content/images/static/homepage_header_background.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    height: 305px;
    margin-top: 24px;
	}
}

.promoted-search__container {
    margin-top: 36px;
    position: relative;
}

@media (max-width: 771px){
	.promoted-search__form {
	    margin: 0 auto;
	    padding: 0 0 40px;
	    /*width: 520px;*/
	}
}



.promoted-search__form {
    margin: -35px 60px;
    padding-bottom: 70px;
    position: relative;
}

form {
    display: block;
    margin-top: 0em;
}

@media (min-width: 771px){
 .promoted-search__greeting {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 26px;
    padding: 0;
	}
}

 .promoted-search__greeting {
    color: #1967d2;
    font-size: 28px;
    font-weight: 400;
    line-height: 36px;
    padding: 0 40px 24px 0;
    text-align: center;
}
@media (min-width: 771px){
	 h1 {
	    font-size: 32px;
	    line-height: 40px;
	    margin: 0 0 8px;
	}
}

 h1 {
    font-size: 28px;
    line-height: 32px;
    margin: 0 0 8px;
}
h1,  h2,  h3,  h4,  h5 {
    color: #202124;
    font-family: 'Google Sans',Roboto,sans-serif;
    font-weight: 400;
}
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
.text-form-search{
		width: 270px;
	height: 0px;
	font-size:20px;
	line-height:40px;
	color:#5f6368;
	text-overflow: ellipsis;
}
.title{
	font-size:32px;
	line-height: 40px;
	margin: 0 0 8px;
	font-family: sans-serif;
}
</style>

@endpush
@section("form-search-navbar")
<form class="navbar-form navbar-left  " style="border:1px;">
    <a href="{{url(config('LaravelVueAdmin.adminRoute').'/sop')}}">
	    	<div class="text-form-search">
	    		<span>Standard Operating Procedure</span>
	    	</div>
    	</a>
</form>
@endsection
@section("main-content")
<div class="row">
	<div class="col-md-9 ">
		<div class="panel panel-flat">
			<div class="panel-body">
				<h6 class="panel-title"><span class="text-bold title">{{$sop->title}}</span></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/detail/export/'.$sop->id.'')}}" class=""><b><i class=" icon-file-pdf"></i></b> Export</a></li>
                  @if(Auth::user()->id == $sop->created_by || Auth::user()->hasRole('SUPER_ADMIN') || Auth::user()->hasRole('OWNER'))
                  <li><a target="_blank" href="{{url(config('LaravelVueAdmin.adminRoute') . '/sops/edit/'.$sop->id)}}" class=""><b><i class="icon-pencil7"></i></b> Edit</a></li>
                  @endif
                </ul>
                </li>
            </ul>
          </div>
        <ul class="list-inline list-inline-separate text-muted content-group">
          @php
            $values = $sop->id;
            $values = LvConfigs::getBySection('sops') . (intval(LvConfigs::getByKey('sops')+$values));
          @endphp
          <li><a href="#" class="text-muted">{{$values}}</a></li>
          <li><a href="#" onclick="department($(this))" data-id="{{$category->department_id}}" class="text-muted">{{$category->department}}</a></li>
          <li><a href="#"  onclick="department($(this))" data-id="{{$category->department_id}}" class="text-muted">{{$category->category}}</a></li>
        </ul>
				<hr>
				{!!$sop->description!!}
			</div>
      @if(!empty($user_update))
      <div class="panel-footer ">
        <div class="pull-right" style="padding:5px;">
          {{$user_update}}
        </div>
      </div>
      @endif
		</div>

	</div>
  <div class="col-md-3">
    <div class="panel panel-flat">
			<div class="panel-body">
				<h6 class="panel-title"><span class="text-bold">{{$category->category}}</span></h6>
        <hr>
        <ul>
        @if(!empty($sop_lainya))
          @foreach($sop_lainya as $sop)
              <li><a href="{{url(config('LaravelVueAdmin.adminRoute').'/sop/detail/'.$sop->id)}}">{{$sop->title}}</a></li>
          @endforeach
        @endif
        </ul>

			</div>
		</div>
  </div>
	<!-- <div class="col-md-4">
		<div class="panel panel-flat">
			<div class="panel-body">

			</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