@extends('layout')

@section('css')
<style>
    h3{
        margin: 0;
    }
    h4{
        margin:0;
        font-size: 1.2em;
    }
    .offset{
        margin-top: -3em;
    }
    .pnotify-font{
        font-size: 22px;
    }
</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">Unstuffing From Container -</span> 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-header d-flex justify-content-between">
                <h3 class="font-weight-light">Filter Destination</h3>
            </div>
			<div class="card-body">
				<div class="col-lg-7 mt-3 mb-5">
					<div class="form-group row">
						<label class="col-form-label col-lg-4">Destination Port <span class="text-danger">*</span></label>
						<div class="col-lg-8">
							<select id="shipping_to" name="shipping_to" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" onchange="filterButton()" required>
                                <option value="">--Destination Port--</option>
								@foreach($shippings as $shipping)
								<option value="{{ $shipping->kode }}" {{ $shipping_to == $shipping->kode ? 'selected' : null }}>{{ $shipping->kode }}</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="form-group row">
						<label class="col-form-label col-lg-4">No. Container <span class="text-danger">*</span></label>
						<div class="col-lg-8">
							<select id="no_container" name="no_container" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" onchange="filterButton()" required>
								<option value="">--No. Container--</option>
                                @if($select_cont)
                                    @foreach($select_cont as $cont)
                                        <option value="{{$cont->no_container}}" {{ $no_container == $cont->no_container ? 'selected' : null }}>{{$cont->no_container}}</option>
                                    @endforeach
                                @endif
							</select>
						</div>
					</div>
					{{-- <div class="form-group row">
						<label class="col-form-label col-lg-4">No. Seal <span class="text-danger">*</span></label>
						<div class="col-lg-8">
							<select id="no_seal" name="no_seal" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" onchange="filterButton()" required>
								<option value="">--No. Seal--</option>
                                @if($select_seal)
                                    @foreach($select_seal as $seal)
                                        <option value="{{$seal->no_seal}}" {{ $no_seal == $seal->no_seal ? 'selected' : null }}>{{$seal->no_seal}}</option>
                                    @endforeach
                                @endif
							</select>
						</div>
					</div> --}}
					<div class="float-right">
						<a id="btn-filter" href="{{ route('stuffing.create.indonesia').'?'.@$_SERVER['QUERY_STRING'] }}" data-uri="{{ route('stuffing.create.indonesia') }}">
							<button type="button" class="btn btn-primary text-uppercase" disabled>
								Submit <i class="icon-paperplane ml-2"></i>
							</button>
						</a>
						<a href="{{ route('stuffing.create.indonesia') }}" class="btn btn-light ml-1 text-uppercase"  data-popup="tooltip" title="Reset" data-placement="right"><i class="icon-spinner11"></i></a>
					</div>
				</div>
			</div>
        </div>

        @if($filtered)
        <div class="card">
            <div class="card-header d-flex justify-content-between">
                <h3 class="font-weight-light"> Barang di Container: <span class="font-weight-bold" id="countct">{{ ribuan($count_container) }}</span></h3>
                <input id="inputct" type="hidden" value="{{ $count_container }}">
            </div>
            <div class="card-body">
                <div class="mb-5 row">
                    <div class="col-lg-7">
                        <form action="{{ route('stuffing.container.indonesia') }}" class="form-validate-jquery"  method="post" id="form1" autocomplete="off">
                            @csrf
                            @method('put')
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3">Barcode</label>
                                <div class="col-lg-6">
                                    <input type="text" name="container" id="barcode" class="form-control border-teal border-1" autofocus>
                                </div>
                                <div class="col-lg-3">
                                    <button type="submit" class="btn btn-primary text-uppercase">Submit Barcode <i class="icon-barcode2 ml-2"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-lg-5">
                        <div class="float-right">
                            <a id="btn-move-all" data-toggle="modal" data-target="#modal_theme_move" data-uri="{{ url('moveallcontainer', [$shipping_to, $no_container])}}">
                                <button type="button" class="btn btn-warning text-uppercase">
                                    Move All To Warehouse
                                </button>
                            </a>
                        </div>
                    </div>
                </div>

                <form action="{{ route('stuffing.container.indonesia') }}" id="formcontainer" method="post">
                    @csrf
                    @method('put')
                    @php
                        $disabled = '';
                        if(!in_array(\Auth::user()->role,[1,6,8,10])) {
                            $disabled = 'disabled';
                        }

                        if(\Auth::user()->id == 11114) {
                            $disabled = '';
                        }
                    @endphp
                    <table class="table datatable-basic datatable-container table-hover" id="table_container">
                        <thead>
                            <tr>
                                <th align="center" data-orderable='false'>
                                    <input type="checkbox" id="all_container" {{$disabled}}>
                                </th>
                                <th>No. Receipt</th>
                                <th>No. Resi Coload</th>
                                <th>No. Carton</th>
                                {{-- <th>No. Container</th>
                                <th>No. Seal</th> --}}
                                <th>Shipping Marks</th>
                                <th>Volume (m3)</th>
                                <th>Weight (kg)</th>
                                <th>Carton Type</th>
                                <th>Date & Time</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>

                            

                        </tbody>
                    </table>
                    @if(in_array(\Auth::user()->role,[1,6,8,10]) || \Auth::user()->id == 11114)
                    <div class="mt-2">
                        <button type="submit" id="btn-container" class="btn btn-warning @if(!$containers->isEmpty()) offset @endif" disabled>Move To Warehouse</button>
                    </div>
                    @endif
                </form>
            </div>
        </div>
        
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between">
                <h3 class="font-weight-light"> Barang di Gudang: <span class="font-weight-bold" id="countwh">{{ ribuan($count_warehouse) }}</span></h3>
                <input id="inputwh" type="hidden" value="{{ $count_warehouse }}">
            </div>
            <div class="card-body">

                <div class="row">
                    <div class="col-lg-2">
                        <a id="btnundo" href="{{ url('undoindostuffing')}}" class="btn btn-warning {{ $laststuffingindo == null? 'disabled' : '' }}" >
                            <i class="icon-undo mr-2"></i> Undo Last Stuffing
                        </a>
                        <span id="ketlastcarton">Last Carton : {{$laststuffingindo?@$laststuffingindo->stuffingindo->no_ctn:'-'}}</span>
                    </div>
                    
                </div>
                <hr>

                <form action="{{ route('stuffing.warehouse.indonesia') }}" id='formwarehouse' method="post">
                    @csrf
                    @method('put')
                    <table class="table datatable-basic datatable-gudang table-hover" id="table_warehouse">
                        <thead>
                            <tr>
                                <th align="center" data-orderable='false'>
                                    <input type="checkbox" id="all_warehouse">
                                </th>
                                <th>No. Receipt</th>
                                <th>No. Resi Coload</th>
                                <th>No. Carton</th>
                                {{-- <th>No. Container</th>
                                <th>No. Seal</th> --}}
                                <th>Shipping Marks</th>
                                <th>Volume (m3)</th>
                                <th>Weight (kg)</th>
                                <th>Carton Type</th>
                                <th>Date & Time</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>

                            

                        </tbody>
                    </table>

                    <div class="mt-2">
                        {{-- <button type="button" class="btn btn-light float-left offset" onclick="handleMoveWarehouse()">Move Item</button> --}}
                        <button type="submit" id="btn-warehouse" class="btn btn-primary float-left @if(!$warehouses->isEmpty()) offset @endif" disabled>Back To Container</button>
                    </div>
                </form>
            </div>
        </div>
        @endif

	</div>

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

				<form action="" method="post" id="moveform">
				    @csrf
					<div class="modal-body" align="center">
						<h2> Pindahkan semua karton dari kontainer ke gudang? </h2>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
						<button type="submit" class="btn bg-warning">Pindah Semua</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" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row mb-3">
                            <div class="col-md-8">
                                <input name="gambar" type="file" class="form-control" required>
                            </div>
                            <div class="col-md-4">
                                <button type="submit" class="btn btn-primary text-uppercase">Submit</button>
                            </div>
                        </div>
                        <div id="card-img-body" class="row">

                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /horizontal form 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/forms/validation/validate.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/selects/select2.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/buttons/spin.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/media/fancybox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>

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

		$('#modal_add_images').on("hidden.bs.modal", function () {
			$("#card-img-body").empty();
		});

        //ADD IMAGE BUTTON
        $(document).on("click", ".btn-image", function () {
            var url = $(this).data('uri');
            var id = $(this).data('id');
            $("#form_image").attr("action", url);

            $.ajax({
                type: 'get',
                url : '{{url("getimagecina")}}/'+id,
                success : function(res){
                    var len = 0;
                    if(res['data'] != null){
                        len = res['data'].length;
                    }
                    if(len > 0){
                    // Read data and create <option >
                        for(var i=0; i<len; i++){

                            var id = res['data'][i].id;
                            var href = res['data'][i].gambar;
                            var image ='{{ asset('') }}'+href;
                            var imgdestroy = '{{url('cinaimgdestroy')}}/'+id;
                            let $html =
                            '<div class="card-img-actions m-1">'+
                            '<img class="card-img img-fluid" src="'+image+'" alt="" style="height:200px;width:200px;object-fit: contain;">'+
                            '<div  class="card-img-actions-overlay card-img">'+
                            '<a href="'+image+'" class="btn btn-outline bg-white text-white border-white border-2 btn-icon rounded-round" data-popup="lightbox">'+
                            '<i class="icon-zoomin3"></i></a>'+
                            '<a href="'+imgdestroy+'" class="btn btn-outline bg-white text-white border-white border-2 btn-icon rounded-round ml-2">'+
                            '<i class="icon-trash-alt"></i></a></div></div>';

                            $( "#card-img-body" ).append( $html );
                            $('[data-popup="lightbox"]').fancybox({
                                padding: 3
                            });
                        }
                    }

                },
                error:function(res){
                    console.log('Error',res);
                }
            });
        });

        // CHECK BARANG DI CONTAINER
        $('#all_container').on("change", function(){
            let check = $(this).is(":checked");
            let $container = $('.checked_container');

            if(check){
                $container.prop('checked', true);
            } else {
                $container.prop('checked', false);
            }
        })

        // CHECK BARANG DI GUDANG
        $('#all_warehouse').on("change", function(){
            let check = $(this).is(":checked");
            let $warehouse = $('.checked_warehouse');

            if(check){
                $warehouse.prop('checked', true);
            } else {
                $warehouse.prop('checked', false);
            }
        })

		// 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,
        //             order: [[1, 'asc']],
		//             columnDefs: [{
		//                 orderable: false,
		//                 width: 50,
		//                 targets: [ 0, 9 ]
		//             }],
		//             dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"p>',
		//             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;' }
		//             },
        //             //initComplete: function(){
		// 			//	$('div.bulk_action').html('<button type="button" id="checked_action" class="btn btn-light float-left" onclick="handleMoveItem()">Move Item</button>')
		// 			//}
		//         });

		//         // Basic datatable
		//         // $('.datatable-basic').DataTable();
        //         // $('.datatable-gudang').DataTable({
		// 		// 	processing: true,
		// 		// 	serverSide: true,
		// 		// 	scrollX: true,
		// 		// 	ajax: {
		// 		// 		url: "{{route("stuffing.create.indonesia")}}",
		// 		// 		method: "GET",
        //         //         rowId: function(data){
        //         //             return 'tr' + data?.id;
        //         //         },
		// 		// 		beforeSend: function () {
		// 		// 			$('.datatable-gudang > 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: {
        //         //             type: 1,
        //         //             d: $('#shipping_to').val(),
        //         //             c: $('#no_container').val(),
        //         //         }
		// 		// 	},
		// 		// 	columns: [
		// 		// 		{   data: null,
        //         //             name: null,
        //         //             render: (data, type, row) =>{
        //         //                 return `<input type="checkbox" class="checked_warehouse" name="warehouse[]" value=${data?.no_ctn} @if(!in_array(\Auth::user()->role,[1,8,9,10])) disabled @endif>`
        //         //             }

		// 		// 		},
		// 		// 		{
		// 		// 			data: "no_receipt",
		// 		// 			name: "no_receipt",
		// 		// 		},
        //         //         {
		// 		// 			data: null,
		// 		// 			name: null,
        //         //             render: (data, type, row) =>{
        //         //                 return data?.no_receipt_coload ?? '-';
        //         //             }
		// 		// 		},
		// 		// 		{
		// 		// 			data: "no_ctn",
		// 		// 			name: "no_ctn"
		// 		// 		},
		// 		// 		{
		// 		// 			data: "shipping_mark",
		// 		// 			name: "shipping_mark"
		// 		// 		},
		// 		// 		{
		// 		// 			data: "total_volume",
		// 		// 			name: "total_volume",
		// 		// 		},
		// 		// 		{
		// 		// 			data: "total_berat",
		// 		// 			name: "total_berat"
		// 		// 		},
        //         //         {
		// 		// 			data: "ctn_type",
		// 		// 			name: "ctn_type"
		// 		// 		},
		// 		// 		{
		// 		// 			data: "created_at",
		// 		// 			name: "created_at",
		// 		// 		},
		// 		// 		{
		// 		// 			data: "status",
		// 		// 			name: "status",
		// 		// 		},
		// 		// 		{
		// 		// 			data: null,
		// 		// 			name: null,
		// 		// 			render: (data, type, row) =>{
		// 		// 				return `<td align='center'>
		// 		// 						<button type="button" class="btn btn-light btn-icon btn-image" data-toggle="modal" data-target="#modal_add_images" data-id="${data?.id}" data-uri="/upimagecartoncina/${data?.id}"><i class="icon-image2"></i></button>
		// 		// 					</td>`
		// 		// 			}
		// 		// 		}

		// 		// 	]
		// 		// });

        //         // $('.datatable-container').DataTable({
		// 		// 	processing: true,
		// 		// 	serverSide: true,
		// 		// 	scrollX: true,
		// 		// 	ajax: {
		// 		// 		url: "{{route("stuffing.create.indonesia")}}",
		// 		// 		method: "GET",
        //         //         rowId: function(data){
        //         //             return 'tr' + data?.id;
        //         //         },
		// 		// 		beforeSend: function () {
		// 		// 			$('.datatable-container > 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: {
        //         //             type: 2,
        //         //             d: $('#shipping_to').val(),
        //         //             c: $('#no_container').val(),
        //         //         }
		// 		// 	},
		// 		// 	columns: [
		// 		// 		{   data: null,
        //         //             name: null,
        //         //             render: (data, type, row) =>{
        //         //                 return `<input type="checkbox" class="checked_container" name="container[]" value=${data?.no_ctn}>`
        //         //             }

		// 		// 		},
		// 		// 		{
		// 		// 			data: "no_receipt",
		// 		// 			name: "no_receipt",
		// 		// 		},
        //         //         {
		// 		// 			data: "no_receipt_coload",
		// 		// 			name: "no_receipt_coload",
		// 		// 		},
		// 		// 		{
		// 		// 			data: "no_ctn",
		// 		// 			name: "no_ctn"
		// 		// 		},
		// 		// 		{
		// 		// 			data: "shipping_mark",
		// 		// 			name: "shipping_mark"
		// 		// 		},
		// 		// 		{
		// 		// 			data: "total_volume",
		// 		// 			name: "total_volume",
		// 		// 		},
		// 		// 		{
		// 		// 			data: "total_berat",
		// 		// 			name: "total_berat"
		// 		// 		},
        //         //         {
		// 		// 			data: "ctn_type",
		// 		// 			name: "ctn_type"
		// 		// 		},
		// 		// 		{
		// 		// 			data: "created_at",
		// 		// 			name: "created_at",
		// 		// 		},
		// 		// 		{
		// 		// 			data: "status",
		// 		// 			name: "status",
		// 		// 		},
		// 		// 		{
		// 		// 			data: null,
		// 		// 			name: null,
		// 		// 			render: (data, type, row) =>{
		// 		// 				return `<td align='center'>
		// 		// 						<button type="button" class="btn btn-light btn-icon btn-image" data-toggle="modal" data-target="#modal_add_images" data-id="${data?.id}" data-uri="/upimagecartoncina/${data?.id}"><i class="icon-image2"></i></button>
		// 		// 					</td>`
		// 		// 			}
		// 		// 		}

		// 		// 	],
        //         //     destroy: true,
		// 		// });


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

        function format_rupiah(num){

            return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.");

        }

        function get_center_pos(width, top) {
            // top is empty when creating a new notification and is set when recentering
            if (!top) {
                top = 30;
                // this part is needed to avoid notification stacking on top of each other
                $('.ui-pnotify').each(function() {
                top += $(this).outerHeight() + 20;
                });
            }

            return {
                "top": top,
                "left": ($(window).width() / 2) - (width / 2)
            }
        }

		//validation
		$(document).ready(function(){
			let button = $('#btn-filter');
			let seal = $('#no_seal').val();

			if(seal == ''){
				button.find('button').prop('disabled', true)
			} else {
				button.find('button').prop('disabled', false)
			}
		})

		function filterButton(){
			let button = $('#btn-filter');
			let uri = button.data('uri');
			let shipping = $('#shipping_to').val();
			let container = $('#no_container').val();
			let seal = $('#no_seal').val();

			let href = `${uri}?d=${shipping}&c=${container}&s=${seal}`;
			button.prop('href', href);

			//validation
			if(seal == ''){
				button.find('button').prop('disabled', true)
			} else {
				button.find('button').prop('disabled', false)
			}
		}

        $('#shipping_to').on("change", function(){
            let ship = $(this).find(':selected').val();

            $.ajax({
                type: 'GET',
                url: "{{ url('getcontainerseal') }}",
                data: 'ship='+ship,
                success: function (ress) {
                    $('#no_container').html(ress.cont);
                    $('#no_seal').html(ress.seal);

                }
            });
        })

		$( document ).ready(function() {
            
			var select = $('.form-control-select2').select2();

            // var validForm1 = $('#form1').validate({
            //     ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
            //     errorClass: 'validation-invalid-label',
            //     //successClass: 'validation-valid-label',
            //     validClass: 'validation-valid-label',
            //     highlight: function(element, errorClass) {
            //         $(element).removeClass(errorClass);
            //     },
            //     unhighlight: function(element, errorClass) {
            //         $(element).removeClass(errorClass);
            //     },
            //     // success: function(label) {
            //     //    label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
            //     //},

            //     // Different components require proper error label placement
            //     errorPlacement: function(error, element) {

            //         // Unstyled checkboxes, radios
            //         if (element.parents().hasClass('form-check')) {
            //             error.appendTo( element.parents('.form-check').parent() );
            //         }

            //         // Input with icons and Select2
            //         else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
            //             error.appendTo( element.parent() );
            //         }

            //         // Input group, styled file input
            //         else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
            //             error.appendTo( element.parent().parent() );
            //         }

            //         // Other elements
            //         else {
            //             error.insertAfter(element);
            //         }
            //     },
            // });


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

        var tablecontainer = $('.datatable-container').DataTable({
            processing: true,
            serverSide: true,
            scrollX: true,
            ajax: {
                url: "{{route("stuffing.create.indonesia")}}",
                method: "GET",
                rowId: function(data){
                    return 'tr' + data?.id;
                },
                columnDefs: [{
                    orderable: false,
                    width: 50,
                    targets: [ 0 ]
                }],
                beforeSend: function () {
                    $('.datatable-container > 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: {
                    type: 2,
                    d: $('#shipping_to').val(),
                    c: $('#no_container').val(),
                }
            },
            columns: [
                {   data: null,
                    name: null,
                    render: (data, type, row) =>{
                        return `<input type="checkbox" class="checked_container" value=${data?.no_ctn}>`
                    }

                },
                {
                    data: null,
                    name: "no_receipt",
                    render: (data, type, row) => {
                        return data?.no_receipt ?? null;
                    }
                },
                {
                    data: null,
                    name: "no_receipt_coload",
                    render: (data, type, row) => {
                        return data?.no_receipt_coload ?? null;
                    }
                },
                {
                    data: null,
                    name: "no_ctn",
                    render: (data, type, row) => {
                        return data?.no_ctn ?? null;
                    }
                },
                {
                    data: null,
                    name: "shipping_mark",
                    render: (data, type, row) => {
                        return data?.shipping_mark ?? null;
                    }
                },
                {
                    data: null,
                    name: "total_volume",
                    render: (data, type, row) => {
                        return data?.total_volume ?? null;
                    }
                },
                {
                    data: null,
                    name: "total_berat",
                    render: (data, type, row) => {
                        return data?.total_berat ?? null;
                    }
                },
                {
                    data: null,
                    name: "ctn_type",
                    render: (data, type, row) => {
                        return data?.ctn_type ?? null;
                    }
                },
                {
                    data: null,
                    name: "created_at",
                    render: (data, type, row) => {
                        return data?.created_at ?? null;
                    }
                },
                {
                    data: null,
                    name: "status",
                    render: (data, type, row) => {
                        return data?.status ?? null;
                    }
                },
                {
                    data: null,
                    name: null,
                    render: (data, type, row) =>{
                        return `<td align='center'>
                                <button type="button" class="btn btn-light btn-icon btn-image" data-toggle="modal" data-target="#modal_add_images" data-id="${data?.id}" data-uri="/upimagecartoncina/${data?.id}"><i class="icon-image2"></i></button>
                            </td>`
                    }
                }

            ]
        });

        var tablegudang = $('.datatable-gudang').DataTable({
            processing: true,
            serverSide: true,
            scrollX: true,
            ajax: {
                url: "{{route("stuffing.create.indonesia")}}",
                method: "GET",
                rowId: function(data){
                    return 'tr' + data?.id;
                },
                beforeSend: function () {
                    $('.datatable-gudang > 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: {
                    type: 1,
                    d: $('#shipping_to').val(),
                    c: $('#no_container').val(),
                }
            },
            columns: [
                {   data: null,
                    name: null,
                    render: (data, type, row) =>{
                        return `<input type="checkbox" class="checked_warehouse" value=${data?.no_ctn} @if(!in_array(\Auth::user()->role,[1,6,8,9,10])) disabled @endif>`
                    }

                },
                {
                    data: null,
                    name: "no_receipt",
                    render: (data, type, row) => {
                        return data?.no_receipt ?? null;
                    }
                },
                {
                    data: null,
                    name: "no_receipt_coload",
                    render: (data, type, row) => {
                        return data?.no_receipt_coload ?? null;
                    }
                },
                {
                    data: null,
                    name: "no_ctn",
                    render: (data, type, row) => {
                        return data?.no_ctn ?? null;
                    }
                },
                {
                    data: null,
                    name: "shipping_mark",
                    render: (data, type, row) => {
                        return data?.shipping_mark ?? null;
                    }
                },
                {
                    data: null,
                    name: "total_volume",
                    render: (data, type, row) => {
                        return data?.total_volume ?? null;
                    }
                },
                {
                    data: null,
                    name: "total_berat",
                    render: (data, type, row) => {
                        return data?.total_berat ?? null;
                    }
                },
                {
                    data: null,
                    name: "ctn_type",
                    render: (data, type, row) => {
                        return data?.ctn_type ?? null;
                    }
                },
                {
                    data: null,
                    name: "created_at",
                    render: (data, type, row) => {
                        return data?.created_at ?? null;
                    }
                },
                {
                    data: null,
                    name: "status",
                    render: (data, type, row) => {
                        return data?.status ?? null;
                    }
                },
                {
                    data: null,
                    name: null,
                    render: (data, type, row) =>{
                        return `<td align='center'>
                                <button type="button" class="btn btn-light btn-icon btn-image" data-toggle="modal" data-target="#modal_add_images" data-id="${data?.id}" data-uri="/upimagecartoncina/${data?.id}"><i class="icon-image2"></i></button>
                            </td>`
                    }
                }

            ]
        });

        $('#form1').on('submit', function(){
            var cek = $('#form1').validate().form();
            $('#barcode').attr('readonly', 'readonly');

            if(!cek) {
                alert('Please fill Destination Port, No. Container & No. Seal');
                $('#barcode').removeAttr('readonly');
                return false;
            }

            $.ajax({
                type: 'POST',
                url: "{{ route('stuffing.container.indonesia') }}",
                data: $('#form1').serialize(),
                success: function (ress) {

                    new PNotify({
                        title: ress.title,
                        text: ress.text,
                        icon: ress.icon,
                        type: ress.type,
                        width: '400px',
                        height: '200px',
                        addclass: "pnotify-font",
                        before_open: function(PNotify) {
                            PNotify.get().css(get_center_pos(PNotify.get().width()));
                        }
                    });

                    if(ress.type=='success'){

                        var $row = $('#tr'+ress.id);
                        var uri = "{{url('upimagecartoncina/')}}";
                        tablegudang.row.add([
                            '<input type="checkbox" class="checked_warehouse" name="warehouse[]" value="' + ress.no_ctn + '">',
                            ress.no_resi,
                            ress.no_resi_coload,
                            ress.no_ctn,
                            ress.shipping_mark,
                            ress.volume,
                            ress.berat,
                            ress.tipe_ctn,
                            ress.tanggal,
                            '<span class="font-size-sm badge badge-primary badge-pill">'+ress.status+'</span>',
                            '<button type="button" class="btn btn-light btn-icon btn-image" data-toggle="modal" data-target="#modal_add_images" data-id="'+ress.id+'" data-uri="'+uri+"/"+ress.id+'"><i class="icon-image2"></i></button>'
                        ]).draw();

                        // containerTable.row($row.index()).remove().draw();
                        tablecontainer.row($row).remove().draw(false);


                        var ct = parseInt($('#inputct').val()) - 1;
                        var wh = parseInt($('#inputwh').val()) + 1;
                        $('#countct').html(format_rupiah(ct));
                        $('#countwh').html(format_rupiah(wh));
                        $('#inputct').val(ct);
                        $('#inputwh').val(wh);
                    }

                    $('#barcode').removeAttr('readonly');
                    $('#ketlastcarton').text('Last Carton : '+ress.no_ctn)
                    $('#btnundo').removeClass("disabled")
                }
            });

            $('#barcode').val('').focus();
            return false;
        });

            // cek box input container & warehouse
            var cekbox_container = {};
            var cekbox_warehouse = {};
    
            // LOGIC CONTAINER
            $(document).on('change', '#all_container, .checked_container',function() {
                var len = 0;
                var form = $('#formcontainer');
                // var tablecontainer = $('#table_container').DataTable();
    
                tablecontainer.$('.checked_container').each(function(){
                    var dataId = 'carton_id'+this.value
    
                    if(this.checked){
                        // len += 1
    
                        var cekinput = document.getElementById("carton_id"+this.value);
                        if (!cekinput) {
                            $(form).append(
                                $('<input>')
                                    .attr('type', 'hidden')
                                    .attr('id', dataId)
                                    .attr('class', 'containerinput')
                                    .attr('name', 'container[]')
                                    .val(this.value)
                                );
                            
                            cekbox_container[dataId] = $(this).val()
                        }
                    } else {
                        $(document.getElementById(dataId)).remove()
                        delete cekbox_container[dataId];
                    }
                });
            
                // $('.checked_container:checked').each(function () {
                $('.containerinput').each(function () {
                    len = len+1;
                });
    
                console.log(cekbox_container)
                if(len > 0){
                    $('#btn-container').removeAttr('disabled')
                } else {
                    $('#btn-container').attr('disabled', 'disabled')
                }
            })

            // LOGIC GUDANG
            $(document).on("change", "#all_warehouse, .checked_warehouse", function () {
                // $('#all_warehouse, .checked_warehouse').change(function() {
                let len = 0;
                var form = $('#formwarehouse');
                // var tablecontainer = $('#table_container').DataTable();
    
                tablegudang.$('.checked_warehouse').each(function(){
                    var dataId = 'carton_id'+this.value
    
                    if(this.checked){
                        // len += 1
    
                        var cekinput = document.getElementById("carton_id"+this.value);
                        if (!cekinput) {
                            $(form).append(
                                $('<input>')
                                    .attr('type', 'hidden')
                                    .attr('id', dataId)
                                    .attr('class', 'warehouseinput')
                                    .attr('name', 'warehouse[]')
                                    .val(this.value)
                                );
                            
                                cekbox_warehouse[dataId] = $(this).val()
                        }
                    } else {
                        $(document.getElementById(dataId)).remove()
                        delete cekbox_warehouse[dataId];
                    }
                });

                // $('.checked_warehouse:checked').each(function () {
                $('.warehouseinput').each(function () {
                    len = len+1;
                });

                if(len > 0){
                    $('#btn-warehouse').removeAttr('disabled')
                } else {
                    $('#btn-warehouse').attr('disabled', 'disabled')
                }
            })
    
            /* -------------------- cek cekbox container / warehouse -------------------- */

            $('.datatable-container').on('draw.dt', function() {
                $("#all_container").prop("checked", false);

                $('.datatable-container tbody .checked_container').each(function() {
                    var val = $(this).val();
                    var dataId = 'carton_id'+val;

                    if (cekbox_container[dataId]) {
                        $(this).attr('checked', true);
                    }
                });
            });

            $('.datatable-gudang').on('draw.dt', function() {
                $("#all_warehouse").prop("checked", false);

                $('.datatable-gudang tbody .checked_warehouse').each(function() {
                    var val = $(this).val();
                    var dataId = 'carton_id'+val;

                    if (cekbox_warehouse[dataId]) {
                        $(this).attr('checked', true);
                    }
                });
            });
	</script>
@endsection