@extends('layouts.master')
@section('content')
@php
$PayType = config('custom.PayType');
$states = config('custom.states');
$driverType = config('custom.driverType');
$bad_zone = config('custom.bad_zone');
$tTypes = config('custom.trailers_types');
$vendors = config('custom.vendors');
$repairTypes = config('custom.repairTypes');
@endphp
@php
$validate = [];
$activeTab1 = '';
$activeTab2 = '';
$currentTab1 = '';
$currentTab2 = '';
@endphp

@if ($errors->any())
@foreach ($errors->all() as $error)
@php
$validate[] = $error;
@endphp
@endforeach
@endif

@if (
$errors->has('STATUS') ||
$errors->has('FIRST_NAME') ||
$errors->has('LAST_NAME') ||
$errors->has('EXPIRY_DATE') ||
$errors->has('DL_STATE_PROV') ||
$errors->has('ENDORSEMENTS') ||
$errors->has('CODE'))
@php
$currentTab1 = 'current';
$activeTab1 = 'active';
@endphp
@elseif (
$errors->has('PHONE') ||
$errors->has('EMAIL') ||
$errors->has('CELL_PHONE') ||
$errors->has('EMERGENCY_PHONE') ||
$errors->has('SECONDARY_CONTRACT') ||
$errors->has('NOSMS'))
@php
$currentTab2 = 'current';
$activeTab2 = 'active';
@endphp
@else
@php
$currentTab1 = 'current';
$activeTab1 = 'active';
@endphp
@endif

@php
$TRAILER_ID = 0;
$TRAILER_TYPE = $LENGTH_1 = '';
$billing_total = $load->load_rate + $ec_total;
$profit = $load->load_rate + $ec_total - $grandExpenseTotal;
@endphp


@section('style')
<style>
    .circle {
        border: 1px solid #aaa;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        position: relative;
/*        margin: 4px;*/
        display: inline-block;
        vertical-align: middle;
        background-color: #D3D3D3 !important;
        font-size: 21px;
    }

    .circle:hover {
        background: #6363634f;
    }

    .circle:active {
        background: radial-gradient(#aaa, #fff);
    }

    .circle:before,
    .circle:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .circle.plus:before,
    .circle.plus:after {
        background: green;
    }

    .circle.plus:before {
        width: 2px;
        margin: 3px auto;
    }

    .circle.plus:after {
        margin: auto 3px;
        height: 2px;
    }

    .circle.minus:before {
        background: #cc0000;
        margin: auto 3px;
        height: 2px;
    }

    .select2-container .select2-selection--single {
        height: auto !important;

    }

    .select2-container--bootstrap5 .select2-selection--single.form-select-solid .select2-selection__placeholder {
        color: white !important;
    }

    .select2-container--bootstrap5 .select2-selection--single.form-select-solid .select2-selection__rendered {
        color: white !important;
    }

    .switch {
        position: relative;
        display: block;
        vertical-align: top;
        width: 68px;
        height: 20px;
        /* padding: 3px; */
        margin: 0 10px 10px 20px;
        background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
        background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
        border-radius: 18px;
        box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
        cursor: pointer;
        box-sizing: content-box;
    }

    .switch-input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        box-sizing: content-box;
    }

    .switch-label {
        width: 70px;
        position: relative;
        display: block;
        height: 28px;
        font-size: 14px;
        text-transform: uppercase;
        background: #eceeef;
        border-radius: inherit;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
        box-sizing: content-box;
    }

    .switch-label:before,
    .switch-label:after {
        position: absolute;
        top: 50%;
        margin-top: -.5em;
        line-height: 1;
        -webkit-transition: inherit;
        -moz-transition: inherit;
        -o-transition: inherit;
        transition: inherit;
        box-sizing: content-box;
    }

    .switch-label:before {
        content: attr(data-off);
        right: 11px;
        color: #aaaaaa;
        text-shadow: 0 1px rgba(255, 255, 255, 0.5);
    }

    .switch-label:after {
        content: attr(data-on);
        left: 11px;
        color: #FFFFFF;
        text-shadow: 0 1px rgba(0, 0, 0, 0.2);
        opacity: 0;
    }

    .switch-input:checked~.switch-label {
        background: #1b84ff;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
    }

    .switch-input:checked~.switch-label:before {
        opacity: 0;
    }

    .switch-input:checked~.switch-label:after {
        opacity: 1;
    }

    .switch-handle {
        position: absolute;
        top: 2px;
        right: 42px;
        width: 24px;
        height: 24px;
        background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
        background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
        border-radius: 100%;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    }

    .switch-handle:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -6px 0 0 -6px;
        width: 12px;
        height: 12px;
        background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
        background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
        border-radius: 6px;
        box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
    }

    .switch-input:checked~.switch-handle {
        left: 45px;
        box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
    }

    .switch-label,
    .switch-handle {
        transition: All 0.3s ease;
        -webkit-transition: All 0.3s ease;
        -moz-transition: All 0.3s ease;
        -o-transition: All 0.3s ease;
    }
    i.bi, i[class*=" fa-"], i[class*=" fonticon-"], i[class*=" la-"], i[class^=fa-], i[class^=fonticon-], i[class^=la-] {
     color: inherit;
 }
</style>
@endsection()

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>


