@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">
				{{-- <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 class="text-center">Status</th> --}}
							<th class="text-center">Action</th>
						</tr>
					</thead>
					<tbody>
						
						@if(!$receipts->isEmpty())
						@foreach ($receipts as $receipt)
						<tr>
							<td>{{ $loop->iteration }}</td>
							<td>{{ $receipt->no_resi }}</td>
							<td>{{ $receipt->no_resi_coload?$receipt->no_resi_coload:'-' }}</td>
							<td>{{$receipt->shipping_mark}}</td>
							<td>{{$receipt->no_local_cina}}</td>
							<td>{{$receipt->shipping_to}}</td>
							{{-- <td>{{$receipt->carton_count}}</td> --}}
							<td>{{$receipt->total_ctn}}</td>
							<td>{{$receipt->receipt_detail->sum('total_volume')}}</td>
							<td>{{$receipt->receipt_detail->sum('total_berat')}}</td>
							<td>{{$receipt->created_at}}</td>
							{{-- <td class="text-center"><span class="font-size-sm badge {{ $i>5 ? 'badge-warning' : 'badge-primary'}} badge-pill">{{ $i>5 ? 'Loaded to Container' : 'Received at Warehouse'}}</span></td> --}}
							<td align="center">
								<a href="{{ route('history.show', $receipt->id) }}"><button type="button" class="btn btn-light btn-icon"><i class="icon-eye" title="Show"></i></button></a>
								{{-- <a href="{{ route('receipt.edit', 1) }}"><button type="button" class="btn btn-secondary btn-icon"><i class="icon-pencil7" title="Edit"></i></button></a> --}}
								{{-- <a class="delbutton" data-toggle="modal" data-target="#modal_theme_danger" data-uri="#"><button type="button" class="btn btn-danger btn-icon"><i class="icon-x" title="Delete"></i></button></a> --}}
							</td>
						</tr>
						@endforeach
						@else
						<tr>
							<td align="center" colspan="9">Data Kosong</td>
						</tr>
						@endif
						
					</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>
		//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();
				
				// 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