@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: #d84315 !important; }
	.panel-body .table, .panel-body div {margin-bottom: 0px; }

	.active { color: #d84315; }
	.active:hover { color: #d84315; }

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

	hr {
	    margin-top: 0.6rem !important;
	    margin-bottom: 0.6rem !important;
	}
</style>

<div class="inner-page">
	<div class="row">
		<div class="col-md-12">
			<div class="fluid">
				@if(count($errors) > 0)
				<div class="alert alert-danger icons-alert">
					@foreach($errors->all() as $error)
					<p>{{$error}}</p>
					@endforeach
				</div>
				@endif

				@if(Session::get('error_msg'))
				<div class="alert alert-danger icons-alert">
					{!! Session::get('error_msg') !!}
				</div>
				@elseif(Session::get('success_msg'))
				<div class="alert alert-success icons-alert">
					{!! Session::get('success_msg') !!}
				</div>
				@endif
			</div>
		</div>
	</div>

	<div class="row">

		<div class="col-xl-12 col-md-12">
			<div class="card">
				<div class="card-header">
					<h5>Senarai Seksyen / Kesalahan</h5>
					<button type="button" class="btn btn-sm btn-outline-danger float-right waves-effect" data-toggle="modal" data-target="#TambahSeksyen">Tambah Seksyen/Kesalahan Baru</button>
				</div>
				<div class="card-block">
					<div class="dt-responsive table-responsive">
						<table id="faulty" class="table table-sm table-striped table-bordered nowrap" width="100%">
							<thead>
								<tr>
									<th>JbKod</th>
									<th>AkKod</th>
									<th>Seksyen</th>
									<th>Nama</th>
									<th width="60">Kadar 7</th>
									<th width="60">Kadar 14</th>
									<th width="110">Kadar Kompaun</th>
									<th width="70">Tindakan</th>
								</tr>
							</thead>
							<tfoot>
								<tr>
									<th>JbKod</th>
									<th>AkKod</th>
									<th>Seksyen</th>
									<th>Nama</th>
									<th width="60">Kadar 7</th>
									<th width="60">Kadar 14</th>
									<th width="110">Kadar Kompaun</th>
									<th width="70">Tindakan</th>
								</tr>
							</tfoot>
						</table>
					</div>
				</div>
				<!-- <div class="animation-modal"> -->
				<div class="modal fade" id="TambahSeksyen" tabindex="-1" role="dialog">
					<div class="modal-dialog modal-lg" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h4 class="modal-title">Tambah Seksyen/Kesalahan Baru</h4>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<form action="{{ url('/main/faulty/request/add') }}" class="main cussPayment" method="POST" enctype="multipart/form-data">
									<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
									
									<div class="row clearfix">
										<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
											<label for="subject"><b>Jabatan <code>*</code></b></label>
											<div class="form-group">
												<select id="jabatan" name="jabatan[]" class="js-department-multiple col-sm-12 select2-hidden-accessible" multiple="" tabindex="-1" aria-hidden="true" required="">
													<option value="">Sila pilih jabatan</option>
													@foreach($department as $de)
													@if($de->_id == old('jbkod'))
													<option selected value="{{ $de->_id }}">[{{$de->jbkod}}] {{$de->jnama}}</option>
													@else
													<option value="{{ $de->_id }}">[{{$de->jbkod}}] {{$de->jnama}}</option>
													@endif
													@endforeach
												</select>
											</div>
										</div>
									</div>

									<div class="row clearfix">
										<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
											<label for="subject"><b>Akta/uuk <code>*</code></b></label>
											<div class="form-group">
												<div class="form-line">
													<select id="akkod" name="akkod" class="form-control" required="">
														<option value="">Sila pilih akta/uuk</option>
														@foreach($deed as $de)
															@if($de->_id == old('akkod'))
															<option selected value="{{ $de->_id }}">[{{$de->akkod}}] {{$de->nama}}
															@else
															<option value="{{ $de->_id }}">[{{$de->akkod}}] {{$de->nama}}</option>
															@endif
														@endforeach
													</select>
												</div>
											</div>
										</div>
									</div>
													
									<div class="row clearfix">
										<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
											<label for="subject"><b>Kod Kesalahan <code>*</code></b></label>
											<div class="form-group">
												<div class="form-line">
													<input type="text" id="itkod" name="itkod" class="form-control" placeholder="11004" value="{{ old('itkod') }}" required>
												</div>
											</div>
										</div>

										<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
											<label for="subject"><b>Seksyen Kesalahan <code>*</code></b></label>
											<div class="form-group">
												<div class="form-line">
													<input type="text" id="sketr" name="sketr" class="form-control" placeholder="SEKSYEN 107 (2)" value="{{ old('sketr') }}" required>
												</div>
											</div>
										</div>
									</div>						
									<div class="row clearfix">
										<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
											<label for="subject"><b>Nama / Keterangan Kesalahan <code>*</code></b></label>
											<div class="form-group">
												<div class="form-line">
													<textarea id="nama" name="nama" class="form-control" placeholder="MELANGGAR SYARAT LESEN (PELESENAN)" required>{{ old('nama') }}</textarea>
												</div>
											</div>
										</div>
									</div>		
									<div class="row clearfix">
														<!-- <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
															<label for="subject"><b>Jumlah Saman <code>*</code></b></label>
															<div class="form-group">
																<div class="form-line">
																	<input type="text" id="amount" name="amount" class="form-control" placeholder="500.00" value="{{ old('amount') }}" required>
																</div>
															</div>
														</div> -->
										<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
											<label for="subject"><b>Kadar Sebelum 14 Hari <code>*</code></b></label>
											<div class="form-group">
												<div class="form-line">
													<input type="text" id="amount_14" name="amount_14" class="form-control" placeholder="100" value="{{ old('amount_14') }}" required>
												</div>
											</div>
										</div>
										<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
											<label for="subject"><b>Kadar Sebelum 30 Hari <code>*</code></b></label>
											<div class="form-group">
												<div class="form-line">
													<input type="text" id="amount_30" name="amount_30" class="form-control" placeholder="250" value="{{ old('amount_30') }}" required>
												</div>
											</div>
										</div>
										<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
											<label for="subject"><b>Kadar Sebelum Saman<code>*</code></b></label>
											<div class="form-group">
												<div class="form-line">
													<input type="text" id="amount" name="amount" class="form-control" placeholder="500" value="{{ old('amount') }}" required>
												</div>
											</div>
										</div>
									</div>	

									<hr>
									<button type="button" class="btn btn-sm btn-default waves-effect float-left" data-dismiss="modal">Tutup</button>
									<button type="submit" class="btn btn-sm btn-danger float-right waves-effect">Simpan Rekod Kesalahan</button>		
								</form>
							</div>
						</div>
					</div>
				</div>
				<div class="modal fade" id="KemaskiniSeksyen" tabindex="-1" role="dialog">
					<div class="modal-dialog modal-lg" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h4 class="modal-title">Modal title</h4>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<form action="{{ url('/main/faulty/request/edit') }}" class="main cussPayment" method="POST" enctype="multipart/form-data">
									<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
									<input type="hidden" name="_id" id="_id" value="" required/>
									
									<div class="row clearfix">
										<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
											<label for="subject"><b>Jabatan <code>*</code></b></label>
											<div class="form-group">
												<select id="jabatan" name="jabatan[]" class="js-department-multiple col-sm-12 select2-hidden-accessible" multiple="" tabindex="-1" aria-hidden="true" required="">
													<option value="">Sila pilih jabatan</option>
													@foreach($department as $de)
													@if($de->_id == old('jbkod'))
													<option selected value="{{ $de->_id }}">[{{$de->jbkod}}] {{$de->jnama}}</option>
													@else
													<option value="{{ $de->_id }}">[{{$de->jbkod}}] {{$de->jnama}}</option>
													@endif
													@endforeach
												</select>
											</div>
										</div>
									</div>

									<div class="row clearfix">
										<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
											<label for="subject"><b>Akta/uuk <code>*</code></b></label>
											<div class="form-group">
												<div class="form-line">
													<select id="akkod1" name="akkod" class="form-control" required="">
														<option value="">Sila pilih akta/uuk</option>
														@foreach($deed as $de)
															@if($de->_id == old('akkod'))
															<option selected value="{{ $de->_id }}">[{{$de->akkod}}] {{$de->nama}}
															@else
															<option value="{{ $de->_id }}">[{{$de->akkod}}] {{$de->nama}}</option>
															@endif
														@endforeach
													</select>
												</div>
											</div>
										</div>
									</div>
													
									<div class="row clearfix">
										<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
											<label for="subject"><b>Kod Kesalahan <code>*</code></b></label>
											<div class="form-group">
												<div class="form-line">
													<input type="text" id="itkod1" name="itkod" class="form-control" placeholder="11004" value="{{ old('itkod') }}" required="">
												</div>
											</div>
										</div>

										<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
											<label for="subject"><b>Seksyen Kesalahan <code>*</code></b></label>
											<div class="form-group">
												<div class="form-line">
													<input type="text" id="sketr1" name="sketr" class="form-control" placeholder="SEKSYEN 107 (2)" value="{{ old('sketr') }}" required="">
												</div>
											</div>
										</div>
									</div>						
									<div class="row clearfix">
										<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
											<label for="subject"><b>Nama / Keterangan Kesalahan <code>*</code></b></label>
											<div class="form-group">
												<div class="form-line">
													<textarea id="nama1" name="nama" class="form-control" placeholder="MELANGGAR SYARAT LESEN (PELESENAN)" required>{{ old('nama') }}</textarea>
												</div>
											</div>
										</div>
									</div>		
									<div class="row clearfix">
														<!-- <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
															<label for="subject"><b>Jumlah Saman <code>*</code></b></label>
															<div class="form-group">
																<div class="form-line">
																	<input type="text" id="amount" name="amount" class="form-control" placeholder="500.00" value="{{ old('amount') }}" required>
																</div>
															</div>
														</div> -->
										<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
											<label for="subject"><b>Kadar Sebelum 14 Hari <code>*</code></b></label>
											<div class="form-group">
												<div class="form-line">
													<input type="text" id="amount_141" name="amount_14" class="form-control" placeholder="100" value="{{ old('amount_14') }}" required>
												</div>
											</div>
										</div>
										<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
											<label for="subject"><b>Kadar Sebelum 30 Hari <code>*</code></b></label>
											<div class="form-group">
												<div class="form-line">
													<input type="text" id="amount_301" name="amount_30" class="form-control" placeholder="250" value="{{ old('amount_30') }}" required>
												</div>
											</div>
										</div>
										<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
											<label for="subject"><b>Kadar Sebelum Saman<code>*</code></b></label>
											<div class="form-group">
												<div class="form-line">
													<input type="text" id="amount1" name="amount" class="form-control" placeholder="500" value="{{ old('amount') }}" required>
												</div>
											</div>
										</div>
									</div>	

									<hr>
									<button type="button" class="btn btn-sm btn-default waves-effect float-left" data-dismiss="modal">Tutup</button>
									<button type="submit" class="btn btn-sm btn-danger float-right waves-effect">Kemaskini Rekod Kesalahan</button>		
								</form>
							</div>
						</div>
					</div>
				</div>
				<div class="md-overlay"></div>
			</div>
		</div>
	</div>
</div>
@endsection

@section('external_js')

<script type="text/javascript">
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});

	var table = $('#faulty').DataTable({
		"ordering": false,
		"serverSide": true,
		"processing": true,
		"autoWidth": false,
		"ajax": "{{ url('api/faulty/list') }}",
		"columns": [
		{ "data": "jbkod", "name": "jbkod"},
		{ "data": "akkod","name": "akkod"},
		{ "data": "sketr", "name": "sketr" },
		{ "data": "nama", "name": "nama"},
		{ "data": "amount14", "name": "amount14"},
		{ "data": "amount30", "name": "amount30"},
		{ "data": "amount", "name": "amount"},
		{ "data": "tindakan","name": "tindakan"}
		],	
		"columnDefs": [
		{  
			"render": function ( data, type, row ) {
				if (data.indexOf("Baru/") >= 0) {
					var split = data.split('/');
					return '<label class="label label-success">'+split[0]+'</label>&nbsp;'+split[1];
				}else {
					return data;
				}
			},
			"targets": 0,
		},
		{
			"render": function ( data, type, row ) {
				var link = "{{ url('/main/faulty') }}"+"/"+row.itkod+"/edit";
				return '<div class="btn-group btn-group-sm" style="float: none;"><a onclick="getDetail(\''+data+'\')" class="tabledit-edit-button btn btn-primary waves-effect waves-light" style="float: none;" data-toggle="tooltip" data-placement="top" title="Kemaskini Seksyen/Kesalahan"><span class="icofont icofont-ui-edit" style="color:white"></span></a> <a onclick="deleteA(\''+data+'\',\'' + row.sketr + '\')" data-toggle="tooltip" data-placement="top" title="Buang Seksyen/Kesalahan" class="tabledit-delete-button btn btn-danger waves-effect waves-light" style="float: none;"><span class="icofont icofont-ui-delete" style="color:white"></span></a></div>';

				// <a href="'+link+'" class="tabledit-edit-button btn btn-primary waves-effect waves-light" style="float: none;" data-toggle="tooltip" data-placement="top" title="Kemaskini Seksyen/Kesalahan"><span class="icofont icofont-ui-edit" style="color:white"></span></a>
			},
			"targets": 7,
		},
		],				
		"language": {
			"paginate": {
				"previous": "Sebelum",
				"next": "Selepas"
			},
			"sLengthMenu": "Tunjukkan _MENU_ entri",
			"zeroRecords": "Tiada Data Ditemui",
			"infoEmpty": "Tiada Rekod Yang Wujud",
			"infoFiltered": "(Ditapis daripada _MAX_ jumlah rekod)",
			"info": "Tunjuk _START_ hingga _END_ daripada _TOTAL_ entri",
			"sSearch": "Cari:",
		}
	});

	function deleteA(cid,kesalahan) {
		var cid = cid;
		var kesalahan = kesalahan;

		swal({
			title: "Adakah anda pasti?",
			text: "Anda tidak akan dapat memulihkan rekod seksyen/kesalahan ( " + kesalahan + " )",
			html: true,
			type: "warning",
			showCancelButton: true,
			confirmButtonClass: "btn-danger",
			confirmButtonText: "Ya!",
			cancelButtonText: "Batal!",
			closeOnConfirm: false
		},
		function(isConfirm){
			if (!isConfirm) return;
			$.ajax({
				type: "POST",
				url: "{{ url('api/delete/faulty') }}",
				data: { "_token": "{{ csrf_token() }}", kid: cid },
				success:function(data){
					if(data['status'] == "true"){
						swal({
							title: "Berjaya",
							text: data['desc'],
							type: "success",
							showCancelButton: false,
							confirmButtonText: "OK!",
							closeOnConfirm: true
						},
						function(){
							table.ajax.url("{{ url('api/faulty/list') }}").load();
						});
					}else if(data['status'] == "false"){
						swal({
							title: "Tidak Berjaya",
							text: data['desc'],
							type: "error",
							showCancelButton: false,
							confirmButtonText: "OK!",
							closeOnConfirm: true
						},
						function(){
							table.ajax.url("{{ url('api/faulty/list') }}").load();
						});
					}
				},
				error: function (xhr, ajaxOptions, thrownError) {
	                swal("Error deleting!", "Rekod tidak berjaya di buang", "error");
	            }
			});
		});
	};

	var jbkod = ''; var akkod = '';
	function getDetail(id) {
		var f_id = id;
		$.ajax({
			url: "{{ url('api/faulty/detail') }}",
			method: "POST",
			data: { id: f_id },
			success: function(data){
				if(data['status'] == "true"){
            		$('.modal-title').html('Kemaskini maklumat seksyen/kesalahan ( ' +data['desc'].sketr+ ' )');
            		jbkod = data['desc'].jbkod;
            		akkod = data['desc'].akkod;
            		$('#_id').val(data['desc']._id);
					$('#itkod1').val(data['desc'].itkod);
					$('#sketr1').val(data['desc'].sketr);
					$('#nama1').val(data['desc'].nama);
					$('#amount_141').val(data['desc'].amount14);
					$('#amount_301').val(data['desc'].amount30);
					$('#amount1').val(data['desc'].amount);
            		$('#KemaskiniSeksyen').modal({
            			show: true
            		});
            	}else if(data['status'] == "false"){
            		swal("Error deleting!", data['desc'], "error");
            	}
            }
        });
	};

	$(document).ready(function() {

		var origin   = window.location.origin; 
		$('#showAkta').hide();
		$('#showAkta1').hide();

		$(".theme-loader").animate({
			opacity: "0"
		},1000);
		
		setTimeout(function() {
			$(".theme-loader").remove();
		}, 800);

		/*** Tooltip ***/
		$('#faulty').on('draw.dt', function () {
		    $('[data-toggle="tooltip"]').tooltip();
		});

		// $('#jbkod').change(function(){
		// 	if( $(this).val()==""){
		// 		$('#showAkta').hide();

		// 		$("#akkod").prop("checked", false);
		// 		$('#akkod').empty();
		// 		$('#akkod').append('<option value="">Sila pilih akta/uuk</option>');
		// 	}
		// 	else {
		// 		$("#akkod").empty();
		// 		$('#akkod').append('<option value="">Sila pilih akta/uuk</option>');
		// 		$.ajax({
		//             type: "GET",
		//             url: "{{ url('api/deed-law') }}"+"/"+$(this).val()+"/list",
		//             success: function(result){
		//                 $.each(result.data, function(i, d) {
		//                     $('#akkod').append('<option value="' + d.akkod + '">' + d.nama + '</option>');
		//                     $('#showAkta').show();
		//                     $('#akkod').prop('required',true);
		//                 });
		//             }
		//         });	
		// 	}
		// });

		// $('#jbkod1').change(function(){
		// 	if( $(this).val()==""){
		// 		$('#showAkta1').hide();

		// 		$("#akkod1").prop("checked", false);
		// 		$('#akkod1').empty();
		// 		$('#akkod1').append('<option value="">Sila pilih akta/uuk</option>');
		// 	}
		// 	else {
		// 		$("#akkod1").empty();
		// 		$('#akkod1').append('<option value="">Sila pilih akta/uuk</option>');
		// 		$.ajax({
		//             type: "GET",
		//             url: "{{ url('api/deed-law') }}"+"/"+$(this).val()+"/list",
		//             success: function(result){
		//                 $.each(result.data, function(i, d) {
		//                 	if(akkod == d.akkod){
		//                 		$('#akkod1').append('<option value="' + d.akkod + '" selected>' + d.nama + '</option>');
		//                 	}else{
		//                 		$('#akkod1').append('<option value="' + d.akkod + '">' + d.nama + '</option>');
		//                 	}
		//                     $('#showAkta1').show();
		//                     $('#akkod1').prop('required',true);
		//                 });
		//             }
		//         });	
		// 	}
		// });


		// Multi Select
    	$(".js-department-multiple").select2();
	});
</script>
@endsection