<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div id="kt_content_container" class="container-xxl">
        <div class="flex-wrap flex-stack pb-7">
            <div class="d-flex flex-wrap align-items-center my-1">
                <h3 class="fw-bold me-5 my-1">Loads <span class="text-muted">Edit</span>
                </h3>
                <h3 class="fw-bold me-5 my-1"></h3>
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <a href="{{ route('assets.loads.index') }}" class="btn btn-primary btn-sm me-2">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i> Back
                        </a>
                        <a href="{{ route('assets.loads.delete', $load->bidid) }}"
                            onclick="return confirm('Are You Sure You Want to Delete ?')"
                            class="btn btn-dark btn-sm me-2">
                            Delete
                        </a>
                        <a href="{{ route('assets.loads.rateconfirmation', $load->bidid) }}"
                            class="btn btn-primary btn-sm me-2" target="_blank">
                            Rate Confirmation
                        </a>
                    </div>
                    <h3 class="ms-auto">Loads # {{$load->bidid}}</h3>
                </div>

                    </div>
                </div>
                <div class="pb-lg-12">
                    <div class="container">

                        <div class="content d-flex flex-column flex-column-fluid">
                            <form action="{{ route('assets.loads.update_new', $load->bidid) }}" method="POST" enctype="multipart/form-data"
                                id="truckBoardUpdate">
                                <input type="hidden" name="load_id" value="{{ $load->bidid }}">

                                <input type="hidden" name="P_CITY" value="{{ old('P_CITY', optional($stops)->p_city) }}" id="PCITY">
                                <input type="hidden" name="P_STATE" value="{{ old('P_STATE', optional($stops)->p_state) }}" id="PSTATE">
                                <input type="hidden" name="P_POSTAL" value="{{ old('P_POSTAL', optional($stops)->p_zip) }}" id="PPOSTAL">
                                <input type="hidden" name="P_LAT" value="{{ old('P_LAT', $load->PICKUP_LAT) }}" id="PLAT">
                                <input type="hidden" name="P_LNG" value="{{ old('P_LNG', $load->PICKUP_LNG) }}" id="PLNG">

                                <input type="hidden" name="D_CITY" value="{{ old('D_CITY', optional($stops)->d_city) }}" id="DCITY">
                                <input type="hidden" name="D_STATE" value="{{ old('D_STATE', optional($stops)->d_state) }}" id="DSTATE">
                                <input type="hidden" name="D_POSTAL" value="{{ old('D_POSTAL', optional($stops)->d_zip) }}" id="DPOSTAL">
                                <input type="hidden" name="D_LAT" value="{{ old('D_LAT', $load->DEL_LAT) }}" id="DLAT">
                                <input type="hidden" name="D_LNG" value="{{ old('D_LNG', $load->DEL_LNG) }}" id="DLNG">


                                @csrf
                                <div class="col-lg-12  d-flex flex-column flex-xl-row flex-row-fluid gap-10">
                                    <div
                                    class="col-lg-3 card d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px w-xxl-400px">
                                    <div class="card-body px-6 px-lg-10 px-xxl-15">
                                        <ul id="nav-stepper"
                                        class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold stepper stepper-pills stepper-column stepper-nav"
                                        style="display: block;">
                                        <div class="stepper-item {{ $currentTab1 }}" data-kt-stepper-element="nav">
                                            <div class="stepper-wrapper">
                                                <a class="nav-link ms-0 me-10 {{ $activeTab1 }}"
                                                id="kt_stats_widget_16_tab_link_1" data-bs-toggle="pill"
                                                href="#kt_stats_widget_16_tab_1" aria-selected="false" role="tab"
                                                tabindex="-1" onclick="activetab('#kt_stats_widget_16_tab_1')">
                                                <div class="stepper-icon w-40px h-40px">
                                                    <i class="ki-outline ki-check fs-2 stepper-check"></i>
                                                    <span class="stepper-number" title="Customer Info"><i class="fa-solid fa-user"></i></span>
                                                </div>

                                                <div class="stepper-label">
                                                    <h3 class="stepper-title">Customer Info</h3>
                                                </div>
                                            </a>

                                        </div>
                                        <div class="stepper-line h-20px"></div>
                                    </div>

                                    <div class="stepper-item" data-kt-stepper-element="nav">
                                        <div class="stepper-wrapper">
                                            <a class="nav-link ms-0 me-10"
                                            id="kt_stats_widget_16_tab_link_2" data-bs-toggle="pill"
                                            href="#kt_stats_widget_16_tab_2" aria-selected="false" role="tab"
                                            tabindex="-1" onclick="activetab('#kt_stats_widget_16_tab_2')">
                                            <div class="stepper-icon w-40px h-40px">
                                                <i class="ki-outline ki-check fs-2 stepper-check"></i>
                                                <span class="stepper-number" title="Truck info"><i class="fa-solid fa-box"></i></span>
                                            </div>

                                            <div class="stepper-label">
                                                <h3 class="stepper-title">Cargo</h3>
                                            </div>
                                        </a>

                                    </div>
                                    <div class="stepper-line h-20px"></div>
                                </div>

                                <div class="stepper-item" data-kt-stepper-element="nav">
                                    <div class="stepper-wrapper">
                                        <a class="nav-link ms-0 me-10"
                                        id="kt_stats_widget_16_tab_link_3" data-bs-toggle="pill"
                                        href="#kt_stats_widget_16_tab_3" aria-selected="false" role="tab"
                                        tabindex="-1" onclick="activetab('#kt_stats_widget_16_tab_3')">
                                        <div class="stepper-icon w-40px h-40px">
                                            <i class="ki-outline ki-check fs-2 stepper-check"></i>
                                            <span class="stepper-number" title="Truck info"><i class="fa-solid fa-map"></i></span>
                                        </div>

                                        <div class="stepper-label">
                                            <h3 class="stepper-title">Route</h3>
                                        </div>
                                    </a>

                                </div>
                                <div class="stepper-line h-20px"></div>
                            </div>

                            <div class="stepper-item" data-kt-stepper-element="nav">
                                <div class="stepper-wrapper">
                                    <a class="nav-link ms-0 me-10"
                                    id="kt_stats_widget_16_tab_link_4" data-bs-toggle="pill"
                                    href="#kt_stats_widget_16_tab_4" aria-selected="false" role="tab"
                                    tabindex="-1" onclick="activetab('#kt_stats_widget_16_tab_4')">
                                    <div class="stepper-icon w-40px h-40px">
                                        <i class="ki-outline ki-check fs-2 stepper-check"></i>
                                        <span class="stepper-number" title="Map & Directions"><i class="fa-solid fa-map"></i></span>
                                    </div>
                                    <input type="hidden" name="load_id" value="{{ $load->bidid }}">

                                    <div class="stepper-label">
                                        <h3 class="stepper-title">Map & Directions</h3>
                                    </div>
                                </a>

                            </div>
                            <div class="stepper-line h-20px"></div>
                        </div>
                        <div class="stepper-item" data-kt-stepper-element="nav">
                            <div class="stepper-wrapper">
                                <a class="nav-link ms-0 me-10" id="kt_stats_widget_16_tab_link_5"
                                data-bs-toggle="pill" href="#kt_stats_widget_16_tab_5"
                                aria-selected="false" role="tab" tabindex="-1"
                                onclick="activetab('#kt_stats_widget_16_tab_5')">
                                <div class="stepper-icon w-40px h-40px">
                                    <i class="ki-outline ki-check fs-2 stepper-check"></i>
                                    <span class="stepper-number" title="Expense"><i class="fa-solid fa-magnifying-glass-dollar"></i></span>
                                </div>

                                <div class="stepper-label">
                                    <h3 class="stepper-title">Expense</h3>
                                </div>
                            </a>
                        </div>
                        <div class="stepper-line h-20px"></div>
                    </div>
                    <div class="stepper-item" data-kt-stepper-element="nav">
                        <div class="stepper-wrapper">
                            <a class="nav-link ms-0 me-10" id="kt_stats_widget_16_tab_link_6"
                            data-bs-toggle="pill" href="#kt_stats_widget_16_tab_6"
                            aria-selected="false" role="tab" tabindex="-1"
                            onclick="activetab('#kt_stats_widget_16_tab_6')">
                            <div class="stepper-icon w-40px h-40px">
                                <i class="ki-outline ki-check fs-2 stepper-check"></i>
                                <span class="stepper-number" title="Documents"><i class="fa-solid fa-cloud-arrow-up"></i></span>
                            </div>

                            <div class="stepper-label">
                                <h3 class="stepper-title">Documents</h3>
                            </div>
                        </a>
                    </div>
                    <div class="stepper-line h-20px"></div>
                </div>

                <div class="stepper-item" data-kt-stepper-element="nav">
                    <div class="stepper-wrapper">
                        <a class="nav-link ms-0 me-10" id="kt_stats_widget_16_tab_link_7"
                        data-bs-toggle="pill" href="#kt_stats_widget_16_tab_7"
                        aria-selected="false" role="tab" tabindex="-1"
                        onclick="activetab('#kt_stats_widget_16_tab_7')">
                        <div class="stepper-icon w-40px h-40px">
                            <i class="ki-outline ki-check fs-2 stepper-check"></i>
                            <span class="stepper-number" title="Notes"><i class="fa-solid fa fa-sticky-note"></i></span>
                        </div>

                        <div class="stepper-label">
                            <h3 class="stepper-title">Notes</h3>
                        </div>
                    </a>
                </div>
                <div class="stepper-line h-20px"></div>
            </div>

             <div class="stepper-item" data-kt-stepper-element="nav">
                    <div class="stepper-wrapper">
                        <a class="nav-link ms-0 me-10" id="kt_stats_widget_16_tab_link_8"
                        data-bs-toggle="pill" href="#kt_stats_widget_16_tab_8"
                        aria-selected="false" role="tab" tabindex="-1"
                        onclick="activetab('#kt_stats_widget_16_tab_8')">
                        <div class="stepper-icon w-40px h-40px">
                            <i class="ki-outline ki-check fs-2 stepper-check"></i>
                            <span class="stepper-number" title="Billing"><i class="fa-solid fas fa-file-invoice"></i></span>
                        </div>

                        <div class="stepper-label">
                            <h3 class="stepper-title">Billing</h3>
                        </div>
                    </a>
                </div>
                <div class="stepper-line h-20px"></div>
            </div>

            <div class="stepper-item" data-kt-stepper-element="nav">
                <div class="stepper-wrapper">
                    <a class="nav-link ms-0 me-10" id="kt_stats_widget_16_tab_link_9"
                    data-bs-toggle="pill" href="#kt_stats_widget_16_tab_9"
                    aria-selected="false" role="tab" tabindex="-1"
                    onclick="activetab('#kt_stats_widget_16_tab_9')">
                    <div class="stepper-icon w-40px h-40px">
                        <i class="ki-outline ki-check fs-2 stepper-check"></i>
                        <span class="stepper-number" title="StatusHistory"><i class="fa-solid fas fa-file-invoice"></i></span>
                    </div>

                    <div class="stepper-label">
                        <h3 class="stepper-title">History</h3>
                    </div>
                </a>
            </div>
            <!-- <div class="stepper-line h-20px"></div> -->
        </div>


        </ul>
        <button type="submit"
        class="tab-action btn btn-primary btn-lg mt-12 me-3 mb-xxl-12 w-100">Update</button>
    </div>
