@extends('layouts.master')
@php
    $states = config('custom.states');
@endphp
@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div id="kt_content_container" class="container-xxl">
            <div class="d-flex 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">Load <span class="text-muted">Add</span>
                    </h3>
                    <h3 class="fw-bold me-5 my-1"></h3>
                </div>
            </div>
            <div class="card card-flush">
                <div class="card-body">
                    <div class=" pb-lg-11 pb-7">
                        <div class="container">
                            <form action="{{ route('assets.loads.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="P_CITY" value="" id="PCITY">
                                <input type="hidden" name="P_STATE" value="" id="PSTATE">

                                <input type="hidden" name="D_CITY" value="" id="DCITY">
                                <input type="hidden" name="D_STATE" value="" id="DSTATE">

                                <div class="modal-body">
                                    <div class="row">

                                        <div class="col-sm-6">
                                            <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" required>
                                                            <option value="">Please select</option>
                                                                @foreach ($customers as $key => $customer)
                                                                <option value="{{$customer->CLIENT_ID}}">{{$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="#addCustomerModal" id="addcust"><i class="fa-solid fa-plus" style="font-size:26px; padding-left:5px;"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">&nbsp;</div>

                                        <div class="col-sm-3">
                                            <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') }}" class="form-control pac-target-input"
                                                    placeholder="Enter a location" autocomplete="off" required>
                                            </div>
                                        </div>
                                          <div class="col-sm-3">
                                            <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') }}" class="form-control pac-target-input col-sm-6"
                                                    placeholder="Enter a location" autocomplete="off" required>
                                            </div>
                                        </div>


                                        <div class="col-sm-3">
                                            <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') }}" class="form-control pac-target-input" placeholder="Enter a location" autocomplete="off" required>
                                        </div>

                                         <div class="col-sm-3">
                                            <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') }}" class="form-control pac-target-input"
                                                    placeholder="Enter a location" autocomplete="off" required>
                                            </div>
                                        </div>

                                         <div class="col-sm-2">
                                            <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') }}" class="form-control pac-target-input"  autocomplete="off">
                                            </div>
                                        </div>
                                         <div class="col-sm-2">
                                            <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') }}" class="form-control pac-target-input"  autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="mb-3">
                                                <label class="col-form-label ew-label" for="P_POSTAL">Pickup zip</label>
                                                    <input type="text" data-table="P_POSTAL" data-field="P_POSTAL" name="P_POSTAL" id="PPOSTAL" value="{{ old('P_POSTAL') }}" class="form-control pac-target-input"  autocomplete="off">
                                            </div>
                                        </div>
                                         <div class="col-sm-2">
                                            <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') }}" class="form-control pac-target-input"  autocomplete="off" >
                                            </div>
                                        </div>
                                         <div class="col-sm-2">
                                            <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') }}" class="form-control pac-target-input"  autocomplete="off" >
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="mb-3">
                                                    <label class="col-form-label ew-label" for="D_POSTAL">Delivery zip</label>
                                                    <input type="text" data-table="LOCATIONS" data-field="D_POSTAL" name="D_POSTAL" id="DPOSTAL" value="{{ old('D_POSTAL') }}" class="form-control pac-target-input"  autocomplete="off" >
                                            </div>
                                        </div>



                                        <div class="row">
                                        @for ($i = 1; $i <= 5; $i++)
                                                <div class="col-md-6 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" data-table="LOCATIONS"
                                                        data-field="S{{ $i }}_ADDRESS" name="S{{ $i }}_ADDRESS"
                                                        id="S{{ $i }}_ADDRESS" value="{{ old('S' . $i . '_ADDRESS') }}"
                                                        class="form-control pac-target-input stop-address"
                                                        placeholder="Enter a location" autocomplete="off">
                                                    <input type="hidden" name="S{{ $i }}_CITY" value=""
                                                        id="S{{ $i }}_CITY">
                                                    <input type="hidden" name="S{{ $i }}_STATE" value=""
                                                        id="S{{ $i }}_STATE">
                                                    <input type="hidden" name="S{{ $i }}_POSTAL" value=""
                                                        id="S{{ $i }}_POSTAL">
                                                </div>

                                                <div class="col-md-3 mt-2 {{ empty(old('S' . $i . '_DATE')) ? 'd-none' : 'd-block' }}" id="stopDate{{ $i }}">
                                                    <label class="col-form-label ew-label" for="S{{ $i }}_DATE">STOP {{ $i }}
                                                        Date</label>
                                                    <input type="datetime-local" class="form-control" name="S{{ $i }}_DATE" id="S{{ $i }}_DATE">
                                                </div>

                                                <div class="col-md-3 mt-2 {{ empty(old('S' . $i . '_TYPE')) ? 'd-none' : 'd-block' }}" id="stopType{{ $i }}">
                                                    <label class="col-lg-6 col-form-label fw-semibold fs-6">STOP {{ $i }} Type</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="S{{ $i }}_TYPE" id="S{{ $i }}_TYPE_PICK" type="radio" value="PICK">
                                                                <span class="fw-semibold ps-2 fs-6">Pick</span>
                                                            </label>

                                                            <label class="form-check form-check-custom form-check-inline form-check-solid">
                                                                <input class="form-check-input" name="S{{ $i }}_TYPE" id="S{{ $i }}_TYPE_DROP" type="radio" value="DROP">
                                                                <span class="fw-semibold ps-2 fs-6">Drop</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                        @endfor
                                        </div>
                                        <div class="row">


                                          <div class="col-sm-6">
                                            <div class="mb-3">
                                            <label class="col-form-label ew-label" for="D_DATE">Pickup Notes</label>
                                                <textarea name="Pickup_Notes" class="form-control"  style="height: 40px;"></textarea>
                                            </div>
                                        </div>
                                         <div class="col-sm-6">
                                            <div class="mb-3">
                                            <label class="col-form-label ew-label" for="D_DATE"> Delivery Notes</label>
                                                <textarea name="Deliver_Notes" class="form-control"  style="height: 40px;"></textarea>
                                            </div>
                                        </div>

                                    </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 add 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="col-sm-3">
                                            <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') }}" class="form-control pac-target-input col-sm-6"
                                                    placeholder="Enter a location" autocomplete="off" required>
                                            </div>
                                        </div> -->
                                       <!--  <div class="col-sm-3">
                                            <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') }}" class="form-control pac-target-input"
                                                    placeholder="Enter a location" autocomplete="off" required>
                                            </div>
                                        </div> -->
                                        <div class="col-sm-3">
                                            <div class="mb-3">
                                            <label class="col-form-label ew-label" for="D_DATE">REF #<span
                                                        class="text-danger">*</span></label>
                                                <input type="text" data-table="LOCATIONS" data-field="referance_number" name="referance_number"
                                                    id="referance_number" value="{{ old('referance_number') }}" class="form-control pac-target-input"
                                                    placeholder=""required>
                                            </div>
                                        </div>

                                        <div class="col-sm-3">
                                            <div class="mb-3">
                                            <label class="col-form-label ew-label" for="D_DATE">Rate Confirmation</label>
                                                <input type="file" data-table="LOCATIONS" data-field="RATE_CONFIRMATION" name="RATE_CONFIRMATION"
                                                    id="RATE_CONFIRMATION" value="{{ old('RATE_CONFIRMATION') }}" class="form-control pac-target-input"
                                                    placeholder="">
                                            </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="RATE" data-field="RATE" name="RATE"
                                                    id="RATE" value="{{ old('RATE') }}" class="form-control pac-target-input"
                                                    placeholder="" required>
                                            </div>
                                        </div>


                                        <div class="col-sm-6">
                                            <div class="mb-3">
                                            <label class="col-form-label ew-label" for="D_DATE">Truck <span
                                                        class="text-danger">*</span></label>
                                                        <select name="truck_id" class="form-control" required>
                                                        <option value="">Please select</option>
                                                            @foreach ($trucks as $key => $truck)
                                                              <option value="{{$truck->TRUCK_ID}}">{{$truck->UNIT_ID}}</option>
                                                            @endforeach

                                                        </select>

                                            </div>
                                        </div>
                                        <div class="col-md-1 mt-13">
                                                <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addTruckModal" id="addtruck"><i class="fa-solid fa-plus" style="font-size:26px; padding-left:5px;"></i></button>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="mb-3">
                                            <label class="col-form-label ew-label" for="D_DATE">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}}">{{ strtoupper($driver->NAME) }}</option>
                                                            @endforeach
                                                        </select>
                                            </div>
                                        </div>
                                        <div class="col-md-1 mt-13">
                                                <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addDriverModal" id="adddriver"><i class="fa-solid fa-plus" style="font-size:26px; padding-left:5px;"></i></button>
                                        </div>

                                        <div class="col-md-2 driver_pay" style="display: none;">
                                            <div class="mb-3">
                                                <label class="col-form-label ew-label" for="ORIG_AMT">Driver Pay </label>
                                                <input type="text" name="ORIG_AMT"
                                                    id="ORIG_AMT" value="{{ old('ORIG_AMT') }}" class="form-control pac-target-input"
                                                    placeholder="">
                                                </div>
                                        </div>


                                    </div>
                                </div>
                                <div class="mt-10">
                                    <a href="{{ route('assets.loads.index') }}" class="btn btn-secondary me-2">Close</a>
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="addCustomerModal" 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="addCustomerModalLabel">Add Customer</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="#" method="POST" id="addcustomerform">
                @csrf

                <div class="modal-body">
                    <div class="row">
                    <div class="col-sm-6">
                                            <div class="mb-3">
                                                <label for="max_weg" class="col-lg-6 col-form-label fw-semibold fs-6"><span class="required">Name</span> </label>
                                                <input type="text" name="NAME" id="NAME" value="{{ old('NAME')}}" class="form-control" >

                                                @error('NAME')
                                                    <p class="text-danger">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                    <div class="col-md-6">
                                                                <label
                                                                    class="col-lg-6 col-form-label fw-semibold fs-6">Address</label>
                                                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                                    <input type="text" class="form-control"
                                                                        id="ADDRESS_1" name="ADDRESS_1"
                                                                        value="{{ old('ADDRESS_1') }}">
                                                                    @error('ADDRESS_1')
                                                                        <p class="text-danger">{{ $message }}</p>
                                                                    @enderror
                                                                    <div
                                                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                                                    </div>
                                                                </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                                <label
                                                                    class="col-lg-6 col-form-label fw-semibold fs-6">City</label>
                                                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                                    <input type="text" class="form-control"
                                                                        id="CITY" name="CITY"
                                                                        value="{{ old('CITY') }}">
                                                                    @error('CITY')
                                                                        <p class="text-danger">{{ $message }}</p>
                                                                    @enderror
                                                                    <div
                                                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                                                    </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                                <label
                                                                    class="col-lg-6 col-form-label fw-semibold fs-6">Address2</label>
                                                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                                    <input type="text" class="form-control"
                                                                        id="ADDRESS_2" name="ADDRESS_2"
                                                                        value="{{ old('ADDRESS_2') }}">
                                                                    @error('ADDRESS_2')
                                                                        <p class="text-danger">{{ $message }}</p>
                                                                    @enderror
                                                                    <div
                                                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                                                    </div>
                                                                </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                                <label
                                                                    class="col-lg-6 col-form-label fw-semibold fs-6">State</label>
                                                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                                    <select class="form-select" data-control="select2"
                                                                        data-hide-search="true"
                                                                        data-placeholder="Select a State" id="PROVINCE"
                                                                        name="PROVINCE">
                                                                        <option value="">Please select
                                                                        </option>
                                                                        @foreach ($states as $state)
                                                                            <option value="{{ $state }}">{{ $state }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                    @error('PROVINCE')
                                                                        <p class="text-danger">{{ $message }}</p>
                                                                    @enderror
                                                                    <div
                                                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                                                    </div>
                                                                </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                                <label
                                                                    class="col-lg-6 col-form-label fw-semibold fs-6">Zip</label>
                                                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                                    <input type="text" class="form-control "
                                                                        id="POSTAL_CODE" name="POSTAL_CODE"
                                                                        value="{{ old('POSTAL_CODE') }}">
                                                                    @error('POSTAL_CODE')
                                                                        <p class="text-danger">{{ $message }}</p>
                                                                    @enderror
                                                                    <div
                                                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                                                    </div>
                                                                </div>
                                                        </div>

                                                        <div class="col-md-6">
                                                                <label
                                                                    class="col-lg-6 col-form-label fw-semibold fs-6">MC#</label>
                                                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                                    <input type="text" class="form-control "
                                                                        id="MC" name="MC" value="{{ old('MC') }}">
                                                                </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="addTruckModal" 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="addTruckModalLabel">Add Truck</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('assets.trucks.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="from" value="driverEdit">
                    <input type="hidden" name="driverId" value="{{ $driver->DRIVER_ID }}">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="mb-3">
                                <input type="hidden" name="STATUS" value = "AVAILABLE" id="STATUS">
                                    <label for="max_weg" class="form-label required">Unit # </label>
                                    <input type="text" name="UNIT_ID" id="UNIT_ID" size="10"
                                        maxlength="10" value="{{ old('UNIT_ID') }}" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="mb-3">
                                    <label for="max_weg" class="form-label required">Make</label>
                                    <input type="text" name="MAKE" id="MAKE" size="25"
                                        maxlength="20" value="{{ old('MAKE') }}" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="mb-3">
                                    <label for="max_weg" class="form-label required">Model</label>
                                    <input type="text" name="MODEL" id="MODEL" size="30"
                                        maxlength="30" value="{{ old('MODEL') }}" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="mb-3">
                                    <label for="max_weg" class="form-label required">Year</label>
                                    <input type="number" name="YEAR" id="YEAR" size="5"
                                        class="form-control" value="{{ old('YEAR') }}" required>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="mb-3">
                                    <label for="max_weg" class="form-label required">Plate #</label>
                                    <input type="text" name="PLATE" id="PLATE" size="30"
                                        maxlength="20" value="{{ old('PLATE') }}" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="mb-3">
                                    <label for="max_weg" class="form-label required">Plate Expires</label>
                                    <input type="text" name="LIC_1_EXP_DATE" id="LIC_1_EXP_DATE" size="9"
                                        value="{{ old('LIC_1_EXP_DATE') }}" class="form-control datetimepicker"
                                        required>
                                </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="addDriverModal" 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 Driver</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('assets.drivers.store') }}" method="POST">
                @csrf
                <input type="hidden" name="from" value="truckEdit">
                <input type="hidden" name="truckId" value="">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="max_weg" class="form-label required">First Name</label>
                                <input type="text" class="form-control" id="FIRST_NAME" name="FIRST_NAME"
                                    value="{{ old('FIRST_NAME') }}" required>
                                @error('FIRST_NAME')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="max_weg" class="form-label required">Last Name</label>
                                <input type="text" class="form-control" id="LAST_NAME" name="LAST_NAME"
                                    value="{{ old('LAST_NAME') }}" required>
                                @error('LAST_NAME')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="EMAIL" class="form-label required">Email</label>
                                <input type="EMAIL" class="form-control" id="EMAIL" name="EMAIL"
                                    value="{{ old('EMAIL') }}" required>
                                @error('EMAIL')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="max_weg" class="form-label required">PHONE</label>
                                <input type="text" class="form-control PHONENO" id="PHONE" name="PHONE"
                                    value="{{ old('PHONE') }}" required>
                                @error('PHONE')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="max_weg" class="form-label ">License #</label>
                                <input type="number" class="form-control" id="LICENCE_NUMBER" name="LICENCE_NUMBER"
                                    value="{{ old('LICENCE_NUMBER') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="max_weg" class="form-label ">Hire Date</label>
                                <input type="date" class="form-control" id="START_DATE" name="START_DATE"
                                    value="{{ old('START_DATE') }}">
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="mb-3">
                                <input type="hidden" class="form-control" id="STATUS" name="STATUS" value="ACTIVE">
                            </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>

