sipadu_mbip/resources/views/officer/compound_detail/inventory_detail.blade.php

@extends('layout.officer', ['uid' => $user->_id, 'token' => $user->token_firebase])
@section('page_title', 'Kompaun (Kertas Siasatan)')
@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;
	}
	.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; }

	.glyphicon { margin-right:10px; }
	.active { color: #d84315; }
	.active:hover { color: #d84315; }

	#custom table { 
		table-layout:fixed !important; 
		border-collapse: collapse !important; 
		width: 100%; 
		word-wrap:break-word !important;
	}
	#custom td, #custom th {
	    border-top: 1px solid #dee2e6;
	    border-bottom: 1px solid #dee2e6;
	}
	.longtext{
		word-wrap: break-word !important;
  		word-break: break-word !important;
  		padding: 0.6rem 2rem;
	}

	.btn i {
	     margin-right: 0px; 
	}
</style>

<div class="inner-page">
	<!-- Display message -->
	<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>
	<!-- End Display message -->
	<div class="row">
		<div class="col-xl-2 col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title"> Maklumat Terperinci </h4>
				</div>

				<div class="panel-body">
					@if($compound->status == 'Belum Bayar')
					<div><a href="{{ url('officer/compound') }}/{{ $compound->kpd }}/index" class="{{ Request::is('officer/compound/*/index') ? 'active' : '' }}">Garis Masa/Sejarah</a></div>
					<div><a href="{{ url('/officer/compound') }}/{{$compound->kpd}}">Kompaun</a></div>
						@if($compound->modul == '04')
						<div><a href="{{ url('/officer/compound') }}/{{$compound->kpd}}/investigation" class="{{ Request::is('officer/compound/*/investigation') ? 'active' : '' }}">Pengesahan Kompaun</a></div>
						<div><a href="{{ url('/officer/compound') }}/{{$compound->kpd}}/memo" class="{{ Request::is('officer/compound/*/memo') ? 'active' : '' }}">Memo/Nota</a></div>
						@elseif($compound->modul == '05')
						<div><a href="{{ url('/officer/compound') }}/{{$compound->kpd}}/notice" class="{{ Request::is('officer/compound/*/notice') ? 'active' : '' }}">Notis Amaran</a></div>
						<div><a href="{{ url('/officer/compound') }}/{{$compound->kpd}}/memo" class="{{ Request::is('officer/compound/*/memo') ? 'active' : '' }}">Memo/Nota</a></div>
						@elseif($compound->modul == '06')
						<div><a href="{{ url('/officer/compound') }}/{{$compound->kpd}}/inventory" class="{{ Request::is('officer/compound/*/inventory') ? 'active' : '' }}">Inventori</a></div>
						<div><a href="{{ url('/officer/compound') }}/{{$compound->kpd}}/memo" class="{{ Request::is('officer/compound/*/memo') ? 'active' : '' }}">Memo/Nota</a></div>
						@elseif($compound->modul == '07')
						<div><a href="{{ url('officer/compound') }}/{{$compound->kpd}}/inventory/auction" class="{{ Request::is('officer/compound/*/inventory/auction') ? 'active' : '' }}">Jualan Lelong</a></div>
						<div><a href="{{ url('/officer/compound') }}/{{$compound->kpd}}/memo" class="{{ Request::is('officer/compound/*/memo') ? 'active' : '' }}">Memo/Nota</a></div>
						@endif
					<div><a target="_blank" href="{{ url('/officer/compound') }}/{{$compound->kpd}}/pdf">Cetak/Papar PDF</a></div>
					<div><a href="{{ url('/officer/compound') }}/{{$compound->kpd}}/task" class="{{ Request::is('officer/compound/*/task') ? 'active' : '' }}">Serahan Modul/PenguatKuasa</a></div>
					@elseif($compound->status == 'Berbayar')
					<div><a href="{{ url('officer/compound') }}/{{ $compound->kpd }}/index" class="{{ Request::is('officer/compound/*/index') ? 'active' : '' }}">Garis Masa/Sejarah</a></div>
					<div><a href="{{ url('/officer/compound') }}/{{$compound->kpd}}">Kompaun</a></div>
					<div><a target="_blank" href="{{ url('/officer/compound') }}/{{$compound->kpd}}/pdf">Cetak/Papar PDF</a></div>
					@endif
				</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 class="card-header-text">
								Maklumat Inventori [ No.Kompaun : <code>{{ $compound->kpd }}</code> | No.Siri : <code>{{ $file->no_siri }}</code> | Modul: <code>{{ $role->name }}</code>]
							</h5>
							<span><code>Perhatian!!</code> Semua maklumat inventori boleh diakses sekiranya kompaun ini berada di dalam kategori <code>modul sitaan - inventori</code></span>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="card-block">
							<div class="row">
								<div class="col-md-12">
									<a target="_blank" href="{{ url('/officer/compound') }}/{{ $compound->kpd }}/inventory/pdf" class="btn btn-sm btn-out-dashed waves-effect waves-light btn-success btn-square f-right" data-toggle="tooltip" data-placement="top" title="Lihat Inventori">
										<i class="ti-zoom-in"></i>
									</a>
									@if($compound->modul == '06')
									<button id="inventori-btn" type="button" class="btn btn-sm btn-outline-danger waves-effect waves-light f-right" data-toggle="tooltip" data-placement="top" title="Tambah Inventori">
										<i class="icofont icofont-edit"></i>
									</button>
									@endif
								</div>
							</div>
							<hr>

							<div id="view-inventori" class="row">
								<div class="col-xl-12">
									<div class="data_table_main dt-responsive table-responsive">
										<table id="parentInventori" class="table table-sm table-striped table-bordered nowrap" width="100%">
											<thead>
												<tr>
													<th>Tarikh</th>
													<th>Masa</th>
													<th>Jenis</th>
													<th>Bilangan</th>
													<th>Harga</th>
													<th>Lokasi Gudang</th>
													<th>Status</th>
													<th>Tindakan</th>
												</tr>
											</thead>
											<tfoot>
												<tr>
													<th>Tarikh</th>
													<th>Masa</th>
													<th>Jenis</th>
													<th>Bilangan</th>
													<th>Harga</th>
													<th>Lokasi Gudang</th>
													<th>Status</th>
													<th>Tindakan</th>
												</tr>
											</tfoot>
										</table>
									</div>
								</div>
							</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 Item Inventori</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-3">
													<b>Jenis: </b>
												</div>
												<div class="col-md-3">
													<div id="jenis"></div>
												</div>
												<div class="col-md-3">
													<b>Bilangan: </b>
												</div>
												<div class="col-md-3">
													<div id="bilangan"></div>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-md-3">
													<b>Harga 1 item: </b>
												</div>
												<div class="col-md-3">
													<div id="harga"></div>
												</div>
												<div class="col-md-3">
													<b>Status: </b>
												</div>
												<div class="col-md-3">
													<div id="status"></div>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-md-3">
													<b>Lokasi Gudang: </b>
												</div>
												<div class="col-md-9">
													<div id="lokasi"></div>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-md-12">
													<table class="table">
														
													</table>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- End Modal -->
							<div id="edit-inventori" class="row">
								<div class="col-lg-12 col-md-12">							
									<div class="form-group form-primary">
										<label class="float-label"><b>Kategori</b></label>
										<select id="inv-kategori" name="" class="form-control form-control-inverse">
											<option value="">Sila Pilih Kategori</option>
											<option value="alih">Barang Boleh Alih</option>
											<option value="xalih">Barang Tidak Boleh Alih</option>
										</select>
										<span class="form-bar"></span>
									</div>

									<form method="POST" action="{{ url('officer/compound/inventory/add') }}" id="boleh-alih">
										<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
										<input type="hidden" name="kpd" value="{{ $compound->kpd }}">
										<input type="hidden" name="kategori" value="alih">

										<div class="row">
											<div class="col-lg-6 col-md-12">
												<div class="form-group form-primary">
													<label class="float-label">Jenis</label>
													<input type="text" name="jenis" class="form-control" required="">
													<span class="form-bar"></span>
												</div>
											</div>

											<div class="col-lg-6 col-md-12">
												<div class="form-group form-primary">
													<label class="float-label">Bilangan</label>
													<input type="number" name="bilangan" class="form-control" required="">
													<span class="form-bar"></span>
												</div>
											</div>

											<div class="col-lg-6 col-md-12">
												<div class="form-group form-primary">
													<label class="float-label">Harga</label>
													<input type="number" name="harga" class="form-control" required="" step="0.01">
													<code>Sila masukkan harga item, bukan jumlah bilangan</code>
													<span class="form-bar"></span>
												</div>
											</div>

											<div class="col-lg-6 col-md-12">
												<div class="form-group form-primary">
													<label class="float-label">Lokasi Gudang</label>
													<input type="text" name="lokasi" class="form-control" required="">
													<span class="form-bar"></span>
												</div>
											</div>
										</div>

										<hr>
										<div class="f-right">
											<button type="submit" class="btn btn-sm btn-outline-danger waves-effect">Simpan Rekod Inventori</button>
											<a href="javascript:;" id="inventori-cancel1" class="btn btn-sm btn-out-dashed waves-effect waves-light btn-default btn-square">Batal</a>
										</div>  
									</form>

									<form method="POST" action="{{ url('officer/compound/inventory/add') }}" id="tak-alih">
										<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
										<input type="hidden" name="kpd" value="{{ $compound->kpd }}">
										<input type="hidden" name="lokasi" value="">
										<input type="hidden" name="kategori" value="xalih">

										<div class="row">
											<div class="col-lg-6 col-md-12">
												<div class="form-group form-primary">
													<label class="float-label">Jenis</label>
													<input type="text" name="jenis" class="form-control" required="">
													<span class="form-bar"></span>
												</div>
											</div>

											<div class="col-lg-6 col-md-12">
												<div class="form-group form-primary">
													<label class="float-label">Bilangan</label>
													<input type="number" name="bilangan" class="form-control" required="" >
													<span class="form-bar"></span>
												</div>
											</div>

											<div class="col-lg-6 col-md-12">
												<div class="form-group form-primary">
													<label class="float-label">Harga</label>
													<input type="number" name="harga" class="form-control" required="" step="0.01">
													<code>Sila masukkan harga item, bukan jumlah bilangan</code>
													<span class="form-bar"></span>
												</div>
											</div>
										</div>

										<hr>
										<div class="f-right">
											<button type="submit" class="btn btn-sm btn-outline-danger waves-effect">Simpan Rekod Inventori</button>
											<a href="javascript:;" id="inventori-cancel" class="btn btn-sm btn-out-dashed waves-effect waves-light btn-default btn-square">Batal</a>
										</div>
									</form>								                     
								</div>
							</div>
							<div class="modal fade" id="KemaskiniInventori" tabindex="-1" role="dialog">
								<div class="modal-dialog modal-lg" role="document">
									<div class="modal-content">
										<div class="modal-header">
											<h4 class="modal-title">Kemaskini Item Inventori</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 method="POST" action="{{ url('/officer/compound/inventory/edit') }}">
												<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
												<input type="hidden" name="kpd" value="{{ $compound->kpd }}">
												<input type="hidden" id="_id" name="_id" value="" required="">

												<div class="row">
													<div class="col-lg-6 col-md-12">
														<div class="form-group form-primary">
															<label class="float-label">Jenis</label>
															<input type="text" id="jenis_barang" name="jenis" class="form-control" required="" value="">
															<span class="form-bar"></span>
														</div>
													</div>

													<div class="col-lg-6 col-md-12">
														<div class="form-group form-primary">
															<label class="float-label">Bilangan</label>
															<input type="number" id="bilangan_barang" name="bilangan" class="form-control" required="" value="">
															<span class="form-bar"></span>
														</div>
													</div>

													<div class="col-lg-6 col-md-12">
														<div class="form-group form-primary">
															<label class="float-label">Harga</label>
															<input type="number" id="harga_barang" name="harga" class="form-control" required="" step="0.01" value="">
															<code>Sila masukkan harga item, bukan jumlah bilangan</code>
															<span class="form-bar"></span>
														</div>
													</div>

													<div class="col-lg-6 col-md-12" id="need_location">
														<div class="form-group form-primary">
															<label class="float-label">Lokasi Gudang</label>
															<input type="text" id="lokasi_barang" name="lokasi" class="form-control" value="">
															<span class="form-bar"></span>
														</div>
													</div>
												</div>

												<hr>
												<div class="f-right">
													<button type="submit" class="btn btn-sm btn-outline-danger waves-effect">Kemaskini Rekod Item</button>
												</div>
											</form>			
										</div>
									</div>
								</div>
							</div>
							<div class="md-overlay"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</div>
