@extends('layout.officer', ['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; }

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

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

<div class="inner-page">
	<div class="row">
		<div class="col-xl-2 col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title"> Modul Kategori </h4>
				</div>

				<div class="panel-body">
					<div>
						<a href="{{ url('/officer/compound') }}">Baru</a>&nbsp;<label class="badge badge-inverse-danger">{{ $baru }}</label>
					</div>
					@if(array_search('04', array_column($roles, 'kod')))
					<div>
						<a href="{{ url('/officer/compound/investigation') }}">Pengesahan Kompaun</a>&nbsp;<label class="badge badge-success">{{ $invest }}</label>
					</div>
					@endif
					@if(array_search('05', array_column($roles, 'kod')))
					<div>
						<a href="{{ url('/officer/compound/notice') }}">Notis Amaran</a>&nbsp;<label class="badge badge-success">{{ $notice }}</label>
					</div>
					@endif
					@if(array_search('06', array_column($roles, 'kod')) || array_search('07', array_column($roles, 'kod')))
					<div>
						<a href="{{ url('/officer/compound/confiscated') }}" class="active">Sitaan</a>&nbsp;<label class="badge badge-success">{{ $inven }}</label>
					</div>
					@endif
					<div>
						<a href="{{ url('/officer/compound/completed') }}">Kompaun Dijelaskan</a>&nbsp;<label class="badge badge-success">{{ $comp }}</label>
					</div>
				</div>
			</div>
		</div>

		<div class="col-xl-10 col-md-12">
			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="card-block">
							<form class="form-inline">
								<div class="form-group" style="padding-right: 10px;">
									<label class="r-padd"><b>CARIAN: </b></label>
								</div>
								<div class="form-group" style="padding-right: 10px;">
									<select name="select" class="form-control form-control-sm" id="jbkod">
										<option selected value="null">Sila Pilih Jabatan</option>
										@foreach($department as $de)
										<option value="{{ $de->_id }}">[{{ $de->jbkod }}] {{ $de->jnama }}</option>
										@endforeach
									</select>
						        </div>
								<div class="form-group" style="padding-right: 10px;">
									<select name="select" class="form-control form-control-sm" id="acts">
										<option selected value="null">Sila Pilih Akta</option>
									</select>
						        </div>
						        <div class="form-group" style="padding-right: 10px;">
						         	<select name="select" class="form-control form-control-sm" id="faulty">
						         		<option selected value="null">Sila Pilih Kesalahan</option>
						         	</select>
						        </div>
								<div class="form-group">
						         	<button type="button" id="tapis" class="btn btn-primary btn-sm waves-effect waves-light" style="padding: 6px 14px !important;">Tapis</button>
						        </div>
							</form>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<h5>[Notis Amaran] Senarai Kompaun</h5>
						</div>
						<div class="card-block contact-details">
							<div class="data_table_main dt-responsive table-responsive">
								<table id="compound" class="table table-sm table-striped table-bordered nowrap" style="width:100%">
									<thead>
										<tr>
											<th>Modul/Kpd</th>
											<th>Jenis</th>
											<th>Tarikh</th>
											<th>Masa</th>
											<th>Kesalahan</th>
											<th width="110">Kadar Kompaun</th>
											<th>Status</th>
											<th>Tindakan</th>
										</tr>
									</thead>

									<tfoot>
										<tr>
											<th>Modul/Kpd</th>
											<th>Jenis</th>
											<th>Tarikh</th>
											<th>Masa</th>
											<th>Kesalahan</th>
											<th width="110">Kadar Kompaun</th>
											<th>Status</th>
											<th>Tindakan</th>
										</tr>
									</tfoot>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</div>
@endsection

@section('external_js')

<script type="text/javascript">

	var ellipsis = "...";
	function TrimLength(text, maxLength)
	{
	    text = $.trim(text);

	    if (text.length > maxLength)
	    {
	        text = text.substring(0, maxLength - ellipsis.length)
	        return text.substring(0, text.lastIndexOf(" ")) + ellipsis;
	    }
	    else
	        return text;
	}

	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});

	var table = $('#compound').DataTable({
		"ordering": false,
		"serverSide": true,
		"processing": true,
		"ajax": "{{ url('api/compound') }}/{{ $user->roles_access }}|{{ $user->_id }}/null/null/list/06-07",
		"columns": [
		{ "data": "kpd","name": "kpd"},
		{ "data": "jenis","name": "jenis"},
		{ "data": "tarikh","name": "tarikh"},
		{ "data": "masa","name": "masa"},
		{ "data": "seksyen", "name": "seksyen"},
		{ "data": "jumlah", "name": "jumlah"},
		{ "data": "status", "name": "status"},
		{ "data": "tindakan","name": "tindakan"}
		],	
		"columnDefs": [
		{  
			"render": function ( data, type, row ) {
				if(data.includes("Baru")){
					var split = data.split('/');
					return '<label class="label label-success">'+split[0]+'</label>&nbsp;<label class="label label-'+split[2]+'">'+split[1]+'</label>&nbsp;'+split[3];
				}else {
					if(data.includes("/")){
						var split = data.split('/');
						return '<label class="label label-'+split[1]+'">'+split[0]+'</label>&nbsp;'+split[2];

					}
				}
				
			},
			"targets": 0,
		},
		{  
			"render": function ( data, type, row ) {
				return TrimLength(data, 40);
			},
			"targets": 4,
		},
		{
			"render": function ( data, type, row ) {
				var link = "{{ url('/officer/compound') }}"+"/"+data+"/index";
				return '<div class="btn-group btn-group-sm" style="float: none;"><a href="'+link+'" class="tabledit-edit-button btn btn-success waves-effect waves-light" style="float: none;" data-toggle="tooltip" data-placement="top" title="Maklumat Kompaun"><span style="color:white">SELANJUTNYA</span></a></div>';
			},
			"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:",
		}
	});		


	$(document).ready(function() {

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

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

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


		$('#acts').append('<option value="null">Pilih Kategori Akta/UUK</option>');
		$.ajax({
			type: "GET",
			url: "{{ url('api/officer') }}"+"/{{ $user->_id }}/deed-law/list",
			success: function(result){
				$.each(result.data, function(i, d) {
					$('#acts').append('<option value="' + d.tindakan + '">' + d.nama + '</option>');
					$('#acts').show();
					$('#acts').prop('required',true);
				});
			}
		});

		var jb = 'null';
		$('#jbkod').change(function(){
			jb = $(this).val();
		});

		$('#acts').change(function(){
			if( $(this).val()==""){
				$('#faulty').hide();
				$('#faulty').prop('required',false);
				$('#faulty').empty();
				$('#faulty').append('<option value="null">Pilih Kategori Kesalahan</option>');
			}
			else {
				$('#faulty').empty();
				$('#faulty').append('<option value="null">Pilih Kategori Kesalahan</option>');
				$.ajax({
		            type: "GET",
		            url: "{{ url('api/faulty') }}/"+jb+"/"+$(this).val()+"/list",
		            success: function(result){
		                $.each(result.data, function(i, d) {
		                	var full_sentences = '[' + d.sketr + '] '+ d.nama;
		                    $('#faulty').append('<option value="' + d._id + '">' + TrimLength(full_sentences, 50) +'</option>');
		                    $('#faulty').show();
							$('#faulty').prop('required',true);
		                });
		            }
		        });
			}
		});

		$("#tapis").click(function(){
	    	var act = $('#acts').val();
	    	var fa = $('#faulty').val();
	    	var link = origin+"/api/compound/{{ $user->roles_access }}|{{ $user->_id }}/"+act+"/"+fa+"/list/06-07";

	    	console.log(link);
	    	table.ajax.url(link).load();
	 	});
	});
</script>
@endsection