@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')

@if(in_array(Auth::user()->role,[2,5]))
    <!-- Page header -->
    {{-- CINA --}}
	<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">货物装载到柜货  -</span> 中国仓库</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 mb-3">
            <div class="card-header d-flex justify-content-between">
                <h3 class="font-weight-light"> 货物在仓库: <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">

                <form action="{{ route('stuffing.warehouse.china') }}" class="form-validate-jquery"  method="post" id="formbarcode" autocomplete="off">
                    @csrf
                    @method('put')
                    <div class="col-lg-7">
						<div class="form-group row">
							<label class="col-form-label col-lg-3">目的港 <span class="text-danger">*</span></label>
							<div class="col-lg-9">
								<select name="shipping_to" id="shipping_to1" onchange="sinc_input()" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" required>
									<option value="">-- 选择目的地 --</option>
									@foreach($shippings as $shipping)
									<option value="{{ $shipping->kode }}">{{ $shipping->kode }}</option>
									@endforeach
								</select>
							</div>
						</div>

                    </div>

                    <div class="col-lg-7">
						<div class="form-group row">
							<label class="col-form-label col-lg-3">条形码</label>
							<div class="col-lg-6">
								<input type="text" name="warehouse" 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">提交条形码 <i class="icon-barcode2 ml-2"></i></button>
							</div>
						</div>
                        {{-- <div class="form-group">
                            <label>Barcode Lists</label>
                            <textarea class="form-control border-teal border-1" name="warehouse" id="barcode" cols="30" rows="10" autofocus></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary text-uppercase float-right">Submit Barcode <i class="icon-barcode2 ml-2"></i></button> --}}
                    </div>
                </form>

                <form action="{{url('stuffingcinabyupload')}}" id="form-stuffbyexcel" class="form-validate-jquery" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('put')
                    <div class="col-lg-7 mt-2">
                        <div class="form-group row">
                            <label class="col-form-label col-lg-3">Stuffing By Excel </label>
                            <div class="col-lg-6">
                                <input type="file" name="excel_file" class="form-control border-teal border-1 mb-1" required>
                                <span>* Pastikan Kolom / Row A1 berisi <span class="font-weight-semibold">'Resi Evatrack'</span></span> <br>
                                <span>* Pastikan hanya kolom <span class="font-weight-semibold">A</span> saja yang terisi </span> <br>
                                <span>* Pastikan ketika melakukan proses stuffing by excel, tujuan resi yang ada di excel <span class="text-danger font-weight-semibold">Sama Semua</span></span> <br>
                                <span>
                                    <a href="{{url('/global_assets/template_excelstuffing.xls')}}" download>
                                    Contoh Template</a>
                                </span>
                                <input type="hidden" id="ship_to_excel" name="ship_to_excel">
                            </div>
                            <div class="col-lg-3">
                                <button type="submit" class="btn btn-success text-uppercase">Upload <i class="icon-upload7 ml-2"></i></button>
                            </div>
                        </div>
                    </div>
                </form>

                <hr>

                <hr>
                <form action="{{ route('stuffing.warehouse.china') }}" id="formwarehouse" onsubmit="return cekvalidasi()" method="post">
                    @csrf
                    @method('put')
                    <input type="hidden" name="shipping_to" id="shipping_to2" value="">
                    <input type="hidden" name="no_container" id="no_container2" value="">
                    <input type="hidden" name="no_seal" id="no_seal2" value="">
                    <table class="table datatable-basic datatable-gudang table-hover" id="table_gudang">
                        <thead>
                            <tr>
                                <th align="center" data-orderable='false'>
                                    <input type="checkbox" id="all_warehouse" @if(!in_array(\Auth::user()->role,[1,2,10])) disabled @endif>
                                </th>
                                <th>流水号</th>
                                <th>箱号码</th>
                                <th>唛头</th>
                                <th>总立方 (m3)</th>
                                <th>总重 (kg)</th>
                                <th>日期和时间</th>
                                <th class="text-center">状态</th>
                                <th class="text-center">行动</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    {{-- <button type="button" class="btn btn-light float-left offset" onclick="handleMoveWarehouse()">Move Item</button> --}}
                    @if(in_array(\Auth::user()->role,[1,2,10]))
                    <div class="row mt-3">
                        <div class="col">
                            <button type="submit" id="btn-warehouse" class="btn btn-primary float-left @if(!$warehouses->isEmpty()) offset @endif" disabled>移动到柜货</button>
                        </div>
                    </div>
                    @endif
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-header d-flex justify-content-between">
                <h3 class="font-weight-light"> 货物已经放在柜货: <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="row">
                    <div class="col-lg-2">
                        <a id="btnundo" href="{{ url('undocinastuffing')}}" class="btn btn-warning {{ $setting->cina_last_stuffing_id == null? 'disabled' : '' }}" >
                            <i class="icon-undo mr-2"></i> Undo Last Stuffing
                        </a>
                        <span id="ketlastcarton">Last Carton : {{$laststuffingcina?@$laststuffingcina->stuffingcina->no_ctn:'-'}}</span>
                    </div>
                    
                </div>
                <hr>
                
                <form action="{{ route('stuffing.container.china') }}" method="post" id="formcontainer">
                    @csrf
                    @method('put')
                    <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">
                                </th>
                                <th>流水号</th>
                                <th>箱号码</th>
                                {{-- <th>柜货编号</th>
                                <th>柜货封号</th> --}}
                                <th>唛头</th>
                                <th>总立方 (m3)</th>
                                <th>总重 (kg)</th>
                                <th>日期和时间</th>
                                <th class="text-center">状态</th>
                                <th class="text-center">行动</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                    <div class="form-group row">
                        <label class="col-form-label col-lg-3">柜货编号 <span class="text-danger">*</span></label>
                        <div class="col-lg-9">
                            <input type="text" name="no_container" id="no_container1" onkeydown="sinc_input()" class="form-control border-teal border-1" placeholder="柜货编号" value="">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-lg-3">柜货封号 <span class="text-danger">*</span></label>
                        <div class="col-lg-9">
                            <input type="text" name="no_seal" id="no_seal1" onkeydown="sinc_input()" class="form-control border-teal border-1" placeholder="柜货封号" value="">
                        </div>
                    </div>
                    <div class="mt-2">
                        <p class="text-danger">* Check minimal 1 checkbox at 货物已经放在柜货 to Claim Departure</p>
                        <p class="text-danger">* fill the 柜货编号 & 柜货封号 to Claim Departure & Claim All Departure</p>
                    </div>
                    <hr>
                    <div class="d-flex">
                        <button type="submit" id="btn-container" style="margin-right:15px" class="btn btn-warning float-left " disabled>货退回仓库</button>
                        <button id="btn-departure" class="btn btn-success float-left " disabled>提交 （运送货物） <i class="icon-paperplane ml-2"></i></button>
                        <a id="btn-move-all" data-toggle="modal" data-target="#modal_theme_move" data-uri="{{url('moveallcontainerdelivery')}}">
                            <button type="button" id="btnpremove" class="btn btn-info text-uppercase ml-2" disabled>
                                Claim All Departure <i class="icon-ship ml-1"></i>
                            </button>
                        </a>
                    </div>
                </form>
            </div>
        </div>
	</div>

    <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
                    <input type="hidden" id="no_container_mod" name="no_container">
                    <input type="hidden" id="no_seal_mod" name="no_seal">
					<div class="modal-body" align="center">
						<h2> Claim departure all goods at container ? </h2>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
						<button type="submit" class="btn bg-warning">Yes</button>
					</div>
				</form>
			</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" 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">提交</button>
                            </div>
                        </div>
                        <div id="card-img-body" class="row">

                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /horizontal form modal -->

{{-- INDONESIA --}}
@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">Stuffing To Container -</span> Warehouse China</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 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">

                <form action="{{ route('stuffing.warehouse.china') }}" class="form-validate-jquery"  method="post" id="formbarcode" autocomplete="off">
                    @csrf
                    @method('put')
                    <div class="col-lg-7">
						<div class="form-group row">
							<label class="col-form-label col-lg-3">Destination Port <span class="text-danger">*</span></label>
							<div class="col-lg-9">
								<select name="shipping_to" id="shipping_to1" onchange="sinc_input()" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" required>
									<option value="">-- Choose Destination --</option>
									@foreach($shippings as $shipping)
									<option value="{{ $shipping->kode }}">{{ $shipping->kode }}</option>
									@endforeach
								</select>
							</div>
						</div>
						{{-- <div class="form-group row">
							<label class="col-form-label col-lg-3">No. Container <span class="text-danger">*</span></label>
							<div class="col-lg-9">
								<input type="text" name="no_container" id="no_container1" onkeydown="sinc_input()" class="form-control border-teal border-1" placeholder="No. Container" value="" required>
							</div>
						</div>
						<div class="form-group row">
							<label class="col-form-label col-lg-3">No. Seal <span class="text-danger">*</span></label>
							<div class="col-lg-9">
								<input type="text" name="no_seal" id="no_seal1" onkeydown="sinc_input()" class="form-control border-teal border-1" placeholder="No. Seal" value="" required>
							</div>
						</div> --}}
                    </div>

                    <div class="col-lg-7">
						<div class="form-group row">
							<label class="col-form-label col-lg-3">Barcode</label>
							<div class="col-lg-6">
								<input type="text" name="warehouse" 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>
                        {{-- <div class="form-group">
                            <label>Barcode Lists</label>
                            <textarea class="form-control border-teal border-1" name="warehouse" id="barcode" cols="30" rows="10" autofocus></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary text-uppercase float-right">Submit Barcode <i class="icon-barcode2 ml-2"></i></button> --}}
                    </div>

                </form>

                <form action="{{url('stuffingcinabyupload')}}" id="form-stuffbyexcel" class="form-validate-jquery" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('put')
                    <div class="col-lg-7 mt-2">
                        <div class="form-group row">
                            <label class="col-form-label col-lg-3">Stuffing By Excel </label>
                            <div class="col-lg-6">
                                <input type="file" name="excel_file" class="form-control border-teal border-1 mb-1" required>
                                <span>* Pastikan Kolom / Row A1 berisi <span class="font-weight-semibold">'Resi Evatrack'</span></span> <br>
                                <span>* Pastikan hanya kolom <span class="font-weight-semibold">A</span> saja yang terisi </span> <br>
                                <span>* Pastikan ketika melakukan proses stuffing by excel, tujuan resi yang ada di excel <span class="text-danger font-weight-semibold">Sama Semua</span></span> <br>
                                <span>
                                    <a href="{{url('/global_assets/template_excelstuffing.xls')}}" download>
                                    Contoh Template</a>
                                </span>
                                <input type="hidden" id="ship_to_excel" name="ship_to_excel">
                            </div>
                            <div class="col-lg-3">
                                <button type="submit" class="btn btn-success text-uppercase">Upload <i class="icon-upload7 ml-2"></i></button>
                            </div>
                        </div>
                    </div>
                </form>

                <hr>

                <form action="{{ route('stuffing.warehouse.china') }}" id="formwarehouse" onsubmit="return cekvalidasi()" method="post">
                    @csrf
                    @method('put')
                    <input type="hidden" name="shipping_to" id="shipping_to2" value="">
                    {{-- <input type="hidden" name="no_container" id="no_container2" value="">
                    <input type="hidden" name="no_seal" id="no_seal2" value=""> --}}
                    <table class="table datatable-basic datatable-gudang table-hover" id="table_gudang">
                        <thead>
                            <tr>
                                <th align="center" data-orderable='false'>
                                    <input type="checkbox" id="all_warehouse" @if(!in_array(\Auth::user()->role,[1,8,9,10])) disabled @endif>
                                </th>
                                <th>No. Receipt</th>
                                <th>No. Carton</th>
                                <th>Shipping Marks</th>
                                <th>Volume (m3)</th>
                                <th>Weight (kg)</th>
                                <th>Date & Time</th>
                                <th>Shipping Instruction</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    {{-- <button type="button" class="btn btn-light float-left offset" onclick="handleMoveWarehouse()">Move Item</button> --}}
                    @if(in_array(\Auth::user()->role,[1,8,9,10]))
                    <div class="row mt-3">
                        <div class="col">
                            <button type="submit" id="btn-warehouse" class="btn btn-primary @if(!$warehouses->isEmpty()) offset @endif" disabled>Move To Container</button>
                        </div>
                    </div>
                    @endif
                </form>
            </div>
        </div>


        <div class="card">
            <div class="card-header d-flex justify-content-between">
                <h3 class="font-weight-light"> Barang Sudah Naik 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="row">
                    <div class="col-lg-2">
                        <a id="btnundo" href="{{ url('undocinastuffing')}}" class="btn btn-warning {{ $laststuffingcina == null? 'disabled' : '' }}" >
                            <i class="icon-undo mr-2"></i> Undo Last Stuffing
                        </a>
                        <span id="ketlastcarton">Last Carton : {{$laststuffingcina?@$laststuffingcina->stuffingcina->no_ctn:'-'}}</span>
                    </div>
                    
                </div>
                <hr>

                <form action="{{ route('stuffing.container.china') }}" method="post" id="formcontainer">
                    @csrf
                    @method('put')
                    <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">
                                </th>
                                <th>No. Receipt</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>Date & Time</th>
                                <th>Shipping Instruction</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>

                    <hr>
                    <div>
                        <div class="form-group row">
							<label class="col-form-label col-lg-3">No. Container <span class="text-danger">*</span></label>
							<div class="col-lg-9">
								<input type="text" name="no_container"
                                       id="no_container1" class="form-control border-teal border-1"
                                       placeholder="No. Container" value=""
                                >
							</div>
						</div>
						<div class="form-group row">
							<label class="col-form-label col-lg-3">No. Seal <span class="text-danger">*</span></label>
							<div class="col-lg-9">
								<input type="text" name="no_seal" id="no_seal1" class="form-control border-teal border-1" placeholder="No. Seal" value="">
							</div>
						</div>
						<div class="form-group row">
							<label class="col-form-label col-lg-3">Kode Sealine / SCAC <span class="text-danger">*</span></label>
							<div class="col-lg-9">
								<select name="sealine"
                        id="sealine"
                        class="form-control form-control-select2"
                        data-container-css-class="border-teal"
                        data-dropdown-css-class="border-teal"
                        placeholder="Sealine / SCAC"
                >
                  @foreach(config('custom.sealines') as $key => $value)
                  <option value="{{$key}}">{{$value}}</option>
                  @endforeach
                </select>
							</div>
						</div>
                        <div class="form-group row">
							<label class="col-form-label col-lg-3">ETA </label>
							<div class="col-lg-9">
								<input type="text" name="eta" id="eta" class="form-control daterange-single border-teal border-1" placeholder="Input Eta" value="{{date('Y-m-d')}}">
							</div>
						</div>
                  </div>

                    <div class="mt-2">
                        <p class="text-danger">* Cek minimal 1 cekbox di barang sudah naik container untuk Claim Departure</p>
                        <p class="text-danger">* Isi No. Container dan No. Seal terlebih dahulu untuk Claim Departure & Claim All Departure</p>
                    </div>
                    <hr>
                    <div class="d-flex">
                        <button type="submit" id="btn-container" style="margin-right:15px" class="btn btn-warning float-left " disabled>Back To Warehouse</button>
                        <button id="btn-departure" class="btn btn-success float-left " disabled>Claim Departure <i class="icon-paperplane ml-2"></i></button>
                        <a id="btn-move-all" data-toggle="modal" data-target="#modal_theme_move" data-uri="{{url('moveallcontainerdelivery')}}">
                            <button type="button" id="btnpremove" class="btn btn-info text-uppercase ml-2" disabled>
                                Claim All Departure <i class="icon-ship ml-1"></i>
                            </button>
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <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
                    <input type="hidden" id="no_container_mod" name="no_container">
                    <input type="hidden" id="no_seal_mod" name="no_seal">
                    <input type="hidden" id="eta_mod" name="eta">
					<div class="modal-body" align="center">
						<h2> Claim departure semua barang di container ? </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">Ya</button>
					</div>
				</form>
			</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" 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 -->

@endif

@endsection

@section('js')

@if(in_array(Auth::user()->role,[2,5]))
{{-- JS CINA --}}

	<!-- 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('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/pickadate/picker.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.date.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/loaders/blockui.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>

		$(document).on('click','#btnpremove', function(e) {
            var container = $('#no_container1').val();
            var seal = $('#no_seal1').val();

            if (container == '' || seal == ''){
                new PNotify({
                        title: 'Error',
                        text: 'Check your No Container or No Seal input.',
                        icon: 'icon-blocked',
                        type: 'error'
                    });
                    return false;
                    e.preventDefault()
                // $('#btnpremove').attr('disabled', 'disabled')
            }
        })

        $(document).on('change', '#shipping_to1', function() {
            var destination = $('#shipping_to1 option:selected').val()
            console.log(destination)
            $('#ship_to_excel').val(destination)
        })

        $(document).on('submit', '#form-stuffbyexcel', function(e) {
            var destination = $('#shipping_to1 option:selected').val()
            // console.log(destination)
            if (destination == '' || destination == undefined ) {
                console.log('destinasi kosong')
                new PNotify({
                        title: 'Error',
                        text: 'Please select destination first.',
                        icon: 'icon-blocked',
                        type: 'error'
                    });
                return false;
                e.preventDefault()
            }
            $('#form-stuffbyexcel').submit()
            console.log('submit')
        })

        $(document).ready(function() {
            var countct = $('#inputct').val();
            if (countct == 0){
                $('#btnpremove').attr('disabled', 'disabled')
            } else {
                $('#btnpremove').removeAttr('disabled')
            }

            // Single picker
            $('.daterange-single').daterangepicker({
                singleDatePicker: true,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            })

        })

        $(document).on("click", "#btn-move-all", function () {
            var url = $(this).data('uri');
            var container = $('#no_container1').val();
            var seal = $('#no_seal1').val();
            var eta = $('#eta').val();

            $('#no_container_mod').val(container);
            $('#no_seal_mod').val(seal);
            $('#eta_mod').val(eta);

            $("#moveform").attr("action", url);
        });

        //modal delete
		$(document).on("click", ".delbutton", function () {
		     var url = $(this).data('uri');
		     $("#delform").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 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);
            }
        })

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

        // PREVENT NULL CHECKBOX
        $(document).on('change', '#all_warehouse, .checked_warehouse', function() {
            let len = 0;
            $('.checked_warehouse:checked').each(function () {
                len = len+1;
            });

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

        // PREVENT NULL CHECKBOX
        // $(document).on("change", "#all_container, .checked_container", function () {
        // // $('#all_container, .checked_container').change(function() {
        //     let len = 0;
        //     $('.checked_container:checked').each(function () {
        //         len = len+1;
        //     });

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

		// 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, 8 ]
		//             }],
		//             dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"p>',
		//             language: {
		//                 search: '<span>过滤:</span> _INPUT_',
		//                 searchPlaceholder: '打字于过滤...',
		//                 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.china")}}",
		// 				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: function(d){
		// 					d.type = 1;
		// 				}
		// 			},
		// 			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: "no_ctn",
		// 					name: "no_ctn"
		// 				},
		// 				{
		// 					data: "shipping_mark",
		// 					name: "shipping_mark"
		// 				},
		// 				{
		// 					data: "total_volume",
		// 					name: "total_volume",
		// 				},
		// 				{
		// 					data: "total_berat",
		// 					name: "total_berat"
		// 				},
		// 				{
		// 					data: "created_at",
		// 					name: "created_at",
		// 				},
        //                 {
		// 					data: "shipping_to",
		// 					name: "shipping_to",
		// 				},
		// 				{
		// 					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.china")}}",
		// 				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: function(d){
		// 					d.type = 2;
		// 				}
		// 			},
		// 			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_ctn",
		// 					name: "no_ctn"
		// 				},
		// 				{
		// 					data: "shipping_mark",
		// 					name: "shipping_mark"
		// 				},
		// 				{
		// 					data: "total_volume",
		// 					name: "total_volume",
		// 				},
		// 				{
		// 					data: "total_berat",
		// 					name: "total_berat"
		// 				},
		// 				{
		// 					data: "created_at",
		// 					name: "created_at",
		// 				},
        //                 {
		// 					data: "shipping_to",
		// 					name: "shipping_to",
		// 				},
		// 				{
		// 					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>`
		// 					}
		// 				}

		// 			]
		// 		});


		//         // 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">

        function format_rupiah(num){

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

        }

        // Single picker
        $('.daterange-single').daterangepicker({
            singleDatePicker: true,
            locale: {
                format: 'YYYY-MM-DD'
            }
        })

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

		$( document ).ready(function() {

			var select = $('.form-control-select2').select2().on('change', function() {
                            $(this).valid();
                        });

            var validForm1 = $('#formbarcode').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);
                    }
                },
            });

            // var warehouseTable = $('#table_warehouse').DataTable();

            // var containerTable = $('#table_container').DataTable({
            //                                             "columnDefs": [ {
            //                                                 // "targets": 9,
            //                                                 "targets": 8,
            //                                                 "className": 'text-center ct_status'
            //                                                 }, {
            //                                                 // "targets": [0,10],
            //                                                 "targets": [0,8],
            //                                                 "className": 'text-center',
            //                                                 'orderable': false,
            //                                                 'width': 50,
            //                                                 },

            //                                             ]
            //                                         });

            // $('#formwarehouse').on('submit', function(){
            //     var form = this;

            //     // Iterate over all checkboxes in the table
            //     $('.datatable-gudang').find('input[type="checkbox"]').each(function(){
            //         // If checkbox doesn't exist in DOM
            //         if(!$.contains(document, this)){
            //             // If checkbox is checked
            //             if(this.checked){
            //                 // Create a hidden element
            //                 $(form).append(
            //                 $('<input>')
            //                     .attr('type', 'hidden')
            //                     .attr('name', this.name)
            //                     .val(this.value)
            //                 );
            //             }
            //         }
            //     });

            // });

            // $('#formcontainer').on('submit', function(){
            //     var form = this;

            //     // Iterate over all checkboxes in the table
            //     $('.datatable-container').find('input[type="checkbox"]').each(function(){
            //         // If checkbox doesn't exist in DOM
            //         if(!$.contains(document, this)){
            //             // If checkbox is checked
            //             if(this.checked){
            //                 // Create a hidden element
            //                 $(form).append(
            //                 $('<input>')
            //                     .attr('type', 'hidden')
            //                     .attr('name', this.name)
            //                     .val(this.value)
            //                 );
            //             }
            //         }
            //     });

            // });

            $('#btn-departure').on('click', function(e){
                e.preventDefault()
                var container = $('#no_container1').val();
                var seal = $('#no_seal1').val();
                if (container == '' || seal == '') {
                    new PNotify({
                        title: 'Error',
                        text: 'Check your No Container or No Seal input.',
                        icon: 'icon-blocked',
                        type: 'error'
                    });

                    return false;
                }else {
                    $('#formcontainer').attr('action', "{{ url('setdeparture') }}");
                    $('#formcontainer').submit();
                }
            });

            var tablegudang = $('.datatable-gudang').DataTable({
                processing: true,
                serverSide: true,
                scrollX: true,
                ajax: {
                    url: "{{route("stuffing.create.china")}}",
                    method: "GET",
                    rowId: function(data){
                        return 'tr' + data?.id;
                    },
                    columnDefs: [{ orderable: false, targets: 0 }],
                    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: function(d){
                        d.type = 1;
                    }
                },
                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,8,9,10])) disabled @endif>`
                        }

                    },
                    {
                        data: "no_receipt",
                        name: "no_receipt",
                    },
                    {
                        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: "created_at",
                        name: "created_at",
                    },
                    {
                        data: "shipping_to",
                        name: "shipping_to",
                    },
                    {
                        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>`
                        }
                    }

                ]
            });

            var tablecontainer = $('.datatable-container').DataTable({
                processing: true,
                serverSide: true,
                scrollX: true,
                ajax: {
                    url: "{{route("stuffing.create.china")}}",
                    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: function(d){
                        d.type = 2;
                    }
                },
                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_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: "created_at",
                        render: (data, type, row) => {
                            return data?.created_at ?? null;
                        }
                    },
                    {
                        data: null,
                        name: "shipping_to",
                        render: (data, type, row) => {
                            return data?.shipping_to ?? 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>`
                        }
                    }

                ]
            });

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

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

                $.ajax({
                    type: 'POST',
                    url: "{{ route('stuffing.warehouse.china') }}",
                    data: $('#formbarcode').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()));
                            }
                        });

                        // console.log(ress);
                        if(ress.type=='success'){

                            var $row = $('#tr'+ress.id);
                            var uri = "{{url('upimagecartoncina/')}}";
                            tablecontainer.row.add([
                                '<input type="checkbox" class="checked_container" name="container[]" value="' + ress.no_ctn + '">',
                                ress.no_resi,
                                ress.no_ctn,
                                // ress.no_container,
                                // ress.no_seal,
                                ress.shipping_mark,
                                ress.volume,
                                ress.berat,
                                ress.tanggal,
                                ress.shipping_to,
                                '<span class="font-size-sm badge badge-warning badge-pill">'+ress.status+'</span>',
                                '<div style="text-align:center;"><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></div>'
                            ]).draw();

                            // hapus row data yang di scan/submit dari tabel warehouse
                            // console.log(warehouseTable.row($row.index()))
                            // warehouseTable.row($row.index()).remove().draw();
                            // $('.datatable-gudang').row($row).remove().draw(false);
                            tablegudang.row($row).remove().draw(false);

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

                        $('#barcode').removeAttr('readonly');

                        // console.log(ress.no_ctn)
                        $('#ketlastcarton').text('Last Carton : '+ress.no_ctn)
                        $('#btnundo').removeClass("disabled")
                    },
                    error:function() {
                        new PNotify({
                            title: 'Error',
                            text: 'Nomor Karton tidak ditemukan',
                            icon: 'icon-blocked',
                            type: 'error'
                        });


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

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

            // cek box input container & warehouse
            var cekbox_warehouse = {};
            var cekbox_container = {};

            // 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')
                }
            })
            
            // 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;
                });
    
                if(len > 0){
                    $('#btn-container').removeAttr('disabled')
                    $('#btn-departure').removeAttr('disabled')
                } else {
                    $('#btn-container').attr('disabled', 'disabled')
                    $('#btn-departure').attr('disabled', 'disabled')
                }
            })

            /* -------------------- cek cekbox container / warehouse -------------------- */

            $('.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);
                    }
                });
            });

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


		});

        function cekvalidasi() {
            var cek = $('#formbarcode').validate().form();
            if(!cek) {
                // alert('请填写目的港、柜货号、柜货封号');
                alert('Please fill Destination Port.');
                return false;
            }
            return true;
        }

        function sinc_input(){
            $('#shipping_to2').val($('#shipping_to1').val());
            // $('#no_container2').val($('#no_container1').val());
            // $('#no_seal2').val($('#no_seal1').val());
        }

	</script>

@else

{{-- JS INDO --}}
{{-- -------------------------------------- --}}

<!-- 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('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/pickadate/picker.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.date.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/loaders/blockui.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>

        $(document).on('click','#btnpremove', function(e) {
            var container = $('#no_container1').val();
            var seal = $('#no_seal1').val();

            if (container == '' || seal == ''){
                new PNotify({
                        title: 'Error',
                        text: 'Check your No Container or No Seal input.',
                        icon: 'icon-blocked',
                        type: 'error'
                    });
                    return false;
                    e.preventDefault()
                // $('#btnpremove').attr('disabled', 'disabled')
            }
        })

        $(document).on('change', '#shipping_to1', function() {
            var destination = $('#shipping_to1 option:selected').val()
            console.log(destination)
            $('#ship_to_excel').val(destination)
        })

        $(document).on('submit', '#form-stuffbyexcel', function(e) {
            var destination = $('#shipping_to1 option:selected').val()
            // console.log(destination)
            if (destination == '' || destination == undefined ) {
                console.log('destinasi kosong')
                new PNotify({
                        title: 'Error',
                        text: 'Please select destination first.',
                        icon: 'icon-blocked',
                        type: 'error'
                    });
                return false;
                e.preventDefault()
            }
            $('#form-stuffbyexcel').submit()
            console.log('submit')
        })

        $(document).ready(function() {
            var countct = $('#inputct').val();
            if (countct == 0){
                $('#btnpremove').attr('disabled', 'disabled')
            } else {
                $('#btnpremove').removeAttr('disabled')
            }

            // Single picker
            $('.daterange-single').daterangepicker({
                singleDatePicker: true,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            })
        })


        $(document).on("click", "#btn-move-all", function () {
            var url = $(this).data('uri');
            var container = $('#no_container1').val();
            var seal = $('#no_seal1').val();
            var eta = $('#eta').val();
            var sealine = $('#sealine').val();

            $('#no_container_mod').val(container);
            $('#no_seal_mod').val(seal);
            $('#eta_mod').val(eta);
            $('#sealine_mod').val(sealine);

            $("#moveform").attr("action", url);
        });

		//modal delete
		$(document).on("click", ".delbutton", function () {
		     var url = $(this).data('uri');
		     $("#delform").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 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);
            }
        })

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

        // // PREVENT NULL CHECKBOX
        // $(document).on('change', '#all_warehouse, .checked_warehouse', function() {
        //     let len = 0;
        //     $('.checked_warehouse:checked').each(function () {
        //         len = len+1;
        //     });

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

        // $(document).on("change", "#all_container, .checked_container", function () {
        // // $('#all_container, .checked_container').change(function() {
        //     let len = 0;
        //     $('.checked_container:checked').each(function () {
        //         len = len+1;
        //     });

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

		// 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-gudang').DataTable({
		// 		// 	processing: true,
		// 		// 	serverSide: true,
		// 		// 	scrollX: true,
		// 		// 	ajax: {
		// 		// 		url: "{{route("stuffing.create.china")}}",
		// 		// 		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: function(d){
		// 		// 			d.type = 1;
		// 		// 		}
		// 		// 	},
		// 		// 	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: "no_ctn",
		// 		// 			name: "no_ctn"
		// 		// 		},
		// 		// 		{
		// 		// 			data: "shipping_mark",
		// 		// 			name: "shipping_mark"
		// 		// 		},
		// 		// 		{
		// 		// 			data: "total_volume",
		// 		// 			name: "total_volume",
		// 		// 		},
		// 		// 		{
		// 		// 			data: "total_berat",
		// 		// 			name: "total_berat"
		// 		// 		},
		// 		// 		{
		// 		// 			data: "created_at",
		// 		// 			name: "created_at",
		// 		// 		},
        //         //         {
		// 		// 			data: "shipping_to",
		// 		// 			name: "shipping_to",
		// 		// 		},
		// 		// 		{
		// 		// 			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.china")}}",
		// 		// 		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: function(d){
		// 		// 			d.type = 2;
		// 		// 		}
		// 		// 	},
		// 		// 	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_ctn",
		// 		// 			name: "no_ctn"
		// 		// 		},
		// 		// 		{
		// 		// 			data: "shipping_mark",
		// 		// 			name: "shipping_mark"
		// 		// 		},
		// 		// 		{
		// 		// 			data: "total_volume",
		// 		// 			name: "total_volume",
		// 		// 		},
		// 		// 		{
		// 		// 			data: "total_berat",
		// 		// 			name: "total_berat"
		// 		// 		},
		// 		// 		{
		// 		// 			data: "created_at",
		// 		// 			name: "created_at",
		// 		// 		},
        //         //         {
		// 		// 			data: "shipping_to",
		// 		// 			name: "shipping_to",
		// 		// 		},
		// 		// 		{
		// 		// 			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>`
		// 		// 			}
		// 		// 		}

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

		//         // 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">

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

		$( document ).ready(function() {

			var select = $('.form-control-select2').select2().on('change', function() {
                            $(this).valid();
                        });

            var validForm1 = $('#formbarcode').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);
                    }
                },
            });

            // var warehouseTable = $('#table_warehouse').DataTable();

            // var containerTable = $('#table_container').DataTable({
            //                                             "columnDefs": [ {
            //                                                 "targets": 9,
            //                                                 "className": 'text-center ct_status'
            //                                                 }, {
            //                                                 // "targets": [0,11],
            //                                                 "targets": [0,9],
            //                                                 "className": 'text-center',
            //                                                 'orderable': false,
            //                                                 'width': 50,
            //                                                 },

            //                                             ]
            //                                         });


            // $('#formwarehouse').on('submit', function(){
            //     var form = this;

            //     // Iterate over all checkboxes in the table
            //     $('.datatable-gudang').find('input[type="checkbox"]').each(function(){
            //         // If checkbox doesn't exist in DOM
            //         if(!$.contains(document, this)){
            //             // If checkbox is checked
            //             if(this.checked){
            //                 // Create a hidden element
            //                 $(form).append(
            //                 $('<input>')
            //                     .attr('type', 'hidden')
            //                     .attr('name', this.name)
            //                     .val(this.value)
            //                 );
            //             }
            //         }
            //     });

            // });

            // $('#formcontainer').on('submit', function(){
            //     var form = this;

            //     // Iterate over all checkboxes in the table
            //     $('.datatable-container').find('input[type="checkbox"]').each(function(){
            //         // If checkbox doesn't exist in DOM
            //         if(!$.contains(document, this)){
            //             // If checkbox is checked
            //             if(this.checked){
            //                 // Create a hidden element
            //                 $(form).append(
            //                 $('<input>')
            //                     .attr('type', 'hidden')
            //                     .attr('name', this.name)
            //                     .val(this.value)
            //                 );
            //             }
            //         }
            //     });

            // });

            $('#btn-departure').on('click', function(e){
                e.preventDefault()
                var container = $('#no_container1').val();
                var seal = $('#no_seal1').val();
                if (container == '' || seal == '') {
                    new PNotify({
                        title: 'Error',
                        text: 'Check your No Container or No Seal input.',
                        icon: 'icon-blocked',
                        type: 'error'
                    });

                    return false;
                }else {
                    $('#formcontainer').attr('action', "{{ url('setdeparture') }}");
                    $('#formcontainer').submit();
                }
            });

            var tablegudang = $('.datatable-gudang').DataTable({
                processing: true,
                serverSide: true,
                scrollX: true,
                ajax: {
                    url: "{{route("stuffing.create.china")}}",
                    method: "GET",
                    rowId: function(data){
                        return 'tr' + data?.id;
                    },
                    columnDefs: [{ orderable: false, targets: 0 }],
                    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: function(d){
                        d.type = 1;
                    }
                },
                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,8,9,10])) disabled @endif>`
                        }

                    },
                    {
                        data: null,
                        name: "no_receipt",
                        render: (data, type, row) => {
                            return data?.no_receipt ?? 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: "created_at",
                        render: (data, type, row) => {
                            return data?.created_at ?? null;
                        }
                    },
                    {
                        data: null,
                        name: "shipping_to",
                        render: (data, type, row) => {
                            return data?.shipping_to ?? 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 tablecontainer = $('.datatable-container').DataTable({
                processing: true,
                serverSide: true,
                scrollX: true,
                ajax: {
                    url: "{{route("stuffing.create.china")}}",
                    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: function(d){
                        d.type = 2;
                    }
                },
                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_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: "created_at",
                        render: (data, type, row) => {
                            return data?.created_at ?? null;
                        }
                    },
                    {
                        data: null,
                        name: "shipping_to",
                        render: (data, type, row) => {
                            return data?.shipping_to ?? 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>`
                        }
                    }

                ]
            });

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

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

                $.ajax({
                    type: 'POST',
                    url: "{{ route('stuffing.warehouse.china') }}",
                    data: $('#formbarcode').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()));
                            }
                        });

                        // console.log(ress);
                        if(ress.type=='success'){

                            var $row = $('#tr'+ress.id);
                            var uri = "{{url('upimagecartoncina/')}}";
                            tablecontainer.row.add([
                                '<input type="checkbox" class="checked_container" name="container[]" value="' + ress.no_ctn + '">',
                                ress.no_resi,
                                ress.no_ctn,
                                // ress.no_container,
                                // ress.no_seal,
                                ress.shipping_mark,
                                ress.volume,
                                ress.berat,
                                ress.tanggal,
                                ress.shipping_to,
                                '<span class="font-size-sm badge badge-warning badge-pill">'+ress.status+'</span>',
                                '<div style="text-align:center;"><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></div>'
                            ]).draw();

                            // hapus row data yang di scan/submit dari tabel warehouse
                            // console.log(warehouseTable.row($row.index()))
                            // warehouseTable.row($row.index()).remove().draw();
                            // $('.datatable-gudang').row($row).remove().draw(false);
                            tablegudang.row($row).remove().draw(false);

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

                        $('#barcode').removeAttr('readonly');

                        // console.log(ress.no_ctn)
                        $('#ketlastcarton').text('Last Carton : '+ress.no_ctn)
                        $('#btnundo').removeClass("disabled")
                    },
                    error:function() {
                        new PNotify({
                            title: 'Error',
                            text: 'Nomor Karton tidak ditemukan',
                            icon: 'icon-blocked',
                            type: 'error'
                        });


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

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

            // cek box input container & warehouse
            var cekbox_warehouse = {};
            var cekbox_container = {};

            // 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')
                }
            })
            
            // 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;
                });
    
                if(len > 0){
                    $('#btn-container').removeAttr('disabled')
                    $('#btn-departure').removeAttr('disabled')
                } else {
                    $('#btn-container').attr('disabled', 'disabled')
                    $('#btn-departure').attr('disabled', 'disabled')
                }
            })

            /* -------------------- cek cekbox container / warehouse -------------------- */

            $('.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);
                    }
                });
            });

            $('.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);
                    }
                });
            });

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


		});

        function cekvalidasi() {
            var cek = $('#formbarcode').validate().form();
            if(!cek) {
                // alert('Please fill Destination Port, No. Container & No. Seal');
                alert('Please fill Destination Port.');
                return false;
            }
            return true;
        }

        function sinc_input(){
            $('#shipping_to2').val($('#shipping_to1').val());
            // $('#no_container2').val($('#no_container1').val());
            // $('#no_seal2').val($('#no_seal1').val());
        }

	</script>

@endif

@endsection