@endsection

@section('external_js')
<script type="text/javascript" src="{{ asset('js/toggle_button_edit.js') }}"></script>

<script type="text/javascript">

	$('#need_location').hide();
	
	var table = $('#parentInventori').DataTable({
		"ordering": false,
		"serverSide": true,
		"processing": true,
		"ajax": "{{ url('api/inventory') }}/{{$file->no_siri}}/list",
		"columns": [
		{ "data": "tarikh","name": "tarikh"},
		{ "data": "masa","name": "masa"},
		{ "data": "jenis","name": "jenis"},
		{ "data": "bilangan", "name": "bilangan" },
		{ "data": "harga", "name": "harga"},
		{ "data": "lokasi", "name": "lokasi"},
		{ "data": "status", "name": "status"},
		{ "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 kpd = '{{ $compound->kpd }}';
				var modul = "{{ $file->modul }}";

				if(modul != '06'){
					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 Item Inventori"><span class="icofont icofont-eye-alt" style="color:white"></span></a></div>';
				}else {
					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 Item Inventori"><span class="icofont icofont-eye-alt" style="color:white"></span></a> <a onclick="editDetail(\''+data+'\')" class="tabledit-edit-button btn btn-primary waves-effect waves-light" style="float: none;" data-toggle="tooltip" data-placement="top" title="Kemaskini Item Inventori"><span class="icofont icofont-ui-edit" style="color:white"></span></a> <a onclick="deleteA(\''+kpd+'\',\''+data+'\',\'' + row.jenis + '\')" data-toggle="tooltip" data-placement="top" title="Buang Item Inventori" 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 getDetail(id) {
		$.ajax({
			url: "{{ url('api/inventory/detail') }}",
			method: "POST",
			data: { "_token": "{{ csrf_token() }}", id: id },
			success: function(data){
				if(data['status'] == "true"){
					$('#jenis').html(data['desc'].jenis);
					$('#bilangan').html(data['desc'].bilangan);
					$('#harga').html(data['desc'].harga);
					$('#status').html(data['desc'].status);
					$('#lokasi').html(data['desc'].lokasi);
            		$('#ViewDetail').modal({
            			show: true
            		})
            	}else if(data['status'] == "false"){
            		swal("Error Get data!", data['desc'], "error");
            	}
            }
        });
	};

	function editDetail(id) {
		$.ajax({
			url: "{{ url('api/inventory/detail') }}",
			method: "POST",
			data: { "_token": "{{ csrf_token() }}", id: id },
			success: function(data){
				if(data['status'] == "true"){
					if(data['desc'].kategori == "alih"){
						$('#lokasi_barang').val(data['desc'].lokasi);
						$('#need_location').show();
						$( "#lokasi_barang" ).prop( "checked", true);
					}else{
						$('#need_location').hide();
						$( "#lokasi_barang" ).prop( "checked", false);
					}

					$('#_id').val(data['desc']._id);
					$('#jenis_barang').val(data['desc'].jenis);
					$('#bilangan_barang').val(data['desc'].bilangan);
					$('#harga_barang').val(data['desc'].harga);
            		$('#KemaskiniInventori').modal({
            			show: true
            		});
            	}else if(data['status'] == "false"){
            		swal("Error Get data!", data['desc'], "error");
            	}
            }
        });
	};

	function deleteA(kpd,cid,jenis) {
		var kpd = kpd;
		var cid = cid;
		var jenis = jenis;

		var _id = '{{ $user->_id }}';
		var kpd = '{{ $compound->kpd }}';

		swal({
			title: "Adakah anda pasti?",
			text: "Anda tidak akan dapat memulihkan rekod item ini ( " + jenis + " )",
			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/inventory/delete') }}",
				data: { "_token": "{{ csrf_token() }}", id: cid, kpd: kpd, _id: _id },
				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/inventory') }}/{{$file->no_siri}}/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/inventory') }}/{{$file->no_siri}}/list").load();
						});
					}
				},
				error: function (xhr, ajaxOptions, thrownError) {
	                swal("Error deleting!", "Rekod tidak berjaya di buang", "error");
	            }
			});
		});
	};

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

	$('#boleh-alih').hide();
	$('#tak-alih').hide();

	$(document).ready(function() {

		var origin   = window.location.origin; 

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

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

		/** Inventori **/
		$('#edit-inventori').hide();
	    $('#inventori-cancel').on('click', function() {
	        var c = $('#inventori-btn').find("i");
	        c.removeClass('icofont-close');
	        c.addClass('icofont-edit');
	        $('#view-inventori').show();
	        $('#edit-inventori').hide();
	    });
	    $('#inventori-save').on('click', function() {
	        var c = $('#inventori-btn').find("i");
	        c.removeClass('icofont-close');
	        c.addClass('icofont-edit');
	        $('#view-inventori').show();
	        $('#edit-inventori').hide();
	    });
	    $('#inventori-btn').on('click', function() {
	        var b = $(this).find("i");
	        var edit_class = b.attr('class');
	        if (edit_class == 'icofont icofont-edit') {
	            b.removeClass('icofont-edit');
	            b.addClass('icofont-close');
	            $('#view-inventori').hide();
	            $('#edit-inventori').show();
	        } else {
	            b.removeClass('icofont-close');
	            b.addClass('icofont-edit');
	            $('#view-inventori').show();
	            $('#edit-inventori').hide();
	        }
	    });

		$('#inv-kategori').change(function(){
			if( $(this).val()=="alih"){
				$('#boleh-alih').show();
				$('#tak-alih').hide();
			};
			if( $(this).val()=="xalih"){
				$('#boleh-alih').hide();
				$('#tak-alih').show();
			};
		})
	});
</script>
@endsection