@extends('layout')

@section('css')
<style>
	h4{
		margin:0;
		font-size: 1.2em;
	}
</style>
@endsection

@section('content')

@if(in_array(Auth::user()->role,[2,5]))
	<!-- Page header -->
	<div class="page-header page-header-light">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
			<h3 class="font-weight-bold"><span class="font-weight-light">质量控制和包装</h3>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">
		<div class="card">
			<div class="card-body">
				<div class="d-flex py-3 justify-content-around align-items-center">
					<h4 class="font-weight-light"> 总收入: <span class="font-weight-bold">{{ ribuan($totreceipts) }}</span> </h4>
					<h4 class="font-weight-light"> 箱总数: <span class="font-weight-bold">{{ ribuan($totcarton) }}</span> ctn</h4>
					<h4 class="font-weight-light"> 总立方: <span class="font-weight-bold">{{ yuan($totvolume) }}</span> m3</h4>
					<h4 class="font-weight-light"> 总重: <span class="font-weight-bold">{{ yuan($totweight) }}</span> kg</h4>
				</div>

				<div class="form-group">
					<label>筛选目的地</label>
					<div class="row">
						<div class="col-md-4">
							<select id="select_destination" class="form-control form-control-select2">
								<option value="">-- 选择目的地 --</option>
								@foreach($destinations as $destination)
									<option value="{{$destination->kode}}" {{ app('request')->input('d') == $destination->kode ? 'selected' : null }}>{{ $destination->kode }}</option>
								@endforeach
							</select>
						</div>
						<div class="col-md-4">
							<a id="btn-filter"
				 class="btn btn-success"
				 href="{{ route('qualitycontrol').'?d='.app('request')->input('d')}}"
				 data-uri="{{ route('qualitycontrol') }}"
			  >
				<i class="icon-paperplane mr-1"></i> 过滤
			  </a>
							<a class="btn btn-info"
				 href="{{ route('qualitycontrol')}}"
			  >
				<i class="icon-spinner11 mr-1"></i> 查看全部
			  </a>
						</div>
					</div>
				</div>

				<hr>

				<table class="table datatable-basic table-hover">
					<thead>
						<tr>
							<th>数字</th>
							<th>流水号</th>
							<th>No. Resi Coload</th>
							<th>成员名</th>
							<th>快递流水号</th>
							<th>唛头</th>
							<th>目的地</th>
							<th style="width: 10%">Total</th>
							{{-- <th>箱总数</th>
							<th>总立方 (m3)</th>
							<th>总重 (kg)</th> --}}
							<th>Packing & QC Receipt</th>
							<th>接收状态</th>
							<th>日期和时间</th>
							<th class="text-center">行动</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<!-- Danger modal -->
	<div id="modal_theme_danger" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-danger" align="center">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="" method="post" id="delform">
					@csrf
					@method('DELETE')
					<div class="modal-body" align="center">
						<h2> 是否确实要删除此数据？ </h2>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">取消</button>
						<button type="submit" class="btn bg-danger" disabled>删除</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /default modal -->

	<!-- Add Images modal -->
	<div id="modal_add_images" class="modal fade" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h2 class="modal-title font-weight-semibold">箱照片</h2>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form id="form_image" action="#" method="post" class="form-horizontal">
					@csrf
					<div class="modal-body">
						<div class="row mb-3">
							<div class="col-md-5">
								<input name="gambar[]" type="file" class="form-control" required multiple>
							</div>
							<div class="col-md-4">
								<button type="submit" class="btn btn-primary text-uppercase">提交</button>
							</div>
						</div>
						<div class="row">
							@for($i = 0; $i < 6; $i++)
							<div class="card-img-actions m-1">
								<img class="card-img img-fluid" src="{{ asset('global_assets/images/image.png') }}" alt="" style="height:150px;width:150px;object-fit: cover;">
								<div class="card-img-actions-overlay card-img">
									<a href="{{ asset('global_assets/images/image.png') }}" class="btn btn-outline bg-white text-white border-white border-2 btn-icon rounded-round" data-popup="lightbox" rel="group">
										<i class="icon-zoomin3"></i>
									</a>
								</div>
							</div>
							{{-- <div class="col-md-3">
							</div> --}}
							@endfor
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /horizontal form modal -->

