@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.store3') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="P_CITY" value="{{ old('P_CITY') }}" id="PCITY">
                                <input type="hidden" name="P_STATE" value="{{ old('P_STATE') }}" id="PSTATE">
                                <input type="hidden" name="P_POSTAL" value="{{ old('P_POSTAL') }}" id="PPOSTAL">
                                <input type="hidden" name="P_LAT" value="{{ old('P_LAT') }}" id="PLAT">
                                <input type="hidden" name="P_LNG" value="{{ old('P_LNG') }}" id="PLNG">
                                <input type="hidden" name="D_CITY" value="{{ old('D_CITY') }}" id="DCITY">
                                <input type="hidden" name="D_STATE" value="{{ old('D_STATE') }}" id="DSTATE">
                                <input type="hidden" name="D_POSTAL" value="{{ old('D_POSTAL') }}" id="DPOSTAL">
                                <input type="hidden" name="D_LAT" value="{{ old('D_LAT') }}" id="DLAT">
                                <input type="hidden" name="D_LNG" value="{{ old('D_LNG') }}" id="DLNG">
                                <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->CLIENT_ID == 348 ? '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="col-sm-6">&nbsp;</div>

                                        <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') }}" class="form-control pac-target-input"
                                                    placeholder="Enter a location" 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') }}" class="form-control pac-target-input" placeholder="Enter a location" autocomplete="off" required>
                                        </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">
                                                    <input type="hidden" name="S{{ $i }}_LAT" value=""
                                                        id="S{{ $i }}_LAT">
                                                    <input type="hidden" name="S{{ $i }}_LNG" value=""
                                                        id="S{{ $i }}_LNG">
                                                </div>
                                        @endfor
                                        </div>
                                        <div class="row mt-2 addstops">
                                            <div class="col-md-12">
                                                <div class="col-md-12 d-flex align-items-center">
                                                    <label for="" class="d-inline-block mr-2"> Do you want 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="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="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="date" data-table="LOCATIONS" data-field="P_DATE" name="P_DATE"
                                                    id="P_DATE" value="{{ old('P_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">Delivery Date <span
                                                        class="text-danger">*</span></label>
                                                <input type="date" data-table="LOCATIONS" data-field="D_DATE" name="D_DATE"
                                                    id="D_DATE" value="{{ old('D_DATE') }}" 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 #</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="" oninput="this.value = this.value.toUpperCase();">
                                            </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">Trip Total</label>
                                                <input type="text" data-table="RATE" data-field="RATE" name="RATE"
                                                    id="RATE" value="{{ old('RATE') }}" 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="D_DATE">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->UNIT_ID}}</option>
                                                                @endforeach
                                                        </select>
                                            </div>
                                        </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-6 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="row">
                                 <div class="col-sm-2">
                                    <div class="mb-3">
                                        <label class="col-form-label ew-label">Home Trip</label>
                                          <input type="checkbox" name="home_trip" id="home_trip" value="1" class="mt-5" {{ old('home_trip') ? 'checked' : '' }}>
                                    </div>
                                </div>
                                 <div class="col-sm-2">
                                    <div class="mb-3">
                                        <label class="col-form-label ew-label">Is LTl</label>
                                          <input type="checkbox" name="IS_LTL" id="IS_LTL" value="1" class="mt-5" {{ old('IS_LTL') ? 'checked' : '' }}>
                                    </div>
                                </div>
                                </div>
                                <hr>
                              <h4 class="mb-3">Cargo Details  <button type="button" id="addCargo" class="btn btn-success btn-sm"><i class="fa-solid fa-plus"></i></button></h4>

                                    <div id="cargo-wrapper">
                                        @php
                                            $packgeType = packgeType()
                                        @endphp

                                       <div class="card cargo-card mb-3 cargo-item">
                                            <div class="card-body">
                                                <div class="row g-3">

                                                    <!-- Package Type -->
                                                    <div class="col-md-4">
                                                        <label class="form-label">Package Type</label>
                                                        <select name="cargo[0][package_type]" class="form-control">
                                                            <option value="0">Pallets(40x48)</option>
                                                            @foreach ($packgeType as $key => $type)
                                                                <option value="{{ $key }}" title="{{ $type }}">{{ $type }}</option> 
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <!-- Pallets -->
                                                    <div class="col-md-4">
                                                        <label class="form-label">Pallets</label>
                                                        <input type="number" name="cargo[0][pallets]" class="form-control">
                                                    </div>

                                                    <!-- Pieces -->
                                                    <div class="col-md-4">
                                                        <label class="form-label">Pieces</label>
                                                        <input type="number" name="cargo[0][pieces]" class="form-control">
                                                    </div>

                                                    <!-- Cube -->
                                                    <div class="col-md-4">
                                                        <label class="form-label">Cube</label>
                                                        <input type="number" name="cargo[0][cube]" class="form-control">
                                                    </div>

                                                    <!-- Weight -->
                                                    <div class="col-md-4">
                                                        <label class="form-label">Weight</label>
                                                        <input type="number" name="cargo[0][weight]" class="form-control">
                                                    </div>

                                                    <!-- Weight Units -->
                                                    <div class="col-md-4">
                                                        <label class="form-label">Weight Units</label>
                                                        <select name="cargo[0][weight_unit]" class="form-control">
                                                            <option value="0" title="kg">kg</option>
                                                            <option value="1" title="lbs">lbs</option>
                                                        </select>
                                                    </div>

                                                    <!-- Length -->
                                                    <div class="col-md-4">
                                                        <label class="form-label">Length</label>
                                                        <input type="number" name="cargo[0][length]" class="form-control">
                                                    </div>

                                                    <!-- Width -->
                                                    <div class="col-md-4">
                                                        <label class="form-label">Width</label>
                                                        <input type="number" name="cargo[0][width]" class="form-control">
                                                    </div>

                                                    <!-- Height -->
                                                    <div class="col-md-4">
                                                        <label class="form-label">Height</label>
                                                        <input type="number" name="cargo[0][height]" class="form-control">
                                                    </div>

                                                    <!-- Commodity -->
                                                    <div class="col-md-4">
                                                        <label class="form-label">Commodity</label>
                                                        <input type="text" name="cargo[0][commodity]" class="form-control">
                                                    </div>

                                                </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="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 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>
