@extends('layouts.template')
@section('content')
<section class="planinng-trip-allowance" id="tracking-status">
    <h1 class="heading">Tracking and Status <a href="{{ url('transport/dashboard') }}" title="back"><i
                class="fa fa-undo" aria-hidden="true"></i></a><button class="btn btn-info wh-btn-circle btn-sm pull-right" style="margin-right: 1%;" data-toggle="modal" data-target="#basicModal2"><span class="glyphicon glyphicon-earphone"></span></button><button class="btn btn-primary btn-sm pull-right" style="margin: -0.3% 1% 0% 0%;" data-toggle="modal" data-target="#basicModal5"><svg width="16px" height="16px" fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M32 64C32 28.7 60.7 0 96 0H256c35.3 0 64 28.7 64 64V256h8c48.6 0 88 39.4 88 88v32c0 13.3 10.7 24 24 24s24-10.7 24-24V222c-27.6-7.1-48-32.2-48-62V96L384 64c-8.8-8.8-8.8-23.2 0-32s23.2-8.8 32 0l77.3 77.3c12 12 18.7 28.3 18.7 45.3V168v24 32V376c0 39.8-32.2 72-72 72s-72-32.2-72-72V344c0-22.1-17.9-40-40-40h-8V448c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32V64zM96 80v96c0 8.8 7.2 16 16 16H240c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16H112c-8.8 0-16 7.2-16 16z"/></svg></button></h1>
    @if(Session::has('flash_message'))
    <div class="row-fluid">
        <div class="span12">
            <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('flash_message') }}</p>
        </div>
    </div>
    @endif
    <div class="cargo-search">
       

        <div class="table-heading">
            <h4 class="col-md-6 col-sm-6 col-xs-6"> Tracking and Status:&nbsp;&nbsp;&nbsp;
                {!! Form::open(['method' => 'GET', 'url' => '/transport/tracking_status','id'=>'form3','class' => 'form-vertical'])  !!}
                    <input type="radio" name="type" id="type" value="1"><label for="Shipper">Own Truck</label>&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="type" id="type" value="2"><label for="Shipper">Third Party Truck</label>
                {!! Form::close()!!}
            </h4>
            <div class="col-md-6 col-sm-6 col-xs-6">
                <input type="checkbox" name="checkboxitem" id="checkboxitem"  data-target="{{ url('transport/tracking_status?checkboxitem=on') }}" data-target-off="{{ url('transport/tracking_status') }}" style="width: 15px;">  Show All
            </div>
        </div>

        <div class="cargo-search" id="main_page">
            <div class="table-responsive">
                    <table class="table table-striped" id="my-table">
                        <thead>
                             {!! Form::open(['method' => 'GET', 'url' => '/transport/tracking_status','id'=>'form1','class' => 'form-vertical', 'role' => 'search'])  !!}
                            <tr>
                                <th> P Date</th>
                                <th> Order Nr</th>
                                <th> {!! Form::select('customer',['' => 'Customer'] + $page_data['customer'] ,null, ['id'=>'customer','class' => 'form-control wh-select2-class']) !!} </th>
                                <th> {!! Form::select('customer_ref',['' => 'Cust Ref'] + $page_data['customer_ref'] ,null, ['id'=>'customer_ref','class' => 'form-control wh-select2-class']) !!}</th>
                                <th> {!! Form::select('consignee',['' => 'Consignee'] + $page_data['consignee'] ,null, ['id'=>'consignee','class' => 'form-control wh-select2-class']) !!} </th>
                                <th> {!! Form::select('trip',['' => 'Trip'] + $page_data['trip'] ,null, ['id'=>'trip','class' => 'form-control wh-select2-class']) !!} </th>
                                <th> {!! Form::select('truck',['' => 'Truck'] + $page_data['truck'] ,null, ['id'=>'truck','class' => 'form-control wh-select2-class']) !!}</th>
                                <th> {!! Form::select('trailer',['' => 'Trailer'] + $page_data['trailer'] ,null, ['id'=>'trailer','class' => 'form-control wh-select2-class']) !!}</th>
                                <th> {!! Form::select('driver',['' => 'Driver'] + $page_data['driver'] ,null, ['id'=>'driver','class' => 'form-control wh-select2-class']) !!}</th>
                                <th> {!! Form::select('origin',['' => 'Origin'] + $page_data['origin'] ,null, ['id'=>'origin','class' => 'form-control wh-select2-class']) !!}</th>
                                <th> {!! Form::select('destination',['' => 'Destination'] + $page_data['destination'] ,null, ['id'=>'destination','class' => 'form-control wh-select2-class']) !!}</th>
                                <th> {!! Form::select('border',['' => 'Border'] + $page_data['border'] ,null, ['id'=>'border','class' => 'form-control wh-select2-class']) !!}</th>
                                <th> {!! Form::select('km',['' => 'Km'] + $page_data['km'] ,null, ['id'=>'km','class' => 'form-control wh-select2-class']) !!}</th>
                                <th> {!! Form::select('shipping_line',['' => 'Line'] + $page_data['shipping_line'] ,null, ['id'=>'shipping_line','class' => 'form-control wh-select2-class']) !!}</th>
                                <th> {!! Form::select('lading_bill',['' => 'BL'] + $page_data['lading_bill'] ,null, ['id'=>'ladding_bill','class' => 'form-control wh-select2-class']) !!}</th>
                                <th> {!! Form::select('cargo_type',['' => 'Type'] + $page_data['cargo_type'] ,null, ['id'=>'cargo_type','class' => 'form-control wh-select2-class']) !!}</th>
                                <th> {!! Form::select('product',['' => 'Product'] + $page_data['product'] ,null, ['id'=>'product','class' => 'form-control wh-select2-class']) !!}</th>
                                <th> Size</th>
                                <th> Tons</th>
                                <th> Packaging</th>
                                <!-- <th>Cargo Id</th> -->
                                <th>{!! Form::select('status',['' => 'Status'] + $page_data['status'] ,null, ['id'=>'status','class' => 'form-control wh-select2-class']) !!}</th>
                                <th>Detail</th>
                                <th>Return</th>
                                <th>Print</th>
                                @if((Auth::user()->type == 'admin')|| (Auth::user()->type == 'superuser'))
                                <th>Action</th>
                                @endif
                            </tr>
                            {!! Form::close() !!}
                        </thead>
                    </table>
            </div>
            <div class="alert-div"></div>
            <div class="tools-control-table status-table">

                <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_planning" data-toggle="tab"> Status </a></li>
{{--                            <li><a href="#planning" data-toggle="tab">Planning</a></li>--}}
                            <li><a href="#allowances" data-toggle="tab">Expenses</a></li>
                            <li style="line-height: 0px;">
                                <a style="line-height: 3;" href="#fuel" data-toggle="tab">Fuel</a><br>
                                <label class="text-center" style="color:red;padding: 0px 21px 0px 21px;cursor:pointer" data-toggle="modal" data-target="#basicModal"><u style="background: yellow;">ODO (<span id="serviceWarning">0</span>)</u></label></li>
                            <li><a href="#cargo" data-toggle="tab">Cargo</a></li>
                            <li><a href="#returncontainer" class="returncontainer" data-toggle="tab">Return
                                    Container </a></li>
                            <li><a href="#driverdefect" data-toggle="tab">Driver Defects Report</a></li>
                            <li><a href="#road" data-toggle="tab"> Road Occurance(Fines, accidents,etc)</a></li>
                            <li><a href="#transchecklist" data-toggle="tab">Checklist <span id="showCnt" style="color:#ff8d00" data-toggle="popover" title="Selected Checklist" data-placement="left" data-content=""  data-html="true">(0)</span></a></li>

                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="tab-content">

                            <div class="tab-pane fade" id="cargo">
                                <form id="cargo_form">
                                <input type="hidden" class="cargo_planning_id" name="planning_id">
                                <div class="col-md-7 col-sm-7 col-xs-12">

                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>&nbsp;</th>
                                                <th>Product</th>
                                                <th>Qty</th>
                                                <th class="break_bulk">Packaging</th>
                                                <th class="containarized">Size</th>
                                                <th>Container</th>
                                                <th>Tons</th>
                                            </tr>
                                        </thead>
                                        <tbody class="corgo_detail">
                                            <tr>
                                                <th>Loaded</th>
                                                <td class="loaded_cargo_product"></td>
                                                <td class="loaded_cargo_quantity"></td>
                                                <td class="break_bulk"><span class="loaded_cargo_packaging"></span> Kg</td>
                                                <td class="loaded_cargo_size containarized"></td>
                                                <td class="loaded_cargo_container"></td>
                                                <td class="loaded_cargo_tons"></td>
                                            </tr>
                                            <tr>
                                                <th>Offloaded</th>
                                                <td>
                                                    <input type="text" class="offloaded_cargo_product form-control"
                                                           name="product_offloaded" readonly="true">
                                                </td>
                                                <td>
                                                    <input type="text" style="border: 1px solid #ddd"
                                                           class="offloaded_cargo_quantity form-control"
                                                           name="quantity_offloaded" required>
                                                </td>
                                                <td class="break_bulk">
                                                    {!! Form::select('packaging_offloaded',[''=>'Select Packaging'] + $page_data['packaging'],null,['class'=>'offloaded_cargo_packaging form-control arr','required'=>'true']) !!}
                                                </td>
                                                <td class="containarized">
                                                    <input type="text" style="border: 1px solid #ddd"
                                                           class="offloaded_cargo_size form-control"
                                                           name="size_offloaded" required>
                                                </td>
                                                <td>
                                                    <input type="text" class="offloaded_cargo_container form-control"
                                                           name="container_offloaded" readonly="true">
                                                </td>
                                                <td>
                                                    <input type="text" style="border: 1px solid #ddd"
                                                           class="offloaded_cargo_tons form-control"
                                                           name="tons_offloaded" required>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>Difference</th>
                                                <td></td>
                                                <td class="diff_qty"></td>
                                                <td class="diff_pkg break_bulk"></td>
                                                <td class="diff_size containarized"></td>
                                                <td></td>
                                                <td class="diff_ton"></td>
                                            </tr>
                                        </tbody>
                                    </table>

                                </div>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <div class="remark-form">
                                        <div class="form-group">
                                            <div class="col-md-12 col-sm-12 col-xs-12">
                                                <label for="remark">Remark</label>
                                                <textarea class="cargo_remarks form-control textarea-box" rows="3"
                                                          name="remarks" required></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group submit-btn save-btn-cargo">
                                            <div class="col-md-12 col-sm-12 col-xs-12">
                                                <input type="submit" id="cargobutton" value="Save">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </form>
                            </div>

                            <div class="tab-pane fade in active" id="status_planning">
                                <div class="col-md-6">
                                   <form id="status_planning_form">
                                    <div class="row">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Trip</th>
                                                    <th>Truck</th>
                                                    <th>Destination</th>
                                                    <th>Date</th>
                                                    <th>Status</th>
                                                    <th>Location</th>
                                                    <th class="eta" style="display: none">ETA border</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="hide">
                                                        <input type="hidden" name="planning_id" class="status_planning_id">
                                                        <span id="statusOriginId" class="d-none"></span>
                                                    </td>
                                                    <td><input type="text" class="trip form-control" name="trip_number"
                                                               readonly="true" style="text-align: center;"></td>
                                                    <td><input type="text" class="truck form-control" name="truck"
                                                               readonly="true" style="text-align: center;"></td>
                                                    <td><input type="text" class="Destination form-control" name="destination" 
                                                               readonly="true" style="text-align:center;"></td>
                                                    <td>
                                                        <input type="text" class="calander-icon form-control planning_date"
                                                               id="datepicker8" name="date" required>
                                                    </td>
                                                    <td>
                                                        <div class="select">
                                                            <select name="status" id="statusdropdown" class="form-control arr" required>
                                                                @foreach($page_data['planstatus'] as $status)
                                                                <option value="{{$status->type}}" data-order="{{$status->order}}">{{$status->type}}</option>
                                                                @endforeach
                                                            </select>

