@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: #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: 22px;
    margin-bottom: 26px;
    padding: 0;
	}
}

 .promoted-search__greeting {
    color: #1967d2;
    font-size: 28px;
    font-weight: 400;
    line-height: 22px;
    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;
}
</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 promoted-search__container">
	<div class="col-md-6 col-md-offset-3">
		<h1 class="promoted-search__greeting"><div class="promoted-search-greeting__logo-container"><img class="promoted-search-greeting__logo" src="{{asset('LaravelVueAdmin/assets/images/image.png')}}"></div><div style="font-size:13px;">
      Halaman ini memuat informasi SOP untuk masing-masing devisi usaha.
      SOP ini menjadi acuan dalam setiap kegiatan operasional dan pengambilan keputusan.
    </div></h1>
		<form class="promoted-search__form">
			@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

			@if(!empty($input->departemen))
			<input type="hidden" name="departemen" placeholder="Search" value="{{$input->departemen}}">
			@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>
		</form>
	</div>
</div>
<div class="row">
	<div class="col-md-6 col-md-offset-3">
		@foreach($department as $row)
		<button class=" btn btn-primary" data-tooltip="Tesr" onclick="department($(this))" data-id="{{$row->id}}" style="background: transparent; padding:9px 9px; text-transform: none; white-space:none;">
			<div class="panel panel-white bg-slate-600" style="width: 180px; margin-bottom: 0px;">
				<div class="panel-body">
					{{str_limit($row->name,22)}}
				</div>
			</div>
		</button>
		@endforeach
	</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