<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);
                if (stopField.classList.contains('d-none')) {
                    stopField.classList.remove('d-none');
                    return;
                }
                if(i == 4){
                    $('.addstops').addClass('d-none');
                    alert('Max limit reached...');
                }
            }
        }
        function removeStop(id) {
            $('#stop' + id).addClass('d-none');
            $('#S' + id + '_ADDRESS').val('');
            $('#S' + id + '_CITY').val('');
            $('#S' + id + '_STATE').val('');
            $('#S' + id + '_POSTAL').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;

    $('#addDriverModal').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"],
                    types: ["(cities)"],
                });
                // 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"],
        types: ["(cities)"],
    });

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

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

    // 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"],
            types: ["(cities)"],
        });

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

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

// 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];

//         console.log(componentType);
//         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;
//                 break;
//             case "administrative_area_level_1":
//                 if(document.querySelector(prefix + "STATE"))  {
//                     document.querySelector(prefix + "STATE").value = component.short_name;
//                 }
//                 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, prefix) {
    const place = autocompleteInstance.getPlace();

    let city = "";
    let state = "";
    let country = "";
    let postal_code = "";

    if (place.geometry && place.geometry.location) {
        const lat = place.geometry.location.lat();
        const lng = place.geometry.location.lng();

        document.querySelector(prefix + "LAT").value = lat;
        document.querySelector(prefix + "LNG").value = lng;
    }

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


        switch (componentType) {
            case "locality":
                city = component.long_name;
                document.querySelector(prefix + "CITY").value = city;
                break;
            case "administrative_area_level_1":
                state = component.short_name;
                document.querySelector(prefix + "STATE").value = state;
                break;
            case "country":
                country = component.short_name;
                break;
            case "postal_code":
                postal_code = component.long_name;
                document.querySelector(prefix + "POSTAL").value = postal_code;
                break;
        }
    }
}