@else
	<!-- Page header -->
	<div class="page-header page-header-light">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
			<h3 class="font-weight-bold"><span class="font-weight-light">Quality Control & Packing</h3>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">
		<div class="card">
			<div class="card-body">
				<div class="d-flex py-3 justify-content-around align-items-center">
					<h4 class="font-weight-light"> Total Receipt: <span class="font-weight-bold">{{ ribuan($totreceipts) }}</span> </h4>
					<h4 class="font-weight-light"> Total Carton: <span class="font-weight-bold">{{ ribuan($totcarton) }}</span> ctn</h4>
					<h4 class="font-weight-light"> Total Volume: <span class="font-weight-bold">{{ yuan($totvolume) }}</span> m3</h4>
					<h4 class="font-weight-light"> Total Weight: <span class="font-weight-bold">{{ yuan($totweight) }}</span> kg</h4>
				</div>

				<div class="form-group">
					<label>Filter Destination</label>
					<div class="row">
						<div class="col-md-4">
							<select id="select_destination" class="form-control form-control-select2">
								<option value="">-- Choose Destination --</option>
								@foreach($destinations as $destination)
									<option value="{{$destination->kode}}" {{ app('request')->input('d') == $destination->kode ? 'selected' : null }}>{{ $destination->kode }}</option>
								@endforeach
							</select>
						</div>
						<div class="col-md-4">
							<a id="btn-filter"
                 class="btn btn-success"
                 href="{{ route('qualitycontrol').'?d='.app('request')->input('d')}}"
                 data-uri="{{ route('qualitycontrol') }}"
              >
                <i class="icon-paperplane mr-1"></i> Filter
              </a>
							<a class="btn btn-info"
                 href="{{ route('qualitycontrol')}}"
              >
                <i class="icon-spinner11 mr-1"></i> View All
              </a>
						</div>
					</div>
				</div>

				<hr>

				<table class="table datatable-basic table-hover">
					<thead>
						<tr>
							<th>No</th>
							<th>No. Receipt</th>
							<th>No. Resi Coload</th>
							<th>Nama Member</th>
							<th>No. China Local Express</th>
							<th>Shipping Marks</th>
							<th>Destination</th>
							<th>Total</th>
							{{-- <th>Total Volume (m3)</th>
							<th>Total Weight (kg)</th> --}}
							<th>Packing & QC Resi</th>
							<th>Status Resi</th>
							<th>Date & Time</th>
							{{-- <th class="text-center">Status</th> --}}
							<th class="text-center">Action</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<!-- Danger modal -->
	<div id="modal_theme_danger" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-danger" align="center">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="" method="post" id="delform">
					@csrf
					@method('DELETE')
					<div class="modal-body" align="center">
						<h2> Hapus Data? </h2>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
						<button type="submit" class="btn bg-danger" disabled>Hapus</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /default modal -->

	<!-- Add Images modal -->
	<div id="modal_add_images" class="modal fade" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h2 class="modal-title font-weight-semibold">Add Images</h2>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form id="form_image" action="#" method="post" class="form-horizontal">
					@csrf
					<div class="modal-body">
						<div class="row mb-3">
							<div class="col-md-5">
								<input name="gambar[]" type="file" class="form-control" required multiple>
							</div>
							<div class="col-md-4">
								<button type="submit" class="btn btn-primary text-uppercase">Submit</button>
							</div>
						</div>
						<div class="row">
							@for($i = 0; $i < 6; $i++)
							<div class="card-img-actions m-1">
								<img class="card-img img-fluid" src="{{ asset('global_assets/images/image.png') }}" alt="" style="height:150px;width:150px;object-fit: cover;">
								<div class="card-img-actions-overlay card-img">
									<a href="{{ asset('global_assets/images/image.png') }}" class="btn btn-outline bg-white text-white border-white border-2 btn-icon rounded-round" data-popup="lightbox" rel="group">
										<i class="icon-zoomin3"></i>
									</a>
								</div>
							</div>
							{{-- <div class="col-md-3">
							</div> --}}
							@endfor
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /horizontal form modal -->

@endif

@endsection

@section('js')