{{--                                                            {!! Form::select('status',$page_data['planstatus']->toArray() ,null, ['id'=>'statusdropdown','class' => 'form-control arr','required' => 'required']) !!}--}}
                                                        </div>

                                                    </td>
                                                    <td><input type="text" class="form-control" name="location"
                                                               required></td>
                                                    <td class="eta" style="display: none"><input type='text' class='calander-icon form-control planning_eta' id='datepicker12' name='eta_date'></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="row">
                                        <div class="form-group">
                                            <div class="col-md-12 col-sm-12">
                                                <input type="submit" id="statusbutton" class="add-btn-allowance"
                                                       value="ADD">
                                            </div>
                                        </div>
                                    </div>
                                   </form>
                                </div>
                                <div class="col-md-6">
                                    <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>
                                                    @if((Auth::user()->type == 'admin')|| (Auth::user()->type == 'superuser'))
                                                    <th class="text-center" width="12.5%">Action</th>
                                                    @endif
                                                    <th class="text-center" {{((Auth::user()->type == 'admin')|| (Auth::user()->type == 'superuser')) ? 'width=12.5%' : 'width=14.28%' }}>Trip</th>
                                                    <th class="text-center" {{((Auth::user()->type == 'admin')|| (Auth::user()->type == 'superuser')) ? 'width=12.5%' : 'width=14.28%' }}>Truck</th>
                                                    <th class="text-center" {{((Auth::user()->type == 'admin')|| (Auth::user()->type == 'superuser')) ? 'width=12.5%' : 'width=14.28%' }}>Destination</th>
                                                    <th class="text-center" {{((Auth::user()->type == 'admin')|| (Auth::user()->type == 'superuser')) ? 'width=12.5%' : 'width=14.28%' }}>Date</th>
                                                    <th class="text-center" {{((Auth::user()->type == 'admin')|| (Auth::user()->type == 'superuser')) ? 'width=12.5%' : 'width=14.28%' }}>Status</th>
                                                    <th class="text-center" {{((Auth::user()->type == 'admin')|| (Auth::user()->type == 'superuser')) ? 'width=12.5%' : 'width=14.28%' }}>Location</th>
                                                    <th class="text-center" {{((Auth::user()->type == 'admin')|| (Auth::user()->type == 'superuser')) ? 'width=12.5%' : 'width=14.28%' }}>ETA Border</th>
                                                </tr>
                                            </thead>
                                            <tbody class="planning_status scrollContent">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="allowances">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div style="height: 60px;">
                                            <table class="table" id="insertable">
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <div class="form-group">
                                                                <label class="control-label">Trip</label> : 
                                                                <span class="form-control-static expense_trip"></span>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-group">
                                                                <label class="control-label">Driver</label> : 
                                                                <span class="form-control-static expense_driver"></span>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-group">
                                                                <label class="control-label">Origin/Destination</label> : 
                                                                <span class="form-control-static expense_origin"></span>/<span class="form-control-static expense_destination"></span>
                                                                <input type="hidden" class="expense_corridor">
                                                                <input type="hidden" class="expense_usdsum"/>
                                                                <input type="hidden" class="expense_zarsum"/>
                                                                <input type="hidden" class="expense_mzmsum"/>
                                                                <input type="hidden" class="expense_planning_id"/>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <form id="allowances_form" novalidate="true">

                                        <div class="table-responsive">
                                            <table class="table" id="insertable">
                                                <thead>
                                                    <tr>
                                                        <th><input type="checkbox" class="selectrow" onClick="selectall(this)"/></th>
                                                        <th>Delete</th>
                                                        <th class="d-none">Trip</th>
                                                        <th class="d-none">Origin</th>
                                                        <th class="d-none">Destination</th>
                                                        <th>Charge</th>
                                                        <th>Currency</th>
                                                        <th>Amount</th>
                                                        <th>Remark</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="trip_allowance">
                                                    <!-- <tr>
                                                      <td><input type="text" class="allowance_trip" name="trip_number"></td>
                                                      <td><input type="text" class="charge" name="charge"></td>
                                                      <td>
                                                        <select class="form-control arr">
                                                          <option>Select All Status</option>
                                                          <option>EUR</option>
                                                          <option>USD</option>
                                                          <option>SAR</option>
                                                        </select>
                                                      </td>
                                                      <td>
                                                        <input type="text" name="amount">
                                                      </td>
                                                      <td>
                                                        <input type="text" name="paid_date">
                                                      </td>
                                                  </tr> -->
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="row">
                                            <div class="form-group">
                                                <div class="col-md-8 col-sm-8">
                                                    <p style="color: black; font-weight: bold; padding: 10px;"
                                                       class="corridor_summary">
                                                    </p>
                                                </div>
                                                <div class="col-md-2 col-sm-2">
                                                    <input type="button" id="addexpensebutton" class="add-btn-allowance2 width-100" value="ADD">
                                                </div>
                                                <div class="col-md-2 col-sm-2">
                                                    <input type="submit" id="allowancebutton" class="add-btn-allowance width-100" value="PAY">
                                                </div>
                                            </div>
                                        </div>
                                        </form>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="table-heading">
                                            <h4 class="col-md-2 col-sm-2 col-xs-2">Log</h4>
                                            <h6 class="col-md-10 col-sm-10 col-xs-10"><p
                                                    style="color: black; font-weight: bold; padding: 5px; background-color: #fff;"
                                                    class="summary"></p></h6>
                                        </div>
                                        <div class="table-responsive tableContainer"
                                             id="status-log-table tableContainer">
                                            <table class="table scrollTable">
                                                <thead class="fixedHeader">
                                                    <tr>
                                                        <th style="width:11.11%">Action</th>
                                                        <th style="width:11.11%">Trip</th>
                                                        <th style="width:11.11%">Origin</th>
                                                        <th style="width:11.11%">Destination</th>
                                                        <th style="width:11.11%">Charge</th>
                                                        <th style="width:11.11%">Currency</th>
                                                        <th style="width:11.11%">Amount</th>
                                                        <th style="width:11.11%">Paid Date</th>
                                                        <th style="width:11.11%">Remark</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="track_allowance scrollContent">
                                                    <tr>
                                                        <td class="all_trip"></td>
                                                        <td class="all_charge"></td>
                                                        <td class="all_currency"></td>
                                                        <td class="all_amount"></td>
                                                        <td></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="fuel">
                                <div class="row">
                                    <div class="col-md-6">
                                        <form id="planning_form">
                                            <div style="height: 88px;">
                                                <table class="table" id="insertable">
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                <input type="hidden" class="form-control fuel_planning_id"
                                                                       name="planning_id">
                                                                <span class="fuel_trip_number_span form-control" style="border: none;box-shadow: none;"></span>
                                                                <input type="hidden" class="form-control fuel_trip_number"
                                                                       name="trip_number" required>
                                                            </td>
                                                            <td><input type="hidden" class="form-control fuel_destinations"
                                                                       name="destination" >
                                                                       </td>
                                                            <td>
                                                                {{--                                                            {!! Form::select('corridor_id',['' => 'Select Corridor'] + $page_data['corridor_id']->toArray() ,null, ['class' => 'fuel_corridor_id form-control','required'=>'true']) !!}--}}
                                                                {!! Form::select('corridor_from',['' => 'Select From'] + $page_data['corridor_from']->toArray() ,null, ['class' => 'fuel_corridor_from_id form-control','required'=>'required']) !!}
                                                            </td>
                                                            <td>
                                                                <input type="hidden" class="form-control" id="corridorId" name="corridor_id">
                                                                {!! Form::select('corridor_to',['' => 'Select To'] ,null, ['class' => 'fuel_corridor_to_id form-control','id'=>'fuel_corridor_to_id','required'=>'required']) !!}
                                                            </td>
                                                            <td>
                                                                <input type="text" class="form-control fuel_planning_km"
                                                                       name="km" placeholder="KM" required>
                                                            </td>
                                                            <!--td>
                                                              <input type="text" class="form-control fuel_planning_km" name="fuel_used" required="" value="0">
                                                            </td-->
                                                            <td>
                                                                <input type="text" class="form-control fuel_planning_allowance"
                                                                       name="fuel_allowance" placeholder="Fuel" required="">
                                                            </td>
                                                            <td><input type="submit" value="Add" id="planningbutton" class="add-btn-allowance form-control" style="width: 100%;margin-top: 0px"></td>
                                                        </tr>
                                                        <tr class="apply-fuel-row"><td colspan="7" style="padding: 1px 8px !important;"><input type="button" value="Apply" class="convert-btn-to-link apply-fuel-btn pull-right" style="width: 10%;font-weight: 600;font-size: 12px;margin-top: -4px;" /></td></tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </form>
                                        <br>
                                        <br>
                                        <div class="table-responsive tableContainer"
                                             id="status-log-table tableContainer" style="display:none;">
                                            <table class="table scrollTable">
                                                <thead class="fixedHeader">
                                                <tr>
                                                    @if((Auth::user()->type == 'admin')|| (Auth::user()->type == 'superuser'))
                                                        <th>Action</th>
                                                    @endif
                                                    <th width="20%">Trip </th>
                                                    <th width="20%">Destination</th>
                                                    <th width="20%">Corridor</th>
                                                    <th width="20%">Km</th>
                                                    <!--th width="20%">Fuel Used</th-->
                                                    <th width="20%">Fuel</th>

                                                </tr>
                                                </thead>
                                                <tbody class="fuel_planning_record scrollContent">

                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="table-responsive">
                                            <table class="table">
                                              <thead>
                                                <tr>
                                                  <th>#</th>
                                                  <th>#</th>
                                                  <th width="10%">Date</th>
                                                  <th width="10%">Trip</th>
                                                  <th width="20%">Driver</th>
                                                  <th width="10%">Corridor</th>
                                                  <th width="10%">Km</th>
                                                  <th width="20%">Fuel Allowed</th>
                                                  <th width="10%" style="display:none;">Fuel Used</th>
                                                </tr>
                                              </thead>
                                              <tbody class="fuel">
                                              </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="plan"></div>
                                    <div class="col-md-6">
                                        <span id="fuelUsedSpanId" class="d-none"></span>
                                        <span id="totalAllSpanId" class="d-none"></span>
                                        <span id="totalKmSpanId" class="d-none"></span>
                                        {!! Form::open(['url' => '#', 'id'=>'odoReadingStoreFromFuel','class' => 'form-vertical']) !!}
                                        {!! Form::close() !!}
                                        <form id="fuel_form"></form>
                                            <div style="height: 88px;">
                                                <table class="table">
                                                    <tbody>
                                                    <tr>
                                                        <td style="padding: 6px 0px !important;">
                                                            <input form="fuel_form"  id="fuelFormTripId" type="hidden" name="trip">
                                                            <input form="fuel_form" type="text" class="form-control fuel_truck d-none" name="truck"
                                                                   placeholder="Truck" readonly="">
                                                            <span class="form-control fuel_truck_span remove-input-style"></span>
                                                            <input form="fuel_form" type="hidden" name="fuel" id="fuelTypeId" value="">
                                                        </td>
                                                        <td style="padding: 6px 0px !important;">
                                                            <input form="fuel_form" type="text" class="form-control fuel_driver d-none"
                                                                   name="driver" placeholder="Driver" required
                                                                   readonly="">
                                                            <span class="form-control fuel_driver_span remove-input-style"></span>
                                                        </td>
                                                        <td style="display: inline-flex;">
                                                            <i class="fa fa-plus-circle" data-toggle="modal" data-target="#myModal2" aria-hidden="true" style="font-size: 16px;margin-top: 4%;"></i>
                                                            <select form="fuel_form" id="fuelSupplierId" class="form-control supplier_class" name="supplier_name" required>
                                                                <option value="">Supplier</option>
                                                                @foreach ($page_data['supplier_locations'] as $spl_fuel)
                                                                    <option value="{{$spl_fuel->name}}" data-location="{{$spl_fuel->location}}">{{ $spl_fuel->name }}</option>
                                                                @endforeach
                                                            </select>
                                                             <select form="fuel_form" id="fuelLocationId" class="form-control fuel_location_class" name="location" required>
                                                                <option value="" selected>Location</option>
                                                            </select>
                                                            <!-- <input type="text" class="form-control" name="location"
                                                                   placeholder="Location" style="min-width: 44%;border-left:0;margin-left: -9px;" required> -->
                                                        </td>
                                                        <td>
                                                            <input form="fuel_form" type="hidden" name="planning_id" class="fuel_planning_id"
                                                                   required>
                                                            <input form="fuel_form" type="text" class="form-control calander-icon"
                                                                   id="datepicker11" name="date" placeholder="Date"
                                                                   required>
                                                        </td>
                                                        <td>
                                                            <input form="fuel_form" id="fuelOrderId" type="text" class="form-control" name="order" placeholder="Order" autocomplete="off" required>
                                                        </td>
                                                        <td>
                                                            <input form="fuel_form" id="fuelQuantityId" type="text" class="form-control" name="quantity"
                                                                   placeholder="Qty" maxlength="6" required>
                                                        </td>
                                                        <td style="display: inline-flex;">
                                                            <input form="fuel_form" id="fuelCurrencyId" type="hidden" name="currency" value="">
                                                            <input form="fuel_form" id="fuelAmountId" type="text" class="form-control" name="amount" placeholder="Amount" style="margin-left: -8px;" required>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="fuel_odo_store_div_class" colspan="6" style="padding-top: 0px;">
                                                        </td>
                                                        <td colspan="1"><input form="fuel_form" type="submit" id="fuelbuttom" class="form-control btn-success pull-right" value="SAVE"></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <br/>
                                            <br/>
                                            <div class="table-responsive tableContainer"
                                                 id="status-log-table tableContainer">
                                                <table class="table table-total scrollTable">
                                                    <thead class="fixedHeader">
                                                    <tr>
                                                        @if((Auth::user()->type == 'admin')|| (Auth::user()->type == 'superuser'))
                                                            <th>Action</th>
                                                        @endif
                                                        <th width="12%">Date</th>
                                                        <th width="12%">Truck</th>
                                                        <th width="10%">Fuel</th>
                                                        <th width="10%">Driver</th>
                                                        <th width="10%">Supplier</th>
                                                        <th width="12%">Location</th>
                                                        <th width="12%">Order</th>
                                                        <th width="12%">Quantity</th>
                                                        <th width="10%">Amount</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody class="fuel_detail scrollContent">
                                                    </tbody>
                                                </table>
                                            </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="driverdefect">
                                <form id="driverdefect_form">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <div class="table-responsive">
                                            <table class="table table-total">
                                                <thead>
                                                    <tr>
                                                        <th>Date</th>
                                                        <th>Trip</th>
                                                        <th>Truck</th>
                                                        <th>Trailer</th>
                                                        <th>Driver</th>
                                                        <th>Destination</th>
                                                        <th>Last Updated</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td><input type="hidden" name="planning_id"
                                                                   class="form-control driver_planning_id"
                                                                   readonly=""><input type="text" name="date"
                                                                   class="form-control today_date"
                                                                   readonly=""></td>
                                                        <td><input type="text" name="trip_number"
                                                                   class="form-control driver_trip" readonly=""></td>
                                                        <td><input type="text" name="truck" 
                                                                   class="form-control driver_truck" readonly="true"></td>
                                                        <td><input type="text" name="trailer"
                                                                   class="form-control driver_trailer" readonly="true"></td>
                                                        <td><input type="text" name="driver"
                                                                   class="form-control driver_name" readonly=""></td>
                                                        <td><input type="text"  name="destination"
                                                                   class="form-control driver_destination" readonly="true"></td>
                                                        <td><input type="text" name="last_updated"
                                                                   class="form-control last_updated" readonly=""></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-5 col-sm-6 col-xs-12 no-padding">
                                        <div class="road-form">
                                            <div class="form-group">
                                                <div class="col-md-12 col-sm-12 col-xs-12">
                                                    <label for="Remark">Truck Report</label>
                                                    <textarea class="form-control textarea-box truck_report" rows="3" name="truck_report"
                                                              required="">
                                                    </textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2 no-padding">
                                        <div class="form-group submit-btn save-btn-cargo">
                                            <div class="col-md-12 col-sm-12 col-xs-12 no-padding">
                                                <input type="submit" value="Save" id="driverdefectbutton" class="save-btn">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-5 col-sm-6 col-xs-12 no-padding">
                                        <div class="road-form">
                                            <div class="form-group">
                                                <div class="col-md-12 col-sm-12 col-xs-12">
                                                    <label for="Remark">Trailer Report</label>
                                                    <textarea class="form-control textarea-box trailer_report"
                                                              rows="3" name="trailer_report" required=""></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                 <div class="row">
                                     <div class="col-md-5 col-sm-5 col-xs-12">
                                         <div class="tableContainer" style="height: 120px !important;">
                                             <div class="log_truck_record scrollContent" style="height: 120px !important;padding: 10px;">
                                             </div>
                                         </div>
                                     </div>
                                     <div class="col-md-2 col-sm-2"></div>
                                     <div class="col-md-5 col-sm-5 col-xs-12">
                                         <div class="tableContainer" style="height: 120px !important;">
                                             <div class="log_trailer_record scrollContent" style="height: 120px !important;padding: 10px;">
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                                </form>
                            </div>

                            <div class="tab-pane fade" id="road">
                                <form id="road_form">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <table class="table table-total">
                                            <thead>
                                                <tr>
                                                    <th>Trip</th>
                                                    <th>File No</th>
                                                    <th>Date</th>
                                                    <th>Violation</th>
                                                    <th>Article</th>
                                                    <th>Location</th>
                                                    <th>Currency</th>
                                                    <th>Amount</th>
                                                    <th>Remark</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <input type="hidden" class="form-control road_planning_id"
                                                               name="planning_id" readonly="">
                                                        <input type="text" class="form-control road_trip"
                                                               name="trip_number" readonly="">
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control" name="file_number"
                                                               value="{{ $serial }}" readonly="">
                                                    </td>
                                                    <td>
                                                        <div class="form-group">

                                                            <input type="text" class="form-control" id="datepicker10"
                                                                   name="date" required>

                                                        </div>
                                                    </td>
                                                    <td>
                                                        <select id="roadDetailSelectId" class="form-control" name="detail" required="">
                                                            <option value="">Select Detail</option>
                                                            <option value="Accident">Accident</option>
                                                            <option value="Theft">Theft</option>
                                                            <option value="Fines">Fines</option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <div class="form-group">
                                                            <div class="form-group col-md-12 col-sm-12">
                                                                <input type="text" class="form-control" name="article"
                                                                       required="">
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="form-group">
                                                            <div class="form-group col-md-12 col-sm-12">
                                                                <input type="text" class="form-control" name="location"
                                                                       required="">
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>

                                                        <select id="roadCurrencySelectId" class="form-control" name="currency" required>
                                                            <option value="USD">USD</option>
                                                            <option value="MZM">MZM</option>
                                                            <option value="ZAR">ZAR</option>
                                                        </select>

                                                    </td>
                                                    <td>
                                                        <div class="form-group">
                                                            <div class="form-group col-md-12 col-sm-12">
                                                                <input type="number" class="form-control" name="amount"
                                                                       required="">
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="form-group">
                                                            <div class="form-group col-md-12 col-sm-12">
                                                                <input type="text" class="form-control" name="remark"
                                                                       required="">
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <input type="submit" class="add-btn-allowance" id="roadbutton"
                                                               style="margin:0 !important;" value="ADD">
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <hr>
                                <div class="table-heading">
                                    <h4 class="col-md-6 col-sm-6 col-xs-6">Log</h4>
                                </div>
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                @if((Auth::user()->type == 'admin')|| (Auth::user()->type == 'superuser'))
                                                <th>Action</th>
                                                @endif
                                                <th>Trip</th>
                                                <th>File No</th>
                                                <th>Date</th>
                                                <th>Violation</th>
                                                <th>Article</th>
                                                <th>Location</th>
                                                <th>Currency</th>
                                                <th>Amount</th>
                                                <th>Remark</th>
                                            </tr>
                                        </thead>
                                        <tbody class="road_detail">

                                        </tbody>
                                    </table>
                                </div>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="transchecklist">
                                <div class="col-md-6">
                                    <div class="table-heading">
                                        <h4 class="col-md-6 col-sm-6 col-xs-6">Equipment : Truck <span id=truckname></span></h4>
                                        <!-- <input type="submit" value="Save" class="save-btn-check" data-equipment='Truck'> -->
                                        <!-- <input type="submit" value="History" class="history-btn-checklist" data-equipment='Truck' data-toggle="modal" data-target="#truckhistoryModal"> --><input type="submit" value="New" class="new-btn-checklist" data-equipment='Truck' data-toggle="modal" data-target="#myChecklistModal">
                                    </div>

                                    <div class="table-responsive tableContainer"
                                         id="truck-checklist-table tableContainer">

                                        <div class="row1">
                                            <table class="table checklist border-bottom-none" >
                                                <thead>
                                                    <tr>
                                                        <th>Charge</th>
                                                        <th>Supplier</th>
                                                        <th>from</th>
                                                        <th>to</th>
                                                        <!--th>Alert</th-->
                                                        <th>Country</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="truck_checklist">

                                                </tbody>
                                            </table>


                                        </div>


                                    </div>

                                    <div class="truck_checklist_history modal fade" id="truckhistoryModal"  role="dialog">

                                        <div class="modal-dialog" style="width: 750px;
                                             margin: auto;">
                                            <div class="modal-content">
                                                <div class="table-heading modal-header">

                                                    <h4 class="col-md-6 col-sm-6 col-xs-6">Logs</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <table class="table checklist" >
                                                        <thead>
                                                            <tr>
                                                                <!--th>Chk</th-->
                                                                <th>Charge</th>
                                                                <th>Supplier</th>
                                                                <th>from</th>
                                                                <th>to</th>

                                                                <!--th>Alert</th-->
                                                                <th>Country</th>
                                                                <!--th>Confirm</th-->
                                                            </tr>
                                                        </thead>
                                                        <tbody class="truck_history_checklist">

                                                        </tbody>
                                                    </table>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="table-heading">
                                        <h4 class="col-md-6 col-sm-6 col-xs-6">Equipment : Trailer <span id=trailername></span></h4><!-- <input type="submit" value="Save" class="save-btn-check" data-equipment='Trailer'> --><!-- <input type="submit" value="History" class="history-btn-checklist" data-equipment='Trailer' data-toggle="modal" data-target="#trailerhistoryModal"> --><input type="submit" value="New" class="new-btn-checklist" data-equipment='Trailer' data-toggle="modal" data-target="#myChecklistModal">
                                    </div>
                                    <div class="table-responsive tableContainer"
                                         id="trailer-checklist-table tableContainer">

                                        <div class="row1">
                                            <table class="table checklist border-bottom-none" >
                                                <thead>
                                                    <tr>
                                                        <th>Charge</th>
                                                        <th>Supplier</th>
                                                        <th>from</th>
                                                        <th>to</th>

                                                        <!--th>Alert</th-->
                                                        <th>Country</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="trailer_checklist">

                                                </tbody>
                                            </table>
                                        </div>



                                    </div>
                                    <div class="trailer_checklist_history modal fade" id="trailerhistoryModal"  role="dialog">

                                        <div class="modal-dialog" style="width: 750px;
                                             margin: auto;">
                                            <div class="modal-content">
                                                <div class="table-heading modal-header">

                                                    <h4 class="col-md-6 col-sm-6 col-xs-6">Logs</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <table class="table checklist" >
                                                        <thead>
                                                            <tr>
                                                                <!--th>Chk</th-->
                                                                <th>Charge</th>
                                                                <th>Supplier</th>
                                                                <th>Validity from</th>
                                                                <th>Validity to</th>
                                                                <!--th>Alert</th-->
                                                                <th>Country</th>
                                                                <!--th>Confirm</th-->
                                                            </tr>
                                                        </thead>
                                                        <tbody class="trailer_history_checklist">

                                                        </tbody>
                                                    </table>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>

                            <div class="tab-pane fade" id="returncontainer">
                                <form id="returncontainer_form">
                                <div class="row">
                                    <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>Date</th>
                                                <th>Status</th>
                                                <th>Remark</th>
                                                <th>Upload</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <input type="hidden" class="form-control fuel_planning_id"
                                                           name="planning_id">
                                                    <input type="text" class="form-control containername"
                                                           name="container" required readonly>
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control sizename" name="size"
                                                           required readonly>
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control tranportername"
                                                           name="transporter" required="">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control truckname" name="truck"
                                                           required="">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control trailername" name="trailer"
                                                           required="">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control drivername" name="driver"
                                                           required="">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control locationname" name="location"
                                                           required="">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control detentionname"
                                                           name="detention" required="">
                                                </td>
                                                <td>
                                                    <input type="date" class="form-control datename" name="date"
                                                           required="">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control statusname" name="status"
                                                           required="">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control remarkname" name="remark"
                                                           required="">
                                                </td>
                                                <td>
                                                    <input type="file" class="form-control" name="upload">
                                                </td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <div class="col-md-12 col-sm-12 col-xs-12 ">
                                            <input type="submit" value="Add" id="returncontainerbutton" class="add-btn-allowance">
                                        </div>
                                    </div>
                                </div>
                                </form>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="tools-control-table return-trip-table">
                <div class="panel panel-default">
                    <div class="panel-heading table-heading">
                        <h4 class="table-heading"><span style="margin: 10px;">Return Trip</span></h4>
                    </div>
                    <div class="panel-body">
                        <div class="container form-group">
                            {!! Form::open(['method' => 'POST', 'url' => 'transport/tracking_status/store_planning', 'class' => 'form-vertical','id'=>'returnform'])  !!}
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="select">
                                        {{ Form::label('booking_no','Booking Nos',['class'=>'form-label']) }}
                                        {!! Form::select('order_number',['' => 'Select Booking Number'] + $page_data['booking_number'] ,null, ['id'=>'order_number','class' => 'form-control arr order_number']) !!}
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    {{ Form::label('customer','Customer',['class'=>'form-label']) }}
                                    {{ Form::text('customer',null,['class'=>'ret_customer form-control']) }}
                                </div>
                                <div class="col-md-2">
                                    {{ Form::label('customer_ref','Customer Ref',['class'=>'form-label']) }}
                                    {{ Form::text('customer_ref',null,['class'=>'ret_customer_ref form-control']) }}
                                </div>
                                <div class="col-md-2">
                                    {{ Form::label('consignee','Consignee',['class'=>'form-label']) }}
                                    {{ Form::text('consignee',null,['class'=>'ret_consignee form-control']) }}
                                </div>
                                <div class="col-md-2">
                                    {{ Form::label('trip_number','Trip Number',['class'=>'form-label']) }}
                                    {{ Form::text('trip_number',null,['class'=>'return_tripnos form-control','readonly'=>'true']) }}
                                </div>
                                <div class="col-md-2">
                                    {{ Form::label('truck','Truck',['class'=>'form-label']) }}
                                    {{ Form::text('truck',null,['class'=>'return_truck form-control']) }}
                                </div>
                                <div class="col-md-2">
                                    {{ Form::label('trailer','Trailer',['class'=>'form-label']) }}
                                    {{ Form::text('trailer',null,['class'=>'return_trailer form-control']) }}
                                </div>
                                <div class="col-md-2">
                                    {{ Form::label('driver','Driver',['class'=>'form-label']) }}
                                    {{ Form::text('driver',null,['class'=>'return_driver form-control']) }}
                                </div>
                                <div class="col-md-2">
                                    {{ Form::label('origin','Origin',['class'=>'form-label']) }}
                                    {{ Form::text('origin',null,['class'=>'ret_origin  form-control']) }}
                                </div>
                                <div class="col-md-2">
                                    {{ Form::label('destination','Destination',['class'=>'form-label']) }}
                                    {{ Form::text('destination',null,['class'=>'ret_destination form-control']) }}
                                </div>
                                <div class="col-md-2">
                                    {{ Form::label('border','Border',['class'=>'form-label']) }}
                                    {{ Form::text('border',null,['class'=>'ret_border form-control']) }}
                                </div>
                                <div class="col-md-2">
                                    {{ Form::label('Km','Km',['class'=>'form-label']) }}
                                    {{ Form::text('Km',null,['class'=>'return_km form-control']) }}
                                </div>
                                <div class="col-md-2 hide">
                                    {{ Form::label('line','Line',['class'=>'form-label']) }}
                                    {{ Form::text('line',null,['class'=>'return_line form-control','readonly'=>'true']) }}
                                </div>
                                <div class="col-md-2 hide">
                                    {{ Form::label('bl','BL',['class'=>'form-label']) }}
                                    {{ Form::text('bl',null,['class'=>'return_bl form-control','readonly'=>'true']) }}
                                    {{ Form::hidden('type',null,['class'=>'return_transporter form-control','readonly'=>'true']) }}
                                    {{ Form::hidden('transporter',null,['class'=>'return_transporter_name form-control','readonly'=>'true']) }}
                                </div>
                                <div class="col-md-4 savebutton">

                                </div>
                            </div>

                            <div class="row hide">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Container</th>
                                            <th>Product</th>
                                            <th>Size</th>
                                            <th>Quantity</th>
                                            <th>Packaging</th>
                                            <th>Weight</th>
                                            <th>Load Qty</th>
                                            <th>Bal Qty</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tlist">
                                    </tbody>
                                </table>
                            </div>
                            {{ Form::close() }}
                            <hr/>
                            <div class="row table-section">
                                <div class="table-responsive">
                                    <table id="mytable" class="table">
                                        <thead>
                                            <tr>
                                                <th>Select</th>

                                                <th>Container</th>
                                                <th>Product</th>
                                                <th>Size</th>
                                                <th>Quantity</th>
                                                <th>Packaging</th>
                                                <th>Weight</th>
                                                <th>Load Qty</th>
                                                <th>Bal Qty</th>
                                            </tr>
                                        </thead>
                                        <tbody class="return_details">
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
    <div style="left: 3%;right: 3%;" class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div style="padding-right: 9%;" class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Odometer Readings</h4>
          </div>
          <form id="odoMeterReadingForm">
              <div class="modal-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th class="text-center" style="width: 14.66%;"><b>Trip</b></th>
                            <th class="text-center" style="width: 14.66%;"><b>Truck</b></th>
                            <th class="text-center" style="width: 27.70%;"><b>Service @</b></th>
                            <th class="text-center" style="width: 14.66%;"><b>ODO Start</b></th>
                            <th class="text-center" style="width: 14.66%;"><b>ODO End</b></th>
                            <th class="text-center" style="width: 14.66%;"><b>KM</b></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-center" style="width: 14.66%;"><span for="trip" id="tripNumber"></span></td>
                            <td class="text-center" style="width: 14.66%;"><span for="truck" id="truckId"></span></td>
                            <td class="text-center" style="width: 27.70%;">
                                <button type="button" id="updateServiceId" class="btn-xs btn-success" onclick="calculateservice()" service-status="0">Update Service</button>
                                <span id="serviceAt">0</span>
                            </td>
                            <td class="text-center" style="width: 14.66%;"><input id="odoStartId" class="form-control" type="text" name="odo_start" oninput="format(this)" maxlength = "10" placeholder="Enter ODO Start" autocomplete="off" required /></td>
                            <td class="text-center" style="width: 14.66%;"><input id="odoEndId" class="form-control" type="text" name="odo_end" oninput="format2(this)" maxlength = "10" placeholder="Enter ODO End" autocomplete="off" required /></td>
                            <td class="text-center" style="width: 14.66%;"><span for="km" id="kmId">0</span></td>
                        </tr>
                    </tbody>
                </table>
              </div>
              <div style="border-bottom: 1px solid #e5e5e5;" class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="saveReading" class="btn btn-primary">Save</button>
              </div>
          </form>
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">History</h4>
          </div>
          <div class="modal-body">
            <div>
                <table class="table">
                    <thead>
                        <tr>
                            <th class="text-center" style="width: 16.01%;background: #e0e0e0;"><b>Date</b></th>
                            <th class="text-center" style="width: 11.9%;background: #e0e0e0;"><b>Trip</b></th>
                            <th class="text-center" style="width: 15.6%;background: #e0e0e0;"><b>Truck</b></th>
                            <th class="text-center" style="width: 10.9%;background: #e0e0e0;"><b>Service@</b></th>
                            <th class="text-center" style="width: 11%;background: #e0e0e0;"><b>ODO Start</b></th>
                            <th class="text-center" style="width: 10.8%;background: #e0e0e0;"><b>ODO End</b></th>
                            <th class="text-center" style="width: 11.6%;background: #e0e0e0;"><b>KM</b></th>
                            <th class="text-center" style="width: 12.19%;background: #e0e0e0;"><b>Status</b></th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div style="height: 100px;overflow: auto;margin-top: -22px;">
                <table class="table">
                     <tbody id="newRow">
                        <tr>
                            <td colspan="8" class="text-center">No records found!</td>
                        </tr>
                    </tbody>
                </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <form id="myExpenseModalForm">
    {{ csrf_field() }}
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog" style="width: 36% !important;">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Paid Date</h4>
              </div>
              <div class="modal-body">
                <div class="form-group" style="height:30px;">
                    <label for="paidDate" class="col-sm-2 control-label" style="line-height: 28px;">Date</label>
                    <div class="col-sm-10">
                      <input type="date" name="paid_date" class="form-control" placeholder="Enter Paid Date" required>
                    </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary expense-pay-save">Save</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </form>
    <form id="myChecklistModalForm">
        <div class="modal fade" id="myChecklistModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog" style="width: 80% !important;">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title"><span id="checklistSpan">Truck</span> Charges</h4>
              </div>
              <div class="modal-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th class="text-center" style="width: 14.28%;"><b>Charge</b></th>
                            <th class="text-center" style="width: 14.28%;"><b>Document Nr</b></th>
                            <th class="text-center" style="width: 14.28%;"><b>Supplier</b></th>
                            <th class="text-center" style="width: 14.28%;"><b>Validity From</b></th>
                            <th class="text-center" style="width: 14.28%;"><b>Validity To</b></th>
                            <th class="text-center" style="width: 14.28%;"><input type="button" value="ADD" class="btn btn-primary add-button-checklist"></th>
                        </tr>
                    </thead>
                    <tbody class="checklist-body">
                    </tbody>
                </table>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-success truck-charges-save">Save</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </form>
