@extends('layouts.template')

@section('content')      
<section class="booking-update" id="accident-status">
<div class="container" style="width:97% !important">
  <div class="row">
    <h1 class="heading" style="margin-left:10px;margin-right:10px;">Booking Update  :  
      @if(Auth::user()->logistic_type == '2') 
        <span style="background-color:#d9534f;padding:1px;border:1px solid #d9534f;color:white;font-size:66%;font-weight:700;">Export</span>
      @endif  

      @if(Auth::user()->logistic_type == '1') 
        <span style="background-color:#d9534f;padding:1px;border:1px solid #d9534f;color:white;font-size:66%;font-weight:700;">Import </span>
      @endif
      <a href="{{ url('logistic/dashboard') }}" title="back"><i class="fa fa-undo" aria-hidden="true"></i></a>
      <span class="label label-danger" style="float:right;font-size: 52%;margin-right: 10px;">Total : {{ $count }} Alarm </span>
    </h1>
    @if(Session::has('flash_message'))
      <div class="row">
        <div class="col-md-12">
            <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('flash_message') }}</p>
        </div> 
      </div>   
    @endif
    <div class="table-heading" style="padding:0;">
      <h4 class="col-md-3 col-sm-3 col-xs-12" style="padding-left:10px;">Booking Update</h4>
      <div class="col-md-9 col-sm-9 col-xs-12" style="margin-top: 5px;">
        <a href="{{ route('logistic.order.vessel') }}" style="font-size:12px;background:unset;"><i><b><u>Schedule</u></b></i></a>
        {!! Form::open(['method' => 'GET', 'url' => '/logistic/order', 'role' => 'search', 'id' => "searchFieldForm"])  !!}
          <span><input type="text" placeholder="search by Booking no, Customer , Shipper , Shipping line, Cargo type" name="search" > </span>
        {!! Form::close() !!}
        <input type="checkbox" name="checkboxitem" style="width: 15px;" id="showallItemId">  Show All
        <a href="{{ url('/logistic/order/create') }}" class="newbooking" title="Create New Booking" style="margin-right:5px;">create new booking</a>
       <!--  @if(Auth::user()->logistic_type == '1')
          <a href="{{ URL::to('downloadExcelImport/xls') }}" class="newbooking" style="margin-right:5px;">Download Excel</a>
        @endif
        @if(Auth::user()->logistic_type == '2')
          <a href="{{ URL::to('downloadExcelExport/xls') }}" class="newbooking" style="margin-right:5px;">Download Excel</a>
        @endif -->
      </div>
    </div>
    <div class="table-responsive">
      @if(Auth::user()->logistic_type == '2') 
      <table class="table" id="my-table">
        <thead>
          <tr>
            <th class="orderid">Id</th>
            <th>{!! Form::select('order_id',['' => 'Order Id'] + $page_data['order_id'] ,null, ['id'=>'orderIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>{!! Form::select('booking_no',['' => 'Booking No'] + $page_data['booking_no'] ,null, ['id'=>'bookingNoIdFilter','class' => 'form-control wh-select2-class']) !!}</th>     
            <th>{!! Form::select('customer',['' => 'Customer'] + $page_data['customer_id'] ,null, ['id'=>'customerIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <!-- <th>Customer Ref</th>   -->
            <th>{!! Form::select('origin',['' => 'Origin'] + $page_data['origin_id'] ,null, ['id'=>'originIdFilter','class' => 'form-control wh-select2-class']) !!}</th>  
            <th>{!! Form::select('destination',['' => 'Destination'] + $page_data['destination_id'] ,null, ['id'=>'destinationIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>{!! Form::select('load_port',['' => 'Load Port'] + $page_data['load_port'] ,null, ['id'=>'loadPortIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>{!! Form::select('shipping_line',['' => 'Line'] + $page_data['shipping_line_id'] ,null, ['id'=>'shippingLineIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>{!! Form::select('cargo_type',['' => 'CGO'] + $page_data['cargo_type'] ,null, ['id'=>'cargoTypeIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>{!! Form::select('product',['' => 'Product'] + $page_data['product_id'] ,null, ['id'=>'productIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>20'</th>
            <th>40'</th>
            <th>Tons</th>
            <th>{!! Form::select('vessel',['' => 'Vessel'] + $page_data['vessel_id'] ,null, ['id'=>'vesselIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>{!! Form::select('voyage',['' => 'Voyage'] + $page_data['voyage'] ,null, ['id'=>'voyageIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>ETA</th>
            <th>Stack Open</th>
            <th>Stack Close</th>
            <th>Arrived</th>
            <th>ETD</th>
            <th>Departure</th>
            <th>VGM</th>
            <th>MR</th>
            <!-- <th>Storage Start</th>
            <th>Detention</th> -->
           <!--  <th>Documents</th> -->
            <th>{!! Form::select('status',['' => 'BL Status'] + $page_data['status_data'],null, ['id'=>'statusIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <!-- <th>Truck Info</th> -->
            <th>Actions</th>
          </tr>
        </thead>
      </table>
      @endif

      @if(Auth::user()->logistic_type == '1') 
      <table class="table" id="my-table">
        <thead>
          <tr>
          	<th class="orderid">Id</th>
            <th>{!! Form::select('order_id',['' => 'Order Id'] + $page_data['order_id'] ,null, ['id'=>'orderIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>{!! Form::select('lading_bill',['' => 'Bill of Lading'] + $page_data['lading_bill'] ,null, ['id'=>'ladingBillIdFilter','class' => 'form-control wh-select2-class']) !!}</th>   
            <th>{!! Form::select('customer',['' => 'Customer'] + $page_data['customer_id'] ,null, ['id'=>'customerIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <!-- <th>Customer Ref</th>   -->
            <th>{!! Form::select('origin',['' => 'Origin'] + $page_data['origin_id'] ,null, ['id'=>'originIdFilter','class' => 'form-control wh-select2-class']) !!}</th>  
            <th>{!! Form::select('destination',['' => 'Destination'] + $page_data['destination_id'] ,null, ['id'=>'destinationIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>{!! Form::select('dischargeport',['' => 'Discharge Port'] + $page_data['dischargeport_id'] ,null, ['id'=>'dischargeportIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>{!! Form::select('shipping_line',['' => 'Line'] + $page_data['shipping_line_id'] ,null, ['id'=>'shippingLineIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>{!! Form::select('cargo_type',['' => 'CGO'] + $page_data['cargo_type'] ,null, ['id'=>'cargoTypeIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>{!! Form::select('product',['' => 'Product'] + $page_data['product_id'] ,null, ['id'=>'productIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>20'</th>
            <th>40'</th>
            <th>Tons</th>
            <th>{!! Form::select('vessel',['' => 'Vessel'] + $page_data['vessel_id'] ,null, ['id'=>'vesselIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>{!! Form::select('voyage',['' => 'Voyage'] + $page_data['voyage'] ,null, ['id'=>'voyageIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <th>ETA</th>
            <th>Arrived</th>
            <th>Storage Start</th>
            <th>Detention</th>
            <!-- <th>Documents</th> -->
            <th>{!! Form::select('status',['' => 'BL Status'] + $page_data['status_data'],null, ['id'=>'statusIdFilter','class' => 'form-control wh-select2-class']) !!}</th>
            <!-- <th>Truck Info</th> -->
            <th>Actions</th>
          </tr>
        </thead>
      </table>
      @endif
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="truckModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      {!! Form::open(['url' => '/logistic/order/truck', 'id' => 'myform', 'class' => 'form-horizontal', 'files' => true]) !!}
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Truck Info</h4>
      </div>
      <div class="modal-body">
        <table class="table trucktable">
        <thead>
          <th>Container</th>
          <th>Seal</th>
          <th>Size</th>
          <th>Transporter</th>
          <th>Truck</th>
          <th>Trailer</th>
          <th>Driver</th>
          @if(Auth::user()->logistic_type == '1')
          <th>Identity</th>
          <th>Driver Licence</th>
          @endif
          <th>Load</th>
          <th>OffLoad</th>
          <th>Location</th>
          <th>Remark</th>
          <th>Status</th>
          <th>Selected Status</th>
          <th>Upload</th>
          <th>Print</th>
          
          <!-- <th>Grounded Date</th> --> 
        </thead>
        <tbody class="truckdata">
          
        </tbody>
        </table>
      </div>
      <!-- @if(Auth::user()->type == 'admin') -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
      </div>
      <!-- @else
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" disabled="true">Save changes</button>
      </div>
      @endif -->
       {!! Form::close() !!}
    </div>
  </div>
</div>

<!-- Tab -->
<div class="tools-control-table status-table container" style="width:99% !important">
  <div class="panel with-nav-tabs panel-default">
    <div class="panel-heading table-heading">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#status" data-toggle="tab">BL Status </a></li>
        <li><a href="#internal_control" data-toggle="tab">Internal Control <span class="label label-warning count"></span></a></li> 
        @if(Auth::user()->logistic_type == '1') 
        <li class="containermain"><a href="#empty_container" data-toggle="tab">Empty Container Return</a></li>
        @endif
        <li class="truckInformation"><a href="#truckInfo" data-toggle="tab">Truck Information</a></li>
      </ul>
    </div>
    <div class="panel-body">
      <div class="tab-content">

        <div class="tab-pane fade in active" id="status">
          <div class="col-md-6">
            {!! Form::open(['method' => 'POST', 'url' => '/logistic/order/save_status','files' => true])  !!} 
            <div class="form-border">

              <div class="form-group col-md-4">
                <input type="hidden" class="order_id form-control" name="order_id" readonly="true">
                <label>BL Status</label>
                
                <select name="status" class="form-control" required="true">
                  <option value="">Select BL Status</option>
                  @if(Auth::user()->logistic_type == '1') 
                  @foreach ($import_BLstatus as $status)

                  <option value="{{ $status }}">{{ $status }}</option>
                  @endforeach
                  @endif

                  @if(Auth::user()->logistic_type == '2') 
                  @foreach ($export_BLstatus as $status)

                  <option value="{{ $status }}">{{ $status }}</option>
                  @endforeach
                  @endif
               <!--    <option value="Booking_Received">Booking Received</option>
                  <option value="Document_Received">Document Received</option>
                  <option value="Under_Clearance">Under Clearance</option>
                  <option value="Cleared">Cleared</option>
                  <option value="Ready_for_Loading">Ready For Loading</option>
                  <option value="Offloaded">Offloaded</option>
                  <option value="Invoiced_Received">Invoice Received</option>
                  <option value="Loaded">Loaded</option>
                  <option value="In_Transit">In Transit</option> -->
                </select>
              
              </div>

              <div class="form-group col-md-4">
                <label>Date</label>
                <input type="date" class="form-control" name="date" placeholder="Enter Date" required="true">
              </div>

              <div class="form-group col-md-4">
                <label>Upload</label>
                <input type="file" class="form-control"  name="upload_file">
              </div>

              <div class="form-group col-md-12">
                <br/>
                <input type="submit" class="btn btn-success" value="ADD">
              </div>       
            </div>
            {!! Form::close() !!}
          </div>
          <div class="col-md-6">
            <div class="row">
              <div class="table-heading">
                <h4 class="col-md-6 col-sm-6 col-xs-6">Log</h4>
              </div>
              <div class="table-responsive tableContainer" id="status-log-table tableContainer">
                <table class="table scrollTable">
                  <thead class="fixedHeader">
                    <tr>
                      <th width="20%">Action</th>
                      <th width="20%">BL Status</th>
                      <th width="20%">Date</th>
                      <th width="20%">Upload</th>
                    </tr>
                  </thead>
                  <tbody class="statusdetail scrollContent">
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

        <div class="tab-pane fade" id="internal_control">
          <div class="col-md-6">
            {!! Form::open(['method' => 'POST', 'url' => '/logistic/order/save_order_internal_control','files' => true])  !!} 
            <div class="form-border">
              <div class="form-group col-md-3">
                <input type="hidden" class="order_id form-control" name="order_id" readonly="true">
                <label>Status</label>
                {!! Form::select('status',[''=>'Select Status']+$page_data['status']->toArray(),null,['class'=>'form-control','required'=>'true']) !!}
              </div>

              <div class="form-group col-md-3">
                <label>Date</label>
                <input type="date" class="form-control" name="date" placeholder="Enter Date" required="true">
              </div>

              <div class="form-group col-md-3">
                <label>Picture</label>
                <input type="file" class="form-control" name="picture">
              </div>
            
              <div class="form-group col-md-3">
                <label>Remark</label>
                <input type="text" class="form-control" placeholder="Enter Remark" name="remark" required="true">
              </div>

              <div class="form-group col-md-12">
                <br/>
                <input type="submit" class="btn btn-success" value="ADD">
              </div>       
            </div>
            {!! Form::close() !!}
          </div>
          <div class="col-md-6">
            <div class="row">
              <div class="table-heading">
                <h4 class="col-md-6 col-sm-6 col-xs-6">Log</h4>
              </div>
              <div class="table-responsive tableContainer" id="status-log-table tableContainer">
                <table class="table scrollTable">
                  <thead class="fixedHeader">
                    <tr>
                      <th width="20%">Status</th>
                      <th width="20%">Date</th>
                      <th width="20%">Deadline</th>
                      <th width="20%">Overdue</th>
                      <th width="20%">Remark</th>
                    </tr>
                  </thead>
                  <tbody class="internalcontrol scrollContent">
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

        <div class="tab-pane fade" id="empty_container">
          <div class="col-md-12">
            {!! Form::open(['method' => 'POST', 'url' => '/logistic/order/save_order_container','files' => true])  !!} 
            <div class="row">
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Container</th>
                      <th>Size</th>
                      <th>Transporter</th>
                      <th>Truck</th>
                      <th>Trailer</th>
                      <th>Driver</th>
                      <th>Location</th>
                      <th>Detention</th>
                      <th>Grounded</th>
                      <th>Status</th>
                      <th>Remark</th>
                      <th>Upload</th>
                    </tr>
                  </thead>
                  <tbody class="emptycontainer">
                  </tbody>
                </table>
              </div>
            </div>
            <div class="row">
              <br/>
              <input type="submit" class="btn btn-success" value="Update">
            </div>      
            {!! Form::close() !!}
          </div>
        </div>

        <div class="tab-pane fade" id="truckInfo">
          <div class="col-md-12">
            {!! Form::open(['method' => 'POST', 'url' => '/logistic/order/truck', 'id' => 'myform', 'files' => true])  !!} 
            <div class="row">
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Container</th>
                      <th>Seal</th>
                      <th>Size</th>
                      <th>Transporter</th>
                      <th>Truck</th>
                      <th>Trailer</th>
                      <th>Driver</th>
                      @if(Auth::user()->logistic_type == '1')
                      <th>Identity</th>
                      <th>Driver Licence</th>
                      @endif
                      <th>Load</th>
                      <th>OffLoad</th>
                      <th>Location</th>
                      <th>Remark</th>
                      <th>Status</th>
                      <!-- <th>Selected Status</th> -->
                      <th>Upload</th>
                      <th>Print</th> 
                    </tr>
                  </thead>
                  <tbody class="truckInfo">
                  </tbody>
                </table>
              </div>
            </div>
            <div class="row">
              <br/>
              <input type="submit" class="btn btn-success" value="Update">
            </div>      
            {!! Form::close() !!}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</section> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript">
  $(".alert").fadeTo(2000, 500).slideUp(500, function(){
    $(".alert").alert('close');
  });
  $(document).on('click','.print',function(){
      var orderid = $(this).data('orderid');
      var cargoid = $(this).data('cargoid');
      var type = $(this).data('type');
      $(this).attr('href', function() {
        return "{{ URL::to('logistic/order/downloadTruckInfo') }}" + '/' + type + '/' + orderid + '/' + cargoid ;
      });
     
    });

  var bookingUpdateDataTable = '';

  $(document).ready(function(){
    var conditionVal = "{{ Auth::user()->logistic_type }}";
    if (conditionVal !== "" && conditionVal == '2') {
      bookingUpdateDataTable = $('#my-table').DataTable({
          'processing': true,
          'serverSide': true,
          'serverMethod': 'post',
          'searching': false, // Set false to remove default Search Control
          // "info": false,
          "dom": 'rtip',
          'ajax': {
              'url':'{{ route("logistic.order.getajaxtable") }}',
              'headers': {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
              'data': function(data){
                  // Read values
                  var show_all_item = $('input[name="checkboxitem"]:checked').val();
                  var search_item = $('input[name="search"]').val();
                  var order_id_filter = $('#orderIdFilter').val();
                  var ladingBill_id_filter = $('#ladingBillIdFilter').val();
                  var customer_id_filter = $('#customerIdFilter').val();
                  var origin_id_filter = $('#originIdFilter').val();
                  var destination_id_filter = $('#destinationIdFilter').val();
                  var dischargeport_id_filter = $('#dischargeportIdFilter').val();
                  var shippingLine_id_filter = $('#shippingLineIdFilter').val();
                  var cargoType_id_filter = $('#cargoTypeIdFilter').val();
                  var product_id_filter = $('#productIdFilter').val();
                  var vessel_id_filter = $('#vesselIdFilter').val();
                  var voyage_id_filter = $('#voyageIdFilter').val();
                  var status_id_filter = $('#statusIdFilter').val();
                  var booking_no_id_filter = $('#bookingNoIdFilter').val();
                  var load_port_id_filter = $('#loadPortIdFilter').val();
                  
                  // Append to data
                  data.searchByShowAllItem = show_all_item;
                  data.searchByKewordItem = search_item;
                  data.searchByorderIdItem = order_id_filter;
                  data.searchByladingBillIdItem = ladingBill_id_filter;
                  data.searchBycustomerIdItem = customer_id_filter;
                  data.searchByoriginIdItem = origin_id_filter;
                  data.searchBydestinationIdItem = destination_id_filter;
                  data.searchBydischargeportIdItem = dischargeport_id_filter;
                  data.searchByshippingLineIdItem = shippingLine_id_filter;
                  data.searchBycargoTypeIdItem = cargoType_id_filter;
                  data.searchByproductIdItem = product_id_filter;
                  data.searchByvesselIdItem = vessel_id_filter;
                  data.searchByvoyageIdItem = voyage_id_filter;
                  data.searchBystatusIdItem = status_id_filter;
                  data.searchBybookingNoIdItem = booking_no_id_filter;
                  data.searchByloadPortIdItem = load_port_id_filter;
              }
          },
          'createdRow': function( row, data, dataIndex ) {
              if (data.deleted == 1) {
                  $(row).css("background", "#d3d3d3");
              }
          },
          'columnDefs': [
              { className: "dt-center", targets: [ 0, 1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 ] },
           ],
          'columns': [
              { data: 'order_id', bSortable: false },
              { data: 'booking_no', bSortable: false },
              { data: 'customer', bSortable: false },
              { data: 'origin', bSortable: false },
              { data: 'destination', bSortable: false },
              { data: 'load_port', bSortable: false },
              { data: 'shipping_line', bSortable: false },
              { data: 'type', bSortable: false },
              { data: 'product', bSortable: false },
              { data: 'quantity_20', bSortable: false },
              { data: 'quantity_40', bSortable: false },
              { data: 'tons', bSortable: false },
              { data: 'vessel', bSortable: false },
              { data: 'voyage', bSortable: false },
              { data: 'eta', bSortable: false },
              { data: 'stack_open', bSortable: false },
              { data: 'stack_close', bSortable: false },
              { data: 'berth', bSortable: false },
              { data: 'etd', bSortable: false },
              { data: 'depature', bSortable: false },
              { data: 'vgm', bSortable: false },
              { data: 'mates_receipt', bSortable: false },
              { data: 'bl_status', bSortable: false },
              { data: 'action', bSortable: false, bSearchable: false }
          ]
      });
      
      $(document).on('change', '#orderIdFilter,#ladingBillIdFilter,#customerIdFilter,#originIdFilter,#destinationIdFilter,#dischargeportIdFilter,#shippingLineIdFilter,#cargoTypeIdFilter,#productIdFilter,#vesselIdFilter,#voyageIdFilter,#statusIdFilter,#bookingNoIdFilter,#loadPortIdFilter', function() {
        $('input[name="search"]').val('');
        bookingUpdateDataTable.draw();
      });
    }

    if (conditionVal !== "" && conditionVal == '1') {
      bookingUpdateDataTable = $('#my-table').DataTable({
          'processing': true,
          'serverSide': true,
          'serverMethod': 'post',
          'searching': false, // Set false to remove default Search Control
          // "info": false,
          "dom": 'rtip',
          'ajax': {
              'url':'{{ route("logistic.order.getajaxtable") }}',
              'headers': {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
              'data': function(data){
                  // Read values
                  var show_all_item = $('input[name="checkboxitem"]:checked').val();
                  var search_item = $('input[name="search"]').val();
                  var order_id_filter = $('#orderIdFilter').val();
                  var ladingBill_id_filter = $('#ladingBillIdFilter').val();
                  var customer_id_filter = $('#customerIdFilter').val();
                  var origin_id_filter = $('#originIdFilter').val();
                  var destination_id_filter = $('#destinationIdFilter').val();
                  var dischargeport_id_filter = $('#dischargeportIdFilter').val();
                  var shippingLine_id_filter = $('#shippingLineIdFilter').val();
                  var cargoType_id_filter = $('#cargoTypeIdFilter').val();
                  var product_id_filter = $('#productIdFilter').val();
                  var vessel_id_filter = $('#vesselIdFilter').val();
                  var voyage_id_filter = $('#voyageIdFilter').val();
                  var status_id_filter = $('#statusIdFilter').val();
                  
                  // Append to data
                  data.searchByShowAllItem = show_all_item;
                  data.searchByKewordItem = search_item;
                  data.searchByorderIdItem = order_id_filter;
                  data.searchByladingBillIdItem = ladingBill_id_filter;
                  data.searchBycustomerIdItem = customer_id_filter;
                  data.searchByoriginIdItem = origin_id_filter;
                  data.searchBydestinationIdItem = destination_id_filter;
                  data.searchBydischargeportIdItem = dischargeport_id_filter;
                  data.searchByshippingLineIdItem = shippingLine_id_filter;
                  data.searchBycargoTypeIdItem = cargoType_id_filter;
                  data.searchByproductIdItem = product_id_filter;
                  data.searchByvesselIdItem = vessel_id_filter;
                  data.searchByvoyageIdItem = voyage_id_filter;
                  data.searchBystatusIdItem = status_id_filter;
              }
          },
          'createdRow': function( row, data, dataIndex ) {
              if (data.deleted == 1) {
                  $(row).css("background", "#d3d3d3");
              }
          },
          'columnDefs': [
              { className: "dt-center", targets: [ 0, 1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19 ] },
           ],
          'columns': [
              { data: 'order_id', bSortable: false },
              { data: 'lading_bill', bSortable: false },
              { data: 'customer', bSortable: false },
              { data: 'origin', bSortable: false },
              { data: 'destination', bSortable: false },
              { data: 'discharge_port', bSortable: false },
              { data: 'shipping_line', bSortable: false },
              { data: 'cargo_type', bSortable: false },
              { data: 'product', bSortable: false },
              { data: 'quantity_20', bSortable: false },
              { data: 'quantity_40', bSortable: false },
              { data: 'tons', bSortable: false },
              { data: 'vessel', bSortable: false },
              { data: 'voyage', bSortable: false },
              { data: 'eta', bSortable: false },
              { data: 'berth', bSortable: false },
              { data: 'storage_start', bSortable: false },
              { data: 'detention', bSortable: false },
              { data: 'bl_status', bSortable: false },
              { data: 'action', bSortable: false, bSearchable: false }
          ]
      });

      $(document).on('change', '#orderIdFilter,#ladingBillIdFilter,#customerIdFilter,#originIdFilter,#destinationIdFilter,#dischargeportIdFilter,#shippingLineIdFilter,#cargoTypeIdFilter,#productIdFilter,#vesselIdFilter,#voyageIdFilter,#statusIdFilter', function() {
        $('input[name="search"]').val('');
        bookingUpdateDataTable.draw();
      });
    }

    $(document).on('click','#showallItemId', function(){
        $('input[name="search"]').val('');
        bookingUpdateDataTable.draw();
    });

    $(document).on('click','.detete-import-booking', function(){
        var id = $(this).data('id');
        var row_element = $(this).closest('tr');
        Swal.fire({
          title: 'Are you sure?',
          text: "Do you want to cancel this record ?",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes, cancel it!'
        }).then((result) => {
          if (result.isConfirmed) {
            $.ajax({
                url: "{{route('logistic.order.deletebooking')}}",
                type: 'POST',
                dataType: 'json',
                data: {'id': id, '_token': '{{csrf_token()}}'},
                success: function (response) {
                    if (response.status == 'success') {
                        bookingUpdateDataTable.row(row_element).remove().draw(false);
                    }
                    else
                    {
                        // Swal.fire(`${response.message}`, '', 'info');
                    }
                }
            });
          }
        })
    });

    /*hideall();

            function hideall()
            {
                var tbl = document.getElementById('my-table');       //find the table
                var rows = tbl.querySelectorAll('tbody tr');        //find all rows in the table body
                

                for(i = 0; i < rows.length; i++) {                  //iterate through the rows

                    var cells = rows[i].querySelectorAll('td');     //find all of the cells in the row
                    var flag = true;                                //set flag prior to cell evaluation
                    var statusHtml = cells[20].innerHTML;
                    if(statusHtml.indexOf('Loaded') == -1){
                        flag = false;
                    }
                    if(flag) { 
                        rows[i].classList.add('hide');              //hide the row if the falg remained true (i.e. none of the cells contained a value other than '0'
                    }
                }
            }*/

            /*$('[name="checkboxitem"]').change(function(){
                if ($(this).is(':checked')) {
                    // Do something...
                    showall();
                }
                else
                {
                    hideall();
                }
            });

            function showall(){
                var tbl = document.getElementById('my-table');       //find the table
                var rows = tbl.querySelectorAll('tbody tr');        //find all rows in the table body

                for(i = 0; i < rows.length; i++) {                  //iterate through the rows
                    rows[i].classList.remove('hide');                        
                    
                }
            }*/
    var logistic_type = "