<style>
    .pac-container {
        z-index: 10000 !important;
    }
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    }

    /* Firefox */
    input[type=number] {
    -moz-appearance: textfield;
    }
</style>
@endsection()
@section('script')
<script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5BQa0hFcyKzBa_dA2cbKt3QvdiWhxOvY&libraries&callback=initAutocomplete&libraries=places&v=weekly"
        defer></script>
        <script>
            document.getElementById('ORIG_AMT').addEventListener('input', function (e) {
                this.value = this.value.replace(/[^0-9.]/g, ''); // Replace anything that is not a number
            });

            $('#driver_id').on('change', function(){
                console.log($(this).val());
                if($(this).val() == '' ||  $(this).val() == 'Please select'){
                    $('.driver_pay').hide();
                } else{
                    $('.driver_pay').show();
                }
            });
        </script>
    <script>
        function addStop() {
            for (let i = 1; i <= 5; i++) {
                let stopField = document.getElementById('stop' + i);
                let stopDateField = document.getElementById('stopDate' + i);
                let stopTypeField = document.getElementById('stopType' + i);
                if (stopField.classList.contains('d-none')) {
                    stopField.classList.remove('d-none');
                    if (stopDateField.classList.contains('d-none')) {
                        stopDateField.classList.remove('d-none');
                    }
                    if (stopTypeField.classList.contains('d-none')) {
                        stopTypeField.classList.remove('d-none');
                    }
                    return;
                }
                if (i == 4) {
                    $('.addstops').addClass('d-none');
                    alert('Max limit reached...');
                }
            }
        }

        function removeStop(id) {
            $('#stop' + id).addClass('d-none');
            $('#stopDate' + id).addClass('d-none');
            $('#stopType' + id).addClass('d-none');
            $('#S' + id + '_ADDRESS').val('');
            $('#S' + id + '_CITY').val('');
            $('#S' + id + '_STATE').val('');
            $('#S' + id + '_POSTAL').val('');
            $('#S' + id + '_DATE').val('');
            $('.addstops').removeClass('d-none');
        }

        $('.datetimepicker').daterangepicker({
            timePicker: false ,
            singleDatePicker: true,
            locale: {
                format: 'MM/DD/YYYY'
            }
        });

    let autocomplete;
    let pAddressField;
    let dAddressField;
    let ppostalField;
    let dpostalField;

    let newAutocomplete;
    let cAddressField;
    let cityField;
    let stateField;
    let postalField;

    $('#addCustomerModal').on('shown.bs.modal', function () {
        // Give some time for the modal to render and ensure the address field is present
        setTimeout(function() {
            // Select the address field within the modal
            var cAddressField = document.querySelector("#ADDRESS_1");

            // Check if the address field exists
            if (cAddressField) {
                // Initialize Google Maps Autocomplete
                var newAutocomplete = new google.maps.places.Autocomplete(cAddressField, {
                    // componentRestrictions: { country: ["us"] },
                    fields: ["address_components", "geometry"],
                    types: ["address"],
                });
                // alert(newAutocomplete);
                console.log('Initialize completed')
                // Add listener for place changes
                newAutocomplete.addListener("place_changed", function() {
                    fillInAddress(newAutocomplete, "#", cAddressField);
                });
            } else {
                console.error('Address field not found');
            }
        }, 1000); // Delay in milliseconds, adjust as needed
    });

