@extends('layout')
@section('title')
	Monitoring PB Bayar | {{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">
					Monitoring PB Bayar </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>Sambung Baru</b> - Monitoring PB Bayar
								</span>
							</h3>
						</div>
					</div>					
					<div class="kt-portlet__body">
						<div class="kt-portlet__body kt-portlet__body--fit">
							<form class="kt-form kt-form--fit kt-form--label-align-right" method="post" action="" 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="row align-items-center">
									<div class="col-xl-12 order-2 order-xl-1">
										<div class="row align-items-center">
											<div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
												<div class="kt-form__group kt-form__group--inline">
													<div class="kt-form__label">
														<label>Status Bon:</label>
													</div>
													<div class="kt-form__control">
														<select class="form-control kt-select2" style="width: 100%" name="jenis" id="jenis">
															<option value="0" selected>Belum Setor</option>
															<option value="1">Belum Survey</option>
														</select>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div> -->
							<div class="kt-form kt-form--label-right kt-margin-t-20 kt-margin-b-20" id="tanggal">
								<div class="row align-items-center">
									<div class="col-xl-12 order-2 order-xl-1">
										<div class="row align-items-center">
											<div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
												<div class="kt-form__group kt-form__group--inline">
													<div class="kt-form__label">
														<label>Tanggal Daftar:</label>
													</div>
													<div class="kt-form__control">
														<div class="input-group date">
															<input type="text" class="form-control kt_datepicker" id="tgl_start" name="tgl_start" value="{{date('Y-m-d')}}"/>
															<div class="input-group-append">
																<span class="input-group-text">
																	<i class="la la-calendar"></i>
																</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
												<div class="kt-form__group kt-form__group--inline">
													<div class="kt-form__label">
														<label>s/d</label>
													</div>
													<div class="kt-form__control">
														<div class="input-group date">
															<input type="text" class="form-control kt_datepicker" id="tgl_end" name="tgl_end" value="{{date('Y-m-d')}}"/>
															<div class="input-group-append">
																<span class="input-group-text">
																	<i class="la la-calendar"></i>
																</span>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="kt-form kt-form--label-right kt-margin-t-20 kt-margin-b-20">
								<div class="row align-items-center">
									<div class="col-xl-12 order-2 order-xl-1">
										<div class="row align-items-center">
											<div class="col-md-2 kt-margin-b-20-tablet-and-mobile">
												<div class="kt-form__group kt-form__group--inline">
													<div class="kt-form__control">
														<button type="button" class="btn btn-sm btn-pill btn-success" id="filter">Tampilkan Data</button>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="kt-form kt-form--label-right kt-margin-t-20 kt-margin-b-20">
								<div class="row align-items-center">
									<div class="col-xl-12 order-2 order-xl-1">
										<div class="row align-items-center">
											<div class="col-md-1 kt-margin-b-20-tablet-and-mobile">
												<div class="kt-form__group kt-form__group--inline">
													<div class="kt-form__control">
														<button type="submit" class="btn btn-sm btn-pill btn-info" id="laporan" name="laporan" value="1">Cetak Laporan</button>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div> -->
							</form>
							<table class="table table-striped- table-bordered table-hover table-checkable" id="tabel">
								<thead>
									<tr>
										<th>No DaftarPB</th>
										<th>Nama</th>
										<th>Jalan</th>
										<th>Gang</th>
										<th>Nomor</th>
										<th>Notamb</th>
										<th>Tgl Lunas</th>
									</tr>
								</thead>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--end::Portlet-->
	</div>

	<!-- end:: Content -->
</div>
@endsection
@section('css')
<link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/vendors/general/select2/dist/css/select2.css')}}" rel="stylesheet" type="text/css" />
<style type="text/css">
	.modal-lg {
	    max-width: 75%;
	}
</style>
@endsection
@section('js')
<!--begin::Page Vendors -->
<script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/general/select2/dist/js/select2.full.js')}}" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function () {
		$("#tambah").click(function(){
			$("#data").addClass('kt-hide');
			$("#form").removeClass('kt-hide');
		});

		$('#ffilter').change(function(){ 
		    var value = $(this).val();
		    // alert(value);
		    if (value == 4) {
		    	$("#tanggal").removeClass('kt-hide');
		    }else{
		    	$("#tanggal").addClass('kt-hide');
		    }
		});

		$('.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('monitoringpbbayar-data',['filter' => '0;'.date('Y-m-d').';'.date('Y-m-d')]) }}",
	        "ajax": "{{ route('monitoringpbbayar-data',['filter' => date('Y-m-d').';'.date('Y-m-d')]) }}",
	        "columns": [
	        	{data: 'no_daftarpb', defaultContent: '-'},
	        	{data: 'nama', defaultContent: '-'},
	        	{data: 'jalan', defaultContent: '-'},
	        	{data: 'gang', defaultContent: '-'},
	        	{data: 'nomor', defaultContent: '-'},
	        	{data: 'notamb', defaultContent: '-'},
	        	{data: 'tgl_bon', defaultContent: '-'},
	            // {data: 'menu', orderable: false, searchable: false}
	        ]
	    });

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

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

	});

	</script>
@endsection