</section>
<div class="modal fade" id="basicModal2" tabindex="-1" role="dialog" aria-labelledby="basicModal2" aria-hidden="true">
  <div class="modal-dialog" style="width:70% !important;">
    <div class="modal-content">
        {!! Form::open(['method' => 'POST', 'url' => '#','id'=>'contactaddform','class' => 'form-vertical', 'role' => 'add phone', 'novalidate' => 'novalidate'])  !!}
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Contacts</h4>
      </div>
      <div class="modal-body">
        <table id="driver-phone-number" class="table table-bordered">
            <thead>
                <tr>
                    <th>Location</th>
                    <th>Name</th>
                    <th>Contact</th>
                    <th>Role</th>
                    <th id="addRow" class="wh-padding-0"><button type="button" class="btn btn-primary wh-w-100">Add</button></th>
                </tr>
            </thead>
            <tbody id="newRow2">
            </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button class="btn btn-primary contact-save-btn">Save changes</button>
      </div>
      {!! Form::close() !!}
      <div class="modal-body">
        <div class="row col-md-12">
            <div class="form-group col-md-4">
                <label>Role</label><br>
                <select class="form-control role-select-filter ct-search-filter"></select>
            </div>
            <div class="form-group col-md-4">
                <label>Location</label><br>
                <select class="form-control location-select-filter ct-search-filter"></select>
            </div>
            <div class="form-group col-md-4">
                <label>Name</label><br>
                <select class="form-control name-select-filter ct-search-filter"></select>
            </div>
        </div>
        <div>
            <table class="table" id="contactsTableId">
                <thead>
                    <tr>
                        <th class="text-center th-bg-color" style="width:25%">Location</th>
                        <th class="text-center th-bg-color" style="width:25%">Name</th>
                        <th class="text-center th-bg-color" style="width:25%">Contact</th>
                        <th class="text-center th-bg-color" style="width:25%">Role</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div style="height: 100px;overflow: auto;margin-top: -22px;">
            <table class="table table-bordered">
                <tbody id="contactsTableBodyId" class="contacts-body"></tbody>
            </table>
        </div>
      </div>
    </div>
  </div>
</div>
{!! Form::open(['route' => 'transport.supplier.store', 'id' => 'addsupplierform', 'class' => 'form-vertical']) !!}
<input type="hidden" name="status" value="1">
<input type="hidden" name="module[]" value="fuel">
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="width: 70% !important;">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Add New Supplier</h4>
      </div>
      <div class="modal-body">
        <div class="row">
            <div class="form-group col-md-3">
                {!! Html::decode(Form::label('name', 'Name <span class="error">*</span>')) !!}
                <input type="text" name="name" class="form-control name_form_class" placeholder="Enter Name" required>
                {!! $errors->first('name', '<p class="help-block">:message</p>') !!}
            </div>
            <div class="form-group col-md-3">
                {!! Html::decode(Form::label('company_name', 'Company Name <span class="error">*</span>')) !!}
                <input type="text" name="company_name" class="form-control company_name_form_class" placeholder="Enter Company Name" required>
                {!! $errors->first('company_name', '<p class="help-block">:message</p>') !!}
            </div>
            <div class="form-group col-md-3">
                {!! Html::decode(Form::label('service', 'Service <span class="error">*</span>')) !!}
                <input type="text" name="service" class="form-control service_form_class" placeholder="Enter Service" required>
                {!! $errors->first('service', '<p class="help-block">:message</p>') !!}
            </div>
            <div class="form-group col-md-3">
                {!! Html::decode(Form::label('phone_no', 'Phone No <span class="error">*</span>')) !!}
                <input type="number" name="phone_no" class="form-control phone_no_form_class" placeholder="Enter Service" required>
                {!! $errors->first('phone_no', '<p class="help-block">:message</p>') !!}
            </div>
            <div class="form-group col-md-3">
                {!! Html::decode(Form::label('landLine_no', 'Landline No <span class="error">*</span>')) !!}
                <input type="number" name="landLine_no" class="form-control landLine_no_form_class" placeholder="Enter Service" required>
                {!! $errors->first('landLine_no', '<p class="help-block">:message</p>') !!}
            </div>
            <div class="form-group col-md-3">
                <label>Email</label>
                <input type="email" name="email" class="form-control email_form_class" placeholder="Enter Email">
                {!! $errors->first('email', '<p class="help-block">:message</p>') !!}
            </div>
            <div class="form-group col-md-3">
                {!! Html::decode(Form::label('country', 'Country <span class="error">*</span>')) !!}
                {!! Form::select('country', ['' => 'Select Country'] + $page_data['countryData']->toArray(), null, ['class' => 'form-control country_form_class', 'required'=>'true']) !!}
                {!! $errors->first('country', '<p class="help-block">:message</p>') !!}
            </div>
            <div class="form-group col-md-3">
                {!! Html::decode(Form::label('location', 'Location <span class="error">*</span>')) !!}
                {!! Form::select('location', ['' => 'Select Location'] + $page_data['locationData']->toArray(), null, ['class' => 'form-control country_form_class', 'required'=> 'true']) !!}
                {!! $errors->first('location', '<p class="help-block">:message</p>') !!}
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary expense-pay-save">Save</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{!! Form::close() !!}
<div class="modal fade" id="basicModal3" tabindex="-1" role="dialog" aria-labelledby="basicModal3" aria-hidden="true">
    <div class="modal-dialog" style="width:25% !important;">
        <div class="modal-content">
            {!! Form::open(['method' => 'POST', 'url' => '#','id'=>'contactaddphoneform','class' => 'form-vertical', 'role' => 'add phone', 'novalidate' => 'novalidate'])  !!}
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Add Phone Numbers</h4>
          </div>
          <div class="modal-body">
            <table id="driver-phone-number" class="table table-bordered">
                <thead>
                    <tr>
                        <th></th>
                        <th id="addRow3" class="wh-padding-0"><button type="button" class="btn btn-primary wh-w-100">Add</button></th>
                    </tr>
                    <tr>
                        <td class="text-center"><b>Phone Nr</b></td>
                        <td class="text-center"></td>
                    </tr>
                </thead>
                <tbody id="newRow3">
                </tbody>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button class="btn btn-primary">Save</button>
          </div>
          {!! Form::close() !!}
        </div>
    </div>