function initAutocomplete() {
    pAddressField = document.querySelector("#P_ADDRESS");
    dAddressField = document.querySelector("#D_ADDRESS");
    // ppostalField = document.querySelector("#PPOSTAL");
    dpostalField = document.querySelector("#DPOSTAL");
    cAddressField = document.querySelector("#ADDRESS_1");
    cityField = document.querySelector("#PCITY");
    stateField = document.querySelector("#PROVINCE");
    postalField = document.querySelector("#PPOSTAL");

    dcityField = document.querySelector("#DCITY");
    dstateField = document.querySelector("#DSTATE");
    dpostalField = document.querySelector("#DPOSTAL");

    // Initialize autocomplete for the pickup address field
    let autocompletepAddressField = new google.maps.places.Autocomplete(pAddressField, {
        componentRestrictions: { country: ["us"] },
        fields: ["address_components", "geometry"],
        types: ["address"],
    });

    // Initialize autocomplete for the delivery address field
    let autocompletedAddressField = new google.maps.places.Autocomplete(dAddressField, {
        componentRestrictions: { country: ["us"] },
        fields: ["address_components", "geometry"],
        types: ["address"],
    });
     // Initialize autocomplete for the delivery address field
     let autocompletecAddressField = new google.maps.places.Autocomplete(cAddressField, {
        componentRestrictions: { country: ["us"] },
        fields: ["address_components", "geometry"],
        types: ["address"],
    });

    // Initialize autocomplete for the general address field
    newAutocomplete = new google.maps.places.Autocomplete(cAddressField, {
        componentRestrictions: { country: ["us"] },
        fields: ["address_components", "geometry"],
        types: ["address"],
    });

    // Add event listeners to handle address filling
    autocompletepAddressField.addListener("place_changed", function() {
        fillInAddress(autocompletepAddressField, "#P", ppostalField);
    });
    autocompletedAddressField.addListener("place_changed", function() {
        fillInAddress(autocompletedAddressField, "#D", dpostalField);
    });
    autocompletedAddressField.addListener("place_changed", function() {
        fillInAddress(autocompletedAddressField, "#C", cityField);
    });

    autocompletedAddressField.addListener("place_changed", function() {
        fillInAddress(autocompletedAddressField, "#D", dcityField);
    });

    autocompletedAddressField.addListener("place_changed", function() {
        fillInAddress(autocompletedAddressField, "#D", dstateField);
    });

    autocompletedAddressField.addListener("place_changed", function() {
        fillInAddress(autocompletedAddressField, "#D", dpostalField);
    });


    autocompletecAddressField.addListener("place_changed", function() {
        fillInAddress(autocompletedAddressField, "#", cAddressField);
    });
    newAutocomplete.addListener("place_changed", function() {
        fillInAddress(newAutocomplete, "#P", postalField);
    });

    // Handle autocomplete for dynamic stop fields
    let stopAutocompleteFields = document.querySelectorAll(".stop-address");
    stopAutocompleteFields.forEach(function(stopField) {
        let autocomplete = new google.maps.places.Autocomplete(stopField, {
            componentRestrictions: { country: ["us"] },
            fields: ["address_components", "geometry"],
            types: ["address"],
        });

        let stopCityField = stopField.nextElementSibling;
        let stopStateField = stopCityField.nextElementSibling;
        let stopPostalField = stopStateField.nextElementSibling;

        autocomplete.addListener("place_changed", function() {
            fillInStopAddress(autocomplete, stopCityField, stopStateField, stopPostalField);
        });
    });
}

