@extends('layout')
@section('title')
	Daftar Proses PSB SR | {{env('APP_NAME')}}
@endsection
@section('content')
<div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
	<!-- begin:: Subheader -->
	<div class="kt-subheader   kt-grid__item" id="kt_subheader">
		<div class="kt-container  kt-container--fluid ">
			<div class="kt-subheader__main">
				<h3 class="kt-subheader__title">
					Daftar Proses PSB SR </h3>
				<span class="kt-subheader__separator kt-hidden"></span>
			</div>
			
		</div>
	</div>

	<!-- end:: Subheader -->

	<!-- begin:: Content -->
	<div class="kt-container  kt-container--fluid  kt-grid__item kt-grid__item--fluid">

		<!--begin::Portlet-->
		<div class="row">
			<div class="col-12">
				<div class="kt-portlet kt-portlet--mobile {{($data == null) ? '' : 'kt-hide'}}" id="data">
					<div class="kt-portlet__head kt-portlet__head--lg">
						<div class="kt-portlet__head-label">
							<span class="kt-portlet__head-icon">
								<i class="la la-calendar kt-font-success"></i>
							</span>
							<h3 class="kt-portlet__head-title">
								<span>
									<b>Daftar Proses PSB SR</b> - Laporan
								</span>
							</h3>
						</div>
					</div>
					<div class="kt-portlet__body">
						<div class="kt-section" id="data-prodi">
							<div class="kt-section__content">
								<form class="kt-form kt-form--fit kt-form--label-align-right" method="post" action="{{route('daftarprosespsbsr-cetak')}}" target="_blank">
								<input type="hidden" name="_token" value="{{csrf_token()}}">
								<!--begin: Search Form -->
								<div class="kt-form kt-form--label-right kt-margin-t-20 kt-margin-b-20">
									<div class="col-xl-12 order-2 order-xl-1">
										<div class="row">
											<div class="col-xl-3">
												<div class="form-group">
													<label>Tgl Daftar (from)</label>
													<div class="input-group date">
														<input type="text" class="form-control kt_datepicker" id="tgl_start" name="tgl_start" />
														<div class="input-group-append">
															<span class="input-group-text">
																<i class="la la-calendar"></i>
															</span>
														</div>
													</div>
												</div>
											</div>
											<div class="col-xl-3">
												<div class="form-group">
													<label>Tgl Daftar (to)</label>
													<div class="input-group date">
														<input type="text" class="form-control kt_datepicker" id="tgl_end" name="tgl_end" />
														<div class="input-group-append">
															<span class="input-group-text">
																<i class="la la-calendar"></i>
															</span>
														</div>
													</div>
												</div>
											</div>
											<div class="col-xl-2">
												<div class="form-group">
													<label>&nbsp;</label>
													<button type="button" class="form-control btn btn-success btn-sm" id="filter">Tampilkan Data</button>
												</div>
											</div>
											<div class="col-xl-2">
												<div class="form-group">
													<label>&nbsp;</label>
													<button type="submit" class="form-control btn btn-success btn-sm" id="cetak">Cetak</button>
												</div>
											</div>
										</div>
									</div>
								</div>
								</form>
								<table class="table table-bordered table-hover m-table myTable">
									<!-- <thead>
										<tr>
											<th>No Daftar PB</th>
											<th>Jalan</th>
											<th>Gang</th>
											<th>Nomor</th>
											<th>Notamb</th>
											<th>No Rencana PJ</th>
											<th>Tgl Daftar</th>
											<th>Tgl Kirim Kas</th>
											<th>Kd Hasil Survey</th>
											<th>Zona</th>
										</tr>
									</thead>
									<tbody>
									</tbody> -->
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--end::Portlet-->
	</div>
	<!-- end:: Content -->
</div>

@endsection

@section('css')
<style type="text/css">
	.modal-lg {
	    max-width: 75%;
	}
</style>
@endsection

