sipadu_mbip/resources/views/officer/team/staff_index.blade.php

@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; }

	.active { color: #d84315; }
	.active:hover { color: #d84315; }
	.r-padd { padding-right: 5%; }
</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-2 col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title"> Navigasi </h4>
				</div>

				<div class="panel-body">
					<div>
						<a href="{{ url('/officer/staff/index') }}" class="active">Senarai Penguatkuasa</a>
					</div>
					<div>
						<a href="{{ url('/officer/staff/add') }}">Tambah Penguatkuasa</a>
					</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-header">
							<h5>Senarai Penguatkuasa</h5>
						</div>
						<div class="card-block">
							<div class="dt-responsive table-responsive">
								<table id="staffL" class="table table-sm table-striped table-bordered nowrap" style="width:100%">
									<thead>
										<tr>
											<th>#</th>
											<th>Name</th>
											<th>No.Kp</th>
											<th>No.Telefon</th>
											<th>No. Badan</th>
											<th>Jawatan</th>
											<th>Jabatan</th>
											<th>Tindakan</th>
										</tr>
									</thead>			
									<tfoot>
										<tr>
											<th>#</th>
											<th>Name</th>
											<th>No.Kp</th>
											<th>No.Telefon</th>
											<th>No. Badan</th>
											<th>Jawatan</th>
											<th>Jabatan</th>
											<th>Tindakan</th>
										</tr>
									</tfoot>
								</table>
							</div>
							<!-- <div class="animation-modal"> -->
							<div class="modal fade" id="ViewDetail" tabindex="-1" role="dialog">
								<div class="modal-dialog modal-lg" role="document">
									<div class="modal-content">
										<div class="modal-header">
											<h4 class="modal-title">Maklumat Kaitangan</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
										</div>
										<div class="modal-body" style="padding-left: 2rem;padding-right: 2rem;">
											<div class="row">
												<div class="col-md-12">
													<div id="prof" style="text-align: center"></div>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-md-3">
													<b>Nama Penuh: </b>
												</div>
												<div class="col-md-9">
													<div id="full_name"></div>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-md-3">
													<b>NRIC</b>
												</div>
												<div class="col-md-3">
													<div id="nric"></div>
												</div>
												<div class="col-md-3">
													<b>Telephone</b>
												</div>
												<div class="col-md-3">
													<div id="mobile"></div>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-md-3">
													<b>Jabatan</b>
												</div>
												<div class="col-md-9">
													<div id="jabatan"></div>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-md-3">
													<b>Jawatan</b>
												</div>
												<div class="col-md-3">
													<div id="jawatan"></div>
												</div>
												<div class="col-md-3">
													<b>Gred</b>
												</div>
												<div class="col-md-3">
													<div id="gred"></div>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-md-3">
													<b>No. Badan</b>
												</div>
												<div class="col-md-3">
													<div id="badan"></div>
												</div>
												<div class="col-md-3"></div>
												<div class="col-md-3"></div>
											</div>
											<hr>
											<div class="row">
												<div class="col-md-3">
													<b>Alamat</b>
												</div>
												<div class="col-md-9">
													<div id="address" style="width:100%;word-wrap:break-word;text-align: justify;">
													</div>
												</div>
											</div>
											<div id="pegawaiM">
												<hr>
												<div class="row">
													<div class="col-md-3">
														<b>Akses Modul</b>
													</div>
													<div class="col-md-9">
														<div id="akses" style="width:100%;word-wrap:break-word;text-align: justify;">
														</div>
													</div>
												</div>
											</div>
											<hr>
										</div>
									</div>
								</div>
							</div>
							<!-- End <div class="animation-modal"> -->
						</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 = $('#staffL').DataTable({
		"ordering": false,
		"serverSide": true,
		"processing": true,
		"ajax": "{{ url('api/officer') }}/null/staff/list/{{ $user->_id }}",
		"columns": [
		{ "data": "index","name": "index"},
		{ "data": "nama","name": "nama"},
		{ "data": "ic","name": "ic"},
		{ "data": "phone", "name": "phone"},

		{ "data": "no_badan", "name": "no_badan" },
		{ "data": "jawatan", "name": "jawatan"},
		{ "data": "jabatan", "name": "jabatan"},
		{ "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('/officer/staff') }}"+"/"+row.tindakan+"/edit";
				// return '<div class="btn-group btn-group-sm" style="float: none;"><a onclick="getDetail(\''+data+'\')" class="tabledit-edit-button btn btn-success waves-effect waves-light" style="float: none;" data-toggle="tooltip" data-placement="top" title="Maklumat Kakitangan"><span class="icofont icofont-eye-alt" style="color:white"></span></a> <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 Kakitangan"><span class="icofont icofont-ui-edit" style="color:white"></span></a> <a onclick="deleteA(\''+data+'\',\'' + row.email + '\')" data-toggle="tooltip" data-placement="top" title="Buang Kakitangan" 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>';

				return '<div class="btn-group btn-group-sm" style="float: none;"><a onclick="getDetail(\''+data+'\')" class="tabledit-edit-button btn btn-success waves-effect waves-light" style="float: none;" data-toggle="tooltip" data-placement="top" title="Maklumat Kakitangan"><span class="icofont icofont-eye-alt" style="color:white"></span></a> <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 Kakitangan"><span class="icofont icofont-ui-edit" style="color:white"></span></a> <a onclick="deleteA(\''+data+'\',\'' + row.email + '\')" data-toggle="tooltip" data-placement="top" title="Buang Kakitangan" 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>';
			},
			"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,email) {
		var cid = cid;
		var email = email;

		swal({
			title: "Adakah anda pasti?",
			text: "Anda tidak akan dapat memulihkan rekod kakitangan ini ( " + email + " )",
			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/staff') }}",
				data: { "_token": "{{ csrf_token() }}", id: 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/officer') }}/null/staff/list/{{ $user->_id }}").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/officer') }}/null/staff/list/{{ $user->_id }}").load();
						});
					}
				},
				error: function (xhr, ajaxOptions, thrownError) {
	                swal("Error deleting!", "Rekod tidak berjaya di buang", "error");
	            }
			});
		});
	};


	function getDetail(id) {
		$.ajax({
			url: "{{ url('api/staff/detail') }}",
			method: "POST",
			data: { "_token": "{{ csrf_token() }}", id: id },
			success: function(data){
				if(data['status'] == "true"){
            		$('.modal-title').html('Maklumat kakitangan ( No.Badan: ' +data['desc'].no_badan+ ' )');
            		$('#prof').html("<img src='"+origin+"/"+data['desc'].profile_img+"' style='width:200px'>");
					$('#full_name').html(data['desc'].full_name);
					$('#nric').html(data['desc'].identity);
					$('#mobile').html(data['desc'].mobile);
					$('#jabatan').html(data['desc'].jbkod);
					$('#jawatan').html(data['desc'].roles_access);
					$('#gred').html(data['desc'].gred);
					$('#badan').html(data['desc'].no_badan);
					$('#address').html(data['desc'].address);

					if(data['desc'].roles_access == "Pegawai"){
						$('#akses').html(data['desc'].access);
						$('#pegawaiM').show();
					}else{
						$('#pegawaiM').hide();
					}
            		$('#ViewDetail').modal({
            			show: true
            		})
            	}else if(data['status'] == "false"){
            		swal("Error deleting!", data['desc'], "error");
            	}
            }
        });
	};

	$(document).ready(function() {

		var origin   = window.location.origin; 

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

		setTimeout(function() {
			$(".theme-loader").remove();
		}, 800);

		$('[data-toggle="tooltip"]').tooltip();

		$("#tapis").click(function(){
	    	var mod = $('#module').val();
	    	var link = origin+"/api/staff/null/PenguatKuasa/"+mod+"/list";

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