@if(in_array(Auth::user()->role,[2,5]))
	<!-- Theme JS files -->
	<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>

	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script>
		//modal delete
		$(document).on("click", ".delbutton", function () {
			var url = $(this).data('uri');
			$("#delform").attr("action", url);
		});


		$('#select_destination').change(function(){
            var uri = $('#btn-filter').data('uri');
            // var val1 = $('#select_destination').find(":selected").val();
            // let val2 = $('#select_customer').find(":selected").val();
            let val1 = $(this).val();
            // let href = `${uri}?c=${val1}&i=${val2}&n=${val3}`;
            let href = `${uri}?d=${val1}`;
			// console.log(uri);
            $('#btn-filter').attr('href', href);
        })


		var DatatableBasic = function() {

			// Basic Datatable examples
			var _componentDatatableBasic = function() {
				if (!$().DataTable) {
					console.warn('Warning - datatables.min.js is not loaded.');
					return;
				}

				// Setting datatable defaults
				$.extend( $.fn.dataTable.defaults, {
					autoWidth: false,
					columnDefs: [{
						orderable: false,
						width: 150,
						targets: [ 11 ]
					}],
					dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
					language: {
						search: '<span>过滤:</span> _INPUT_',
						searchPlaceholder: '打字于过滤...',
						lengthMenu: '<span>显示:</span> _MENU_',
						paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
					}
				});

				// Basic datatable
				$('.datatable-basic').DataTable({
					serverside: true,
					processing: true,
					scrollX: true,
					ajax: {
						url: "{{route('qualitycontrol')}}",
						method: "GET",
						beforeSend: function () {
							$('.datatable-basic > tbody').html(
								'<tr class="odd">' +
								'<td valign="top" colspan="100%" class="dataTables_empty"><div class="spinner-border text-success" role="status"><span class="sr-only">Loading...</span></div></td>' +
								'</tr>'
							);
                    	},
						data: function(d){
							d.d = $("#select_destination").val();
						},
					},
					columns: [
						{ 
							data: 'DT_RowIndex', 
							name: 'DT_RowIndex', 
							orderable: false, 
							searchable: false 
						},
						{
							data: "no_resi",
							name: "no_resi"
						},
						{
							data: null,
							name: null,
							render: (data, type, row) =>{
								return data?.no_resi_coload ?? "-";
							}
						},
						{
							data: "nama_member",
							name: "nama_member"
						},
						{
							data: "no_local_cina",
							name: "no_local_cina"
						},
						{
							data: "shipping_mark",
							name: "shipping_mark"
						},
						{
							data: "shipping_to",
							name: "shipping_to"
						},
						{
							data: "total",
							name: "total",
						},
						{
							data: "packing_qcresi",
							name: "packing_qcresi"
						},
						{
							data: "status",
							name: "status"
						},
						{
							data: "created_at",
							name: "created_at"
						},
						{
							data: null,
							name: null,
							render: (data, type, row) =>{
								return `
								<td align="center">
									<a href="qualitycontrol/${data?.id}"><button type="button" class="btn btn-light btn-icon"><i class="icon-eye" title="Show"></i></button></a>
								</td>`
							}
						}
					]
				});

				// Alternative pagination
				$('.datatable-pagination').DataTable({
					pagingType: "simple",
					language: {
						paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
					}
				});

				// Datatable with saving state
				$('.datatable-save-state').DataTable({
					stateSave: true
				});

				// Scrollable datatable
				var table = $('.datatable-scroll-y').DataTable({
					autoWidth: true,
					scrollY: 300
				});

				// Resize scrollable table when sidebar width changes
				$('.sidebar-control').on('click', function() {
					table.columns.adjust().draw();
				});
			};

			// Select2 for length menu styling
			var _componentSelect2 = function() {
				if (!$().select2) {
					console.warn('Warning - select2.min.js is not loaded.');
					return;
				}

				// Initialize
				$('.dataTables_length select').select2({
					minimumResultsForSearch: Infinity,
					dropdownAutoWidth: true,
					width: 'auto'
				});
			};


			//
			// Return objects assigned to module
			//

			return {
				init: function() {
					_componentDatatableBasic();
					_componentSelect2();
				}
			}
		}();


		// Initialize module
		// ------------------------------

		document.addEventListener('DOMContentLoaded', function() {
			DatatableBasic.init();
		});
	</script>
	<script type="text/javascript">
		$( document ).ready(function() {
			// Default style
			@if(session('error'))
			new PNotify({
				title: 'Error',
				text: '{{ session('error') }}.',
				icon: 'icon-blocked',
				type: 'error'
			});
			@endif
			@if ( session('success'))
			new PNotify({
				title: 'Success',
				text: '{{ session('success') }}.',
				icon: 'icon-checkmark3',
				type: 'success'
			});
			@endif

		});
	</script>

