@extends('layout')

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

@section('content')

<!-- 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">Data History Receipt</h3>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>

			@if(!in_array(\Auth::user()->role,[15,30,99]))
			<div class="d-flex">
				<button data-toggle="modal" data-target="#modal_download_xls" class="btn btn-success font-weight-bold font-size-lg" style="margin-right:10px">Download Xls <i class="icon-file-spreadsheet ml-2"></i></button>
			</div>
			@endif
		</div>
	</div>
	<!-- /page header -->
	
	<!-- Content area -->
	<div class="content">
		<div class="card">
			<div class="card-body">
				
				<form action="{{url('history')}}" method="get">
					<div class="form-group row">
						<label class="col-form-label col-lg-2">Display Data</label>
						<div class="col-lg-4">
							<input type="text" id="periode_filter"
									name="periode_filter"
									class="daterange-picker form-control"
									value="{{ isset($_GET['periode_filter']) ? $_GET['periode_filter'] : '' }}"
							>
							&nbsp;
						</div>
						<div class="col-lg-4">
							<button type="submit" id="filter_data" class="btn btn-primary">
								<i class="fas fa-filter"></i>&nbsp;&nbsp;Filter Data
							</button>
							<a href="{{url('history')}}" class="btn btn-success"><i class="icon-undo"></i>Reset</a>
						</div>

					</div>
				</form>

				{{-- <div class="d-flex py-3 justify-content-around align-items-center">
					<h4 class="font-weight-light"> Total Pengiriman selesai: <span class="font-weight-bold">{{ ribuan($totreceipts) }}</span> </h4>
					<h4 class="font-weight-light"> Total Carton: <span class="font-weight-bold">{{ ribuan(($receipts->sum('carton_count'))) }}</span>  ctn</h4>
					<h4 class="font-weight-light"> Total Volume: <span class="font-weight-bold">{{ ribuan($totvolume)}}</span> m3</h4>
					<h4 class="font-weight-light"> Total Berat: <span class="font-weight-bold">{{ ribuan($totweight)}}</span> kg</h4>
				</div> --}}
				<table class="table datatable-basic table-hover">
					<thead>
						<tr>
							<th>No</th>
							<th>No. Receipt</th>
							<th>No. Resi Coload</th>
							<th>Shipping Marks</th>
							<th>No. Local China Express</th>
							<th>Destination</th>
							<th>Total Carton</th>
							<th>Total Volume (m3)</th>
							<th>Total Weight (kg)</th>
							<th>Date & Time</th>
							<th>No.Invoices</th>
							<th>No.Container</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 -->

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

				<form action="{{ url('downloadHistoryResi') }}" method="post" >
				    @csrf
					<div class="modal-body" align="center">
						<h2> Download Xls / Template Update Resi </h2>
					</div>

					<div class="form-group" style="margin:20px 60px">
						<label>Tanggal</label>
						<input name="tanggal" type="text" class="form-control daterange-buttons" value="{{date('Y/m/d')}} - {{date('Y/m/d')}}">
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
						<button type="submit" id="submitdownload" class="btn bg-success" >Download</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /default modal -->
	
	@endsection
	
	@section('js')
	<!-- 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('global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/daterangepicker.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/anytime.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.date.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.time.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/legacy.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/notifications/jgrowl.min.js')}}"></script>
	
	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script>

		//Date Range Picker
		$('.daterange-picker').daterangepicker({
			applyClass: 'btn-primary',
			cancelClass: 'btn-light',

			@if(isset($_GET['periode_filter']))
			@php
				$tanggal = explode(' - ', $_GET['periode_filter']);
			@endphp
				startDate: '{{ $tanggal[0] }}',
				endDate: '{{ $tanggal[1] }}',
			@else
				// startDate: moment().startOf('month').format('YYYY/MM/DD'),
				startDate: '{{ $start_date }}',
				endDate: '{{ $end_date }}',
			@endif

			locale: {
			format: 'YYYY/MM/DD'
			}
		});

		//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: [ 8 ]
					}],
					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({
					processing: true,
					serverSide: true,
					// order: [[9, 'desc']],
					ajax: "{{route('historyreceipt-datatable')}}{{ isset($_GET['periode_filter']) ? '?periode_filter='.$_GET['periode_filter'] : '' }}",
					
					columns:[
						{data:'DT_RowIndex', name:'no'},
						{data:'no_resi', name:'no_resi'},
						{data:'no_resi_coload', name:'no_resi_coload'},
						{data:'shipping_mark', name:'shipping_mark'},
						{data:'no_local_cina', name:'no_local_cina'},
						{data:'shipping_to', name:'shipping_to'},
						{data:'total_ctn', name:'total_ctn'},
						{data: null, name:null,render: function ( data, type, row ) {
							var total_volume = 0 
							data.receipt_detail.forEach(element => {
								total_volume += parseFloat(element.total_volume)
							});

							return total_volume
				        }},
						{data: null, name:null,render: function ( data, type, row ) {
							var total_berat = 0 
							data.receipt_detail.forEach(element => {
								total_berat += parseFloat(element.total_berat)
							});

							return total_berat
				        }},
						{data:'created_at', name:'created_at'},
						{data:null, name:null, render: function (data, type, row ) {
							let invoices = ''
							let lastinvoice = ''
							if (data.receipt_detail.length > 0) {
								for (let rd = 0; rd < data.receipt_detail.length; rd++) {
									if (data.receipt_detail[rd].invoice_detail.length > 0) {
										var invoice_detail = data.receipt_detail[rd].invoice_detail
										for (let ind = 0; ind < invoice_detail.length; ind++) {

											if (lastinvoice != invoice_detail[ind].invoice.no_invoice) {
												if (ind != 0 || rd != 0) {
													invoices += '<br>'
												}
												invoices += invoice_detail[ind].invoice.no_invoice
											}
											lastinvoice = invoice_detail[ind].invoice.no_invoice

										}
										
									}
									
								}
							}

							return invoices
						}},
						{data:null, name:null, render: function (data, type, row ) {
							var html = ''
							var lastcontainer = ''
							if (data.carton.length > 0) {
								for (let ct = 0; ct < data.carton.length; ct++) {
									console.log(data.carton[ct])
									if (lastcontainer != data.carton[ct].no_container) {
										if (ct != 0) {
											html += '<br>'
										}
										html += data.carton[ct].no_container
									}
									lastcontainer = data.carton[ct].no_container
								}
							}
							return html
						}},
						{data:null, name:null, render: function (data, type, row ) {
							var html = ''
							html += `<a href="{{ url('historyshow')}}/${data.id}"><button type="button" class="btn btn-light btn-icon"><i class="icon-eye" title="Show"></i></button></a>`
							return html
						}}
					]
				});
				
				// 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() {
			// Button class options
			$('.daterange-buttons').daterangepicker({
				applyClass: 'btn-success',
				cancelClass: 'btn-danger',
				locale: {
					format: 'YYYY/MM/DD'
				}
			});

			// 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>
	@endsection