@section('js')
<!--begin::Page Vendors -->
<script type="text/javascript">

	$(document).ready(function () {
		$('.kt_datepicker').datepicker({
			todayHighlight:1	,
			autoclose:!0,
		    clearBtn: true,
			format:"yyyy-mm-dd",
			orientation: "bottom left",
		});
		
		// $('#tabel').DataTable({
		// 	"responsive": true,
	 //        "processing": true,
	 //        "serverSide": true,
	 //        "ajax": "{{ route('daftarprosespsbsr-data',['filter' => '0;0']) }}",
	 //        "columns": [
	 //            {title: 'No DaftarPB', data: 'no_daftarpb'},
	 //            // {data: 'pbdata.jalan'},
	 //            // {data: 'pbdata.gang'},
	 //            // {data: 'pbdata.nomor'},
	 //            // {data: 'pbdata.notamb'},
	 //            // {data: 'no_rencanapj'},
	 //            // {data: 'tgl_daftarpb'},
	 //            // {data: 'tgl_kirimkas'},
	 //            // {data: 'pbdata.kd_hslsurvey'},
	 //            // {data: 'pbdata.zona'}
	 //            // {data: 'menu', orderable: false, searchable: false}
	 //        ],
	 //    });

	    $('.kt-select2').select2();

	    $("#filter").click(function(){
	    	var url = "{{ url('daftarprosespsbsr-data') }}/" + $('#tgl_start').val() + ";" + $('#tgl_end').val();
	    	// alert(url);
			$('#tabel').DataTable().ajax.url(url).load();
	    });

	    $("#filter").click(function(){
	    	if ($.fn.DataTable.isDataTable('.myTable')) {
			    $('.myTable').dataTable().fnClearTable();
			    $('.myTable').dataTable().fnDestroy();
			    $('.myTable').html("");
			}

			$('.myTable').DataTable({
				"responsive": true,
		        "processing": true,
		        "serverSide": true,
		        "ajax": "{{ url('daftarprosespsbsr-data') }}/" + $('#tgl_start').val() + ";" + $('#tgl_end').val(),
		        "columns": [
		            {title: 'No DaftarPB', data: 'no_daftarpb'},
		            {title: 'Nama', data: 'nama'},
		            {title: 'Jalan', data: 'jalan'},
		            {title: 'Gang', data: 'gang', defaultContent: '-'},
		            {title: 'Nomor', data: 'nomor', defaultContent: '-'},
		            {title: 'Notamb', data: 'notamb', defaultContent: '-'},
		            {title: 'Tgl DaftarPB', data: 'tgl_daftarpb'},
		            {title: 'Tgl KirimPG', data: 'tgl_kirimpg', defaultContent: '-'},
		            {title: 'Tgl SerahBon', data: 'tgl_serahbon', defaultContent: '-'},
		            {title: 'Tgl Srv', data: 'tgl_srv', defaultContent: '-'},
		            {title: 'Kd HslSurvey', data: 'kd_hslsurvey', defaultContent: '-'},
		            {title: 'Tgl Rab', data: 'tgl_rab', defaultContent: '-'},
		            {title: 'Tgl TerimaRab', data: 'tgl_terimarab', defaultContent: '-'},
		            {title: 'Tgl Kasi', data: 'tgl_kasi', defaultContent: '-'},
		            {title: 'Tgl Kirimkas', data: 'tgl_kirimkas', defaultContent: '-'},
		            {title: 'Tgl Adm', data: 'tgl_adm', defaultContent: '-'},
		            {title: 'Tgl KirimHublang', data: 'tgl_kirimhublang', defaultContent: '-'},
		        ],
		        "columnDefs":[
		        	{targets:6, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
		        	{targets:7, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
		        	{targets:8, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
		        	{targets:9, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
		        	{targets:11, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
		        	{targets:12, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
		        	{targets:13, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
		        	{targets:14, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
		        	{targets:15, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
		        	{targets:16, render:function(data){if(data!=null) return moment(data).format('YYYY-MM-DD');}},
			    ],
		    });

			$('.myTable').DataTable().ajax.url(url).load();
	    });
	   
	});

</script>
@endsection