sipadu_mbip/resources/views/main-dashboard/compound/compound_index.blade.php

@extends('layout.master', ['uid' => $user->_id, 'token' => $user->token_firebase])
@section('page_title', 'Kompaun')
@section('sub_page_title', '')
@section('name', $user->StaffDetail->full_name)
@section('img_profile', $user->StaffDetail->profile_img)

@section('content')
<style type="text/css">
	select.form-control, select.form-control:focus, select.form-control:hover {
		border: 1px solid #ccc !important;
		height: auto !important;
	}

	.panel-group .panel {
	    margin-bottom: 0;
	    overflow: hidden;
	    border-radius: 4px;
	}
	.panel-default {
    	border-color: #ddd;
	}
	.panel-default>.panel-heading {
	    color: #333;
	    background-color: #f5f5f5;
	    border-color: #ddd;
	}
	.panel-title {
	    margin-top: 0;
	    margin-bottom: 0;
	    font-size: 16px;
	    color: inherit;
	}

	.panel-body .table>thead>tr>th, .panel-body .table>tbody>tr>th, .panel-body .table>tfoot>tr>th, .panel-body .table>thead>tr>td, .panel-body .table>tbody>tr>td, .panel-body .table>tfoot>tr>td , .panel-body div{
	    padding: 8px 15px;
	    line-height: 1.428571429;
	    vertical-align: top;
	    border-top: 1px solid #ddd;
	}
	.glyphicon { margin-right:10px; }
	.panel-body { padding:0px; }
	.panel-body table tr td { padding-left: 15px }
	.panel-body table tr td a:hover , .panel-body div a:hover{ color: #fff !important; }
	.panel-body .table, .panel-body div {margin-bottom: 0px; }

	.r-padd { padding-right: 5%; }
	.active { color: #333333; }
	.active:hover { color: #333333; }

	th { font-weight: 600; }
	table.dataTable.nowrap th, table.dataTable.nowrap td {
	    white-space: pre-line !important;
	}

	table.nowrap th, table.nowrap td {
	    white-space: pre-line !important;
	}
	/*.dataTables_length {
		float:right !important;
	}*/
</style>

<div class="inner-page">
	<div class="row">
		@include('main-dashboard.compound._part.menu_category')
		@include('main-dashboard.compound._part.filter_form')
	</div>
	<div class="row">
		<div class="col-md-12">

			<div class="card">
				<div class="card-header">
					<div class="row">
						<div class="col-md-8">
							<h5>Senarai Semua Kompaun</h5>
						</div>
						<div class="col-md-4">
							<div id="link" style="float:right"></div>
                            <div id="link1" style="float:right"></div>
                            <div id="link2" style="float:right"></div>
						</div>
					</div>
				</div>
				<div class="card-body">
					<div id="viewParkir">
						@include('main-dashboard.compound._part.compound_parkir')
                    </div>
                    <div id="viewPelbagai">
						@include('main-dashboard.compound._part.compound_pelbagai')
					</div>
					<div id="viewNotis">
						<div class="col-lg-12 col-xl-12">
							<!-- Nav tabs -->
							<ul class="nav nav-tabs md-tabs" role="tablist">
								<li class="nav-item">
									<a class="nav-link active" data-toggle="tab" href="#default" role="tab">Tarikh Mula</a>
									<div class="slide"></div>
								</li>
								<li class="nav-item">
									<a class="nav-link" data-toggle="tab" href="#hari3" role="tab">3 Hari Sebelum</a>
									<div class="slide"></div>
								</li>
								<li class="nav-item">
									<a class="nav-link" data-toggle="tab" href="#hari7" role="tab">7 Hari Sebelum</a>
									<div class="slide"></div>
								</li>
							</ul>

							<!-- Tab panes -->
							<div class="tab-content card-block">
								<div class="tab-pane active" id="default" role="tabpanel">
									<div class="dt-responsive table-responsive">
										<table id="reportD" class="table table-sm table-striped table-bordered nowrap" style="width:100%">
											<thead>
												<tr>
													<th>#</th>
													<th>Modul</th>
													<th>No Kpn</th>
													<th>Jenis</th>
													<th>Tarikh Masa</th>
													<th>Kesalahan</th>
													<th>Nric</th>
													<th>Nama</th>
													<th>PenguatKuasa</th>
													<th>Tindakan</th>
												</tr>
											</thead>
											<tfoot>
												<tr>
													<th>#</th>
													<th>Modul</th>
													<th>No Kpn</th>
													<th>Jenis</th>
													<th>Tarikh Masa</th>
													<th>Kesalahan</th>
													<th>Nric</th>
													<th>Nama</th>
													<th>PenguatKuasa</th>
													<th>Tindakan</th>
												</tr>
											</tfoot>
										</table>
									</div>
								</div>
								<div class="tab-pane" id="hari3" role="tabpanel">
									<div class="dt-responsive table-responsive">
										<table id="report3" class="table table-sm table-striped table-bordered nowrap" style="width:100%">
											<thead>
												<tr>
													<th>#</th>
													<th>Modul</th>
													<th>No Kpn</th>
													<th>Jenis</th>
													<th>Tarikh Masa</th>
													<th>Kesalahan</th>
													<th>Nric</th>
													<th>Nama</th>
													<th>PenguatKuasa</th>
													<th>Tindakan</th>
												</tr>
											</thead>
											<tfoot>
												<tr>
													<th>#</th>
													<th>Modul</th>
													<th>No Kpn</th>
													<th>Jenis</th>
													<th>Tarikh Masa</th>
													<th>Kesalahan</th>
													<th>Nric</th>
													<th>Nama</th>
													<th>PenguatKuasa</th>
													<th>Tindakan</th>
												</tr>
											</tfoot>
										</table>
									</div>
								</div>
								<div class="tab-pane" id="hari7" role="tabpanel">
									<div class="dt-responsive table-responsive">
										<table id="report7" class="table table-sm table-striped table-bordered nowrap" style="width:100%">
											<thead>
												<tr>
													<th>#</th>
													<th>Modul</th>
													<th>No Kpn</th>
													<th>Jenis</th>
													<th>Tarikh Masa</th>
													<th>Kesalahan</th>
													<th>Nric</th>
													<th>Nama</th>
													<th>PenguatKuasa</th>
													<th>Tindakan</th>
												</tr>
											</thead>
											<tfoot>
												<tr>
													<th>#</th>
													<th>Modul</th>
													<th>No Kpn</th>
													<th>Jenis</th>
													<th>Tarikh Masa</th>
													<th>Kesalahan</th>
													<th>Nric</th>
													<th>Nama</th>
													<th>PenguatKuasa</th>
													<th>Tindakan</th>
												</tr>
											</tfoot>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>

	<div class="modal fade" id="kemaskiniC" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<form class="form-horizontal" id="updateSt">
					<div class="modal-header">
						<h5 class="modal-title">Kemaskini Status Kompaun</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">
						<input type="hidden" name="id" id="id" value="" required/>
						<input type="hidden" name="typeK" id="typeK" value="" required/>
						<input type="hidden" name="current_id" id="current_id" value="{{ $user->_id }}" required/>
						<div class="form-group">
							<label class="col-sm-6 control-label"><b>Status</b></label>
							<div class="col-sm-12">
								<select class="form-control" name="status" required>
									<option value="Belum Bayar">Belum Bayar</option>
									<option value="Berbayar">Berbayar</option>
									<option value="Batal">Batal</option>
									<option value="Buang">Batal (Sistem)</option>
								</select>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-6 control-label"><b>Catatan <code>*</code></b></label>
							<div class="col-sm-12">
								<textarea class="form-control" name="remark"></textarea>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-6 control-label"><b>Jumlah Dibayar <code>*</code></b></label>
							<div class="col-sm-12">
								<input type="text" class="form-control autonumber" name="amount" data-v-min="0.00" data-v-max="99999.00"placeholder="0.00" required/>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-6 control-label"><b>Amaun Tunggakan</b> <code>*</code></label>
							<div class="col-sm-12">
								<input type="text" class="form-control autonumber" name="tunggakan" data-v-min="0.00" data-v-max="99999.00" placeholder="0.00" required/>
								<code>Sekiranya tiada amaun tunggakan, sila letak 0. Amaun tunggakan ini akan diguna untuk laporan</code>
							</div>
						</div>

						<div class="form-group" id="datePay">
							<label class="col-sm-6 control-label"><b>Tarikh Bayar</b> <code>*</code></label>
							<div class="col-sm-12">
								<input type="datetime-local" class="form-control" name="tarikh_bayar" id="tarikh_bayar"/>
							</div>
						</div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-sm btn-secondary mobtn" data-dismiss="modal">Close</button>
						<button  id="submit" class="btn btn-sm btn-primary waves-effect waves-light">KEMASKINI</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
@endsection

@section('external_js')
<script type="text/javascript">
	var SITEURL = '{{URL::to('')}}';
	var tableP, tableP2, tableP1, tableP3, tableP7;
	var queryString1 = '', queryString2 = '', token = "{{ csrf_token() }}";

	$('#viewParkir').hide(); $('#link').hide();
    $('#viewPelbagai').hide(); $('#link1').hide();
    $('#viewNotis').hide(); $('#link2').hide();
</script>
<script type="text/javascript" src="{{ asset('js/dataParkir.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/dataPelbagai.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/dataNotis.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/function_checkbox.js') }}"></script>
<script type="text/javascript">

	$('#tapis').on('click', function (e) {

		e.preventDefault();

		$('#link').hide(); $('#link1').hide();
		var form = $("#filter_form")[0];

		if(form.checkValidity() === false) {
	    	e.stopPropagation();
	    	var isValid = form.reportValidity();
		}else {

			$('#viewPelbagai').hide();
	    	$('#viewParkir').hide();

	    	console.log("kpd checked = " + $('#check_kpd').prop("checked"));

			if($('#check_kpd').prop("checked") == false){
				$('#kpd').val('');
			}

			if($('#check_date').prop("checked") == false){
				$('#start_date').val('');
				$('#end_date').val('');
			}

			if($('#checkPlateNo').prop("checked") == false){
				$('#plate_no').val('');
			}

			if($('#checkCompanyNo').prop("checked") == false){
				$('#company_no').val('');
			}

			if($('#checkNric').prop("checked") == false){
				$('#nric').val('');
			}

			if($('#checkLicense').prop("checked") == false){
				$('#license').val('');
			}

			if($('#checkName').prop("checked") == false){
				$('#nameP').val('');
			}

			if($('#checkCompanyName').prop("checked") == false){
				$('#company_name').val('');
			}

			// Sumbit Search
	    	var form_data = $('#filter_form').serialize();
	    	if($('#type_C').val() == 'Parkir'){

	    		queryString1 = '?'+form_data;
	    		$('#viewPelbagai').hide();
                $('#viewParkir').show();
                $('#viewNotis').hide();
	    		tableP.ajax.url(SITEURL +'/api/list/compound'+ queryString1).load();

	    	}
	    	else if($('#type_C').val() == "Pelbagai_JPB"){

	    		queryString2 = '?'+form_data;
	    		$('#viewPelbagai').show();
                $('#viewParkir').hide();
                $('#viewNotis').hide();
	    		tableP2.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();
	    	}
	    	else if($('#type_C').val() == "Pelbagai_KT"){

	    		queryString2 = '?'+form_data;
	    		$('#viewPelbagai').show();
                $('#viewParkir').hide();
                $('#viewNotis').hide();
	    		tableP2.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();
            }
            else if($('#type_C').val() == 'Notis_NPPM'){

                queryString2 = '?'+form_data;
                $('#viewPelbagai').hide();
                $('#viewParkir').hide();
                $('#viewNotis').show();
                tableP1.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();
                tableP3.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();
                tableP7.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();

            }else if($('#type_C').val() == "Notis_NMH"){

                queryString2 = '?'+form_data;
                $('#viewPelbagai').hide();
                $('#viewParkir').hide();
                $('#viewNotis').show();
                tableP1.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();
                tableP3.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();
                tableP7.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();

            }else if($('#type_C').val() == "Notis_NHN"){

                queryString2 = '?'+form_data;
                $('#viewPelbagai').show();
                $('#viewParkir').hide();
                $('#viewNotis').show();
                tableP1.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();
                tableP3.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();
                tableP7.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();

            }else if($('#type_C').val() == "Notis_NKG"){

                queryString2 = '?'+form_data;
                $('#viewPelbagai').show();
                $('#viewParkir').hide();
                $('#viewNotis').show();
                tableP1.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();
                tableP3.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();
                tableP7.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();

            }else if($('#type_C').val() == "Notis_PA"){

                queryString2 = '?'+form_data;
                $('#viewPelbagai').show();
                $('#viewParkir').hide();
                $('#viewNotis').show();
                tableP1.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();
                tableP3.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();
                tableP7.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();
            }

	    	console.log(SITEURL +'/api/list/compound'+ queryString1);
	    	console.log(SITEURL +'/api/list/compound'+ queryString2);
	    }

	    return false;
	});

	$('#submit').on('click', function (e) {
		e.preventDefault();
		var form = $("#updateSt")[0];
		if(form.checkValidity() === false) {
	    	e.stopPropagation();
	    	var isValid = form.reportValidity();
		}else {
	    	var input = prompt("Adakah anda pasti kemaskini status kompaun ini? \nTaip 'yes' untuk teruskan", "");
			if (input == "yes") {
				var form_data = $('#updateSt').serialize();
				// alert(form_data);

				$.ajax({
					type: "POST",
					url: "{{ url('/api/update/compound/via-dashboard') }}",
					data: form_data,
					success:function(data){

						if(data['success'] == true){

							if($('#type_C').val() == 'Parkir'){
								$('#viewPelbagai').hide();
	    						$('#viewParkir').show();
	    						tableP.ajax.url(SITEURL +'/api/list/compound'+ queryString1).load();
	    						$('#kemaskiniC').modal('hide');
					    	}else if($('#type_C').val() == "Pelbagai"){
					    		$('#viewPelbagai').show();
	    						$('#viewParkir').hide();
					    		tablePl.ajax.url(SITEURL +'/api/list/compound'+ queryString2).load();
					    		$('#kemaskiniC').modal('hide');
					    	}

						}else if(data['success'] == false){
							alert(response.data.message);
							$('#kemaskiniC').modal('hide');
						}
					},
					error: function (xhr, ajaxOptions, thrownError) {
						console.log(thrownError);
		                // swal("Error deleting!", "Rekod tidak berjaya di buang", "error");
		            }
				});
			}else{
				alert('Kemaskini status dibatalkan');
				$('#kemaskiniC').modal('hide');
			}
	    }
	});

	function getDetail(id) {
		$('#datePay').hide();
		$('#id').val(id);
		if($('#type_C').val() == 'Parkir'){
			$('#datePay').hide();
			$('#tarikh_bayar').prop('required', false);
		}else {
			$('#datePay').show();
			$('#tarikh_bayar').prop('required', true);
		}

		$('#kemaskiniC').modal({
           	show: true
        })
	};
</script>
@endsection