function fillInAddress(autocompleteInstance, prefix, postalField) {
    const place = autocompleteInstance.getPlace();
    let address = "";
    let postcode = "";

    for (const component of place.address_components) {
        const componentType = component.types[0];

        switch (componentType) {
            case "street_number":
                address += `${component.long_name} `;
                break;
            case "route":
                address += component.short_name;
                break;
            case "postal_code":
                postcode = `${component.long_name}${postcode}`;
                if(document.querySelector(prefix + "POSTAL"))  {
                    document.querySelector(prefix + "POSTAL").value = postcode;
                }
                break;
            case "postal_code_suffix":
                postcode = `${postcode}-${component.long_name}`;
                //document.querySelector(prefix + "STATE").value = "asfasf";
                break;
            case "locality":
                // document.querySelector(prefix + "CITY").value = component.long_name;
                if (prefix === "#P") {
                    document.querySelector("#P_CITY").value = component.long_name; // Update Pickup City
                } else if (prefix === "#D") {
                    document.querySelector("#D_CITY").value = component.long_name; // Update Delivery City
                }
                break;
            case "administrative_area_level_1":
                // if(document.querySelector(prefix + "STATE"))  {
                //     document.querySelector(prefix + "STATE").value = component.short_name;
                // }
                if (prefix === "#P") {
                    document.querySelector("#P_STATE").value = component.short_name; // Update Pickup State
                } else if (prefix === "#D") {
                    document.querySelector("#D_STATE").value = component.short_name; // Update Delivery State
                }
                break;
                if(document.querySelector(prefix + "PROVINCE")){
                    document.querySelector(prefix + "PROVINCE").value = component.short_name;
                    var event = new Event('change', { bubbles: true });
                    document.querySelector(prefix + "PROVINCE").dispatchEvent(event);
                    break;
                }
            }
    }

    document.querySelector(prefix + "_ADDRESS").value = address.trim();
   // postalField.value = postcode;
}