@else
	<!-- Theme JS files -->
	<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>

	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script>

		$('#select_destination').change(function(){
            var uri = $('#btn-filter').data('uri');
            // var val1 = $('#select_destination').find(":selected").val();
            // let val2 = $('#select_customer').find(":selected").val();
            let val1 = $(this).val();
            // let href = `${uri}?c=${val1}&i=${val2}&n=${val3}`;
            let href = `${uri}?d=${val1}`;
			// console.log(uri);
            $('#btn-filter').attr('href', href);
        })

		//modal delete
		$(document).on("click", ".delbutton", function () {
			var url = $(this).data('uri');
			$("#delform").attr("action", url);
		});

		var DatatableBasic = function() {

			// Basic Datatable examples
			var _componentDatatableBasic = function() {
				if (!$().DataTable) {
					console.warn('Warning - datatables.min.js is not loaded.');
					return;
				}

				// Setting datatable defaults
				$.extend( $.fn.dataTable.defaults, {
					autoWidth: false,
					columnDefs: [{
						orderable: false,
						width: 150,
						targets: [ 11 ]
					}],
					dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
					language: {
						search: '<span>Filter:</span> _INPUT_',
						searchPlaceholder: 'Type to filter...',
						lengthMenu: '<span>Show:</span> _MENU_',
						paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
					}
				});

				// Basic datatable
				$('.datatable-basic').DataTable({
					serverside: true,
					processing: true,
					scrollX: true,
					ajax: {
						url: "{{route('qualitycontrol')}}",
						method: "GET",
						beforeSend: function () {
							$('.datatable-basic > tbody').html(
								'<tr class="odd">' +
								'<td valign="top" colspan="100%" class="dataTables_empty"><div class="spinner-border text-success" role="status"><span class="sr-only">Loading...</span></div></td>' +
								'</tr>'
							);
                    	},
						data: function(d){
							d.d = $("#select_destination").val();
						},
					},
					columns: [
						{ 
							data: 'DT_RowIndex', 
							name: 'DT_RowIndex', 
							orderable: false, 
							searchable: false 
						},
						{
							data: "no_resi",
							name: "no_resi"
						},
						{
							data: null,
							name: null,
							render: (data, type, row) =>{
								return data?.no_resi_coload ?? "-";
							}
						},
						{
							data: "nama_member",
							name: "nama_member"
						},
						{
							data: "no_local_cina",
							name: "no_local_cina"
						},
						{
							data: "shipping_mark",
							name: "shipping_mark"
						},
						{
							data: "shipping_to",
							name: "shipping_to"
						},
						{
							data: "total",
							name: "total",
						},
						{
							data: "packing_qcresi",
							name: "packing_qcresi"
						},
						{
							data: "status",
							name: "status"
						},
						{
							data: "created_at",
							name: "created_at"
						},
						{
							data: null,
							name: null,
							render: (data, type, row) =>{
								return `
								<td align="center">
									<a href="qualitycontrol/${data?.id}"><button type="button" class="btn btn-light btn-icon"><i class="icon-eye" title="Show"></i></button></a>
								</td>`
							}
						}
					]
				});

				// Alternative pagination
				$('.datatable-pagination').DataTable({
					pagingType: "simple",
					language: {
						paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
					}
				});

				// Datatable with saving state
				$('.datatable-save-state').DataTable({
					stateSave: true
				});

				// Scrollable datatable
				var table = $('.datatable-scroll-y').DataTable({
					autoWidth: true,
					scrollY: 300
				});

				// Resize scrollable table when sidebar width changes
				$('.sidebar-control').on('click', function() {
					table.columns.adjust().draw();
				});
			};

			// Select2 for length menu styling
			var _componentSelect2 = function() {
				if (!$().select2) {
					console.warn('Warning - select2.min.js is not loaded.');
					return;
				}

				// Initialize
				$('.dataTables_length select').select2({
					minimumResultsForSearch: Infinity,
					dropdownAutoWidth: true,
					width: 'auto'
				});
			};


			//
			// Return objects assigned to module
			//

			return {
				init: function() {
					_componentDatatableBasic();
					_componentSelect2();
				}
			}
		}();


		// Initialize module
		// ------------------------------

		document.addEventListener('DOMContentLoaded', function() {
			DatatableBasic.init();
		});
	</script>
	<script type="text/javascript">
		$( document ).ready(function() {
			// Default style
			@if(session('error'))
			new PNotify({
				title: 'Error',
				text: '{{ session('error') }}.',
				icon: 'icon-blocked',
				type: 'error'
			});
			@endif
			@if ( session('success'))
			new PNotify({
				title: 'Success',
				text: '{{ session('success') }}.',
				icon: 'icon-checkmark3',
				type: 'success'
			});
			@endif

		});
	</script>

@endif

@endsection