@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">Warehouse Indonesia</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="form-group">
                    <label>Shipping Instruction</label>
                    <div class="col-md-4 p-0">
                        <select name="currency_code" id="select_shipping" class="form-control form-control-select2">
							<option value="">-- Choose Shipping --</option>
                            @foreach($shippings as $shipping)
                                <option value="{{$shipping->id}}" {{ $shipping_id == $shipping->id ? 'selected' : null }}>{{ $shipping->kode }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <a id="btn_shipping" href="{{ route('indonesia.index') }}?shipping=" data-uri="{{ route('indonesia.index') }}" class="btn btn-primary text-uppercase">Submit  <i class="icon-paperplane ml-2"></i></a>
                <a href="{{ route('indonesia.index') }}" class="btn btn-light ml-1 text-uppercase"  data-popup="tooltip" title="Reset" data-placement="right"><i class="icon-spinner11"></i></a>
            </div>
        </div>

        @if($warehouse)
            <div class="card">
                <div class="card-body">
					<div class="row">
						<div class="col-md-12 text-right">
							<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>
					</div>

					<hr>

                    <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($totberat) }}</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>Nama Member</th>
                                <th>Shipping Marks</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>

                            

                        </tbody>
                    </table>
                </div>
            </div>
        @endif
	</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 -->

		<!-- modal -->
		<div id="wareindotodone" class="modal fade" tabindex="-1">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header bg-info" align="center">
						<h3>Warehouse Indo to Done</h3>
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>
	
					<form action="{{url('warehouseindotodone')}}" method="post" id="wareindotodoneform">
						@csrf
						<input id="wareindo_id_resi" name="wareindo_id_resi" type="hidden">
						<div class="modal-body" align="center">
							<h5>Opsi ini akan memindahkan semua karton dengan No. Resi <br> 
								<span class="font-weight-semibold" id="textnoresi"></span> <br> 
								dari 
								<span class="font-weight-semibold">Warehouse Indonesia</span> 
								ke 
								<span class="font-weight-semibold">Selesai</span>
							</h5>
						</div>
	
						<div class="modal-footer">
							<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
							<button type="submit" class="btn bg-info">Ya, Selesaikan</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!-- / 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">
					<h2> Download Xls </h2>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<div class="modal-body">
					<legend class="font-weight-semibold">Tanpa Filter</legend>
					<div class="form-group">
						<form action="{{ url('downloadallexcel-indo') }}" method="post" >
							@csrf
							<div class="row">

								<div class="col-lg-3">
									<button type="submit" id="submitdownload" class="btn bg-success" >Download</button>
								</div>
							</div>
						</form>
					</div>

					<legend class="font-weight-semibold">Berdasar Tanggal</legend>
					<div class="form-group">
						<form action="{{ url('downloadexcel-indo') }}" method="post" >
							@csrf
							<div class="row">

								<label class="col-form-label col-lg-3">Tanggal</label>
								<div class="col-lg-5">
									<input name="tanggal" type="text" class="form-control daterange-buttons" value="{{date('Y/m/d')}} - {{date('Y/m/d')}}">
								</div>
								@if(isset($_GET['shipping']) )
								<input type="hidden" name="shipping" value="{{$_GET['shipping']}}">
								@endif
								<div class="col-lg-3">
									<button type="submit" id="submitdownload" class="btn bg-success" >Download</button>
								</div>
							</div>
						</form>
					</div>

					

				</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
					</div>
			</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('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);
		});

		//modal delete
		$(document).on("click", ".warehouseindotodone", function () {
		    //  var url = $(this).data('uri');
		     var id_resi = $(this).data('idresi');
		     var no_resi = $(this).data('noresi');
			 
		     $("#wareindo_id_resi").val(id_resi);
		     $("#textnoresi").text(no_resi);
		});

        $('#select_shipping').change(function(){
            let uri = $('#btn_shipping').data('uri');
            let val = $(this).val();
            let href = `${uri}?shipping=${val}`;

            $('#btn_shipping').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: [ 7 ]
		            }],
		            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: "{{url("indonesia")}}",
						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: {
							shipping: $('#select_shipping').val(),
						}
					},
					columns: [
						{
                            data:'DT_RowIndex', 
                            name:'no',
                        },
						{
							data: "no_resi",
							name: "no_resi"
						},
						{
							data: null,
							name: null,
							render: (data, type, row) =>{
								return data.no_resi_coload ? data.no_resi_coload : "-";
							}
						},
						{
							data: "member",
							name: "member"
						},
						{
							data: "shipping_mark",
							name: "shipping_mark"
						},
						{
							data: "shipping_to",
							name: "shipping_to"
						},
						{
							data: "total_ctn",
							name: "total_ctn"
						},
						{
							data: "totalvol",
							name: "totalvol"
						},
						{
							data: "totalber",
							name: "totalber"
						},
						{
							data: "created_at",
							name: "created_at"
						},
						{
							data: null,
							name: null,
							render: (data, type, row) =>{
								const role = "{{in_array(\Auth::user()->role, [15])}}";
								const button = `<a href="/indonesia/${data?.id}"><button type="button" class="btn btn-light btn-icon"><i class="icon-eye" title="Show"></i></button></a>`
								if(!role){
									return button + `<a class="warehouseindotodone" data-toggle="modal" data-target="#wareindotodone" data-idresi="${data?.id}" data-noresi="${data?.no_resi}" 
											data-uri="#"><button type="button" class="btn btn-info btn-icon"><i class="icon-checkmark" title="Selesaikan Resi"></i></button></a>`
								}
								return button;
							}
						}
					]
				});

		        // 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'
				}
			});

            var $select = $('.form-control-select2').select2();
	        // 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