@extends('layout')

@section('content')

<div class="page-header page-header-default">
	<div class="breadcrumb-line">
		<ul class="breadcrumb">
			<li><a href="index.html"><i class="icon-home2 position-left"></i> Kas Bon</a></li>
			<li>Laporan</li>
			<li class="active">Laporan Kas Bon Pegawai</li>
		</ul>
	</div>
</div>

<div class="content">
	<div class="row">
		<div class="col-sm-6 col-md-6">
			<div class="panel panel-flat">
				<div class="panel-heading">
					<h5 class="panel-title">Laporan Kas Bon Pegawai</h5>
					<div class="heading-elements">
						<!-- <ul class="icons-list">
				      		<li><a data-action="collapse"></a></li>
				      	</ul> -->
				     </div>
				</div>

				<form class="form-horizontal" method="get" action="{{url('laporankasbon/cetak')}}" id="form_laporan_kasbon" target="_blank">
				  	<div class="panel-body">
				  		{{ csrf_field() }}
				  		<div class="form-group">
				  			<label class="control-label col-sm-12 col-md-2">Pegawai</label>
				  			<div class="col-sm-12 col-md-10">
				  				<select name="pegawai" id="pegawai" class="form-control set_selected" required="">
				  					@foreach($pegawai AS $key => $value)
				  					<option value="{{ $value->id_pegawai }}_{{ $value->id_akun_piutang }}">@if(!is_null($value->nomor_pegawai)) {{$value->nomor_pegawai}} - @endif {{$value->nama_pegawai}} ({{ $value->nama_departement }})</option>
				  					@endforeach
				  				</select>
				  			</div>
				  		</div>
				  		<div class="form-group">
				  			<label class="control-label col-sm-12 col-md-2">Tanggal</label>
				  			<div class="col-sm-12 col-md-10">
				  				<div class="row">
				  					<!-- <div class="col-sm-6 col-md-6">
				  						<input type="text" name="tanggal_awal" id="tanggal_awal" class="form-control set_datepicker" value="{{ date('d/m/Y') }}" required="" autocomplete="off">
				  					</div>
				  					<div class="col-sm-6 col-md-6">
				  						<input type="text" name="tanggal_akhir" id="tanggal_akhir" class="form-control set_datepicker" value="{{ date('d/m/Y') }}" required="" autocomplete="off">
				  					</div> -->
				  					<div class="col-sm-12 col-md-12">
				  						<div class="input-group bootstrap-touchspin">
					  						<input type="text" name="tanggal_awal" id="tanggal_awal" class="form-control set_datepicker" value="{{ date('d/m/Y') }}" data-mask="99/99/9999" required="" autocomplete="off">
					  						<span class="input-group-addon bootstrap-touchspin-postfix">s/d</span>
					  						<input type="text" name="tanggal_akhir" id="tanggal_akhir" class="form-control set_datepicker" value="{{ date('d/m/Y') }}" data-mask="99/99/9999" required="" autocomplete="off">
					  					</div>
				  					</div>
				  				</div>
				  			</div>
				  		</div>
				  	</div>
				  	<div class="panel-footer">
				  		<div class="col-sm-12 col-md-12 text-right">
				  			<button type="button" id="btn_cetak" class="btn btn-sm btn-primary"><i class="icon-printer position-left"></i> Cetak</button>
				  		</div>
				  	</div>
				</form>
			</div>
		</div>
		<div class="col-sm-6 col-md-6">
			<div class="panel panel-flat">
				<div class="panel-heading">
					<h5 class="panel-title">Laporan Kas Bon Pegawai (Rekap)</h5>
					<div class="heading-elements">
						<ul class="icons-list">
				      		<!-- <li><a data-action="collapse"></a></li> -->
				      	</ul>
			       	</div>
			    </div>
			    <form class="form-horizontal" autocomplete="off" id="form_laporan_kasbon_rekap" method="get" action="{{url('laporankasbon/cetak-rekap')}}" target="_blank">
			    	{{ csrf_field() }}
			    	<div class="panel-body">
			    		<div class="form-group">
			    			<label class="control-label col-sm-12 col-md-2">Tanggal</label>
			    			<div class="col-sm-12 col-md-10">
			    				<div class="row">
			    					<!-- <div class="col-sm-12 col-md-6">
			    						<input class="form-control set_datepicker" type="text" name="tanggal_awal" value="{{ date('d/m/Y') }}" data-mask="99/99/9999" required="">
			    						
			    					</div>
			    					<div class="col-sm-12 col-md-6">
			    						<input class="form-control set_datepicker" type="text" name="tanggal_akhir" value="{{ date('d/m/Y') }}" data-mask="99/99/9999" required="">

			    					</div> -->
			    					<div class="col-sm-12 col-md-12">
				  						<div class="input-group bootstrap-touchspin">
					  						<input class="form-control set_datepicker" type="text" name="tanggal_awal" value="{{ date('d/m/Y') }}" data-mask="99/99/9999" required="">
					  						<span class="input-group-addon bootstrap-touchspin-postfix">s/d</span>
					  						<input class="form-control set_datepicker" type="text" name="tanggal_akhir" value="{{ date('d/m/Y') }}" data-mask="99/99/9999" required="">
					  					</div>
				  					</div>
			    				</div>
			    			</div>
			    		</div>
				    		
			    		<div class="form-group">
			    			<label class="control-label col-sm-12 col-md-2">&nbsp;</label>
			    			<div class="col-sm-12 col-md-10">&nbsp;</div>
			    		</div>
			    	</div>
				    <div class="panel-footer">
				    	<div class="col-sm-12 col-md-12 text-right">
					    	<button type="submit" class="btn btn-md btn-primary"><i class="icon-printer position-left"></i> Cetak</button>
					    </div>
				    </div>
			    </form>
			</div>
		</div>
	</div> <!--- end : .row -->
</div>

<script type="text/javascript">
	$(document).ready(function(){

		$(".set_selected").select2();

		$(".set_datepicker").datepicker({
			format : "dd/mm/yyyy",
			autoclose : true,
			zOfIndex : 9999,
		});

		$(".month_datepicker").datepicker({
			format : "mm-yyyy",
			viewMode : 'months',
			minViewMode : 'months',
			autoclose : true,
			zOfIndex : 9999,
		})

		$("#btn_cetak").click(function(evt){
			evt.preventDefault();
			if ($("#pegawai").val() == "") {
				$("#pegawai").select2('open');
			} else if ($("#tanggal_awal").val() == "") {
				$("#tanggal_awal").focus();
			} else if ($("#tanggal_akhir").val() == "") {
				$("#tanggal_akhir").focus();
			}
			 else {
				$("#form_laporan_kasbon").submit();
			}
		})

	})

</script>


@endsection