@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: 22px;
        height: 22px;
        border-radius: 100%;
        position: relative;
        margin: 4px;
        display: inline-block;
        vertical-align: middle;
    }

    .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 class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" style="padding: 7px 10px;" href="{{ route('assets.loads.rateconfirmation', $load->bidid) }}"
                             target="_blank" >
                                      Rate Confirmation
                                    </a>

                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"  id="printrate">
                                        <li><a href="{{ route('assets.loads.rateconfirmation', $load->bidid) }}"  target="_blank" class="dropdown-item">Print </a>  </li>
                                         <li>  <a type="button" class="dropdown-item"
                                                onclick="send_rate_conf('{{$load->bidid}}')" data-bs-toggle="modal"
                                                data-bs-target="#sendRateConfModal" id="sendRateConfEmail">Email
                                            </a></li>
                                    </ul>

                        <!-- <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', $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="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">


                                @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="Load Info"><i class="fa-solid fa-user"></i></span>
                                                </div>

                                                <div class="stepper-label">
                                                    <h3 class="stepper-title">Load 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-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_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="Dispatch"><i class="fa-solid fa-headset"></i></span>
                                    </div>
                                    <input type="hidden" name="load_id" value="{{ $load->bidid }}">

                                    <div class="stepper-label">
                                        <h3 class="stepper-title">Dispatch</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="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_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="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_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="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_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="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_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="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_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="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>

        @php
            $selectedDriverExists = $drivers->contains('DRIVER_ID', $load->did);
        @endphp
        @if($driverPhone)
        <div class="stepper-line h-20px"></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 fa-comments"></i>
                        </span>
                    </div>

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


        </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">Load 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 text-uppercase" id="cid">
                                    <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 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 class="col-sm-6">
                            <div class="mb-3">
                                <label class="col-form-label ew-label" for="RATE">Load Rate <span class="text-danger">*</span></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" required>
                            </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 & Driver Info</h2>
        </div>
        <hr>

        <div class="row">





    </div>

    <div class="row">



    <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-4">
             <div class="mt-12 ">
                   <button  type="button" onclick="addLoadExpense('truck',{{$load->bidid}})" class="btn btn-sm btn-primary mt-3">Truck Expense</button>
                   @if(!empty($load->truck))
                       <a href="{{ route('assets.trucks.edit', $load->truck) }}" class="btn btn-sm btn-primary mt-3" target="_blank">View Truck Info</a>
                   @endif
            </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-sm-4">
        <div class="mt-12 ">
              @if(!empty($load->did))
                  <a href="{{ route('assets.drivers.edit', $load->did) }}" class="btn btn-sm btn-primary mt-3" target="_blank">View Driver Info</a>
              @endif
       </div>
   </div>

    <!-- <div class="col-md-6">
        <label class="col-form-label ew-label">Trip Status</label>
        <div class="col-lg-12 fv-row fv-plugins-icon-container">
            <div class="d-flex align-items-center">
                <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="w-100 card card-body mt-10 p-10">
    <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_2">
<div class="card card-body w-100 p-10">
    <div class="row">
        <div class="col-md-6">
            <h2 class="fw-bold text-gray-900">Route</h2>
        </div>
        <div class="col-md-6">
        <h2>Total Miles : {{ (empty($load->total_miles) ? number_format($total_miles,2) : number_format($load->total_miles,2)) }} RPM: ${{ (empty($load->total_miles) ? number_format($load->load_rate/$total_miles,2) : number_format($load->load_rate/$load->total_miles,2)) }} </h2>
        </div>



    </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 class="col-sm-3">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="P_CITY">Pickup City </label>
            <input type="text" data-table="LOCATIONS" data-field="P_CITY" name="P_CITY" id="P_CITY" value="{{ old('P_CITY', optional($stops)->p_city) }}" class="form-control pac-target-input"  autocomplete="off">
        </div>
    </div>
     <div class="col-sm-3">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="P_STATE">Pickup State</label>
            <input type="text" data-table="LOCATIONS" data-field="P_STATE" name="P_STATE" id="P_STATE" value="{{ old('P_STATE', optional($stops)->p_state) }}" class="form-control pac-target-input"  autocomplete="off">
        </div>
    </div>

    <div class="col-sm-3">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="D_CITY">Delivery City </label>
            <input type="text" data-table="LOCATIONS" data-field="D_CITY" name="D_CITY" id="D_CITY" value="{{ old('D_CITY', optional($stops)->d_city) }}" class="form-control pac-target-input"  autocomplete="off">
        </div>
    </div>
     <div class="col-sm-3">
        <div class="mb-3">
            <label class="col-form-label ew-label" for="D_STATE">Delivery State</label>
            <input type="text" data-table="LOCATIONS" data-field="D_STATE" name="D_STATE" id="D_STATE" value="{{ old('D_STATE', optional($stops)->d_state) }}" class="form-control pac-target-input"  autocomplete="off">
        </div>
    </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">
    </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="datetime-local" data-table="LOCATIONS" data-field="P_DATE" name="P_DATE" id="P_DATE"
            value="{{ old('P_DATE', $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="datetime-local" data-table="LOCATIONS" data-field="D_DATE" name="D_DATE" id="D_DATE"  value="{{ old('D_DATE', $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" for="DELIVERY_NOTES">Total miles</label>
            <input type="text" data-table="total_miles" data-field="total_miles" name="total_miles" id="total_miles"  value="{{ old('total_miles', (empty($load->total_miles) ? $total_miles : $load->total_miles)) }}"  class="form-control pac-target-input">
        </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">
    <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="pb-0 tab-pane fade show "
id="kt_stats_widget_16_tab_3">
<div class="card card-body w-100 mt-10 p-10">
    <div class="">
        <h2 class="fw-bold text-gray-900">Dispatch</h2>
    </div>
    <hr>

    <div class="row">
        <h5>Driver Name: {{ $load->driver_name }} </h5>
        <h5>Driver Phone: {{ $load->driver_phone }}</h5>
        <h5>Truck #: {{ $load->unit_no }}</h5>
        <hr>
        <div class="col-md-6">
            <label class="col-form-label ew-label">Driver Status</label>
            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                <div class="d-flex align-items-center">