// function fillInAddress(autocompleteInstance, cityField, stateField, postalField) {
//     const place = autocompleteInstance.getPlace();
//     let address = "";
//     let postcode = "";
//     let city = "";
//     let state = "";
//     let country = "";

//     for (const component of place.address_components) {
//         const componentType = component.types[0];

//         switch (componentType) {
//             case "street_number":
//                 address += `${component.long_name} `;
//                 break;
//             case "route":
//                 address += component.short_name;
//                 break;
//             case "postal_code":
//                 postcode = `${component.long_name}${postcode}`;
//                 break;
//             case "postal_code_suffix":
//                 postcode = `${postcode}-${component.long_name}`;
//                 break;
//             case "locality": // City
//                 city = component.long_name;
//                 // document.querySelector(prefix + "CITY").value = city;
//                 document.querySelector(prefix + "CITY").value = component.long_name;

//                 // city = component.long_name;
//                 // document.querySelector("P_CITY").value = city;
//                 break;
//             case "administrative_area_level_1": // State
//                 stateField.value = component.short_name;
//                 // state = component.short_name;
//                 // if (document.querySelector(prefix + "STATE")) {
//                 //     document.querySelector(prefix + "STATE").value = state;
//                 // }
//                 // if (document.querySelector(prefix + "PROVINCE")) {
//                 //     document.querySelector(prefix + "PROVINCE").value = state;
//                 //     var event = new Event('change', { bubbles: true });
//                 //     document.querySelector(prefix + "PROVINCE").dispatchEvent(event);
//                 // }
//                 break;
//             case "country": // Country
//                 country = component.long_name;
//                 if (country === "United States") {
//                     country = "USA";
//                 }
//                 break;
//         }
//     }