</div>
<div class="modal fade" id="basicModal4" tabindex="-1" role="dialog" aria-labelledby="basicModal4" aria-hidden="true">
    <div class="modal-dialog" style="width:25% !important;">
        <div class="modal-content">
            {!! Form::open(['method' => 'POST', 'url' => '#','id'=>'contactaddeditphoneform','class' => 'form-vertical', 'role' => 'add/edit phone', 'novalidate' => 'novalidate'])  !!}
            <input type="hidden" name="id" class="cnt_id" value=""/>
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Add/Edit Phone Numbers</h4>
          </div>
          <div class="modal-body">
            <table id="driver-phone-number" class="table table-bordered">
                <thead>
                    <tr>
                        <th></th>
                        <th id="addRow4" class="wh-padding-0"><button type="button" class="btn btn-primary wh-w-100">Add</button></th>
                    </tr>
                    <tr>
                        <td class="text-center"><b>Phone Nr</b></td>
                        <td class="text-center"></td>
                    </tr>
                </thead>
                <tbody id="newRow4">
                </tbody>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button class="btn btn-primary">Save</button>
          </div>
          {!! Form::close() !!}
        </div>
    </div>
</div>
<div class="modal fade" id="basicModal5" tabindex="-1" role="dialog" aria-labelledby="basicModal5" aria-hidden="true">
    <div class="modal-dialog" style="width:95% !important;">
        <div class="modal-content">
          <div class="modal-body">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#ownmenu">Own</a></li>
                <li><a data-toggle="tab" href="#thirdpartymenu">Third Party</a></li>
            </ul>
            <div class="tab-content">
                <div id="ownmenu" class="tab-pane fade in active">
                    <div class="apply-ownfuel-div"></div>
                    {!! Form::open(['method' => 'POST', 'url' => '#','id'=>'ownodoreadingupdateform','class' => 'form-vertical d-none', 'novalidate' => 'novalidate'])  !!}
                    <input id="ownUpdateId" type="hidden" name="id" value="0">
                    <input id="ownCurrencyUpdateId" type="hidden" name="currency" value="">
                    <input id="ownFuelUpdateId" type="hidden" name="fuel" value="">
                    <input id="ownStatusUpdateId" type="hidden" name="status" value="0">
                    <br>
                    <div class="form-inline">
                        <div class="form-group col-md-3">
                            <label>Site :</label>
                            <div class="input-group">
                                <select id="ownSiteUpdateId" class="form-control" name="site" required>
                                    <option value="" data-location="" data-tank="">Select Site</option>
                                    @foreach($page_data['own_site_locations'] as $dt)
                                        <option value="{{$dt->site}}" data-location="{{$dt->location}}" data-tank="{{$dt->tanks}}">{{$dt->site}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Tank :</label>
                            <div class="input-group">
                                <select id="ownTankUpdateId" class="form-control" name="tank" required>
                                    <option value="">Select Tank</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 d-none">
                            <span id="locationUpdateValSpn"></span>
                            <input id="locationUpdateHiddenId" type="hidden" name="location">
                        </div>
                        <div class="form-group col-md-2">
                            <button type="button" class="form-control btn-success" onclick="calculateUpdateOwnService()">Serviced</button>
                            <span id="ownServiceAtUpdateSpanId"></span>
                            <input id="ownServiceAtUpdateId" type="hidden" name="service_at" value="">
                        </div>
                    </div>
                    <br>
                    <br>
                    <br>
                    <table class="table tbl-border">
                        <thead>
                            <tr>
                                <th class="text-center">Date</th>
                                <th class="text-center">Fleet Nr / Equipment</th>
                                <th class="text-center">Trip</th>
                                <th class="text-center">ODO Start</th>
                                <th class="text-center">ODO End</th>
                                <th class="text-center">KM</th>
                                <th class="text-center">Order</th>
                                <th class="text-center">Driver</th>
                                <th class="text-center">Qty</th>
                                <th class="text-center">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-center"><input id="ownDateUpdateId" type="date" name="date" class="form-control" autocomplete="off" required /></td>
                                <td class="text-center" style="display:flex;">
                                    <div class="input-group">{!! Form::select("fleet_nr",["" => "Fleet Nr"],null, ["class" => "form-control", 'id' => 'ownFleetUpdateId', 'required'=>'true']) !!}</div> 
                                    <div class="input-group">
                                        <span id="ownEquipUpdateSpanId"></span>
                                        <input type="hidden" name="equipment" id="ownEquipUpdateId" value="">
                                    </div></td>
                                <td class="text-center"><div class="input-group">{!! Form::select('trip',['' => 'Select Trip'],null, ['id'=>'ownTripUpdateId','class' => 'form-control trip_class']) !!}</div></td>
                                <td class="text-center"><input id="ownOdoStartUpdateId" class="form-control" type="text" name="odo_start" oninput="ownUpdateFormat(this)" maxlength = "10" placeholder="ODO Start" autocomplete="off" required /></td>
                                <td class="text-center"><input id="ownOdoEndUpdateId" class="form-control" type="text" name="odo_end" oninput="ownUpdateFormat2(this)" maxlength = "10" placeholder="ODO End" autocomplete="off" required /></td>
                                <td class="text-center">
                                    <input id="ownKmUpdateHiddenId" type="hidden" name="km" value="0">
                                    <span for="km" id="ownKmUpdateId">0</span>
                                </td>
                                <td class="text-center"><input id="ownOrderUpdateId" type="text" name="order" class="form-control" placeholder="Order" autocomplete="off" required></td>
                                <td class="text-center"><input id="ownDriverUpdateId" type="text" name="driver" class="form-control" placeholder="Driver" autocomplete="off" required></td>
                                <td class="text-center"><input id="ownQtyUpdateId" type="number" name="quantity" class="form-control" placeholder="Qty" autocomplete="off" required></td>
                                <td class="text-center"><input id="ownAmountUpdateId" type="number" name="amount" class="form-control" placeholder="Amount" autocomplete="off" required></td>
                                <td><input id="updateOwnReading" type="submit" class="btn btn-success" value="UPDATE"></td>
                            </tr>
                        </tbody>
                    </table>
                    {!! Form::close() !!}
                    {!! Form::open(['method' => 'POST', 'url' => '#','id'=>'ownodoreadingaddform','class' => 'form-vertical', 'novalidate' => 'novalidate'])  !!}
                    <input id="ownStatusId" type="hidden" name="status" value="0">
                    <input id="ownCurrencyId" type="hidden" name="currency" value="">
                    <input id="ownFuelId" type="hidden" name="fuel" value="">
                    <br>
                    <div class="form-inline">
                        <div class="form-group col-md-3">
                            <label>Site :</label>
                            <div class="input-group">
                                <select id="ownSiteId" class="form-control" name="site" required>
                                    <option value="" data-location="" data-tank="">Select Site</option>
                                    @foreach($page_data['own_site_locations'] as $dt)
                                        <option value="{{$dt->site}}" data-location="{{$dt->location}}" data-tank="{{$dt->tanks}}">{{$dt->site}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Tank :</label>
                            <div class="input-group">
                                <select id="ownTankId" class="form-control" name="tank" required>
                                    <option value="">Select Tank</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 d-none">
                            <span id="locationValSpn"></span>
                            <input id="locationHiddenId" type="hidden" name="location">
                        </div>
                        <div class="form-group col-md-2">
                            <button type="button" class="form-control btn-success" onclick="calculateownservice()">Serviced</button>
                            <span id="ownServiceAtSpanId"></span>
                            <input id="ownServiceAtId" type="hidden" name="service_at" value="">
                        </div>
                        <div class="col-md-1"><input type="button" value="Apply" class="convert-btn-to-link apply-ownfuel-btn weight-size-small" /></div>
                    </div>
                    <br>
                    <br>
                    <br>
                    <table class="table tbl-border">
                        <thead>
                            <tr>
                                <th class="text-center">Date</th>
                                <th class="text-center">Fleet Nr / Equipment</th>
                                <th class="text-center">Trip</th>
                                <th class="text-center">ODO Start</th>
                                <th class="text-center">ODO End</th>
                                <th class="text-center">KM</th>
                                <th class="text-center">Order</th>
                                <th class="text-center">Driver</th>
                                <th class="text-center">Qty</th>
                                <th class="text-center">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-center"><input id="ownDateId" type="date" name="date" class="form-control" autocomplete="off" required /></td>
                                <td class="text-center" style="display:flex;">
                                    <div class="input-group">{!! Form::select("fleet_nr",["" => "Fleet Nr"],null, ["class" => "form-control", 'id' => 'ownFleetId', 'required'=>'true']) !!}</div> 
                                    <div class="input-group">
                                        <span id="ownEquipSpanId"></span>
                                        <input type="hidden" name="equipment" id="ownEquipId" value="">
                                    </div></td>
                                <td class="text-center"><div class="input-group">{!! Form::select('trip',['' => 'Select Trip'],null, ['id'=>'ownTripAddId','class' => 'form-control trip_class']) !!}</div></td>
                                <td class="text-center"><input id="ownOdoStartId" class="form-control" type="text" name="odo_start" oninput="ownformat(this)" maxlength = "10" placeholder="ODO Start" autocomplete="off" required /></td>
                                <td class="text-center"><input id="ownOdoEndId" class="form-control" type="text" name="odo_end" oninput="ownformat2(this)" maxlength = "10" placeholder="ODO End" autocomplete="off" required /></td>
                                <td class="text-center">
                                    <input id="ownKmHiddenId" type="hidden" name="km" value="0">
                                    <span for="km" id="ownKmId">0</span>
                                </td>
                                <td class="text-center"><input id="ownOrderId" type="text" name="order" class="form-control" placeholder="Order" autocomplete="off" required></td>
                                <td class="text-center"><input id="ownDriverId" type="text" name="driver" class="form-control" placeholder="Driver" autocomplete="off" required></td>
                                <td class="text-center"><input id="ownQtyId" type="number" name="quantity" class="form-control" placeholder="Qty" autocomplete="off" required></td>
                                <td class="text-center"><input id="ownAmountId" type="number" name="amount" class="form-control" placeholder="Amount" autocomplete="off" required></td>
                                <td><input id="saveOwnReading" type="submit" class="btn btn-success" value="ADD"></td>
                            </tr>
                        </tbody>
                    </table>
                    {!! Form::close() !!}
                    <hr>
                    <div class="tableFixHeadClass">
                        {!! Form::open(['method' => 'POST', 'route' => 'transport.tracking_status.own.get_readings','id'=>'ownodofilterform','class' => 'form-vertical', 'novalidate' => 'novalidate'])  !!}
                        <input id="ownFromDateFilterId" type="hidden" name="from_date" value="">
                        <input id="ownToDateFilterId" type="hidden" name="to_date" value="">
                        <table class="scrollTableClass">
                            <thead class="tableThdThFixHeadClass">
                                <tr>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass"><button class="form-control" type="button" data-toggle="modal" data-target="#basicModal7">Date</button></th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass" style="padding: 8px 0px;">{!! Form::select("site",["" => "Site"] + $page_data['site_filter_data']->toArray() ,null, ["class" => "form-control", "id" => 'ownSiteFilterId', 'required'=>'true']) !!}</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Location / {!! Form::select("tank",["" => "Tank"] + $page_data['tank_filter_data']->toArray() ,null, ["class" => "form-control", 'id' => 'ownTankFilterId', 'required'=>'true']) !!}</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass" style="padding: 8px 0px;">{!! Form::select("fleet_nr",["" => "Fleet Nr"] + $page_data['fleet_nr_ownfilter_data']->toArray() ,null, ["class" => "form-control", 'id' => 'ownFleetNrFilterId', 'required'=>'true']) !!}</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Equipment</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">{!! Form::select("trip",["" => "Trip"] + $page_data['trip_ownfilter_data']->toArray() ,null, ["class" => "form-control trip_class", 'id' => 'ownTripFilterId', 'required'=>'true']) !!}</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass" style="padding: 8px 0px;">{!! Form::select("owndriver",["" => "Driver"] + $page_data['driver_ownfilter_data']->toArray() ,null, ["class" => "form-control", 'id' => 'ownDriverFilterId', 'required'=>'true']) !!}</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass" style="padding: 8px 0px;">{!! Form::select("ownorder",["" => "Order"] + $page_data['order_ownfilter_data']->toArray() ,null, ["class" => "form-control", 'id' => 'ownOrderFilterId', 'required'=>'true']) !!}</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Fuel</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass" style="white-space: nowrap;">Order Qty</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">In Qty</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass" style="white-space: nowrap;">Out Qty</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Balance</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Amount</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">ODO Start</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">ODO End</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">KM</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Service@</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Status</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Action</th>
                                </tr>
                            </thead>
                            <tbody class="own-service-body">
                                <tr>
                                    <td colspan="16" class="text-center tableThTdPdBClass">No records found!</td>
                                </tr>
                            </tbody>
                        </table>
                        {!! Form::close() !!}
                    </div>
                </div>
                <div id="thirdpartymenu" class="tab-pane fade">
                    {!! Form::open(['method' => 'POST', 'url' => '#','id'=>'thirdpartyodoupdateform','class' => 'form-vertical d-none', 'role' => 'add supplier expenses', 'novalidate' => 'novalidate'])  !!}
                        <input id="tpUpdateId" type="hidden" name="id" value="">
                        <input id="tpStatusUpdateId" type="hidden" name="status" value="0">
                        <input id="tpCurrencyUpdateId" type="hidden" name="currency" value="">
                        <input id="tpFuelUpdateId" type="hidden" name="fuel" value="">
                    <br>
                    <div class="form-inline">
                        <div class="form-group col-md-3">
                            <label>Supplier :</label>
                            <div class="input-group">
                                <select id="thirdPartySupplierUpdateId" class="form-control" name="supplier" required>
                                    <option value="">Supplier</option>
                                    @foreach ($page_data['supplier_locations'] as $spl_fuel)
                                        <option value="{{$spl_fuel->name}}" data-location="{{$spl_fuel->location}}">{{ $spl_fuel->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Location :</label>
                            <div class="input-group">{!! Form::select("location",["" => "Location"] ,null, ["class" => "form-control", "id" => 'tpLocationUpdateId', 'required'=>'true']) !!}</div>
                        </div>
                        <div class="form-group col-md-2">
                            <button type="button" class="form-control btn-success" onclick="calculateTpServiceUpdate()">Serviced</button>
                            <span id="tpServiceAtUpdateSpanId"></span>
                            <input id="tpServiceAtUpdateId" type="hidden" name="service_at" value="">
                        </div>
                    </div>
                    <br>
                    <br>
                    <br>
                    <table class="table tbl-border">
                        <thead>
                            <tr>
                                <th class="text-center">Date</th>
                                <th class="text-center">Fleet Nr / Equipment</th>
                                <th class="text-center">Trip</th>
                                <th class="text-center">ODO Start</th>
                                <th class="text-center">ODO End</th>
                                <th class="text-center">KM</th>
                                <th class="text-center">Order</th>
                                <th class="text-center">Driver</th>
                                <th class="text-center">Qty</th>
                                <th class="text-center">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-center"><input id="tpDateUpdateId" type="date" name="date" class="form-control" autocomplete="off" required /></td>
                                <td class="text-center" style="display:flex;">
                                    <div class="input-group">{!! Form::select("fleet_nr",["" => "Fleet Nr"] + $page_data["registration_number"] ,null, ["class" => "form-control", 'id' => 'tpFleetUpdateId', 'required'=>'true']) !!}</div> 
                                    <div class="input-group">
                                        <span id="tpEquipUpdateSpanId"></span>
                                        <input id="tpEquipUpdateId" type="hidden" name="equipment" value="">
                                    </div>
                                </td>
                                <td class="text-center"><div class="input-group">{!! Form::select('trip',['' => 'Select Trip'],null, ['id'=>'tpTripUpdateId','class' => 'form-control trip_class']) !!}</div></td>
                                <td class="text-center"><input id="tpOdoStartUpdateId" class="form-control" type="text" name="odo_start" oninput="tpFormatUpdate(this)" maxlength = "10" placeholder="ODO Start" autocomplete="off" required /></td>
                                <td class="text-center"><input id="tpOdoEndUpdateId" class="form-control" type="text" name="odo_end" oninput="tpFormatUpdate2(this)" maxlength = "10" placeholder="ODO End" autocomplete="off" required /></td>
                                <td class="text-center">
                                    <input id="tpKmUpdateHiddenId" type="hidden" name="km" value="0">
                                    <span for="km" id="tpKmUpdateId">0</span>
                                </td>
                                <td class="text-center"><input id="tpOrderUpdateId" type="text" name="order" class="form-control" placeholder="Order" autocomplete="off" required></td>
                                <td class="text-center"><input id="tpDriverUpdateId" type="text" name="driver" class="form-control" placeholder="Driver" autocomplete="off" required></td>
                                <td class="text-center"><input id="tpQtyUpdateId" type="number" name="quantity" class="form-control" placeholder="Qty" autocomplete="off" required></td>
                                <td class="text-center"><input id="tpAmountUpdateId" type="number" name="amount" class="form-control" placeholder="Amount" autocomplete="off" required></td>
                                <td><input id="updateThirdPartyReading" type="submit" class="btn btn-success" value="UPDATE"></td>
                            </tr>
                        </tbody>
                    </table>
                    {!! Form::close() !!}
                    {!! Form::open(['method' => 'POST', 'url' => '#','id'=>'thirdpartyodostoreform','class' => 'form-vertical', 'role' => 'add supplier expenses', 'novalidate' => 'novalidate'])  !!}
                        <input id="tpStatusId" type="hidden" name="status" value="0">
                        <input id="tpCurrencyId" type="hidden" name="currency" value="">
                        <input id="tpFuelId" type="hidden" name="fuel" value="">
                    <br>
                    <div class="form-inline">
                        <div class="form-group col-md-3">
                            <label>Supplier :</label>
                            <div class="input-group">
                                 <select id="thirdPartySupplierId" class="form-control" name="supplier" required>
                                    <option value="">Supplier</option>
                                    @foreach ($page_data['supplier_locations'] as $spl_fuel)
                                        <option value="{{$spl_fuel->name}}" data-location="{{$spl_fuel->location}}">{{ $spl_fuel->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Location :</label>
                            <div class="input-group">{!! Form::select("location",["" => "Location"] ,null, ["class" => "form-control", "id" => 'tpLocationId', 'required'=>'true']) !!}</div>
                        </div>
                        <div class="form-group col-md-2">
                            <button type="button" class="form-control btn-success" onclick="calculatetpservice()">Serviced</button>
                            <span id="tpServiceAtSpanId"></span>
                            <input id="tpServiceAtId" type="hidden" name="service_at" value="">
                        </div>
                    </div>
                    <br>
                    <br>
                    <br>
                    <table class="table tbl-border">
                        <thead>
                            <tr>
                                <th class="text-center">Date</th>
                                <th class="text-center">Fleet Nr / Equipment</th>
                                <th class="text-center">Trip</th>
                                <th class="text-center">ODO Start</th>
                                <th class="text-center">ODO End</th>
                                <th class="text-center">KM</th>
                                <th class="text-center">Order</th>
                                <th class="text-center">Driver</th>
                                <th class="text-center">Qty</th>
                                <th class="text-center">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-center"><input id="tpDateId" type="date" name="date" class="form-control" autocomplete="off" required /></td>
                                <td class="text-center" style="display:flex;">
                                    <div class="input-group">{!! Form::select("fleet_nr",["" => "Fleet Nr"] + $page_data["registration_number"] ,null, ["class" => "form-control", 'id' => 'tpFleetId', 'required'=>'true']) !!}</div> 
                                    <div class="input-group">
                                        <span id="tpEquipSpanId"></span>
                                        <input id="tpEquipId" type="hidden" name="equipment" value="">
                                    </div>
                                </td>
                                <td class="text-center">
                                    <div class="input-group">{!! Form::select('trip',['' => 'Select Trip'],null, ['id'=>'tpTripId','class' => 'form-control trip_class']) !!}</div>
                                </td>
                                <td class="text-center"><input id="tpOdoStartId" class="form-control" type="text" name="odo_start" oninput="tpformat(this)" maxlength = "10" placeholder="ODO Start" autocomplete="off" required /></td>
                                <td class="text-center"><input id="tpOdoEndId" class="form-control" type="text" name="odo_end" oninput="tpformat2(this)" maxlength = "10" placeholder="ODO End" autocomplete="off" required /></td>
                                <td class="text-center">
                                    <input id="tpKmHiddenId" type="hidden" name="km" value="0">
                                    <span for="km" id="tpKmId">0</span>
                                </td>
                                <td class="text-center"><input id="tdOrderId" type="text" name="order" class="form-control" placeholder="Order" autocomplete="off" required></td>
                                <td class="text-center"><input id="tpDriverId" type="text" name="driver" class="form-control" placeholder="Driver" autocomplete="off" required></td>
                                <td class="text-center"><input id="tpQtyId" type="number" name="quantity" class="form-control" placeholder="Qty" autocomplete="off" required></td>
                                <td class="text-center"><input id="tpAmountId" type="number" name="amount" class="form-control" placeholder="Amount" autocomplete="off" required></td>
                                <td><input id="saveThirdPartyReading" type="submit" class="btn btn-success" value="ADD"></td>
                            </tr>
                        </tbody>
                    </table>
                    {!! Form::close() !!}
                    <hr>
                    <div class="tableFixHeadClass">
                        {!! Form::open(['method' => 'POST', 'route' => 'transport.tracking_status.third_party.get_readings','id'=>'thirdpartyodofilterform','class' => 'form-vertical', 'role' => 'add supplier expenses', 'novalidate' => 'novalidate'])  !!}
                        <input id="tpFromDateFilterId" type="hidden" name="from_date" value="">
                        <input id="tpToDateFilterId" type="hidden" name="to_date" value="">
                        <table class="scrollTableClass">
                            <thead class="tableThdThFixHeadClass">
                                <tr>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass"><button class="form-control" type="button" data-toggle="modal" data-target="#basicModal6">Date</button></th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass" style="padding: 8px 0px;">{!! Form::select("supplier",["" => "Supplier"] + $page_data['supplier_filter_data']->toArray() ,null, ["class" => "form-control", "id" => 'thirdPartySupplierFilterId', 'required'=>'true']) !!}</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass" style="padding: 8px 0px;">{!! Form::select("fleet_nr",["" => "Fleet Nr"] + $page_data['fleet_nr_filter_data']->toArray() ,null, ["class" => "form-control", 'id' => 'tpFleetNrFilterId', 'required'=>'true']) !!}</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Equipment</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Trip</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass" style="padding: 8px 0px;">{!! Form::select("tpdriver",["" => "Driver"] + $page_data['driver_filter_data']->toArray() ,null, ["class" => "form-control", 'id' => 'tpDriverFilterId', 'required'=>'true']) !!}</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass" style="padding: 8px 0px;">{!! Form::select("tporder",["" => "Order"] + $page_data['order_filter_data']->toArray() ,null, ["class" => "form-control", 'id' => 'tpOrderFilterId', 'required'=>'true']) !!}</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Fuel</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Qty</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Amount</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">ODO Start</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">ODO End</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">KM</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Service@</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Status</th>
                                    <th class="text-center bg-white-warm tableThdThFixHeadClass tableThTdPdBClass">Action</th>
                                </tr>
                            </thead>
                            <tbody class="thirdparty-service-body">
                                <tr>
                                    <td colspan="16" class="text-center tableThTdPdBClass">No records found!</td>
                                </tr>
                            </tbody>
                        </table>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    </div>
</div>
<div class="modal fade" id="basicModal6" tabindex="-1" role="dialog" aria-labelledby="basicModal6" aria-hidden="true">
    <div class="modal-dialog" style="width:25% !important;">
        <div class="modal-content">
          {!! Form::open(['method' => 'POST', 'id'=>'tpododatefilterform','class' => 'form-vertical', 'novalidate' => 'novalidate'])  !!}
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel"></h4>
          </div>
          <div class="modal-body">
            <div class="row">
                <div class="form-group col-md-6">
                    <label>From Date</label>
                    <input id="filterFromDateId" type="date" class="form-control" name="from_date">
                </div>
                <div class="form-group col-md-6">
                    <label>To Date</label>
                    <input id="filterToDateId" type="date" class="form-control" name="to_date">
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
          {!! Form::close() !!}
        </div>
    </div>
</div>
<div class="modal fade" id="basicModal7" tabindex="-1" role="dialog" aria-labelledby="basicModal7" aria-hidden="true">
    <div class="modal-dialog" style="width:25% !important;">
        <div class="modal-content">
          {!! Form::open(['method' => 'POST', 'id'=>'ownododatefilterform','class' => 'form-vertical', 'novalidate' => 'novalidate'])  !!}
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel"></h4>
          </div>
          <div class="modal-body">
            <div class="row">
                <div class="form-group col-md-6">
                    <label>From Date</label>
                    <input id="filterOwnFromDateId" type="date" class="form-control" name="from_date">
                </div>
                <div class="form-group col-md-6">
                    <label>To Date</label>
                    <input id="filterOwnToDateId" type="date" class="form-control" name="to_date">
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
          {!! Form::close() !!}
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {

        /*$("#checkboxitem").change(function () {
            var item=$(this);
            if(item.is(":checked"))
            {
                window.location.href= item.data("target")
            } else
            {
                window.location.href= item.data("target-off")
            }
        });*/



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

            }
        }
        $(document).on('click', '.print', function() {
            var id = $(this).data('id');
            $(this).attr('href', function () {
                return "{{ URL::to('downloadTripSheet/xls') }}" + '/' + id;
            });
        });

        // $("#booking_number,#customer,#origin,#destination,#status,#border,#km,#trip,#customer_ref,#consignee,#shipping_line,#ladding_bill,#cargo_type,#product,#container,#truck,#trailer,#driver").change(function () {
        //     $("#form1").submit();
        // });

        $.validator.addMethod("validity_to_date_cls", function(value, element) {
            var startDate = $(element).parent().prev().children().val();
            return Date.parse(startDate) < Date.parse(value) || value == "";
        }, "Validity to must be after validity from");

    });
</script>
<script type="text/javascript">
    function toggleIcon(e) {
        $(e.target)
                .prev('.panel-heading')
                .find(".more-less")
                .toggleClass('glyphicon-plus glyphicon-minus');
    }
    $('.panel-group').on('hidden.bs.collapse', toggleIcon);
    $('.panel-group').on('shown.bs.collapse', toggleIcon);
</script>
<script type="text/javascript">
    var trackingStatusDataTable = '';

    $(document).ready(function () {

        $('#odoReadingStoreFromFuel').on('submit', function(e) {
            e.preventDefault();
            var tripNumber = $('#tripNumber').text();
            var truckName = $('#truckId').text();
            var serviceAt = $('.service_at_fuel_class').val();
            var service_status = $('.service_at_fuel_class').attr('service-status');
            var d = new Date();
            var serviceDate = d.getFullYear() + "/" + (d.getMonth()+1) + "/" + d.getDate();
            var odoStartId = $('.odo_start_fuel_class').val();
            var odoEndId = $('.odo_end_fuel_class').val();
            var kmId = $('.km_fuel_class').val();

            var tmp_service_at = parseFloat(serviceAt.replace(/,/g, ''));
            var tmp_odo_end = parseFloat(odoEndId.replace(/,/g, ''));
            var check_km = tmp_service_at - tmp_odo_end;
            if(check_km < 1000)
            {
                Swal.fire({
                  imageUrl: '{{ asset("app/images/warning.jpg")}}',
                  imageHeight: 100,
                  title: 'Are you sure?',
                  text: "Your service needs to done! will continue without service!",
                  showCancelButton: true,
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: 'Yes'
                }).then((result) => {
                  if (result.isConfirmed) {
                    storeOdoMeterReading(truckName, tripNumber, serviceAt, serviceDate, odoStartId, odoEndId, kmId, service_status);
                  }
                });
            }
            else {
                storeOdoMeterReading(truckName, tripNumber, serviceAt, serviceDate, odoStartId, odoEndId, kmId, service_status);
            }
        });

        trackingStatusDataTable = $('#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("transport.tracking_status.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();
                    if (show_all_item == "on") {
                        $("#form3 input[type='radio']:checked").prop( "checked", false );
                    }
                    var type_value = $("#form3 input[type='radio']:checked").val();
                    // var booking_number_val = $("#booking_number").val();
                    var customer_val = $("#customer").val();
                    var origin_val = $("#origin").val();
                    var destination_val = $("#destination").val();
                    var trip_val = $("#trip").val();
                    var customer_ref_val = $("#customer_ref").val();
                    var consignee_val = $("#consignee").val();
                    var shipping_line_val = $("#shipping_line").val();
                    var ladding_bill_val = $("#ladding_bill").val();
                    var cargo_type_val = $("#cargo_type").val();
                    var product_val = $("#product").val();
                    var truck_val = $("#truck").val();
                    var trailer_val = $("#trailer").val();
                    var border_val = $("#border").val();
                    var km_val = $("#km").val();
                    var driver_val = $("#driver").val();
                    var status_val = $("#status").val();
                    // Append to data
                    data.searchByShowAllItem = show_all_item;
                    data.searchByType = type_value;
                    // data.searchByBookingNumber = booking_number_val;
                    data.searchByCustomer = customer_val;
                    data.searchByOrigin = origin_val;
                    data.searchByDestination = destination_val;
                    data.searchByTrip = trip_val;
                    data.searchByCustomerRef = customer_ref_val;
                    data.searchByConsignee = consignee_val;
                    data.searchByShippingLine = shipping_line_val;
                    data.searchByLaddingBill = ladding_bill_val;
                    data.searchByCargoType = cargo_type_val;
                    data.searchByProduct = product_val;
                    data.searchByTruck = truck_val;
                    data.searchByTrailer = trailer_val;
                    data.searchByDriver = driver_val;
                    data.searchByBorder = border_val;
                    data.searchByKm = km_val;
                    data.searchByStatus = status_val;
                }
            },
            'createdRow': function( row, data, dataIndex ) {
                if (data.deleted == 1) {
                    $(row).addClass( 'CancelCss' );
                }
            },
            '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: 'created_at', bSortable: false },
                { data: 'order_id', bSortable: false },
                { data: 'customer', bSortable: false },
                { data: 'customer_ref', bSortable: false },
                { data: 'consignee', bSortable: false },
                { data: 'trip_number', bSortable: false },
                { data: 'truck', bSortable: false },
                { data: 'trailer', bSortable: false },
                { data: 'driver', bSortable: false },
                { data: 'origin', bSortable: false },
                { data: 'destination', bSortable: false },
                { data: 'border', bSortable: false },
                { data: 'km', bSortable: false },
                { data: 'shipping_line', bSortable: false },
                { data: 'lading_bill', bSortable: false },
                { data: 'cargo_type', bSortable: false },
                { data: 'product', bSortable: false },
                { data: 'size', bSortable: false },
                { data: 'weight', bSortable: false },
                {
                    "mData": "packaging",
                    "mRender": function (data, type, row) {
                        return data + ' Kg';
                    },
                    bSortable: false, 
                    bSearchable: false
                },
                {
                    "mData": "status",
                    "mRender": function (data, type, row) {
                        htmlData = '';
                        if(data == 'Closed')
                        {
                            htmlData += '<p class="Closed">Closed</p>';
                        }
                        else if(data == 'Invoiced')
                        {
                            htmlData += '<p class="Invoiced">Invoiced</p>';
                        }
                        else
                        {
                            if(row.deleted == 1)
                            {
                                htmlData += 'Canceled';
                            }
                            else
                            {
                                const htdata = {!! $page_data['statusType'] !!};
                                for (const [key, value] of Object.entries(htdata)) {
                                    if((value.type == data)&&(value.order == 1)) {
                                        htmlData += '<p class="order1">'+data+'</p>';
                                    }
                                    else if((value.type == data) && ((value.order == 2) || (value.order == 3) || (value.order == 4))) {
                                        htmlData += '<p class="order2">'+data+'</p>';
                                    }
                                    else if((value.type == data)&&(value.order == 5)) {
                                        htmlData += '<p class="order5">'+data+'</p>'; 
                                    }
                                }                                
                            }
                        }
                        return htmlData;
                    },
                    bSortable: false, 
                    bSearchable: false
                },
                {
                    "mData": "detail",
                    "mRender": function (data, type, row) {
                        var htmlData = "";
                        if (row.deleted == 1) {
                            htmlData += " ";
                        }
                        else {
                            htmlData += ` <button class="details_tab btn btn-warning btn-sm `;
                            if(row.deleted == '1') {
                                htmlData += `disabledCls`;
                            }

                            htmlData += ` data-size="${row.size}" data-id="${ row.id }" data-product="${ row.product }"
                                data-quantity="${ row.load_quantity }"
                                data-packaging="${ row.packaging }"
                                data-trailer="${ row.trailer }"
                                data-container="${ row.container }"
                                data-trip="${ row.trip_number }" data-truck="${ row.truck }"
                                data-driver="${ row.driver }" data-transporter="${ row.transporter }"
                                data-corridor="${ row.corridor }"
                                data-corridorfrom="${ row.corridorfrom }"
                                data-corridorto="${ row.corridorto }"
                                data-km="${ row.actual_km }"
                                data-cargo_type="${ row.actual_cargo_type }"
                                data-allowance="${ row.allowance }"
                                data-status="${ row.status }"
                                data-weight="${ row.weight }"
                                data-transporter_name="${ row.transporter_name }"
                                data-usdsum="${ row.usdsum }"
                                data-mzmsum="${ row.mzmsum }"
                                data-zarsum="${ row.zarsum }"
                                data-destination="${ row.destination }"
                                data-origin="${ row.origin }"`;

                            htmlData += `><i class="fa fa-eye"></i></button>`;
                        }

                        return htmlData;
                    },
                    bSortable: false, 
                    bSearchable: false
                },
                {
                    "mData": "return",
                    "mRender": function (data, type, row) {
                        var htmlData = ``;
                        if(row.status != 'Closed')
                        {
                            htmlData += `<button class="return_trip btn btn-success btn-sm `;

                            if(row.deleted=='1')
                            {
                                htmlData += `disabledCls`;
                            }

                            htmlData += `" data-trip="${ row.trip_number }"
                                data-truck="${ row.truck }" data-driver="${ row.driver }"
                                data-trailer="${ row.trailer }"
                                data-transporter="${ row.transporter }"
                                data-transporter_name="${ row.transporter_name }"><i
                                class="fa fa-refresh"></i></button>`;
                        }
                        return htmlData;
                    },
                    bSortable: false, 
                    bSearchable: false
                },
                {
                    "mData": "print",
                    "mRender": function (data, type, row) {
                        var htmlData = `<a class="print btn btn-danger btn-sm `;

                        if(row.deleted=='1') {
                            htmlData += `disabledCls`;
                        }

                        htmlData += `" data-id="${ row.trip_number }"><i class="fa fa-print"></i></a>`;
                        return htmlData;
                    },
                    bSortable: false, 
                    bSearchable: false
                },
                {
                    "mData": "action",
                    "mRender": function (data, type, row) {
                        var htmlData = '';
                        if (row.deleted == 1) {
                            if({{ (Auth::user()->type == 'admin')|| (Auth::user()->type == 'superuser') }}) {
                                htmlData += `<span class="label label-info">Canceled</span>`;
                            }
                        } else {
                            if({{ (Auth::user()->type == 'admin')|| (Auth::user()->type == 'superuser') }}) {
                                htmlData += `<button class="btn btn-danger btn-sm delete-planning-btn" data-id="`+data+`" "title" = "Delete Order"><i class="fa fa-trash" aria-hidden="true"></i></button>`;
                            }
                        }
                        return htmlData;
                    },
                    bSortable: false, 
                    bSearchable: false
                },
            ]
        });

        $(document).on('click', '.delete-planning-btn', 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('transport.tracking_status.deleteTracking')}}",
                    type: 'POST',
                    dataType: 'json',
                    data: {'id': id, '_token': '{{csrf_token()}}'},
                    success: function (response) {
                        if (response.status == 'success') {
                            trackingStatusDataTable.draw();
                            // trackingStatusDataTable.row(row_element).remove().draw(false);
                        }
                        else
                        {
                            // Swal.fire(`${response.message}`, '', 'info');
                        }
                    }
                });
              }
            })
        });

        getThirdPartOdoReadings();
        getOwnOdoReadings();

        $('#order_number').change(function () {
            var order = $(this).val();
            var flag = false;
            if (order != '') {
                $('.return_details').html('');
                $(".savebutton").html('');
                $('#tlist').html('');
                $.ajax({
                    url: "{{URL::to('transport/tracking_status/getOrder')}}",
                    type: 'POST',
                    dataType: 'json',
                    data: {'order_number': order, '_token': '{{csrf_token()}}'},
                    success: function (response) {
                        if (response.data != '') {
                            $('.ret_customer').val(response.data[0].customer);
                            $('.ret_customer_ref').val(response.data[0].customer_ref);
                            $('.ret_consignee').val(response.data[0].consignee);
                            $('.ret_origin').val(response.data[0].origin);
                            $('.ret_destination').val(response.data[0].destination);
                            $('.ret_border').val(response.data[0].border);
                            $('.return_km').val(response.data[0].Km);
                            $('.return_line').val(response.data[0].line);
                            $('.return_bl').val(response.data[0].lading_bill);

                            $.each(response.data, function (index, value) {
                                if (value.quantity - value.load_quantity != 0) {
                                    if (value.cargo_type == 'containarized') {
                                        $(".return_details").append("<tr><td><input type='hidden' class='star_qty' value='" + (value.quantity - value.load_quantity) + "'><input type='hidden' name='cargo_id[]' value='" + value.id + "'><input type='checkbox' class='area' data-id='" + value.id + "'></td><td>" + value.container + "</td><td>" + value.product + "</td><td>" + value.size + "</td><td>" + value.quantity + "</td><td>" + value.packaging + "</td><td>" + value.weight + "</td><td><input type='text' class='quantity' name='load_quantity[]' value='" + value.quantity + "' readonly='true' style='text-align:center;'></td><td class='balance_qty'>" + (value.quantity - value.load_quantity) + "</td></tr>");
                                    } else {
                                        $(".return_details").append("<tr><td><input type='hidden' class='star_qty' value='" + (value.quantity - value.load_quantity) + "'><input type='hidden' name='cargo_id[]' value='" + value.id + "'><input type='checkbox' class='area' data-id='" + value.id + "'></td><td>" + value.container + "</td><td>" + value.product + "</td><td>" + value.size + "</td><td>" + value.quantity + "</td><td>" + value.packaging + "</td><td>" + value.weight + "</td><td><input type='text' class='quantity' name='load_quantity[]' value='' style='text-align:center;'></td><td class='balance_qty'>" + (value.quantity - value.load_quantity) + "</td></tr>");
                                    }

                                    flag = true;
                                }
                            });

                            if (flag == true) {
                                $(".savebutton").append("<br/><input class='reclick btn btn-success col-md-3' type='submit' style='margin-top:4px;' value='save'>");
                            } else {
                                $(".savebutton").html('');
                            }

                           
                        $('.reclick').on('click', function () {
                                return checkChecked('returnform');
                            });

                            $('.quantity').on('change', function () {
                                if ($(this).val() == '') {
                                    $(this).closest("tr").find('.balance_qty').text($(this).closest("tr").find('.star_qty').val());
                                } else {
                                    var qty = $(this).val();
                                    if (qty > parseInt($(this).closest("tr").find('.balance_qty').text())) {
                                        $(this).val("");
                                        alert("Load Qty is greater than Bal Qty");
                                        $(this).focus();
                                    } else {
                                        var balance = parseInt($(this).closest("tr").find('.balance_qty').text()) - qty;
                                        $(this).closest("tr").find('.balance_qty').text(balance);
                                    }
                                }
                            });

                            $('.area').on('change', function () {
                                var _this = $(this);
                                if (this.checked) {
                                    var row = _this.closest("tr").clone();
                                    row.find('td:nth-child(1)').hide();
                                    $('#tlist').append(row);
                                } else {
                                    alert("bye");
                                    $('[data-id="' + $(this).data('id') + '"]', '#tlist').closest("tr").remove();
                                }
                            });

                        }
                    }
                });
            } else {
                $('.ret_customer').val('');
                $('.ret_customer_ref').val('');
                $('.ret_consignee').val('');
                $('.ret_origin').val('');
                $('.ret_destination').val('');
                $('.ret_border').val('');
                $('.return_km').val('');
                $('.return_line').val('');
                $('.return_bl').val('');
                $('.return_details').html('');
                $('#tlist').html('');
                $('.savebutton').html('');

            }
        });

        function checkChecked(formname) {
            var anyBoxesChecked = false;
            $('#' + formname + ' input[type="checkbox"]').each(function () {
                if ($(this).is(":checked")) {
                    anyBoxesChecked = true;
                }
            });

            if (anyBoxesChecked == false) {
                alert('Please select at least one checkbox');
                return false;
            }
        }

        $(document).on("click", ".return_trip", function (e) {

            $(this).closest("tr").siblings().removeClass("diffColor1");
            $(this).closest("tr").siblings().removeClass("diffColor");
            $(this).parents("tr").toggleClass("diffColor1", this.clicked);

            $(".return-trip-table").hide();
            $(".status-table").hide();
            $(".return-trip-table").show("slow").addClass("slideInLeft");

            var tripnos = $(this).data('trip');
            var ret_truck = $(this).data('truck');
            var ret_driver = $(this).data('driver');
            var ret_trailer = $(this).data('trailer');
            var transporter = $(this).data('transporter');
            var transporter_name = $(this).data('transporter_name');


            $('.return_tripnos').val(tripnos);
            $('.return_truck').val(ret_truck);
            $('.return_trailer').val(ret_trailer);
            $('.return_driver').val(ret_driver);
            $('.return_transporter').val(transporter);
            $('.return_transporter_name').val(transporter_name);

        });

        $(document).on('click','.details_tab',function(){

            var checklistCount = 0;
            var selectBox = $("select#statusdropdown").selectBoxIt().data('selectBox-selectBoxIt');
            selectBox.enableOption(0);
            selectBox.enableOption(1);
            selectBox.enableOption(2);
            selectBox.enableOption(9);
            selectBox.enableOption(10);

            $(this).closest("tr").siblings().removeClass("diffColor");
            $(this).closest("tr").siblings().removeClass("diffColor1");
            $(this).parents("tr").toggleClass(".diffColor", this.clicked);

            $(".status-table").hide();
            $(".return-trip-table").hide();
            $(".status-table").show("slow").addClass("slideInLeft");
            var planning_id = $(this).data('id');
            var product = $(this).data('product');
            var quantity = $(this).data('quantity');
            var cargo_type = $(this).data('cargo_type');
            var packaging = $(this).data('packaging');
            var container = $(this).data('container');
            var trip = $(this).data('trip');
            var truck = $(this).data('truck');
            var weight = $(this).data('weight');
            var driver = $(this).data('driver');
            var transporter = $(this).data('transporter');
            var status = $(this).data('status');
            var corridor = $(this).data('corridor');
            var km = $(this).data('km');
            var allowance = $(this).data('allowance');
            var crr_from = $(this).data('corridorfrom');
            var crr_to = $(this).data('corridorto');
            var size = $(this).data('size');
            var trailer = $(this).data('trailer');
            var transporter_name = $(this).data('transporter_name');
            var total_all = allowance;
            var total_km = km;
            var val1 = 0;
            var val2 = 0;
            var fuel_used = 0;
            var usdsum = $(this).data('usdsum');
            var mzmsum = $(this).data('mzmsum');
            var zarsum = $(this).data('zarsum');
            var Destination = $(this).data('destination');
            var Origin = $(this).data('origin');

            /*
             $('.corridor_summary').html('');
             $('.corridor_summary').append('Summary Due USD : '+usdsum+' | ZAR : '+zarsum+' | MZM : '+mzmsum+'');
             */
            if (container != '') {
                $('.returncontainer').show();
            } else {
                $('.returncontainer').hide();
            }

            $('.containername').val(container);
            $('.sizename').val(size);
            $('.tranportername').val(transporter_name);
            $('.truckname').val(truck);
            $('.trailername').val(trailer);
            $('.drivername').val(driver);
            $('#tripNumber').text(trip);
            $('#truckId').text(truck);
            $('.expense_trip').text(trip);
            $('.expense_driver').text(driver);
            $('.expense_origin').text(Origin);
            $('.expense_destination').text(Destination);
            $('.expense_corridor').val(corridor);
            $('.expense_usdsum').val(usdsum);
            $('.expense_zarsum').val(mzmsum);
            $('.expense_mzmsum').val(zarsum);
            $('.expense_planning_id').val(planning_id);
            $('.new-btn-checklist').attr('data-registration_number', truck);
            $('.new-btn-checklist').attr('data-transporter', transporter);
            $('#statusOriginId').text(Origin);
            $('#fuelFormTripId').val(trip);

            getOdoMeter(truck);
            getOdoFieldsByTrip(trip, truck);

            if (status == 'Closed') {
                $('#status_planning .add-btn-allowance').hide();
                $('#planning .add-btn-allowance').hide();
                $('#allowances .add-btn-allowance').hide();
                $('#cargo .save-btn-cargo').hide();
                $('#driverdefect .save-btn-cargo').hide();
                $('#road .add-btn-allowance').hide();
                $('#fuel .btn-success').hide();
                $('#returncontainer .add-btn-allowance').hide();
            } else {
                $('#status_planning .add-btn-allowance').show();
                $('#planning .add-btn-allowance').show();
                $('#allowances .add-btn-allowance').show();
                $('#cargo .save-btn-cargo').show();
                $('#fuel .btn-success').show();
                $('#driverdefect .save-btn-cargo').show();
                $('#road .add-btn-allowance').show();
                $('#returncontainer .add-btn-allowance').show();
            }
            if (cargo_type == 'containarized') {
                var tons = $(this).data('weight');
                $('.break_bulk').hide();
                $('.containarized').show();
                $(".offloaded_cargo_packaging").removeAttr("required");
            }
            if (cargo_type == 'break_bulk') {
                var tons = ((parseInt(quantity) * parseInt(packaging)) / 1000);
                $('.containarized').hide();
                $('.break_bulk').show();
                $(".offloaded_cargo_size").removeAttr("required");
            }

            getFuelListing(trip);

// Cargo List
            $.ajax({
                url: "{{URL::to('transport/tracking_status/getPlanning')}}",
                type: 'POST',
                dataType: 'json',
                data: {'id': planning_id, '_token': '{{csrf_token()}}'},
                success: function (response) {
                    if (response.data) {
                        var offloaded_qty = response.data.quantity_offloaded;
                        var offloaded_pkg = response.data.packaging_offloaded;
                        var offloaded_size = response.data.size_offloaded;
                        var offloaded_tons = response.data.tons_offloaded;
                        var remark = response.data.remarks;

                        $('.diff_qty').html(quantity - offloaded_qty);
                        $('.diff_pkg').html(packaging - offloaded_pkg + " kg");
                        $('.diff_size').html(size - offloaded_size);
                        $('.diff_ton').html(tons - offloaded_tons);

                        $(".offloaded_cargo_quantity").val(offloaded_qty);

                        var select = $(".offloaded_cargo_packaging");
                        select.find("option[value='" + offloaded_pkg + "']").prop('selected', 'selected');
                        select.data("selectBox-selectBoxIt").refresh();

//$(".offloaded_cargo_packaging").val(offloaded_pkg);
                        $(".offloaded_cargo_tons").val(offloaded_tons);
                        $(".offloaded_cargo_size").val(offloaded_size);
                        $(".cargo_remarks").val(remark);
                    } else {
                        $(".offloaded_cargo_quantity").val('');
                        $(".offloaded_cargo_packaging").data("selectBox-selectBoxIt").selectOption('');
                        $(".offloaded_cargo_size").val('');
                        $(".offloaded_cargo_tons").val('');
                        $(".cargo_remarks").val('');
                        $('.diff_qty').html('');
                        $('.diff_pkg').html('');
                        $('.diff_size').html('');
                        $('.diff_ton').html('');
                    }
                }
            });

// Order Container List
            $.ajax({
                url: "{{URL::to('transport/tracking_status/get_order_container')}}",
                type: 'POST',
                dataType: 'json',
                data: {'planning_id': planning_id, '_token': '{{csrf_token()}}'},
                success: function (response) {
                    if (response.data) {
                        $('.locationname').val(response.data.location);
                        $('.detentionname').val(response.data.detention);
                        $('.datename').val(response.data.date);
                        $('.statusname').val(response.data.status);
                        $('.remarkname').val(response.data.remark);
                    } else {
                        $('.locationname').val('');
                        $('.detentionname').val('');
                        $('.datename').val('');
                        $('.statusname').val('');
                        $('.remarkname').val('');
                    }
                }
            });

            getDriverDefectReport(planning_id);

            getTrackingStatus(planning_id, Origin, Destination);

// Allowance List
            $.ajax({
                url: "{{URL::to('transport/tracking_status/getAllowance')}}",
                type: 'POST',
                dataType: 'json',
                data: {'id': planning_id, '_token': '{{csrf_token()}}'},
                success: function (allowance) {
                    var arr = new Array();
                    if (allowance.data != '') {

                        $('.track_allowance').html('');
                        $('.trip_allowance').html('');
                        $('.summary').html('');
                        $.each(allowance.data, function (index, value) {
                            var rmk = (value.remark == null) ? '-' : value.remark;
                            $('.track_allowance').append('<tr id="expenses' + value.id + '"><td width="11.11%" class="glyphicon glyphicon-remove-circle deleteStatus" data-id=' + value.id + ' data-type="expenses"></td><td width="11.11%">' + value.trip_number + '</td><td width="11.11%">' + value.charge_id + '</td><td width="11.11%">' + value.currency + '</td><td width="11.11%">' + value.amount + '</td><td width="11.11%">' + convert_to_ddmmyy(value.paid_date) + '</td><td width="11.11%" title="'+rmk+'" class="wsp-nowrap">' + rmk + '</td></tr>');
                            arr.push(value.charge_id);
                        });
                        $('.summary').append('Summary Paid USD : ' + allowance.usd.amount + ' | ZAR : ' + allowance.zar.amount + ' | MZM : ' + allowance.mzm.amount + '');
                        var usddiff = usdsum - allowance.usd.amount;
                        var zardiff = zarsum - allowance.zar.amount;
                        var mzmdiff = mzmsum - allowance.mzm.amount;
                        $('.corridor_summary').html('');
                        $('.corridor_summary').append('Summary Payable USD : ' + usdsum + '(' + usddiff + ') | ZAR : ' + zarsum + '(' + zardiff + ') | MZM : ' + mzmsum + '(' + mzmdiff + ')');
                        var allowance_trip = trip;
                        var allowance_Destination = Destination;
                        var allowance_Origin = Origin;

                        $.ajax({
                            url: "{{URL::to('transport/tracking_status/getCorridorCharge')}}",
                            type: 'POST',
                            dataType: 'json',
                            data: {'corridor_id': corridor, '_token': '{{csrf_token()}}'},
                            success: function (response) {
                                var allowance_trip = trip;
                                $('.trip_allowance').html('');
                                var count = 0;

                                $.each(response.data, function (index, value) {
                                    if ($.inArray(value.charge, arr) == -1) {
                                        count++;
                                        $('.trip_allowance').append('<tr><td style="padding: 0px !important;"><input type="checkbox" class="rowcheck" name="selected_expense['+index+']" data-planning-id="'+planning_id+'" data-allowance-trip="'+ allowance_trip +'" data-charge-id="'+value.charge_id+'" data-charge="'+value.charge+'"  data-currency="'+value.currency+'" data-amount="'+value.amount+'"/></td><td class="d-none"><input type="hidden" name="planning_id[]" value="' + planning_id + '"><input type="text" name="trip_number[]" value="' + allowance_trip + '" readonly></td><td style="padding: 0px !important;"><input type="hidden" name="charge_id[]" value="' + value.charge_id + '" required><input type="text" class="remove-input-style2" value="' + value.charge + '" readonly></td><td style="padding: 0px !important;"><input type="text" name="currency[]" value="' + value.currency + '" readonly></td><td style="padding: 0px !important;"><input type="text" name="amount[]" class="remove-input-style2" value="' + value.amount + '" readonly></td><td><input type="text" autocomplete="off" name="remark['+index+']" class="expense_remark height-23 d-none" value="" /></td></tr>');
                                    }
                                });

                                // $('.trip_allowance').append('<tr><td class="d-none"><input type="hidden" name="planning_id[]" value="' + planning_id + '"><input type="text" name="trip_number[]" value="' + allowance_trip + '" class="form-control" readonly></td><td>{!! Form::select("charge_id[]",["" => "Select Charge"] + $page_data["charge"]->toArray() ,null, ["class" => "form-control","required"=>"true"]) !!}</td><td><select class="form-control arr" name="currency[]" required><option value="">Select Currency</option><option value="USD">USD</option><option value="MZM">MZM</option><option value="ZAR">ZAR</option></select></td><td><input type="text" name="amount[]" value="" class="form-control"></td><td><input type="date" name="paid_date[]" class="form-control"></td></tr>');

                            }
                        });

// $('.trip_allowance').append('<tr><td><input type="hidden" name="planning_id[]" value="'+planning_id+'"><input type="text" name="trip_number[]" value="'+allowance_trip+'" class="form-control" readonly></td><td>{!! Form::select("charge_id[]",["" => "Select Charge"] + $page_data["charge"]->toArray() ,null, ["class" => "form-control","required"=>"true"]) !!}</td><td><select class="form-control arr" name="currency[]" required><option value="">Select Currency</option><option value="USD">USD</option><option value="MZM">MZM</option><option value="ZAR">ZAR</option></select></td><td><input type="text" name="amount[]" value="" class="form-control"></td><td><input type="date" name="paid_date[]" class="form-control"></td></tr>');

                    } else {

                        $('.track_allowance').html('');
                        $('.track_allowance').append('<tr><td width="100%" colspan="5">No Data Found</td></tr>');
                        $('.summary').html('');
                        $('.summary').append('Summary Paid USD : 0 | ZAR : 0 | MZM : 0');
                        $.ajax({
                            url: "{{URL::to('transport/tracking_status/getCorridorCharge')}}",
                            type: 'POST',
                            dataType: 'json',
                            data: {'corridor_id': corridor, '_token': '{{csrf_token()}}'},
                            success: function (response) {
                                var allowance_trip = trip;
                                $('.trip_allowance').html('');
                                $.each(response.data, function (index, value) {
                                    $('.trip_allowance').append('<tr id="expenses' + value.id + '"><td style="padding: 0px !important;"><input type="checkbox" class="rowcheck" name="selected_expense['+index+']" data-planning-id="'+planning_id+'" data-allowance-trip="'+ allowance_trip +'" data-charge-id="'+value.charge_id+'" data-charge="'+value.charge+'"  data-currency="'+value.currency+'" data-amount="'+value.amount+'"/></td><td width="20%"><span class="glyphicon glyphicon-remove-circle deleteStatus" data-id=' + value.id + ' data-type="expenses"></span></td><td class="d-none"><input type="hidden" name="planning_id[]" value="' + planning_id + '"><input type="text" name="trip_number[]" value="' + allowance_trip + '" readonly></td><td style="padding: 0px !important;"><input type="hidden" name="charge_id[]" value="' + value.charge_id + '" required><input type="text" class="remove-input-style2" value="' + value.charge + '" readonly></td><td style="padding: 0px !important;"><input type="text" name="currency[]" value="' + value.currency + '" readonly></td><td style="padding: 0px !important;"><input type="text" class="remove-input-style2" name="amount[]" value="' + value.amount + '" readonly></td><td><input type="text" autocomplete="off" name="remark['+index+']" class="expense_remark height-23 d-none" value="" /></td></tr>');
                                });
                                // $('.trip_allowance').append('<tr><td class="d-none"><input type="hidden" name="planning_id[]" value="' + planning_id + '"><input type="text" name="trip_number[]" value="' + allowance_trip + '" class="form-control" readonly></td><td>{!! Form::select("charge_id[]",["" => "Select Charge"] + $page_data["charge"]->toArray() ,null, ["class" => "form-control","required"=>"true"]) !!}</td><td><select class="form-control arr" name="currency[]" required><option value="">Select Currency</option><option value="USD">USD</option><option value="MZM">MZM</option><option value="ZAR">ZAR</option></select></td><td><input type="text" name="amount[]" value="" class="form-control"></td><td><input type="date" name="paid_date[]" class="form-control"></td></tr>');
                            }
                        });
                    }
                }
            });

            //checklist data
            getHistoryChecklist(truck, 'Truck');

            getDocToExpire(truck, trailer);
            var arr = new Array();
            /*
            $.ajax({
                url: "{{URL::to('transport/tracking_status/getTruckChecklist')}}",
                type: 'POST',
                dataType: 'json',
                data: {'id': planning_id, 'equipment': 'Truck', '_token': '{{csrf_token()}}'},
                success: function (checklist) {

                    $('.truck_checklist').html('');
                    var i = 1;
                    if (checklist.data != '') {
                        $.each(checklist.data, function (index, value) {
                            arr.push(value.charge);
                            var date2 = value.validity_to_date;
                            var date1 = new Date().toISOString().split('T')[0];
                            date1 = date1.split('-');
                            date2 = date2.split('-');
                            date1 = new Date(date1[0], date1[1], date1[2]);
                            date2 = new Date(date2[0], date2[1], date2[2]);
                            date1_unixtime = parseInt(date1.getTime() / 1000);
                            date2_unixtime = parseInt(date2.getTime() / 1000);
                            var timeDifference = date2_unixtime - date1_unixtime;
                            var timeDifferenceInHours = timeDifference / 60 / 60;
                            var timeDifferenceInDays = timeDifferenceInHours / 24;
                            // console.log(timeDifferenceInDays);
                            var alertCss = "";
                            if (timeDifferenceInDays <= value.alert && value.alert) {
                                var alertCss = 'style="background-color:red"';
                                checklistCount++;
                                $("#showCnt").text('(' + checklistCount + ')');
                            }

                            var valueq = value.country;
                            if (value.alert || value.validity_to_date || validity_from_date) {
                                $('.truck_checklist').append('<tr ' + alertCss + ' ><td><span> ' + value.charge + '</span></td><td><span>' + value.supplier + '</span></td><td><span>' + value.validity_from_date + '</span></td><td><span>' + value.validity_to_date + '</span></td><td><span>' + value.country + ' </span></td></tr>');
                            } else {
                                $('.truck_checklist').append('<tr><td><span>' + value.charge + '</span></td><td><span>' + value.supplier + '</span></td><td>-</td><td>-</td><td><span>' + value.country + '</span></td></tr>');
                            }

                        });
                    }

                }
            });*/

            /*$.ajax({
                url: "{{URL::to('transport/tracking_status/getTruckCharge')}}",
                type: 'POST',
                dataType: 'json',
                data: {'id': planning_id, 'equipment': '1', '_token': '{{csrf_token()}}'},
                success: function (response) {

                    $.each(response.data, function (index, value) {
                        if ($.inArray(value.charge.name, arr) == -1) {

                            if (value.validity_active == '1') {
                                $('.truck_checklist').append('<tr><td><span>' + value.charge.name + '</span></td><td><span>supplier</span></td><td><span>fromdate</span></td><td><span>todate</span></td><td><span>country</span></td></tr>');
                            } else {
                                $('.truck_checklist').append('<tr><td><span>' + value.charge.name + '</span></td><td><span>supplier</span></td><td>-</td><td>-</td><td><span>country</span></td></tr>');
                            }
                        }

                    });


                }

            });*/

            getHistoryChecklist(trailer, 'Trailer');
            var arr1 = new Array();
            /*
            $.ajax({
                url: "{{URL::to('transport/tracking_status/getTrailerChecklist')}}",
                type: 'POST',
                dataType: 'json',
                data: {'id': planning_id, 'equipment': 'Trailer', '_token': '{{csrf_token()}}'},
                success: function (checklist) {

                    $('.trailer_checklist').html('');
                    if (checklist.data != '') {
                        $.each(checklist.data, function (index, value) {

                            if (value.check == '1') {
                                var chk = 'checked';
                            } else {
                                var chk = '';
                            }

                            if (value.confirm == '1') {
                                var cfm = 'checked';
                            } else {
                                var cfm = '';
                            }

                            arr1.push(value.charge);
                            var date2 = value.validity_to_date;
                            var date1 = new Date().toISOString().split('T')[0];
                            date1 = date1.split('-');
                            date2 = date2.split('-');
                            date1 = new Date(date1[0], date1[1], date1[2]);
                            date2 = new Date(date2[0], date2[1], date2[2]);
                            date1_unixtime = parseInt(date1.getTime() / 1000);
                            date2_unixtime = parseInt(date2.getTime() / 1000);
                            var timeDifference = date2_unixtime - date1_unixtime;
                            var timeDifferenceInHours = timeDifference / 60 / 60;
                            var timeDifferenceInDays = timeDifferenceInHours / 24;
                            console.log(timeDifferenceInDays);
                            var alertCss = "";
                            if (timeDifferenceInDays <= value.alert && value.alert) {
                                var alertCss = 'style="background-color:red"';
                                checklistCount++;
                                $("#showCnt").text('(' + checklistCount + ')');
                            }
                            if (value.alert || value.validity_to_date || validity_from_date) {
                                $('.trailer_checklist').append('<tr ' + alertCss + '><td><span>' + value.charge + '</span></td><td><span>' + value.supplier + '</span></td><td><span>' + value.validity_from_date + '</span></td><td><span>' + value.validity_to_date + '</span></td><td><span>' + value.country + '</span></td></tr>');
                            } else {
                                $('.trailer_checklist').append('<tr><td><span>' + value.charge + '</span></td><td><span>' + value.supplier + '</span></td><td>-</td><td>-</td><td><span>' + value.country + '</span></td></tr>');
                            }

                        });

                    }
                }
            });*/

            /*$.ajax({
                url: "{{URL::to('transport/tracking_status/getTrailerCharge')}}",
                type: 'POST',
                dataType: 'json',
                data: {'id': planning_id, 'equipment': '2', '_token': '{{csrf_token()}}'},
                success: function (response) {

                    $.each(response.data, function (index, value) {

                        if ($.inArray(value.charge.name, arr1) == -1) {
                            if (value.validity_active == '1') {
                                $('.trailer_checklist').append('<tr><td><span>' + value.charge.name + '</span></td><td><span>supplier</span></td><td>validity_from_date</td><td>validity_to_date</td><td>country</td></tr>');
                            } else {
                                $('.trailer_checklist').append('<tr><td>' + value.charge.name + '</td><td>supplier</td><td>-</td><td>-</td><td>country</td></tr>');
                            }
                        }

                    });


                }

            });*/

            //New Checklist
            /*$(".new-btn-checklist").unbind().click(function (e) {

                var equipment = $(this).data('equipment');
                if (equipment == 'Truck') {

                    $('.truck_checklist').append('<tr><td><input type="hidden" name="planning_id[]" value="' + planning_id + '"><input type="hidden" name="equipment" class="equipmentcls" value="Truck"><input type="checkbox" name="check[]" class="checkCls" value="1" disabled></td><td>{!! Form::select("charge[]",["" => "Select Charge"] + $page_data["chargeData"]->toArray() ,null, ["class" => "form-control chargeCls chargestyle"]) !!}</td><td>{!! Form::select("supplier[]",["" => "Select Supplier"] + $page_data["supplierData"]->toArray() ,null, ["class" => "form-control supplierDataCls slectboxstyle"]) !!}</td><td><input type="date" name="validity_from_date[]" class="form-control validity_from_date_cls datestyle"></td><td><input type="date" name="validity_to_date[]" class="form-control validity_to_date_cls datestyle"></td><td>{!! Form::select("country[]",["" => "Select Country"] + $page_data["countryData"]->toArray() ,null, ["class" => "form-control countryCls slectboxstyle"]) !!}</td><td> <button class="saveBtn" data-equipment="Truck" onclick="saveData(this)">Save</button></td></tr>');
                }
                if (equipment == 'Trailer') {
                    $('.trailer_checklist').append('<tr><td><input type="hidden" name="planning_id[]" value="' + planning_id + '"><input type="hidden" name="equipment" class="equipmentcls" value="Trailer"><input type="checkbox" name="check[]" class="checkCls" value="1" disabled></td><td>{!! Form::select("charge[]",["" => "Select Charge"] + $page_data["chargeData"]->toArray() ,null, ["class" => "form-control chargeCls chargestyle"]) !!}</td><td>{!! Form::select("supplier[]",["" => "Select Supplier"] + $page_data["supplierData"]->toArray() ,null, ["class" => "form-control supplierDataCls slectboxstyle"]) !!}</td><td><input type="date" name="validity_from_date[]" class="form-control validity_from_date_cls datestyle"></td><td><input type="date" name="validity_to_date[]" class="form-control validity_to_date_cls datestyle"></td><td>{!! Form::select("country[]",["" => "Select Country"] + $page_data["countryData"]->toArray() ,null, ["class" => "form-control countryCls slectboxstyle"]) !!}</td><td> <button class="saveBtn" data-equipment="Truck" onclick="saveData(this)">Save</button></td></tr>');

                }
            });*/

            //History Checklist
            /*$(".history-btn-checklist").click(function (e) {
                var equipment = $(this).data('equipment');
                $.ajax({
                    url: "{{URL::to('transport/tracking_status/getHistoryChecklist')}}",
                    type: 'POST',
                    dataType: 'json',
                    data: {'id': planning_id, 'equipment': equipment, '_token': '{{csrf_token()}}'},
                    success: function (history) {
                    //Trailer History
                        if (equipment == 'Trailer') {
                            if (history.data != '') {

                                $(".trailer_history_checklist").html('');
                                $(".back-trailer-btn-checklist").css('display', 'block');
                                $(".trailer_checklist_history").css('display', 'block');
                                $.each(history.data, function (index, value) {
                                    if (value.check == '1') {
                                        var check = '<span class="label label-success">Yes</span>';
                                    } else {
                                        var check = '<span class="label label-warning">No</span>';
                                    }
                                    if (value.confirm == '1') {
                                        var confirm = '<span class="label label-success">Yes</span>';
                                    } else {
                                        var confirm = '<span class="label label-warning">No</span>';
                                    }
                                    $('.trailer_history_checklist').append('<tr><td>' + value.charge + '</td><td>' + value.supplier + '</td><td>' + value.validity_to_date + '</td><td>' + value.validity_from_date + '</td><td>' + value.country + '</td></tr>');
                                });
                            } else {
                                $(".trailer_history_checklist").html('');
                                $(".back-trailer-btn-checklist").css('display', 'block');
                                $(".trailer_checklist_history").css('display', 'block');
                                $('.trailer_history_checklist').append('<tr><td  width="100%" colspan="8">No data Found</td></tr>');
                            }
                        }
                        //Truck History
                        if (equipment == 'Truck') {
                            if (history.data != '') {
                                $(".truck_history_checklist").html('');
                                $.each(history.data, function (index, value) {
                                    if (value.check == '1') {
                                        var check = '<span class="label label-success">Yes</span>';
                                    } else {
                                        var check = '<span class="label label-warning">No</span>';
                                    }
                                    if (value.confirm == '1') {
                                        var confirm = '<span class="label label-success">Yes</span>';
                                    } else {
                                        var confirm = '<span class="label label-warning">No</span>';
                                    }
                                    $('.truck_history_checklist').append('<tr><td>' + value.charge + '</td><td>' + value.supplier + '</td><td>' + value.validity_to_date + '</td><td>' + value.validity_from_date + '</td><td>' + value.country + '</td></tr>');
                                });
                            } else {
                                $(".truck_history_checklist").html('');
                                $('.truck_history_checklist').append('<tr><td  width="100%" colspan="8">No data Found</td></tr>');
                            }
                        }
                    }
                });
            });*/
            /* 
             $(".back-truck-btn-checklist").click(function (e) {
             $(this).css('display','none');
             $(".truck_checklist_history").css('display','none');
             $(this).parent().prev().find('.history-btn-checklist').css('display','block');
             });
             
             $(".back-trailer-btn-checklist").click(function (e) {
             $(this).css('display','none');
             $(".trailer_checklist_history").css('display','none');
             $(this).parent().prev().find('.history-btn-checklist').css('display','block');
             });
             */
// Road Occurance List
            /*
             $.ajax({
             url: "{{URL::to('transport/tracking_status/getRoad')}}",
             type: 'POST',
             dataType: 'json',
             data: {'id': planning_id, '_token': '{{csrf_token()}}'},
             success: function (road) {
             if (road.data != '') {
             $('.road_detail').html('');
             $.each(road.data, function (index, value) {
             $('.road_detail').append('<tr><td>' + value.trip_number + '</td><td>' + value.file_number + '</td><td>' + value.date + '</td><td>' + value.detail + '</td><td>' + value.article + '</td><td>' + value.location + '</td><td>' + value.currency + '</td><td>' + value.amount + '</td><td>' + value.remark + '</td></tr>');
             });
             
             } else {
             $('.road_detail').html('');
             $('.road_detail').append('<tr><td colspan="8">No Data Found</td></tr>');
             }
             }
             });
             */
// Fuel Plannnig List
            var order = $(this).val();
            var flag = false;
            if (order != '') {
                $('.return_details').html('');
                $(".savebutton").html('');
                $('#tlist').html('');

                $.ajax({
                    url: "{{URL::to('transport/tracking_status/getOrder')}}",
                    type: 'POST',
                    dataType: 'json',
                    data: {'order_number': order, '_token': '{{csrf_token()}}'},
                    success: function (response) {
                        if (response.data != '') {
                            $('.ret_customer').val(response.data[0].customer);
                            $('.ret_customer_ref').val(response.data[0].customer_ref);
                            $('.ret_consignee').val(response.data[0].consignee);
                            $('.ret_origin').val(response.data[0].origin);
                            $('.ret_destination').val(response.data[0].destination);
                            $('.ret_border').val(response.data[0].border);
                            $('.return_km').val(response.data[0].Km);
                            $('.return_line').val(response.data[0].line);
                            $('.return_bl').val(response.data[0].lading_bill);

                            $.each(response.data, function (index, value) {
                                if (value.quantity - value.load_quantity != 0) {
                                    if (value.cargo_type == 'containarized') {
                                        $(".return_details").append("<tr><td><input type='hidden' class='star_qty' value='" + (value.quantity - value.load_quantity) + "'><input type='hidden' name='cargo_id[]' value='" + value.id + "'><input type='checkbox' class='area' data-id='" + value.id + "'></td><td>" + value.container + "</td><td>" + value.product + "</td><td>" + value.size + "</td><td>" + value.quantity + "</td><td>" + value.packaging + "</td><td>" + value.weight + "</td><td><input type='text' class='quantity' name='load_quantity[]' value='" + value.quantity + "' readonly='true' style='text-align:center;'></td><td class='balance_qty'>" + (value.quantity - value.load_quantity) + "</td></tr>");
                                    } else {
                                        $(".return_details").append("<tr><td><input type='hidden' class='star_qty' value='" + (value.quantity - value.load_quantity) + "'><input type='hidden' name='cargo_id[]' value='" + value.id + "'><input type='checkbox' class='area' data-id='" + value.id + "'></td><td>" + value.container + "</td><td>" + value.product + "</td><td>" + value.size + "</td><td>" + value.quantity + "</td><td>" + value.packaging + "</td><td>" + value.weight + "</td><td><input type='text' class='quantity' name='load_quantity[]' style='text-align:center;'></td><td class='balance_qty'>" + (value.quantity - value.load_quantity) + "</td></tr>");
                                    }

                                    flag = true;
                                }
                            });

                            if (flag == true) {
                                $(".savebutton").append("<br/><input class='reclick btn btn-success col-md-3' type='submit' style='margin-top:4px;' value='save'>");
                            } else {
                                $(".savebutton").html('');
                            }

                            $('.reclick').on('click', function () {
                                return checkChecked('returnform');
                            });

                            $('.quantity').on('change', function () {

                                if ($(this).val() == '') {
                                    $(this).closest("tr").find('.balance_qty').text($(this).closest("tr").find('.star_qty').val());
                                } else {
                                    var qty = $(this).val();
                                    if (qty > parseInt($(this).closest("tr").find('.balance_qty').text())) {
                                        $(this).val("");
                                        alert("Load Qty is greater than Bal Qty");
                                        $(this).focus();
                                    } else {
                                        var balance = parseInt($(this).closest("tr").find('.balance_qty').text()) - qty;
                                        $(this).closest("tr").find('.balance_qty').text(balance);
                                    }
                                }
                            });

                            $('.area').on('change', function () {
                                var _this = $(this);
                                if (this.checked) {
                                    var row = _this.closest("tr").clone();
                                    row.find('td:nth-child(1)').hide();
                                    $('#tlist').append(row);
                                } else {
                                    $('[data-id="' + $(this).data('id') + '"]', '#tlist').closest("tr").remove();
                                }
                            });

                        }
                    }
                });
            } else {
                $('.ret_customer').val('');
                $('.ret_customer_ref').val('');
                $('.ret_consignee').val('');
                $('.ret_origin').val('');
                $('.ret_destination').val('');
                $('.ret_border').val('');
                $('.return_km').val('');
                $('.return_line').val('');
                $('.return_bl').val('');
                $('.return_details').html('');
                $('#tlist').html('');
                $('.savebutton').html('');

            }
        });

        function checkChecked(formname) {
            var anyBoxesChecked = false;
            $('#' + formname + ' input[type="checkbox"]').each(function () {
                if ($(this).is(":checked")) {
                    anyBoxesChecked = true;
                }
            });

            if (anyBoxesChecked == false) {
                alert('Please select at least one checkbox');
                return false;
            }
        }

        $(document).on("click", ".return_trip", function (e) {

            $(this).closest("tr").siblings().removeClass("diffColor1");
            $(this).closest("tr").siblings().removeClass("diffColor");
            $(this).parents("tr").toggleClass("diffColor1", this.clicked);

            $(".return-trip-table").hide();
            $(".status-table").hide();
            $(".return-trip-table").show("slow").addClass("slideInLeft");

            var tripnos = $(this).data('trip');
            var ret_truck = $(this).data('truck');
            var ret_driver = $(this).data('driver');
            var ret_trailer = $(this).data('trailer');
            var transporter = $(this).data('transporter');
            var transporter_name = $(this).data('transporter_name');


            $('.return_tripnos').val(tripnos);
            $('.return_truck').val(ret_truck);
            $('.return_trailer').val(ret_trailer);
            $('.return_driver').val(ret_driver);
            $('.return_transporter').val(transporter);
            $('.return_transporter_name').val(transporter_name);

        });


        $(document).on('click','.details_tab',function(){
            var selectBox = $("select#statusdropdown").selectBoxIt().data('selectBox-selectBoxIt');
            $('.truck_checklist').html('');
            $('.trailer_checklist').html('');
            $(".trailer_history_checklist").html('');
            $(".truck_history_checklist").html('');
            selectBox.enableOption(0);
            selectBox.enableOption(1);
            selectBox.enableOption(2);
            selectBox.enableOption(9);
            selectBox.enableOption(10);

            $(this).closest("tr").siblings().removeClass("diffColor");
            $(this).closest("tr").siblings().removeClass("diffColor1");
            $(this).parents("tr").toggleClass("diffColor", this.clicked);

            $(".status-table").hide();
            $(".return-trip-table").hide();
            $(".status-table").show("slow").addClass("slideInLeft");
            var planning_id = $(this).data('id');
            var product = $(this).data('product');
            var quantity = $(this).data('quantity');
            var packaging = $(this).data('packaging');
            var container = $(this).data('container');
            var cargo_type = $(this).data('cargo_type');
            var weight = $(this).data('weight');
            var trip = $(this).data('trip');
            var truck = $(this).data('truck');
            var driver = $(this).data('driver');
            var transporter = $(this).data('transporter');
            var status = $(this).data('status');
            var corridor = $(this).data('corridor');
            var km = $(this).data('km');
            var allowance = $(this).data('allowance');
            var crr_from = $(this).data('corridorfrom');
            var crr_to = $(this).data('corridorto');
            var size = $(this).data('size');
            var trailer = $(this).data('trailer');
            var transporter_name = $(this).data('transporter_name');
            var total_all = allowance;
            var total_km = km;
            var val1 = 0;
            var val2 = 0;
            var fuel_used = 0;
            var usdsum = $(this).data('usdsum');
            var mzmsum = $(this).data('mzmsum');
            var zarsum = $(this).data('zarsum');
            var Destination = $(this).data('destination');
            var Origin = $(this).data('origin');

            $('#fuelUsedSpanId').text(fuel_used);
            $('#totalAllSpanId').text(total_all);
            $('#totalKmSpanId').text(total_km);
            $('#truckname').text(truck);
            $('#trailername').text(trailer);
            $('.corridor_summary').html('');
            $('.corridor_summary').append('Summary Due USD : ' + usdsum + ' | ZAR : ' + zarsum + ' | MZM : ' + mzmsum + '');
            if (container != '') {
                $('.returncontainer').show();
            } else {
                $('.returncontainer').hide();
            }

            $('.containername').val(container);
            $('.sizename').val(size);
            $('.tranportername').val(transporter_name);
            $('.truckname').val(truck);
            $('.trailername').val(trailer);
            $('.drivername').val(driver);

            if (status == 'Closed') {
                $('#status_planning .add-btn-allowance').hide();
                $('#planning .add-btn-allowance').hide();
                $('#allowances .add-btn-allowance').hide();
                $('#cargo .save-btn-cargo').hide();
                $('#driverdefect .save-btn-cargo').hide();
                $('#road .add-btn-allowance').hide();
                $('#fuel .btn-success').hide();
                $('#returncontainer .add-btn-allowance').hide();
            } else {
                $('#status_planning .add-btn-allowance').show();
                $('#planning .add-btn-allowance').show();
                $('#allowances .add-btn-allowance').show();
                $('#cargo .save-btn-cargo').show();
                $('#fuel .btn-success').show();
                $('#driverdefect .save-btn-cargo').show();
                $('#road .add-btn-allowance').show();
                $('#returncontainer .add-btn-allowance').show();
            }

            if (cargo_type == 'containarized') {
                var tons = $(this).data('weight');
                $('.break_bulk').hide();
                $('.containarized').show();
                $(".loaded_cargo_tons").html(weight);
            }
            if (cargo_type == 'break_bulk') {
                var tons = ((parseInt(quantity) * parseInt(packaging)) / 1000);
                $('.containarized').hide();
                $('.break_bulk').show();
                $(".loaded_cargo_tons").html(tons);
            }

// Cargo List
            $.ajax({
                url: "{{URL::to('transport/tracking_status/getPlanning')}}",
                type: 'POST',
                dataType: 'json',
                data: {'id': planning_id, '_token': '{{csrf_token()}}'},
                success: function (response) {
                    if (response.data) {
                        var offloaded_qty = response.data.quantity_offloaded;
                        var offloaded_pkg = response.data.packaging_offloaded;
                        var offloaded_size = response.data.size_offloaded;
                        var offloaded_tons = response.data.tons_offloaded;
                        var remark = response.data.remarks;

                        $('.diff_qty').html(quantity - offloaded_qty);
                        $('.diff_pkg').html(packaging - offloaded_pkg + " Kg");
                        $('.diff_size').html(size - offloaded_size);
                        $('.diff_ton').html(tons - offloaded_tons);

                        $(".offloaded_cargo_quantity").val(offloaded_qty);

                        var select = $(".offloaded_cargo_packaging");
                        select.find("option[value='" + offloaded_pkg + "']").prop('selected', 'selected');
                        select.data("selectBox-selectBoxIt").refresh();

//$(".offloaded_cargo_packaging").val(offloaded_pkg);
                        $(".offloaded_cargo_tons").val(offloaded_tons);
                        $(".offloaded_cargo_size").val(offloaded_size);
                        $(".cargo_remarks").val(remark);
                    } else {
                        $(".offloaded_cargo_quantity").val('');
                        $(".offloaded_cargo_packaging").data("selectBox-selectBoxIt").selectOption('');
                        $(".offloaded_cargo_tons").val('');
                        $(".offloaded_cargo_size").val('');
                        $(".cargo_remarks").val('');
                        $('.diff_qty').html('');
                        $('.diff_pkg').html('');
                        $('.diff_size').html('');
                        $('.diff_ton').html('');
                    }
                }
            });

// Order Container List
            $.ajax({
                url: "{{URL::to('transport/tracking_status/get_order_container')}}",
                type: 'POST',
                dataType: 'json',
                data: {'planning_id': planning_id, '_token': '{{csrf_token()}}'},
                success: function (response) {
                    if (response.data) {
                        $('.locationname').val(response.data.location);
                        $('.detentionname').val(response.data.detention);
                        $('.datename').val(response.data.date);
                        $('.statusname').val(response.data.status);
                        $('.remarkname').val(response.data.remark);
                    } else {
                        $('.locationname').val('');
                        $('.detentionname').val('');
                        $('.datename').val('');
                        $('.statusname').val('');
                        $('.remarkname').val('');
                    }
                }
            });

// Driver Defect Report list
            $.ajax({
                url: "{{URL::to('transport/tracking_status/getReport')}}",
                type: 'POST',
                dataType: 'json',
                data: {'id': planning_id, '_token': '{{csrf_token()}}'},
                success: function (response) {
                    if (response.data) {
                        $(".today_date").val(response.data.date);
                        $(".last_updated").val(response.data.updated_at);
                        $(".truck_report").val(response.data.truck_report);
                        $(".trailer_report").val(response.data.trailer_report);
                    } else {
                        var today = new Date();
                        var dd = today.getDate();

                        var mm = today.getMonth() + 1;
                        var yyyy = today.getFullYear();
                        if (dd < 10) {
                            dd = '0' + dd;
                        }

                        if (mm < 10) {
                            mm = '0' + mm;
                        }

                        today = yyyy + '-' + mm + '-' + dd;
                        $(".today_date").val(today);
                        $(".truck_report").val('');
                        $(".last_updated").val('');
                        $(".trailer_report").val('');
                    }
                }
            });

// Status List
            /*  $.ajax({
             url: "{{URL::to('transport/tracking_status/getStatus')}}",
             type: 'POST',
             dataType: 'json',
             data: {'id': planning_id, '_token': '{{csrf_token()}}'},
             success: function (status) {
             if (status.data != '') {
             $('.planning_status').html('');
             $.each(status.data, function (index, value) {
             
             if (value.status == 'Planned') {
             var selectBox = $("select#statusdropdown").selectBoxIt().data('selectBox-selectBoxIt');
             selectBox.disableOption(0);
             }
             
             if (value.status == 'Waiting_to_Load') {
             var selectBox = $("select#statusdropdown").selectBoxIt().data('selectBox-selectBoxIt');
             selectBox.disableOption(1);
             }
             
             if (value.status == 'Loaded') {
             var selectBox = $("select#statusdropdown").selectBoxIt().data('selectBox-selectBoxIt');
             selectBox.disableOption(2);
             }
             
             if (value.status == 'Waiting_for_Offloading') {
             var selectBox = $("select#statusdropdown").selectBoxIt().data('selectBox-selectBoxIt');
             selectBox.disableOption(9);
             }
             
             if (value.status == 'Delivered') {
             var selectBox = $("select#statusdropdown").selectBoxIt().data('selectBox-selectBoxIt');
             selectBox.disableOption(10);
             $('#status_planning .add-btn-allowance').hide();
             }
             
             $('.planning_status').append('<tr><td width="20%">' + value.trip_number + '</td><td width="20%">' + value.truck + '</td><td width="20%">' + value.date + '</td><td width="20%">' + value.status + '</td><td width="20%">' + value.location + '</td></tr>');
             });
             
             } else {
             $('.planning_status').html('');
             $('#status_planning .add-btn-allowance').show();
             $('.planning_status').append('<tr><td width="100%" colspan="5">No Data Found</td></tr>');
             }
             }
             });*/

// Allowance List
            $.ajax({
                url: "{{URL::to('transport/tracking_status/getAllowance')}}",
                type: 'POST',
                dataType: 'json',
                data: {'id': planning_id, '_token': '{{csrf_token()}}'},
                success: function (allowance) {
                    var user = '