</div>
<div class="col-lg-8">
    @csrf
    <input type="hidden" name="status" value="Open">

    <div class="mb-12 mb-xxl-12 tab-content">
        <div class="pb-0 tab-pane fade show {{ $activeTab1 }}"
        id="kt_stats_widget_16_tab_1">
        <div class="w-100 card card-body p-10">
            <div class="">
                <h2 class="fw-bold text-gray-900 mt-2">Customer Info</h2>
            </div>
            <hr>

            <div class="row">
                <div class="col-sm-8">
                    <div class="row">
                        <div class="col-md-10">
                            <div class="mb-3">
                                <label class="col-form-label ew-label" for="mc_id">Customer <span class="text-danger">*</span></label>
                                <select name="mc_id" class="form-control" id="cid" required>
                                    <option value="">Please select</option>
                                    @foreach ($customers as $key => $customer)
                                    <option value="{{ $customer->CLIENT_ID }}" {{ $customer->CLIENT_ID == $load->mc_id ? 'selected' : '' }}>{{ $customer->NAME }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 mt-13">
                            <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addDriverModal" id="addcust">
                                <i class="fa-solid fa-plus" style="font-size:26px; padding-left:5px;"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-100 card card-body mt-10 p-10">

        <div class="">
            <h2 class="fw-bold text-gray-900">Truck Info</h2>
        </div>
        <hr>

        <div class="row">
         <div class="col-sm-6">
            <div class="mb-3">
                <label class="col-form-label ew-label" for="REFERENCE_NUMBER">REF # @if(!empty($checkcustomer->CLIENT_ID) && $checkcustomer->CLIENT_ID != $load->mc_id)<span class="text-danger">*</span> @endif</label>
                <input type="text" data-table="LOCATIONS" data-field="referance_number" name="referance_number" id="referance_number" value="{{ old('referance_number', $load->loadid) }}" class="form-control pac-target-input" oninput="this.value = this.value.toUpperCase();" @if(!empty($checkcustomer->CLIENT_ID) && $checkcustomer->CLIENT_ID != $load->mc_id) required @endif>
            </div>
        </div>
    <div class="col-sm-6">
       <div class="mb-3">
            <label class="col-form-label ew-label" for="RATE_CONFIRMATION">Rate Confirmation</label>
            <input type="file" data-table="LOCATIONS" data-field="RATE_CONFIRMATION" name="RATE_CONFIRMATION" id="RATE_CONFIRMATION" class="form-control pac-target-input">

            @if(!empty($load->LOAD_DOCS) && file_exists(public_path('load/' . $load->LOAD_DOCS)))
                <div class="mb-2">
                    <!-- <img src="{{ asset('load/' . $load->LOAD_DOCS) }}" alt="Rate Confirmation" class="img-thumbnail" width="150"> -->

                    <a href="{{ asset('load/' . $load->LOAD_DOCS) }}" download>{{ $load->LOAD_DOCS }}</a>
                </div>
            @endif
        </div>

        </div>



    </div>

    <div class="row">

       <div class="col-sm-6">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="RATE">Load Rate</label>
            <input type="text" data-table="LOCATIONS" data-field="rate" name="RATE" id="RATE" value="{{ old('RATE', $load->load_rate) }}" class="form-control pac-target-input">
        </div>
    </div>

    <div class="col-sm-3">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="truck_id">Truck <span
                class="text-danger">*</span></label>
                <select name="truck_id" id="truck_id" class="form-control" required>
                    <option value="">Please select</option>
                        @foreach ($trucks as $key => $truck)
                            <option value="{{$truck->TRUCK_ID}}"{{ $truck->TRUCK_ID == $load->truck ? 'selected' : '' }}>{{$truck->UNIT_ID}}</option>
                        @endforeach
                </select>
            </div>
        </div>
        <div class="col-sm-3">
             <div class="mt-12 ">
                   <button  type="button" onclick="addLoadExpense('truck',{{$load->bidid}})" class="btn btn-sm btn-primary mt-3">Truck Expense</button>
            </div>
        </div>
    </div>
    <div class="row">
      <div class="col-sm-3">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="driver_id">Driver </label>
            <select name="driver_id" id="driver_id" class="form-control">
                <option value="">Please select</option>
                    @foreach ($drivers as $key => $driver)
                        <option value="{{$driver->DRIVER_ID}}" {{ $driver->DRIVER_ID == $load->did ? 'selected' : '' }}>{{ strtoupper($driver->FIRST_NAME.' '.$driver->LAST_NAME) }}</option>
                    @endforeach
            </select>
        </div>
    </div>
    <div class="col-sm-3 driver_pay" @if(!empty($load->did)) style="display:block" @else style="display:none" @endif>
        <label class="col-form-label ew-label" for="DRIVER_ORIG_AMT">Driver Pay </label>
        <input type="text" name="DRIVER_ORIG_AMT"
            id="DRIVER_ORIG_AMT" value="{{ old('DRIVER_ORIG_AMT', !empty($getDriverExpenseByType) ? $getDriverExpenseByType->ORIG_AMT : '') }}" class="form-control pac-target-input"
            placeholder="" @if(!empty($getDriverExpenseByType)) readonly @endif>
        {{-- <button  type="button" onclick="addLoadExpense('driver',{{$load->bidid}})" class="btn btn-sm btn-primary mt-3">Driver Expense</button> --}}
    </div>

    <div class="col-md-6">
        <label class="col-lg-6 col-form-label fw-semibold fs-6">Status</label>
        <div class="col-lg-12 fv-row fv-plugins-icon-container">
            <div class="d-flex align-items-center mt-3">
                <label class="form-check form-check-custom form-check-inline form-check-solid me-5">
                    <input class="form-check-input" name="status" id="status" type="radio" value="Open"
                    {{ $load->status == 'Open' || is_null($load->status) || $load->status === '' ? 'checked' : '' }}>
                    <span class="fw-semibold ps-2 fs-6">Open</span>
                </label>

                <label class="form-check form-check-custom form-check-inline form-check-solid">
                    <input class="form-check-input" name="status" type="radio" value="Delivered"
                    {{ $load->status == 'Delivered' ? 'checked' : '' }}>
                    <span class="fw-semibold ps-2 fs-6">Delivered</span>
                </label>
            </div>
        </div>
    </div>

</div>




</div>
<div class="col-lg-12 text-center mt-5">
    <input type="hidden" name="activeTab" id="activeTab" value="">
    <button type="submit"
    class="tab-action btn btn-primary btn-lg me-3 mb-xxl-12">Update</button>
    <a href="{{ route('assets.loads.index') }}"
    class="btn btn-secondary  btn-lg me-3 mb-xxl-12">Cancel</a>
</div>

</div>

<div class="card pb-0 tab-pane fade show "
id="kt_stats_widget_16_tab_2">
<div class="w-100 card-body">
    <div class="">
        <h2 class="fw-bold text-gray-900">Cargo</h2>
    </div>
    <hr>

    <div class="row">
        <div class="col-sm-6">
            <div class="mb-3">
                <label class="col-form-label ew-label" for="weight">Weight </label>
                <input type="text" data-table="weight" data-field="weight" name="weight" id="weight" value="{{ old('weight', $load->weight) }}" class="form-control pac-target-input"  autocomplete="off">
            </div>
        </div>

        <div class="col-sm-6">
            <div class="mb-3">
                <label class="col-form-label ew-label" for="value">Load Value </label>
                <input type="text" data-table="value" data-field="value" name="value" id="value" value="{{ old('value', $load->value) }}" class="form-control pac-target-input"  autocomplete="off">
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="mb-3">
                <label class="col-form-label ew-label" for="load_type">Load Type </label>
                <input type="text" data-table="load_type" data-field="load_type" name="load_type" id="load_type" value="{{ old('load_type', $load->load_type) }}" class="form-control pac-target-input"autocomplete="off">
            </div>
        </div>

        <div class="col-sm-6">
            <div class="mb-3">
                <label class="col-form-label ew-label" for="comodity">Commodity </label>
                <input type="text" data-table="comodity" data-field="comodity" name="comodity" id="comodity" value="{{ old('comodity', $load->comodity) }}" class="form-control pac-target-input"  autocomplete="off">
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="mb-3">
                <label class="col-form-label ew-label" for="load_type">Trailer </label>
                <select name="equipment_type" id="equipment_type" class="form-control">
                    <option value="">Please select</option>
                        @foreach ($trailers as $key => $trailer)
                            <option value="{{$trailer->ID}}"{{ $trailer->ID == $load->equipment_type ? 'selected' : '' }}>{{$trailer->TRAILER_ID}}</option>
                        @endforeach
                </select>
            </div>
        </div>
        <div class="col-sm-3">
             <div class="mt-12 ">
                  <button  type="button" onclick="addLoadExpense('trailer',{{$load->bidid}})" class="btn btn-sm btn-primary">Trailer Expense</button>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="mb-3">
                <label class="col-form-label ew-label" for="load_for_temp">Reefer Temp </label>
                <input type="text" data-table="load_for_temp" data-field="load_for_temp" name="load_for_temp" id="load_for_temp" value="{{ old('load_for_temp', $load->load_for_temp) }}" class="form-control pac-target-input"  autocomplete="off">
            </div>
        </div>

    </div>
    <div class="row">
       <div class="col-md-6">
        <label class="col-lg-6 col-form-label fw-semibold fs-6">COD</label>
        <div class="col-lg-12 fv-row fv-plugins-icon-container">
            <div class="d-flex align-items-center mt-3">
                <label class="form-check form-check-custom form-check-inline form-check-solid me-5">
                    <input class="form-check-input" name="COD" id="COD" type="radio" value="YES"
                    {{ $load->COD == 'YES' || is_null($load->COD) || $load->COD === '' ? 'checked' : '' }}>
                    <span class="fw-semibold ps-2 fs-6">YES</span>
                </label>

                <label class="form-check form-check-custom form-check-inline form-check-solid">
                    <input class="form-check-input" name="COD" type="radio" value="NO"
                    {{ $load->COD == 'NO' ? 'checked' : '' }}>
                    <span class="fw-semibold ps-2 fs-6">NO</span>
                </label>
            </div>
        </div>
    </div>
</div>








</div>





<div class="col-lg-12 text-center mt-5">
    <input type="hidden" name="activeTab" id="activeTab" value="">
    <button type="submit"
    class="tab-action btn btn-primary btn-lg me-3 mb-xxl-12">Update</button>
    <a href="{{ route('assets.loads.index') }}"
    class="btn btn-secondary  btn-lg me-3 mb-xxl-12">Cancel</a>
</div>
</div>


<div class="pb-0 tab-pane fade show "
id="kt_stats_widget_16_tab_3">
<div class="card card-body w-100 p-10">
    <div class="">
        <h2 class="fw-bold text-gray-900">Route</h2>
    </div>
    <hr>

    <div class="row">
       <div class="col-sm-6">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="P_ADDRESS">Pickup Address <span class="text-danger">*</span></label>
            <input type="text" data-table="LOCATIONS" data-field="P_ADDRESS" name="P_ADDRESS" id="P_ADDRESS" value="{{ old('P_ADDRESS', $load->pickupaddress) }}" class="form-control pac-target-input"  autocomplete="off" required>
        </div>
    </div>
    <div class="col-sm-6">
        <label class="col-form-label ew-label" for="D_ADDRESS">Delivery Address <span class="text-danger">*</span></label>
        <input type="text" data-table="LOCATIONS" data-field="D_ADDRESS" name="D_ADDRESS" id="D_ADDRESS" value="{{ old('D_ADDRESS', $load->deliveraddress) }}" class="form-control pac-target-input"  autocomplete="off" required>
    </div>
</div>
<div class="row">
    @for ($i = 1; $i <= 5; $i++)
    <div class="col-md-6 {{ old('S' . $i . '_ADDRESS', optional($stops)->{'s'.$i.'_address'}) ? '' : 'd-none' }}" id="stop{{ $i }}">
        <label class="col-form-label ew-label" for="S{{ $i }}_ADDRESS">STOP {{ $i }}
            <a href="javascript:void(0);" onclick="removeStop('{{ $i }}')">
                <i class="ki-outline ki-trash-square fs-2x text-danger"></i>
            </a>
        </label>
        <input type="text" name="S{{ $i }}_ADDRESS" id="S{{ $i }}_ADDRESS" value="{{ old('S' . $i . '_ADDRESS', optional($stops)->{'s'.$i.'_address'}) }}" class="form-control pac-target-input stop-address" autocomplete="off">
        <input type="hidden" name="S{{ $i }}_CITY" value="{{ old('S' . $i . '_CITY', optional($stops)->{'s'.$i.'_city'}) }}" id="S{{ $i }}_CITY">
        <input type="hidden" name="S{{ $i }}_STATE" value="{{ old('S' . $i . '_STATE', optional($stops)->{'s'.$i.'_state'}) }}" id="S{{ $i }}_STATE">
        <input type="hidden" name="S{{ $i }}_POSTAL" value="{{ old('S' . $i . '_POSTAL', optional($stops)->{'s'.$i.'_zip'}) }}" id="S{{ $i }}_POSTAL">
        <input type="hidden" name="S{{ $i }}_LAT" value="{{ old('S' . $i . '_LAT', optional($stops)->{'s'.$i.'_lat'}) }}" id="S{{ $i }}_LAT">
        <input type="hidden" name="S{{ $i }}_LNG" value="{{ old('S' . $i . '_LNG', optional($stops)->{'s'.$i.'_lng'}) }}" id="S{{ $i }}_LNG">
    </div>
    @endfor
</div>

<div class="row mt-2 addstops">
    <div class="col-md-12">
        <div class="col-md-12 d-flex align-items-center">
            <label for="" class="d-inline-block mr-2">Do you want to add a Stop?</label>&nbsp;
            <button type="button" class="btn btn-success btn-sm" onclick="addStop();">
                <i class="fa-solid fa-plus"></i>
            </button>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-6">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="P_DATE">Pickup Date <span class="text-danger">*</span></label>
            <input type="date" data-table="LOCATIONS" data-field="P_DATE" name="P_DATE" id="P_DATE"
            value="{{ old('P_DATE', date('Y-m-d', strtotime($load->pick_date))) }}"
            class="form-control pac-target-input" required>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="D_DATE">Delivery Date <span class="text-danger">*</span></label>
            <input type="date" data-table="LOCATIONS" data-field="D_DATE" name="D_DATE" id="D_DATE"  value="{{ old('D_DATE', date('Y-m-d', strtotime($load->delivered_date))) }}"  class="form-control pac-target-input" required>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-6">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="PICKUP_NOTES">Pickup Notes</label>
            <textarea name="Pickup_Notes" class="form-control" style="height: 40px;">{{ old('Pickup_Notes', $load->Pickup_Notes) }}</textarea>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="DELIVERY_NOTES">Delivery Notes</label>
            <textarea name="Deliver_Notes" class="form-control" style="height: 40px;">{{ old('Deliver_Notes', $load->Deliver_Notes) }}</textarea>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <div class="mb-3">
            <label class="col-form-label ew-label">Home Trip</label>
            <input type="checkbox" name="home_trip" id="home_trip"
            value="1" {{ old('home_trip', $load->home_trip) ? 'checked' : '' }}
            >
        </div>
    </div>
</div>
</div>
<div class="card card-body w-100 mt-10 p-10">

  <div class="">
            <h2 class="fw-bold text-gray-900">Check In-Out Info</h2>
        </div>
        <hr>

<div class="row">
    <div class="col-sm-6">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="arrival_date">Actual Pickup Date/Time</label>
              @php $arrivaldate = !empty($load->arrival_date) ? date('Y-m-d', strtotime($load->arrival_date)) : ''; @endphp
            <input type="date" data-table="arrival_date" data-field="arrival_date" name="arrival_date" id="arrival_date" value="{{ old('arrival_date', $arrivaldate) }}"  class="form-control pac-target-input">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="delivered_date">Actual Deliver Date/Time</label>
              @php $delivereddate = !empty($load->deliver_date) ? date('Y-m-d', strtotime($load->deliver_date)) : ''; @endphp
              <input type="date" data-table="LOCATIONS" data-field="delivered_date" name="delivered_date1" id="delivered_date1" value="{{ old('delivered_date1', $delivereddate) }}" class="form-control pac-target-input">
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="PTRAILER">Pickup Trailer #</label>
            <input type="text" data-table="arrival_date" data-field="PTRAILER" name="PTRAILER" id="PTRAILER" value="{{ old('PTRAILER', $load->PTRAILER)}}"  class="form-control pac-target-input">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="DTRAILER">Drop Trailer #</label>
              <input type="text" data-table="DTRAILER" data-field="DTRAILER" name="DTRAILER" id="DTRAILER" value="{{ old('DTRAILER', $load->DTRAILER)}}" class="form-control pac-target-input">
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="PTRAILER_2">Pickup Trailer 2 #</label>
            <input type="text" data-table="arrival_date" data-field="PTRAILER_2" name="PTRAILER_2" id="PTRAILER_2" value="{{ old('PTRAILER_2', $load->PTRAILER_2)}}"class="form-control pac-target-input">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="DTRAILER_2">Drop Trailer 2 #</label>
              <input type="text" data-table="DTRAILER_2" data-field="DTRAILER_2" name="DTRAILER_2" id="DTRAILER_2" value="{{ old('DTRAILER_2', $load->DTRAILER_2)}}" class="form-control pac-target-input" >
        </div>
    </div>
</div>
</div>
<div class="card card-body w-100 mt-10 p-10">
 @if($statemile->isNotEmpty())
  <div class="">
        <h2 class="fw-bold text-gray-900">Miles by State : Promiles
        <button type="button" class="btn btn-primary btn-sm float-end" id="recalulateMilesBtn">Recalculate Miles</button>
        </h2>
        </div>
        <hr>

        <div class="row">
    <div class="col-sm-6">
       <table class="table table-bordered mt-10" width="100%">
            <tr>
                <th>State</th>
                <th>Total Miles</th>
            </tr>
            <tbody>
                @foreach($statemile as $sm)
                <tr>
                   <td>{{ $sm->state ?? 'N/A'}}</td>
                   <td>{{ $sm->totalmiles ?? 'N/A'}}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    </div>
  @endif

</div>





<div class="col-lg-12 text-center mt-5">
    <input type="hidden" name="activeTab" id="activeTab" value="">
    <button type="submit"
    class="tab-action btn btn-primary btn-lg me-3 mb-xxl-12">Update</button>
    <a href="{{ route('assets.loads.index') }}"
    class="btn btn-secondary  btn-lg me-3 mb-xxl-12">Cancel</a>
</div>
</div>

<div class="card pb-0 tab-pane fade show "
id="kt_stats_widget_16_tab_4">
<div class="card-body w-100">
    <div class="">
        <h2 class="fw-bold text-gray-900">Map & Directions</h2>
    </div>
    <hr>

    <div class="row">
        <div id="map" style="width: 100%; height: 400px;"></div>
    </div>


</div>

<div class="col-lg-12 text-center mt-5">
    <input type="hidden" name="activeTab" id="activeTab" value="">
    <button type="submit"
    class="tab-action btn btn-primary btn-lg me-3 mb-xxl-12">Update</button>
    <a href="{{ route('assets.loads.index') }}"
    class="btn btn-secondary  btn-lg me-3 mb-xxl-12">Cancel</a>
</div>
</div>

<div class="tab-pane fade show" id="kt_stats_widget_16_tab_5">
    <div class="w-100 card card-body">
    <div class="d-flex align-items-center">
        <div class="me-3 col-md-4">Billing Total: <h3 style="display:inline;">${{ number_format($billing_total, 2) }}</h3></div>
        <div class="col-md-4">Expense Total: <h3 style="display:inline;" class="fw-bold text-gray-900 me-3">$ {{ number_format($grandExpenseTotal, 2) }}</h3></div>
        <div class="col-md-4">Profit: <h3 style="display:inline;" class="fw-bold text-gray-900"><span class="text-{{ $profit > 0 ? 'success' : 'danger' }}">$ {{ number_format($profit, 2) }}</span></h3></div>
     </div>
        <div class="float-end mt-3">
            <button type="button" class="btn btn-success btn-sm me-2" onclick="showLoadCashModal();">
                Load Cash on Card
            </button>
        </div>
    </div>

    <div class="w-100 card card-body p-10 mt-10">
        <div class="row">
            <div class="col-md-7">
                <h2 class="fw-bold text-gray-900">Load Expenses</h2>
                <span><b>Total Expenses:{{count($expenses)}}</b></span>
                <span><b>Amount: ${{ number_format($exptotalAmount,2)}}</b></span>
            </div>
            <div class="col-md-3 p-0 mt-3">
                <button type="button" class="btn btn-success btn-sm addExpense"
                    onclick="addExpenses()" data-bs-toggle="modal"
                    data-bs-target="#expenseModal" id="addIssue">Add Load Expense
                </button>
            </div>
            <div class="col-md-2 p-0 mt-3">
                <select name="truckExpensedownloadOptions"
                    id="truckExpensedownloadOptions"
                    class="form-select bg-primary form-select-solid form-select-sm downloadOptions"
                    data-control="select2" data-hide-search="true"
                    data-placeholder="Export">
                    <option value="">Export</option>
                    <option value="excel">Excel</option>
                    <option value="csv">CSV</option>
                    <option value="print">Print</option>
                    <option value="reset">Reset</option>
                    <option value="reload">Reload</option>
                </select>
            </div>
        </div>
        <hr>
        <div class="card-body p-0">
            <table id="loadExpanseList"
            class="table table-striped table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable no-footer">
            <thead>
                <tr class="thead-bg-color">
                    <th class="fs-7 text-gray-500 text-uppercase">#</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Amount</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Vendor</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Type</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Reff #</th>
                    <th class="fs-7 text-gray-500 text-uppercase">DATE</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Action</th>
                </tr>
            </thead>
            <tbody>
                                @php $i=1;
                $SERVICE_CODES = [];
                @endphp

                @if($expenses->isEmpty())
                <tr>
                    <td colspan="10" class="text-center">{{'No Data Found'}}
                    </td>
                </tr>
                @else
                @foreach($expenses as $expense)

                <tr>
                    <td>
                        <a href="javascript:void(0)"
                        onclick="editExpense('{{$expense['AP_ID']}}')">{{$expense['AP_ID']}}</a>
                    </td>
                    <td>${{ number_format($expense['ORIG_AMT'],2) }}</td>
                    <td>
                        @foreach ($vendorslist as $vendorl)
                        @if($vendorl['VENDOR_ID'] == $expense['VENDOR_ID'] )
                        {{$vendorl['NAME']}}
                        @endif
                        @endforeach
                    </td>
                    <td>
                        @foreach ($repairTypes as $key => $expenseType)
                        @if($key == $expense['TYPE'] )
                        {{$expenseType}}
                        @endif
                        @endforeach
                    </td>
                    <td>
                        {{ $expense['TX_REFERENCE'] }}
                    </td>


                    <td><a href="javascript:void(0)"
                        onclick="editExpense('{{$expense['AP_ID']}}')"
                        class="btn btn-primary btn-sm me-2"
                        id="editExpense">Edit</a></td>

                    </tr>
                    @php $i++; @endphp
                    @endforeach


                    @endif
                </tbody>
            </table>
        </div>
    </div>

    <div class="w-100 card card-body mt-10 p-10">
        <div class="row">
            <div class="col-md-9">
                <h2 class="fw-bold text-gray-900">Driver Pay</h2>
                <span><b>Total Expenses:{{count($driverexpenses) ?? 0}}</b></span>
                <span><b>Amount: ${{ number_format($driverexptotalAmount,2)}}</b></span>
            </div>
            <div class="col-md-3">
            <button type="button" onclick="addExpenses('driver',{{$load->did}})" class="btn btn-success btn-sm addExpense mb-3">Add Driver Pay</button>
            </div>
        </div>
        <hr>

        <table id="driverExpanseList"
            class="table table-striped table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable no-footer">
            <thead>
                <tr class="thead-bg-color">
                    <th class="fs-7 text-gray-500 text-uppercase">#</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Driver Name</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Amount</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Vendor</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Type</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Reff #</th>
                    <th class="fs-7 text-gray-500 text-uppercase">DATE</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Action</th>
                </tr>
            </thead>
            <tbody>
                                @php $i=1;
                $SERVICE_CODES = [];
                @endphp

                @if($expenses->isEmpty())
                    <tr>
                        <td colspan="10" class="text-center">{{'No Data Found'}}
                        </td>
                    </tr>
                @else
                    @if(!empty($driverexpenses))
                        @foreach($driverexpenses as $expense)
                            <tr>
                                <td>
                                    <a href="javascript:void(0)"
                                        onclick="editExpense('{{$expense['AP_ID']}}', 'driver', '{{ $expense['DRIVER_ID'] }}')">{{$expense['AP_ID']}}</a>
                                </td>
                                <td></td>
                                <td>${{ number_format($expense['ORIG_AMT'],2) }}</td>
                                <td>
                                    @foreach ($vendorslist as $vendorl)
                                    @if($vendorl['VENDOR_ID'] == $expense['VENDOR_ID'] )
                                    {{$vendorl['NAME']}}
                                    @endif
                                    @endforeach
                                </td>
                                <td>
                                    {{ $expense['NAME'] }}
                                </td>
                                <td>
                                    {{ $expense['TX_REFERENCE'] }}
                                </td>
                                <td>
                                    {{convertToMdyWithTime($expense['TX_DUE'])  }}
                                </td>



                            </tr>
                            @php $i++; @endphp
                        @endforeach
                    @endif


                @endif
            </tbody>
        </table>
    </div>

    <!-- <div class="w-100 card card-body mt-10 p-10">
        <div class="row">
            <div class="col-md-9">
                <h2 class="fw-bold text-gray-900">Truck Expenses</h2>
                <span><b>Total Expenses:{{count($truckexpenses) ?? 0}}</b></span>
                <span><b>Amount: ${{ number_format($truckexptotalAmount,2)}}</b></span>
            </div>
            <div class="col-md-3">
            <button type="button" onclick="addExpenses('truck',{{$load->truck}})" class="btn btn-success btn-sm addExpense ">Add Truck Expense</button>
            </div>
        </div>
        <hr>

        <table id="truckExpanseList"
            class="table table-striped table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable no-footer">
            <thead>
                <tr class="thead-bg-color">
                    <th class="fs-7 text-gray-500 text-uppercase">#</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Amount</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Vendor</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Type</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Reff #</th>
                    <th class="fs-7 text-gray-500 text-uppercase">DATE</th>
                    <th class="fs-7 text-gray-500 text-uppercase">Action</th>

                </tr>
            </thead>
            <tbody>
                                @php $i=1;
                $SERVICE_CODES = [];
                @endphp

                @if($expenses->isEmpty())
                <tr>
                    <td colspan="10" class="text-center">{{'No Data Found'}}
                    </td>
                </tr>
                @else
                    @if(!empty($truckexpenses))
                        @foreach($truckexpenses as $expense)
                        <tr>
                            <td>
                                <a href="javascript:void(0)"
                                    onclick="editExpense('{{$expense['AP_ID']}}','truck', '{{ $expense['TRUCK_ID'] }}')">{{$expense['AP_ID']}}</a>
                            </td>
                            <td>${{ number_format($expense['ORIG_AMT'],2) }}</td>
                            <td>
                                @foreach ($vendorslist as $vendorl)
                                @if($vendorl['VENDOR_ID'] == $expense['VENDOR_ID'] )
                                {{$vendorl['NAME']}}
                                @endif
                                @endforeach
                            </td>
                            <td>
                            {{ $expense['NAME'] }}
                            </td>
                            <td>
                                {{ $expense['TX_REFERENCE'] }}
                            </td>
                            <td>
                                {{ convertToMdyWithTime($expense['TX_DUE']) }}
                            </td>

                            <td>

                            </td>

                        </tr>
                        @php $i++; @endphp
                        @endforeach
                    @endif
                @endif
            </tbody>
        </table>
    </div> -->

</div>

<div class="card pb-0 tab-pane fade show" id="kt_stats_widget_16_tab_6">
    <div class="w-100 card-body">
        <div class="row">
            <div class="col-md-9">
                <h2 class="fw-bold text-gray-900">Documents</h2>

            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-success btn-sm addExpense"
                onclick="addDocs()" data-bs-toggle="modal"
                data-bs-target="#addDocModal" id="adddoc">Add Document
            </button>

        </div>
    </div>
    <hr>
    <div class="card-body p-0">
        <table id="loadDocsList"
        class="table table-striped table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable no-footer">
        <thead>
            <tr class="thead-bg-color">
                <th class="fs-7 text-gray-500 text-uppercase">#</th>
                <th class="fs-7 text-gray-500 text-uppercase">Name</th>
                <!-- <th class="fs-7 text-gray-500 text-uppercase ">load_docs</th> -->
                <th class="fs-7 text-gray-500 text-uppercase">Type</th>
                <th class="fs-7 text-gray-500 text-uppercase">CREATED AT</th>
                <th class="fs-7 text-gray-500 text-uppercase">ACTION</th>
            </tr>
        </thead>
        <!-- <tbody>
            @php $i=1;
            $load_file_type = config('custom.load_file_type');
            @endphp
            @if($load_documents->isEmpty())
            <tr>
                <td colspan="10" class="text-center">{{ 'No Data Found' }}</td>
            </tr>
            @else
            @foreach($load_documents as $doc)
            <tr>
                <td>
                    <a href="javascript:void(0)" onclick="editDocs('{{$doc['id']}}')">{{$doc['load_id']}}</a>
                </td>
                <td>{{ $doc['file_name'] }}</td>
                <td>{{ $load_file_type[$doc['file_type']] ?? 'Unknown' }}</td>
                <td>{{ \Carbon\Carbon::parse($doc['created_at'])->format('m/d/Y') }}</td>

                <td>
                    <a href="javascript:void(0)" onclick="editDocs('{{$doc['id']}}')" class="btn btn-primary btn-sm me-2">Edit</a>
                    <a href="javascript:void(0)" onclick="deleteDoc('{{$doc['id']}}')" class="btn btn-dark btn-sm">Delete</a>
                </td>
            </tr>
            @php $i++; @endphp
            @endforeach
            @endif
        </tbody> -->

    </table>
</div>




</div>




</div>

<div class="card pb-0 tab-pane fade show" id="kt_stats_widget_16_tab_7">
   <div class="w-100 card-body">
      <div class="row">
         <div class="col-md-10">
            <h2 class="fw-bold text-gray-900">Notes</h2>
         </div>
         <div class="col-md-2 p-0 mt-3">
            <button type="button" class="btn btn-success btn-sm addNote"
               onclick="addNotes()" data-bs-toggle="modal"
               data-bs-target="#notesModal" id="addnote">Add Note
            </button>
         </div>
        <!--  <div class="col-md-2 p-0 mt-3">
            <select name="loadNotesdownloadOptions"
               id="loadNotesdownloadOptions"
               class="form-select bg-primary form-select-solid form-select-sm downloadOptions"
               data-control="select2" data-hide-search="true"
               data-placeholder="Export">
               <option value="">Export</option>
               <option value="excel">Excel</option>
               <option value="csv">CSV</option>
               <option value="print">Print</option>
               <option value="reset">Reset</option>
               <option value="reload">Reload</option>
            </select>
         </div> -->
      </div>
      <hr>
      <div class="card-body p-0">
         <table id="loadNotesList"
            class="table table-striped table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable no-footer">
            <thead>
               <tr class="thead-bg-color">
                  <th class="fs-7 text-gray-500 text-uppercase">#</th>
                  <!-- <th class="fs-7 text-gray-500 text-uppercase">Load ID</th> -->
                  <th class="fs-7 text-gray-500 text-uppercase">Note</th>
                  <th class="fs-7 text-gray-500 text-uppercase">CREATED DATE</th>
                  <th class="fs-7 text-gray-500 text-uppercase">Action</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
</div>

<div class="card pb-0 tab-pane fade show" id="kt_stats_widget_16_tab_8">
   <div class="w-100 card-body">
      <div class="row">
         <div class="col-md-10">
            <h2 class="fw-bold text-gray-900">Billing</h2>
         </div>
         <div class="col-md-2 p-0 mt-3">

         </div>

      </div>
      <hr>
      <div class="card-body p-0">
        <div class="row">
        <div class="col-md-5">
                <a href="javascript:void(0)"  class="card card-xl-stretch mb-xl-8 theme-dark-bg-body" style="background-color: #F7D9E3">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                            <!-- <div class="text-gray-900 fw-bold fs-3 mb-10">Available Credit
                            </div> -->
                        </div>

                        <div class="mb-5">
                            @php
                            $ec_sum = 0;
                            $ec_sum = $load->load_rate + $ec_total;
                            @endphp
                            <span class="fw-bold fs-3x me-2 lh-0 text-gray-900 creditAvailable">${{number_format($ec_sum,2)}}</span>
                        </div>
                        <span class="text-gray-900 fw-bold fs-1x lh-0 mt-7" id="customer_charges">Trip Total:{{number_format($load->load_rate,2)}}</span>
                        <span class="text-gray-900 fw-bold fs-1x lh-0 mt-7" id="extra_charges">Extra Charges: {{number_format($ec_total,2)}}</span>

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

        @if(isset($invoice) && isset($invoice->is_billed) && (int)$invoice->is_billed === 1)

        <div class="col-md-7 card card-xl-stretch mb-xl-8 theme-dark-bg-body" style="background-color: #CBF0F4">
                <a href="javascript:void(0)"></a>
                    <div class="card-body d-flex flex-column">

                        <div class="mb-5">
                            @php
                            $ec_sum = 0;
                            $ec_sum = $load->load_rate + $ec_total;
                            @endphp
                            <span class="fw-bold fs-3x me-2 lh-0 text-gray-900 creditAvailable">Invoice #: {{$invoice->invoice_number}}</span>
                        </div>
                        <span class="text-gray-900 fw-bold fs-1x lh-0 mt-7">
                            Customer Name:
                            @if ($load->mc_id)
                                <a href="{{ route('assets.customers.edit', $load->mc_id) }}" class="text-primary" target="_blank">
                                    {{ $customers->firstWhere('CLIENT_ID', $load->mc_id)->NAME ?? 'Customer' }}
                              </a>
                            @else
                                Customer
                            @endif
                        </span>
                        <span class="text-gray-900 fw-bold fs-1x lh-0 mt-7" id="customer_charges">Load #:{{$invoice->load_id}}</span>
                        <span class="text-gray-900 fw-bold fs-1x lh-0 mt-7" id="extra_charges">Balance Due: {{number_format($invoice->amount,2)}}</span>
                        <span class="text-gray-900 fw-bold fs-1x lh-0 mt-7" id="extra_charges">Due Date: {{convertToMdy($invoice->due_date)}}</span>
                        <div class="row">
                        <div class="col-md-4 mt-5">
                            <button type="button" class="btn btn-primary btn-sm me-2" onclick="window.open('{{ route('invoice_master.invoicePrint', $load->bidid) }}', '_blank')">Print Invoice</button>

                             <!-- <a href="{{ route('invoice_master.invoicePrint', $load->bidid) }}"class="btn btn-primary btn-sm" target="_blank">Print Invoice</a> -->
                        </div>
                        <div class="col-md-4 mt-5" style="margin-left:-30px;">
                             <button type="button" class="btn btn-primary btn-sm addExpense"
                                    onclick="send_inv_email('{{$load->bidid}}')" data-bs-toggle="modal"
                                    data-bs-target="#sendInvEmailModal" id="sendInvEmail">Email Invoice
                                </button>
                        </div>


                        <div class="col-md-5 mt-5" style="margin-left:-25px;">
                            <button type="button" class="btn btn-sm {{ $invoice->is_paid == 1 ? 'btn-success' : 'btn-primary' }} invpaid"id="invPaid"
                                {{ $invoice->is_paid == 1 ? 'disabled' : '' }}
                                {{ $invoice->is_paid == 1 ? '' : 'onclick=inv_paid(' . $invoice->id . ') data-bs-toggle=modal data-bs-target=#invPaidModal' }}>
                                {{ $invoice->is_paid == 1 ? 'Invoice Is Paid' : 'Mark Invoice Paid' }}
                            </button>
                        </div>
                        <div class="col-md-5 mt-5" style="margin-left:-2px;">
                            <button type="button" class="btn btn-primary btn-sm invRevise"
                                    onclick="if (confirm('Are you sure you want to revise this invoice?')) { window.open('{{ route('invoice_master.invoiceRevise', $invoice->id) }}', '_self'); }">
                                Revise
                            </button>
                        </div>

                        <div class="col-md-4 mt-5" style="margin-left:-97px;">
                             <button type="button" class="btn btn-primary btn-sm addExpense"
                                    onclick="window.open('{{ route('invoice_master.invoiceDownload', $load->bidid) }}')">Download PDF
                                </button>
                        </div>
                        </div>
                    </div>
                <!-- </a> -->
        </div>
        @else
        <div class="col-md-6">
            <button class="btn btn-success btn-lg" type="button" onclick="confirmConvertInvoice('{{ $load->bidid }}', '{{ $ec_sum }}')">
                <i class="fas fa-file-invoice-dollar"></i> OK to Invoice: {{ number_format($ec_sum, 2) }}
            </button>

             <button type="button" class="btn btn-warning btn-lg mt-5 addNote"onclick="addExtraCharge()" data-bs-toggle="modal"data-bs-target="#extrachargeModal" id="addextracharge"><i class="icon fa fa-file"></i>Add Extra Charges
            </button>
        </div>
        @endif
    </div>
         <table id="loadExtraChargeList"
            class="table table-striped table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable no-footer">
            <thead>
               <tr class="thead-bg-color">
                  <th class="fs-7 text-gray-500 text-uppercase">#</th>
                  <th class="fs-7 text-gray-500 text-uppercase">Type</th>
                  <th class="fs-7 text-gray-500 text-uppercase">Agent</th>
                  <th class="fs-7 text-gray-500 text-uppercase">Carrier</th>
                  <th class="fs-7 text-gray-500 text-uppercase">Total</th>
                  <th class="fs-7 text-gray-500 text-uppercase">Action</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
</div>

<div class="pb-0 tab-pane fade show" id="kt_stats_widget_16_tab_9">
    <div class="w-100 card">
        <div class="card-body">
            <div class="row">
                <h2 class="fw-bold text-gray-900">Status History</h2>
           </div>
           <hr>
           <div class="p-0">
              <table id="odrStatList"
                 class="table table-striped table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable no-footer">
                 <thead>
                    <tr class="thead-bg-color">
                       <th class="fs-7 text-gray-500 text-uppercase">#</th>
                       <th class="fs-7 text-gray-500 text-uppercase">Changed</th>
                       <th class="fs-7 text-gray-500 text-uppercase">Comment</th>
                    </tr>
                 </thead>
                 <tbody>
                    <tr>
                       <td></td>
                       <td></td>
                       <td></td>
                    </tr>
                 </tbody>
              </table>
           </div>
        </div>
    </div>

    <div class="w-100 card mt-10">
        <div class="card-body">
            <div class="row">
                <h2 class="fw-bold text-gray-900">Email History</h2>
           </div>
           <hr>
           <div class="p-0">
              <table id="emailLoadList"
                 class="table table-striped table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable no-footer">
                 <thead>
                    <tr class="thead-bg-color">
                       <th class="fs-7 text-gray-500 text-uppercase">#</th>
                       <th class="fs-7 text-gray-500 text-uppercase">EmailA</th>
                       <th class="fs-7 text-gray-500 text-uppercase">EmailB</th>
                       <th class="fs-7 text-gray-500 text-uppercase">Created Date</th>
                       <th class="fs-7 text-gray-500 text-uppercase">Sendgrid Id</th>
                       <th class="fs-7 text-gray-500 text-uppercase">Sendgrid Status</th>
                       <th class="fs-7 text-gray-500 text-uppercase">Sendgrid Status Date</th>
                    </tr>
                 </thead>
                 <tbody>
                    <tr>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                    </tr>
                 </tbody>
              </table>
           </div>
        </div>
     </div>
    </div>


</div>





</div>

</div>

</div>


</div>


</div>

<!-- </div> -->



<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->



</form>



<div class="modal fade" id="expenseModal" tabindex="-1" aria-labelledby="addTruckModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="expenseModalLabel">Add Load Expense</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="row">
                    <form method="post" id="addExpenseForm" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="did" id="did" value="">
                        <input type="hidden" name="truck_id" id="load_truck_id" value="">
                        <input type="hidden" name="expense_type" id="expense_type" value="">
                        <div class="row">
                            <div class="col-md-6">
                                <label class="col-lg-6 col-form-label fw-semibold fs-6 required">Vendor</label>
                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                    <input type="hidden" name="exp_load_id" value="{{request()->route('bidid')}}">
                                    <input type="hidden" name="AP_ID" id="AP_ID" value="">
                                    <input type="hidden" name="opration" id="opration" value="">
                                    <input type="hidden" id="efsvendor" name="efsvendor" value="">
                                    <select class="form-control" class="form-select" data-control="select2"
                                    data-hide-search="true" id="exp_vendor_id" name="VENDOR_ID" data-placeholder="Please select">
                                    <option value="">Please select</option>
                                    @foreach($vendorslist as  $vendor)
                                    <option value="{{$vendor['VENDOR_ID']}}">{{$vendor['NAME']}}</option>
                                    @endforeach

                                </select>

                                <div
                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                            </div>
                            <p class="text-danger" id="vendorError"></p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mt-15">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary btn-sm vendorAddExp" id="vendorsaddexp">Add Vendor</button>
                            </div>
                            <div class="btn-group">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="row">
                       <div class="col-md-3">

                        <label class="col-lg-6 col-form-label fw-semibold fs-6 required">Amount</label>
                                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                            <input type="text" name="ORIG_AMT" id="ORIG_AMT"
                            value=""
                            class="form-control ">
                            <div
                            class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                        </div>
                        <p class="text-danger" id="amountError"></p>
                    </div>
                    </div>

                    <div class="col-md-4">
                        <label class="col-lg-6 col-form-label fw-semibold fs-6  required">Expense Type</label>
                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                            <select class="form-control" class="form-select" data-control="select2"
                            data-hide-search="true" id="exp_TYPE" name="TYPE" data-placeholder="Please select">
                            <option value="">Please select</option>
                            @foreach($expenseTypes as $key => $expenseType)
                            <option value="{{$expenseType->EXPID}}" >{{$expenseType->NAME}}</option>
                            @endforeach
                        </select>
                        <divue
                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                    </div>
                    <p class="text-danger" id="exp_TYPEError"></p>
                </div>
                <div class="col-md-2 mt-15">
                    <button type="button" class="btn btn-primary btn-sm" id="addExpenseTypebtn">Add Type</button>
                </div>
                <div class="col-md-3">
                <label class="col-lg-6 col-form-label fw-semibold fs-6 required">Due Date</label>
                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                    <input type="date" name="TX_DUE" id="TX_DUE" value="" class="form-control ">
                    <div
                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                </div>
                <p class="text-danger" id="DueDateError"></p>
            </div>
        </div>


        </div>
        <div class="row">

        <div class="col-md-6">
            <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">PO #</label>
            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                <input type="text" class="form-control" id="PO_NUMBER" name="PO_NUMBER"
                value="">
                <div
                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
            </div>
        </div>
    </div>

    <div class="col-md-6 refno">
                    <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">Reference Number
                    </label>
                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                        <input type="text" name="TX_REFERENCE" id="TX_REFERENCE"  value="" class="form-control ">
                        <div
                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                    </div>
                    <p class="text-danger" id="TX_REFERENCError"></p>
                </div>
            </div>

</div>
<div class="row">
    <div class="col-md-6">
    <div class="row">
    <div class="col-md-1"> <label class="col-form-label fw-semibold fs-6 pt-0">Paid</label></div>
    <div class="col-md-11">
        <label class="switch">
            <input class="switch-input" type="checkbox" name="PAID" value="YES" id="paid_toggle">
            <span class="switch-label fw-bold" data-on="YES" data-off="NO"></span>
            <span class="switch-handle"></span>
        </label>
    </div>
    </div>
    </div>
    <div class="col-md-6" id="paidDateContainer" style="display: none;">
        <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0" id='paidDateLabel'>Paid Date</label>
        <div class="col-lg-12 fv-row fv-plugins-icon-container">
            <input type="date" class="form-control" id="PAID_DATE" name="PAID_DATE" value="">
            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
        </div>
    </div>
</div>
<div class="row">

<div class="col-md-6">

    <div class="col-lg-12 fv-row fv-plugins-icon-container">
        <input type="hidden" class="form-control" id="truck" name="truck"
        value="{{request()->route('loadId')}}" readonly>
        <div
        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
    </div>
</div>

</div>
<div class="row">

    <div class="col-md-12">

        <label class="col-lg-6 col-form-label fw-semibold fs-6">Documents</label>
        
        <div class="col-lg-12 fv-row fv-plugins-icon-container">
            <input type="file" name="exp_document" id="exp_document" class="form-control"
            accept=".png,.jpg,.jpeg,.csv,.xls,.xlsx" >
            <input class="form-control" type="hidden" id="old_exp_document"
            name="old_exp_document"
            value="">

            <div class="row" id="expdocumentLink">

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

</div>

<hr class="mt-5">
<div class="row">
    <div class="col-md-12">
        <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">Notes </label>
        <div class="col-lg-12 fv-row fv-plugins-icon-container">
            <textarea name="NOTES" id="NOTES" class="form-control"></textarea>
            <div
            class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
        </div>
    </div>
</div>
</div>

</div>
<div class="modal-footer">
    <button type="submit" id="expensebtn" class="btn btn-primary">submit</button>
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>



<div class="modal fade" id="vendorAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add Vendor</h5>

      </div>
      <form  method="post" id="addVendorForm" enctype="multipart/form-data">
        @csrf
        <div class="modal-body">
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-3 text-md-end">
                        <label class="fs-6 fw-semibold form-label mt-3">
                            <span class="required">NAME</span>
                        </label>
                    </div>
                    <div class="col-md-9">
                        <input type="hidden" value="truck" name="module" id="module">
                        <input type="hidden" value="" name="id" id="vendoraddid" >
                        <input type="hidden" value="" name="tab" id="vendoraddtab">
                        <input type="hidden" value="" name="type" id="vendoraddtype">
                        <input type="hidden" value="" name="issueId" id="vendoraddissueid">

                        <input type="text" name="NAME" id="NAME" value="" class="form-control form-control-solid mb-2">
                        <p class="text-danger" id="VendorNAMEError"></p>
                    </div>
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary closed" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" onclick=addvendors()>Submit</button>
        </div>
    </form>
</div>
</div>
</div>


<div class="modal fade" id="addExpenseTypeModal" tabindex="-1" aria-labelledby="addTruckModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="addDriverModalLabel">Add Expense Type</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="#" method="POST" id="addexpensetypeform">
                @csrf

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="max_weg" class="form-label ">Name</label>
                                <input type="text" class="form-control" id="EXPENSE_NAME" name="EXPENSE_NAME"
                                value="{{ old('NAME') }}">
                                @error('NAME')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>


                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                    aria-label="Close">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>


<div class="modal fade" id="addDocModal" tabindex="-1" aria-labelledby="addTruckModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="addDocModalLabel">Add Document</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="row">
                    <form method="post" id="addDocsForm" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <input type="hidden" name="ex_load_id" value="{{ request()->route('bidid') }}">
                            <input type="hidden" name="docsid" id="docsid" value="">