//     // Combine the address, city, state, and country into a full address string
//     const fullAddress = `${address.trim()}, ${city}, ${state}, ${country}`;

//     // Set the full address and postal code
//     document.querySelector(prefix + "ADDRESS").value = fullAddress;
//     postalField.value = postcode;
// }

function fillInStopAddress(autocompleteInstance, cityField, stateField, postalField) {
    const place = autocompleteInstance.getPlace();
    let address = "";
    let postcode = "";

    for (const component of place.address_components) {
        const componentType = component.types[0];

        switch (componentType) {
            case "street_number":
                address += `${component.long_name} `;
                break;
            case "route":
                address += component.short_name;
                break;
            case "postal_code":
                postcode = `${component.long_name}${postcode}`;
                break;
            case "postal_code_suffix":
                postcode = `${postcode}-${component.long_name}`;
                break;
            case "locality":
                cityField.value = component.long_name;
                break;
            case "administrative_area_level_1":
                stateField.value = component.short_name;
                break;
        }
    }

    postalField.value = postcode;
}

window.initAutocomplete = initAutocomplete;



        $(document).ready(function () {
            $('#addcustomerform').on('submit', function (e) {
                e.preventDefault();
                $('#addCustomerModal').modal('hide');
                $.ajax({
                    url: '{{ route('assets.loads.addCustomer') }}',
                    method: 'POST',
                    data: $(this).serialize(),
                    success: function (response) {

                        if (response.success) {

                            toastr.success(response.message);


                            $('#addcustomerform')[0].reset();
                            $('#cid').append(`<option value="${response.last_id}">${response.NAME}</option>`);
                        }
                    },
                    error: function (response) {
                        let errors = response.responseJSON.errors;


                        $('.text-danger').text('');

                        // Loop through errors and display them
                        $.each(errors, function (key, value) {
                            $('#' + key).siblings('.text-danger').text(value[0]);
                        });

                        // Display error toast notification
                        toastr.error('Please check the form for errors and try again.');
                    }
                });
            });
});
    </script>
@endsection