// 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;
// }

function fillInStopAddress(autocompleteInstance, cityField, stateField, postalField, stopLatField, stopLngField) {
    const place = autocompleteInstance.getPlace();
    let city = "";
    let state = "";
    let country = "";
    let postal_code = "";

    if (place.geometry && place.geometry.location) {
        const lat = place.geometry.location.lat();
        const lng = place.geometry.location.lng();

        stopLatField.value = lat;
        stopLngField.value = lng;
    }

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

        switch (componentType) {
            case "locality":
                city = component.long_name;
                cityField.value = city;
                break;
            case "administrative_area_level_1":
                state = component.short_name;
                stateField.value = state;
                break;
            case "country":
                country = component.short_name;
                break;
            case "postal_code":
                postal_code = component.long_name;
                postalField.value = postal_code;
                break;
        }
    }
}

window.initAutocomplete = initAutocomplete;



        $(document).ready(function () {
            $('#addcustomerform').on('submit', function (e) {
                e.preventDefault();
                $('#addDriverModal').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.');
                    }
                });
            });
});


let cargoIndex = 1;
var packageTypes = @json(packgeType());
document.getElementById('addCargo').addEventListener('click', function () {
 let packageOptions = '';
    for (let key in packageTypes) {
        let selected = (key == 0) ? 'selected' : '';
        packageOptions += `<option value="${key}" ${selected}>
                                ${packageTypes[key]}
                           </option>`;
    }
    
    let html = `
    <div class="card cargo-card mb-3 cargo-item">
        <div class="card-body">

            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Package Type</label>
                    <select name="cargo[${cargoIndex}][package_type]" class="form-control">
                        ${packageOptions}
                    </select>
                </div>

                  <div class="col-md-4">
                    <label class="form-label">Pallets</label>
                    <input type="number" name="cargo[${cargoIndex}][pallets]" class="form-control">
                </div>

                <div class="col-md-4">
                    <label class="form-label">Pieces</label>
                    <input type="number" name="cargo[${cargoIndex}][pieces]" class="form-control">
                </div>

                <div class="col-md-4">
                    <label class="form-label">Cube</label>
                    <input type="number" name="cargo[${cargoIndex}][cube]" class="form-control">
                </div>

                <div class="col-md-4">
                    <label class="form-label">Weight</label>
                    <input type="number" name="cargo[${cargoIndex}][weight]" class="form-control">
                </div>

                <div class="col-md-4">
                    <label class="form-label">Weight Units</label>
                    <select name="cargo[${cargoIndex}][weight_unit]" class="form-control">
                        <option value="0" title="kg">kg</option>
                        <option value="1" title="lbs">lbs</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Length</label>
                    <input type="number" name="cargo[${cargoIndex}][length]" class="form-control">
                </div>

                <div class="col-md-4">
                    <label class="form-label">Width</label>
                    <input type="number" name="cargo[${cargoIndex}][width]" class="form-control">
                </div>

                <div class="col-md-4">
                    <label class="form-label">Height</label>
                    <input type="number" name="cargo[${cargoIndex}][height]" class="form-control">
                </div>

                <div class="col-md-4">
                    <label class="form-label">Commodity</label>
                    <input type="text" name="cargo[${cargoIndex}][commodity]" class="form-control">
                </div>

                <!-- REMOVE BUTTON BOTTOM LEFT -->
                <div class="col-12 mt-2">
                    <button type="button"
                        class="btn btn-danger btn-sm removeCargo">
                        ✖ REMOVE
                    </button>
                </div>

            </div>
        </div>
    </div>`;

    document.getElementById('cargo-wrapper').insertAdjacentHTML('beforeend', html);
    cargoIndex++;
});

document.addEventListener('click', function (e) {
    if (e.target.classList.contains('removeCargo')) {
        e.target.closest('.cargo-item').remove();
    }
});



    </script>
@endsection