@extends('layout')
@section('title')
	Perluasan Jaringan | {{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">
					Perluasan Jaringan </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>Monitoring Perluasan Jaringan</b>
								</span>
							</h3>
						</div>
						<div class="kt-portlet__head-toolbar">
							<div class="kt-portlet__head-wrapper">
								<div class="kt-portlet__head-actions">
									&nbsp;
								</div>
								<div class="kt-portlet__head-actions">
									<button class="btn btn-brand btn-sm" id="b_filter" data-toggle="modal">
									Filter
									</button>
								</div>
							</div>
						</div>
					</div>
					
					<div class="kt-portlet__body kt-hidden" id="body1">
						<div class="kt-section" id="">
							<div class="kt-section__content">
								<table class="table table-striped- table-bordered table-hover table-checkable" id="tabel1">
								</table>
							</div>
						</div>
					</div>
					<div class="kt-portlet__body kt-hidden" id="body2">
						<div class="kt-section" id="">
							<div class="kt-section__content">
								<table class="table table-striped- table-bordered table-hover table-checkable" id="tabel2">
								</table>
							</div>
						</div>
					</div>
					<div class="kt-portlet__body kt-hidden" id="body3">
						<div class="kt-section" id="">
							<div class="kt-section__content">
								<table class="table table-striped- table-bordered table-hover table-checkable" id="tabel3">
								</table>
							</div>
						</div>
					</div>
					<div class="kt-portlet__body kt-hidden" id="body4">
						<div class="kt-section" id="">
							<div class="kt-section__content">
								<table class="table table-striped- table-bordered table-hover table-checkable" id="tabel4">
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
			<form class="modal fade" id="modal_filter" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true" method="post" action="" target="_blank">
			<input type="hidden" name="_token" value="{{csrf_token()}}">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="">Filter</h5>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<div class="col-md-12">
									<div class="form-group kt-form__group row">
										<label class="col-form-label col-md-4">Jenis Monitoring</label>
										<div class="col-md-8">
											<select class="form-control" id="f_jenis" name="f_jenis" style="width: 100%">
												<option value="0">Pilih Jenis</option>
												<option value="1">Monitoring Individu</option>
												<option value="2">Belum Dibuat RAB</option>
												<option value="3">Belum Disposisi</option>
												<option value="4">Belum Cetak RAB</option>
												<option value="5">Belum Administrasi</option>
												<option value="6">Kirim Distribusi</option>
												<option value="7">Belum Disahkan Manajer</option>
												<option value="8">Belum Disahkan Dir.Pelayanan</option>
												<option value="9">Belum Kirim Loket</option>
											</select>
										</div>
									</div>
									<div class="form-group kt-form__group row kt-hidden" id="tanggal">
										<label class="col-form-label col-md-4">Tanggal</label>
										<div class="col-md-8">
											<div class="input-group date">
												<input type="text" class="form-control kt_datepicker" value="{{date('Y-m-d')}}" name="tgl_start" id="tgl_start" />
											</div>
											<div class="input-group date">
												<input type="text" class="form-control kt_datepicker" value="{{date('Y-m-d')}}" name="tgl_end" id="tgl_end"/>
											</div>
										</div>
									</div>
									<div class="form-group kt-form__group row kt-hidden" id="nama">
										<label class="col-form-label col-md-4">Nama</label>
										<div class="col-md-8">
											<input type="text" class="form-control" name="f_nama" id="f_nama" />
										</div>
									</div>
									<div class="form-group kt-form__group row kt-hidden" id="alamat">
										<label class="col-form-label col-md-4">Alamat</label>
										<div class="col-md-8">
											<input type="text" class="form-control" name="f_alamat" id="f_alamat" />
										</div>
									</div>
									<div class="form-group kt-form__group row kt-hidden" id="nomor">
										<label class="col-form-label col-md-4">No Surat/Daftar</label>
										<div class="col-md-8">
											<input type="text" class="form-control" name="f_nomor" id="f_nomor" />
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-sm btn-brand btn-info" id="filter">Tampilkan Data</button>
							<!-- <button type="submit" class="btn btn-sm btn-success" name="c1" value="1">Cetak</button>
							<button type="submit" class="btn btn-sm btn-success" name="c2" value="1">Cetak Rekap</button> -->
							<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
						</div>
					</div>
				</div>
			</form>
		</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 () {
		$("#tambah").click(function(){
			$("#data").addClass('kt-hide');
			$("#form").removeClass('kt-hide');
		});

		$("#f_jenis").change(function(){
			if ($(this).val() == "1") {
				$('#nama').removeClass('kt-hidden');
				$('#alamat').removeClass('kt-hidden');
				$('#nomor').removeClass('kt-hidden');
			}else{
				$('#nama').addClass('kt-hidden');
				$('#alamat').addClass('kt-hidden');
				$('#nomor').addClass('kt-hidden');
			}

			if ($(this).val() == "2" || $(this).val() == "4" || $(this).val() == "5" || $(this).val() == "6" || $(this).val() == "7" || $(this).val() == "8") {
				$('#tanggal').removeClass('kt-hidden');
			}else{
				$('#tanggal').addClass('kt-hidden');
			}
		});

		$("#b_filter").click(function(){
			$("#modal_filter").modal('show');
		});

		$(".currency").keyup(function() {
			var rp = formatRupiah(this.value);
			$(this).val(rp);
		});

		$(".kt_datepicker").datepicker({
			todayHighlight:1,
			autoclose:!0,
		    clearBtn: true,
			format:"yyyy-mm-dd",
			orientation: "bottom left",
		});

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


		$('#tabel1').DataTable({
			"responsive": true,
	        "processing": true,
	        "serverSide": true,
	        "ajax": "{{ route('monperluasanjar-data',['filter' => '0']) }}",
	        "columns": [
	            {data: 'no_rencanapj', title: 'No RencanaPJ', defaultContent: '-'},
	            {data: 'no_daftarpb', title: 'No DaftarPB', defaultContent: '-'},
	            {data: 'nama', title: 'Nama PB', defaultContent: '-'},
	            {data: 'no_agenda', title: 'No Agenda', defaultContent: '-'},
	            {data: 'nama_pemohon', title: 'Nama Pemohon', defaultContent: '-'},
	            {data: 'da', title: 'DA', defaultContent: '-'},
	            {data: 'tgl_serahbon', title: 'Tgl SerahBon', defaultContent: '-'},
	            {data: 'tgl_srv', title: 'Tgl Srv', defaultContent: '-'},
	            {data: 'tgl_rab', title: 'Tgl Rab', defaultContent: '-'},
	            {data: 'tgl_terimarab', title: 'Tgl TerimaRab', defaultContent: '-'},
	            {data: 'tgl_kabag', title: 'Tgl Kabag', defaultContent: '-'},
	            {data: 'tgl_dirtek', title: 'Tgl Dirtek', defaultContent: '-'},
	            {data: 'tgl_kirimkas', title: 'Tgl KirimKas', defaultContent: '-'},
	        ],
	        
	    });

		$('#tabel2').DataTable({
			"responsive": true,
	        "processing": true,
	        "serverSide": true,
	        "ajax": "{{ route('monperluasanjar-data',['filter' => '0']) }}",
	        "columns": [
	            {data: 'no_rencanapj', title: 'No RencanaPJ', defaultContent: '-'},
	            {data: 'no_daftarpb', title: 'No DaftarPB', defaultContent: '-'},
	            {data: 'no_agenda', title: 'No Agenda', defaultContent: '-'},
	            {data: 'kd_ptgsurvey', title: 'Petugas', defaultContent: '-'},
	            {data: 'tgl_serahbon', title: 'Tgl SerahBon', defaultContent: '-'},
	            {data: 'da', title: 'DA', defaultContent: '-'},
	            {data: 'tgl_srv', title: 'Tgl Survey', defaultContent: '-'},
	            {data: 'kd_hslsurvey', title: 'Kd HslSurvey', defaultContent: '-'},
	            {data: 'tgl_rab', title: 'Kd HslSurvey', defaultContent: '-'},
	            {data: 'tgl_terimarab', title: 'Kd HslSurvey', defaultContent: '-'},
	        ],
	        
	    });

	    $('#tabel3').DataTable({
			"responsive": true,
	        "processing": true,
	        "serverSide": true,
	        "ajax": "{{ route('monperluasanjar-data',['filter' => '0']) }}",
	        "columns": [
	            {data: 'no_agenda', title: 'No Agenda', defaultContent: '-'},
	            {data: 'no_surat', title: 'No Surat', defaultContent: '-'},
	            {data: 'nama', title: 'Nama', defaultContent: '-'},
	            {data: 'alamat', title: 'Alamat', defaultContent: '-'},
	            {data: 'kd_hsurveyjar', title: 'Kd HslSurvey', defaultContent: '-'},
	        ],
	        
	    });

	    $('#tabel4').DataTable({
			"responsive": true,
	        "processing": true,
	        "serverSide": true,
	        "ajax": "{{ route('monperluasanjar-data',['filter' => '0']) }}",
	        "columns": [
	            {data: 'no_rencanapj', title: 'No RencanaPJ', defaultContent: '-'},
	            {data: 'nama', title: 'Nama', defaultContent: '-'},
	            {data: 'alamat_pemohon', title: 'Alamat Pemohon', defaultContent: '-'},
	            {data: 'alamat_persil', title: 'Alamat Persil', defaultContent: '-'},
	            {data: 'rp_pelanggan', title: 'Rp Pelanggan', defaultContent: '-'},
	            {data: 'rp_reg', title: 'Rp Reg', defaultContent: '-'},
	            {data: 'no_daftarpb', title: 'No DaftarPB', defaultContent: '-'},
	            {data: 'no_agenda', title: 'No Agenda', defaultContent: '-'},
	            {data: 'tgl_rab', title: 'Tgl Rab', defaultContent: '-'},
	            {data: 'tgl_lunasrab', title: 'Tgl LunasRab', defaultContent: '-'},
	            {data: 'tgl_kirimdist', title: 'Tgl KirimDist', defaultContent: '-'},
	        ],
	        
	    });

	    

	    
	    $("#filter").click(function(){
	    	
	    	$('#body1').addClass('kt-hidden')
    		$('#body2').addClass('kt-hidden')
    		$('#body3').addClass('kt-hidden')
    		$('#body4').addClass('kt-hidden')
	    	
	    	if ($('#f_jenis').val() == "1") {
	    		var url = "{{ url('monperluasanjar-data') }}/" + $('#f_jenis').val() + ";" + $('#f_nama').val() + ";" + $('#f_alamat').val() + ";" + $('#f_nomor').val();
	    		$('#tabel1').DataTable().ajax.url(url).load();
	    		$('#body1').removeClass('kt-hidden')
	    	}else if ($('#f_jenis').val() == "2") {
	    		var url = "{{ url('monperluasanjar-data') }}/" + $('#f_jenis').val() + ";" + $('#tgl_start').val() + ";" + $('#tgl_end').val();
				$('#tabel2').DataTable().ajax.url(url).load();
	    		$('#body2').removeClass('kt-hidden')
	    	}
	    	else if ($('#f_jenis').val() == "3") {
	    		var url = "{{ url('monperluasanjar-data') }}/" + $('#f_jenis').val();
	    		$('#tabel3').DataTable().ajax.url(url).load();
	    		$('#body3').removeClass('kt-hidden')
	    	}else if ($('#f_jenis').val() == "4") {
	    		var url = "{{ url('monperluasanjar-data') }}/" + $('#f_jenis').val() + ";" + $('#tgl_start').val() + ";" + $('#tgl_end').val();
	    		$('#tabel2').DataTable().ajax.url(url).load();
	    		$('#body2').removeClass('kt-hidden')
	    	}else if ($('#f_jenis').val() == "5") {
	    		var url = "{{ url('monperluasanjar-data') }}/" + $('#f_jenis').val() + ";" + $('#tgl_start').val() + ";" + $('#tgl_end').val();
	    		$('#tabel2').DataTable().ajax.url(url).load();
	    		$('#body2').removeClass('kt-hidden')
	    	}else if ($('#f_jenis').val() == "6") {
	    		var url = "{{ url('monperluasanjar-data') }}/" + $('#f_jenis').val() + ";" + $('#tgl_start').val() + ";" + $('#tgl_end').val();
	    		$('#tabel4').DataTable().ajax.url(url).load();
	    		$('#body4').removeClass('kt-hidden')
	    	}else if ($('#f_jenis').val() == "7") {
	    		var url = "{{ url('monperluasanjar-data') }}/" + $('#f_jenis').val() + ";" + $('#tgl_start').val() + ";" + $('#tgl_end').val();
	    		$('#tabel2').DataTable().ajax.url(url).load();
	    		$('#body2').removeClass('kt-hidden')
	    	}else if ($('#f_jenis').val() == "8") {
	    		var url = "{{ url('monperluasanjar-data') }}/" + $('#f_jenis').val() + ";" + $('#tgl_start').val() + ";" + $('#tgl_end').val();
	    		$('#tabel2').DataTable().ajax.url(url).load();
	    		$('#body2').removeClass('kt-hidden')
	    	}else if ($('#f_jenis').val() == "9") {
	    		var url = "{{ url('monperluasanjar-data') }}/" + $('#f_jenis').val() + ";" + $('#tgl_start').val() + ";" + $('#tgl_end').val();
	    		$('#tabel2').DataTable().ajax.url(url).load();
	    		$('#body2').removeClass('kt-hidden')
	    	}
	    	alert(url);
	    	// $('#tabel').DataTable().destroy();
			// $('#tabel').DataTable().ajax.url(url).load();
			$("#modal_filter").modal('hide');


	    });

	    
	   
	});

	// function update(id){
	// 	var token = '{{csrf_token()}}';
 //        $.ajax({
 //            url: "",
 //            type: 'GET',
 //            headers: {'X-CSRF-TOKEN': token},
 //            data: {id: id},
 //            cache: false,
            
 //            success: function (result) {
 //    //         	$("#mdetail").empty();
 //    //             $.each( result.data, function( key, value ) {
 //    //             	// alert(value.harga);
	// 			//  	$("#mdetail").append(
	// 			//  		'<tr><td>'+value.seleb.nama_seleb+'</td><td>'+value.berat+'</td><td>'+value.harga+'</td><td>'+value.rp_tagihan+'</td></tr>');
	// 			// });
	// 			$("#modal_update").modal('show');
 //            }
 //        });
 //    }
	

</script>
@endsection