@extends('layouts.master_new1')
@php
    $states = config('custom.states');
    $activeTab1 = '';
    $activeTab2 = '';
    $currentTab1 = '';
    $currentTab2 = '';

    if ($errors->has('mc_id') ||
$errors->has('referance_number') ||
$errors->has('RATE')) {
        $currentTab1 = 'current';
        $activeTab1 = 'active';
        $currentTab2 = 'current';
        $activeTab2 = 'active';
    } else {
        $currentTab1 = 'current';
        $activeTab1 = 'active';
    }
@endphp

@section('style')
<style>
    .form-switch.form-check-solid .form-check-input:not(:checked) {
        background-color: #818181 !important;
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .switch-label,
    .switch-handle {
        transition: All 0.3s ease;
        -webkit-transition: All 0.3s ease;
        -moz-transition: All 0.3s ease;
        -o-transition: All 0.3s ease;
    }

    i.bi,
    i[class*=" fa-"],
    i[class*=" fonticon-"],
    i[class*=" la-"],
    i[class^=fa-],
    i[class^=fonticon-],
    i[class^=la-] {
        color: inherit;
    }

    .table:not(.table-bordered) td,
    .table:not(.table-bordered) th,
    .table:not(.table-bordered) tr {
        font-size: 12px !important;
        font-weight: normal;
    }

    .card-header {
        border-radius: 10px 16px 0px 1px !important;
        /* border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0 !important; */
        padding: .5rem 1rem !important;
        margin-bottom: 0 !important;
        background-color: #388DC6 !important;
        border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
        min-height: 50px !important;

    }

    .card-header h2 {
        color: #fff !important;
        font-size: 1.2rem !important;
        font-weight: 500 !important;

    }

    button.active {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
        border: 2px dashed white !important;
    }
</style>
@endsection
@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 card-custom">
									<div class="card-body p-0">
										<!--begin: Wizard-->
										<div class="wizard wizard-2" id="kt_wizard" data-wizard-state="step-first" data-wizard-clickable="false">
											<!--begin: Wizard Nav-->
											<div class="wizard-nav border-right py-8 px-8 py-lg-20 px-lg-10">
												<!--begin::Wizard Step 1 Nav-->
												<div class="wizard-steps">
													<div class="wizard-step" data-wizard-type="step" data-wizard-state="current">
														<div class="wizard-wrapper">
															<div class="wizard-icon">
																<span class="svg-icon svg-icon-2x">
																	<!--begin::Svg Icon | path:assets/media/svg/icons/General/User.svg-->
																	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
																		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
																			<polygon points="0 0 24 0 24 24 0 24" />
																			<path d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
																			<path d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z" fill="#000000" fill-rule="nonzero" />
																		</g>
																	</svg>
																	<!--end::Svg Icon-->
																</span>
															</div>
															<div class="wizard-label">
																<h3 class="wizard-title">Customer</h3>
																<div class="wizard-desc">Setup Your Customer Details</div>
															</div>
														</div>
													</div>
													<!--end::Wizard Step 1 Nav-->
													<!--begin::Wizard Step 2 Nav-->
													<div class="wizard-step" data-wizard-type="step">
														<div class="wizard-wrapper">
															<div class="wizard-icon">
																<span class="svg-icon svg-icon-2x">
																	<!--begin::Svg Icon | path:assets/media/svg/icons/Map/Compass.svg-->
																	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
																		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
																			<rect x="0" y="0" width="24" height="24" />
																			<path d="M12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 Z M14.1654881,7.35483745 L9.61055177,10.3622525 C9.47921741,10.4489666 9.39637436,10.592455 9.38694497,10.7495509 L9.05991526,16.197949 C9.04337012,16.4735952 9.25341309,16.7104632 9.52905936,16.7270083 C9.63705011,16.7334903 9.74423017,16.7047714 9.83451193,16.6451626 L14.3894482,13.6377475 C14.5207826,13.5510334 14.6036256,13.407545 14.613055,13.2504491 L14.9400847,7.80205104 C14.9566299,7.52640477 14.7465869,7.28953682 14.4709406,7.27299168 C14.3629499,7.26650974 14.2557698,7.29522855 14.1654881,7.35483745 Z" fill="#000000" />
																		</g>
																	</svg>
																	<!--end::Svg Icon-->
																</span>
															</div>
															<div class="wizard-label">
																<h3 class="wizard-title">PicKup</h3>
																<div class="wizard-desc">Choose Your PicKup Location</div>
															</div>
														</div>
													</div>
													<!--end::Wizard Step 2 Nav-->
													<!--begin::Wizard Step 3 Nav-->
													<div class="wizard-step" data-wizard-type="step">
														<div class="wizard-wrapper">
															<div class="wizard-icon">
																<span class="svg-icon svg-icon-2x">
																	<!--begin::Svg Icon | path:assets/media/svg/icons/General/Thunder-move.svg-->
																	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
																		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
																			<rect x="0" y="0" width="24" height="24" />
																			<path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" fill="#000000" />
																			<path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" fill="#000000" opacity="0.3" />
																		</g>
																	</svg>
																	<!--end::Svg Icon-->
																</span>
															</div>
															<div class="wizard-label">
																<h3 class="wizard-title">Delivery/Stops</h3>
																<div class="wizard-desc">Choose Your Delivery/Stops Location</div>
															</div>
														</div>
													</div>
													<!--end::Wizard Step 3 Nav-->
													<!--begin::Wizard Step 4 Nav-->
													<div class="wizard-step" data-wizard-type="step">
														<div class="wizard-wrapper">
															<div class="wizard-icon">
																<span class="svg-icon svg-icon-2x">
																	<!--begin::Svg Icon | path:assets/media/svg/icons/Map/Position.svg-->
																	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
																		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
																			<rect x="0" y="0" width="24" height="24" />
																			<path d="M19,11 L21,11 C21.5522847,11 22,11.4477153 22,12 C22,12.5522847 21.5522847,13 21,13 L19,13 C18.4477153,13 18,12.5522847 18,12 C18,11.4477153 18.4477153,11 19,11 Z M3,11 L5,11 C5.55228475,11 6,11.4477153 6,12 C6,12.5522847 5.55228475,13 5,13 L3,13 C2.44771525,13 2,12.5522847 2,12 C2,11.4477153 2.44771525,11 3,11 Z M12,2 C12.5522847,2 13,2.44771525 13,3 L13,5 C13,5.55228475 12.5522847,6 12,6 C11.4477153,6 11,5.55228475 11,5 L11,3 C11,2.44771525 11.4477153,2 12,2 Z M12,18 C12.5522847,18 13,18.4477153 13,19 L13,21 C13,21.5522847 12.5522847,22 12,22 C11.4477153,22 11,21.5522847 11,21 L11,19 C11,18.4477153 11.4477153,18 12,18 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
																			<circle fill="#000000" opacity="0.3" cx="12" cy="12" r="2" />
																			<path d="M12,17 C14.7614237,17 17,14.7614237 17,12 C17,9.23857625 14.7614237,7 12,7 C9.23857625,7 7,9.23857625 7,12 C7,14.7614237 9.23857625,17 12,17 Z M12,19 C8.13400675,19 5,15.8659932 5,12 C5,8.13400675 8.13400675,5 12,5 C15.8659932,5 19,8.13400675 19,12 C19,15.8659932 15.8659932,19 12,19 Z" fill="#000000" fill-rule="nonzero" />
																		</g>
																	</svg>
																	<!--end::Svg Icon-->
																</span>
															</div>
															<div class="wizard-label">
																<h3 class="wizard-title">Dispatch</h3>
																<div class="wizard-desc">Choose Your Disptch</div>
															</div>
														</div>
													</div>
													
												</div>
											</div>
											<!--end: Wizard Nav-->
											<!--begin: Wizard Body-->
											<div class="wizard-body py-8 px-8 py-lg-20 px-lg-10">
												<!--begin: Wizard Form-->
												<div class="row">
													<div class="offset-xxl-2 col-xxl-8">												
                                                        <form class="form" id="kt_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">
															<!--begin: Wizard Step 1-->
															<div class="pb-5" data-wizard-type="step-content" data-wizard-state="current">
																<h4 class="mb-10 font-weight-bold text-dark">Enter your Customer Details</h4>
                                                                <div class="row">
                                                                    <!--begin::Input-->
                                                                    <div class="col-md-7">
                                                                        <div class="form-group">																
                                                                            <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 form-control-solid form-control-lg" id="cid" required>
                                                                                <option value="">Please select</option>
                                                                                @foreach ($customers as $key => $customer)
                                                                                <option value="{{$customer->CLIENT_ID}}">{{$customer->NAME}}</option>
                                                                                @endforeach
                                                                            </select>
                                                                            <!-- <input type="text" class="form-control form-control-solid form-control-lg" name="fname" placeholder="First Name" value="" /> -->
                                                                            <span class="form-text text-muted">Please select your customer.</span>
                                                                        </div>
                                                                        <!--end::Input-->
                                                                        <!--begin::Input-->
                                                                    </div> 
                                                                    <div class="col-md-2">
                                                                        <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>  
                                                                                                                           
                                                                      	<!--end::Input-->
																<div class="row">
																	<div class="col-xl-6">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>REF #</label>
                                                                            <input type="text"name="referance_number" id="referance_number" value="" class="form-control form-control-solid form-control-lg" placeholder="REF #" required>																
																			<span class="form-text text-muted">Please enter your ref#.</span>
																		</div>
																		<!--end::Input-->
																	</div>
																	<div class="col-xl-6">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>Rate Confirmation</label>
                                                                            <input type="file" name="RATE_CONFIRMATION" id="RATE_CONFIRMATION" value="" class="form-control form-control-solid form-control-lg" placeholder="REF #" required>																
																			<span class="form-text text-muted">Please enter your rate confirmation.</span>
																		</div>
																		<!--end::Input-->
																	</div>
																</div>
															
																<!--end::Input-->
																<div class="row">
																	<div class="col-xl-6">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>Load Rate</label>
																			<input type="text" class="form-control form-control-solid form-control-lg" name="RATE" id="RATE" placeholder="Load Rate" value="" />
																			<span class="form-text text-muted">Please enter your load rate.</span>
																		</div>
																		<!--end::Input-->
																	</div>
																	
																</div>
															</div>
															<!--end: Wizard Step 1-->
															<!--begin: Wizard Step 2-->
															<div class="pb-5" data-wizard-type="step-content">
																<h4 class="mb-10 font-weight-bold text-dark">Setup Your Pickup Location</h4>
																<div class="row">
																	<div class="col-xl-6">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>Pickup Address</label>
																			<input type="text" name="P_ADDRESS" id="P_ADDRESS" value="" class="form-control pac-target-input form-control form-control-solid form-control-lg" placeholder="Enter a location" autocomplete="off" required="">
																			<span class="form-text text-muted">Please enter your pickup address.</span>
																		</div>
																		<!--end::Input-->
																	</div>
																	<div class="col-xl-6">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>Pickup Date</label>
																			<input type="datetime-local" name="P_DATE" id="P_DATE" value="" class="form-control pac-target-input form-control form-control-solid form-control-lg showPicker" placeholder="Enter a picup date" autocomplete="off" required="">
																			<span class="form-text text-muted">Please enter your pickup date.</span>
																		</div>
																		<!--end::Input-->
																	</div>
																</div>
																<div class="row">
																	<div class="col-xl-4">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>City</label>
																			<input type="text" class="form-control form-control-solid form-control-lg"name="P_CITY" id="P_CITY"  placeholder="City" value="" />
																			<span class="form-text text-muted">Please enter your City.</span>
																		</div>
																		<!--end::Input-->
																	</div>
																	<div class="col-xl-4">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>State</label>
																			<input type="text" class="form-control form-control-solid form-control-lg" name="P_STATE" id="P_STATE" placeholder="State" value="" />
																			<span class="form-text text-muted">Please enter your State.</span>
																		</div>
																		<!--end::Input-->
																	</div>

                                                                    <div class="col-xl-4">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>Postcode</label>
																			<input type="text" class="form-control form-control-solid form-control-lg" name="P_POSTAL" id="P_POSTAL" placeholder="Postal" value="" />
																			<span class="form-text text-muted">Please enter your Postal.</span>
																		</div>
																		<!--end::Input-->
																	</div>
																</div>
																<div class="row">
																	<div class="col-xl-12">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>Pickup Notes</label>
                                                                            <textarea name="Pickup_Notes" class="form-control form-control-solid form-control-lg" style="height: 60px;"></textarea>																			
																			<span class="form-text text-muted">Please enter your Pickup Notes.</span>
																		</div>
																		<!--end::Input-->
																	</div>
																	
																</div>
															</div>
															<!--end: Wizard Step 2-->
															<!--begin: Wizard Step 3-->
															<div class="pb-5" data-wizard-type="step-content">
																<h4 class="mb-10 font-weight-bold text-dark">Select your Delivery / Stops Address</h4>
                                                                <div class="row">
																	<div class="col-xl-6">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>Delivery Address</label>
																			<input type="text"  name="D_ADDRESS" id="D_ADDRESS" value="" class="form-control pac-target-input form-control form-control-solid form-control-lg" placeholder="Enter a location" autocomplete="off" required="">
																			<span class="form-text text-muted">Please enter your delivery address.</span>
																		</div>
																		<!--end::Input-->
																	</div>
																	<div class="col-xl-6">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>Delivery Date</label>
																			<input type="datetime-local" name="D_DATE" id="D_DATE" value="" class="form-control pac-target-input form-control form-control-solid form-control-lg showPicker" placeholder="Enter a picup date" autocomplete="off" required="">
																			<span class="form-text text-muted">Please enter your delivery date.</span>
																		</div>
																		<!--end::Input-->
																	</div>
																</div>
																<div class="row">
																	<div class="col-xl-4">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>City</label>
																			<input type="text" class="form-control form-control-solid form-control-lg"name="D_CITY" id="D_CITY"  placeholder="City" value="" />
																			<span class="form-text text-muted">Please enter your City.</span>
																		</div>
																		<!--end::Input-->
																	</div>
																	<div class="col-xl-4">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>State</label>
																			<input type="text" class="form-control form-control-solid form-control-lg" name="D_STATE" id="D_STATE" placeholder="State" value="" />
																			<span class="form-text text-muted">Please enter your State.</span>
																		</div>
																		<!--end::Input-->
																	</div>

                                                                    <div class="col-xl-4">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>Postcode</label>
																			<input type="text" class="form-control form-control-solid form-control-lg" name="D_POSTAL" id="D_POSTAL" placeholder="Postal" value="" />
																			<span class="form-text text-muted">Please enter your Postal.</span>
																		</div>
																		<!--end::Input-->
																	</div>
																</div>

                                                                <div class="row">
																	<div class="col-xl-12">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>Delivery Notes</label>
                                                                            <textarea name="Deliver_Notes" class="form-control form-control-solid form-control-lg" style="height: 60px;"></textarea>																			
																			<span class="form-text text-muted">Please enter your Delivery Notes.</span>
																		</div>
																		<!--end::Input-->
																	</div>																
                                                                </div>

                                                                <div class="row">
                                                                    @for ($i = 1; $i <= 5; $i++)
                                                                    <div class="col-md-4 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 showPicker" name="S{{ $i }}_DATE" id="S{{ $i }}_DATE">
                                                                        </div>

                                                                        <div class="col-md-5 mt-2 {{ empty(old('S' . $i . '_TYPE')) ? 'd-none' : 'd-block' }}" id="stopType{{ $i }}">
                                                                            <label class="col-lg-8 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 addstops mt-10">
																	<div class="col-xl-12">
																		<!--begin::Input-->
                                                                        <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>
																		<!--end::Input-->
																	</div>																
                                                                </div>
													
															</div>
															<!--end: Wizard Step 3-->
															<!--begin: Wizard Step 4-->
															<div class="pb-5" data-wizard-type="step-content">
																<h4 class="mb-10 font-weight-bold text-dark">Setup Your Dispatch</h4>
																<div class="row">
																	<div class="col-xl-4">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>Truck</label>																	

                                                                            <select name="truck_id" class="form-control form-control-solid form-control-lg"  required="">                                                                          
                                                                                 <option value="">Please select</option>
                                                                                @foreach ($trucks as $key => $truck)
                                                                                <option value="{{$truck->TRUCK_ID}}">{{$truck->UNIT_ID}}</option>
                                                                                @endforeach                                      
                                                                          </select>
																			<span class="form-text text-muted">Please enter your Truck.</span>
																		</div>
																		<!--end::Input-->
																	</div>
                                                                    <div class="col-xl-2 mt-8">
                                                                        <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-xl-4">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>Driver</label>
                                                                            <select name="driver_id" id="driver_id" class="form-control form-control-solid form-control-lg">
                                                                                <option value="">Please select</option>
                                                                                @foreach ($drivers as $key => $driver)
                                                                                <option value="{{$driver->DRIVER_ID}}">{{ strtoupper($driver->NAME) }}</option>
                                                                                @endforeach
                                                                            </select>
																			<span class="form-text text-muted">Please enter your Driver.</span>
																		</div>
																		<!--end::Input-->
																	</div>
                                                                    <div class="col-xl-2 mt-8">
                                                                        <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>
																<div class="row">
																	<div class="col-xl-5">
																		<!--begin::Input-->
																		<div class="form-group">
																			<label>Trailer</label>
                                                                            <select name="equipment_type" id="equipment_type" class="form-control form-control-solid form-control-lg">
                                                                                <option value="">Please select</option>
                                                                                @foreach ($trailers as $key => $trailer)
                                                                                <option value="{{ $trailer->ID }}" {{ old('equipment_type') == $trailer->ID ? 'selected' : '' }}>{{$trailer->TRAILER_ID}}{{ !empty($trailer->TRAILER_TYPE) ? ' / ' . $trailer->TRAILER_TYPE : '' }}</option>
                                                                                @endforeach
                                                                            </select>
																			<span class="form-text text-muted">Please enter your Postcode.</span>
																		</div>
																		<!--end::Input-->
																	</div>
                                                                    <div class="col-md-1 mt-8">
                                                                        <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addTrailerModal" id="addtrailer"><i class="fa-solid fa-plus" style="font-size:26px; padding-left:5px;"></i></button>
                                                                    </div>																
																</div>
																
															</div>
														
														
														
															<div class="d-flex justify-content-between border-top mt-5 pt-10">
																<div class="mr-2">
																	<button type="button" class="btn btn-light-primary font-weight-bolder text-uppercase px-9 py-4" data-wizard-type="action-prev">Previous</button>
																</div>
																<div>
																	<button type="button" class="btn btn-success font-weight-bolder text-uppercase px-9 py-4" data-wizard-type="action-submit">Submit</button>
																	<button type="button" class="btn btn-primary font-weight-bolder text-uppercase px-9 py-4" data-wizard-type="action-next">Next</button>
																</div>
															</div>
															<!--end: Wizard Actions-->
														</form>
													</div>
													<!--end: Wizard-->
												</div>
												<!--end: Wizard Form-->
											</div>
											<!--end: Wizard Body-->
										</div>
										<!--end: Wizard-->
									</div>
								</div>
</div>
</div>
<div class="container-fluid">
								
							</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="addTrailerModal" tabindex="-1" aria-labelledby="addTrailerModalLabel"
aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title" id="addTrailerModalLabel">Add Trailer</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form action="{{ route('assets.trailers.store') }}" method="POST">
            @csrf
            <input type="hidden" name="from" value="trailerAdd">
            <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">Trailer Number</label>
                            <input type="text" name="TRAILER_ID" id="TRAILER_ID" size="10"
                            maxlength="10" value="{{ old('TRAILER_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="USER1" id="USER1" size="25"
                            maxlength="20" value="{{ old('USER1') }}" class="form-control" required>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <label for="max_weg" class="form-label required">Trailer Plate</label>
                            <input type="text" name="PLATE" id="PLATE" size="30"
                            maxlength="30" 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">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">Type</label>
                            <select name="TRAILER_TYPE" id="TRAILER_TYPE" class="form-control">
                                <option value="">Please Select</option>
                                <option value="VAN"
                                {{ old('TRAILER_TYPE') == 'VAN' ? 'selected' : '' }}>VAN</option>
                                <option value="FLATBED"
                                {{ old('TRAILER_TYPE') == 'FLATBED' ? 'selected' : '' }}>FLATBED
                            </option>
                            <option value="REEFER"
                            {{ old('TRAILER_TYPE') == 'REEFER' ? 'selected' : '' }}>REEFER
                        </option>
                        <option value="BOX Truck"
                        {{ old('TRAILER_TYPE') == 'BOX Truck' ? 'selected' : '' }}>BOX
                    Truck</option>
                </select>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="mb-3">
                <label for="max_weg" class="form-label required">Length</label>
                <select name="LENGTH_1" id="LENGTH_1" class="form-control">
                    <option value="">Please Select</option>
                    <option value="53" {{ old('LENGTH_1') == '53' ? 'selected' : '' }}>
                    53</option>
                    <option value="48" {{ old('LENGTH_1') == '48' ? 'selected' : '' }}>
                    48</option>
                    <option value="26" {{ old('LENGTH_1') == '26' ? 'selected' : '' }}>
                    26</option>
                    <option value="16" {{ old('LENGTH_1') == '16' ? 'selected' : '' }}>
                    16</option>
                </select>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="mb-3">
                <label for="max_weg" class="form-label required">Number of Axles</label>
                <input type="number" name="AXLES" id="AXLES" size="5"
                class="form-control" value="{{ old('AXLES') }}" required>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="mb-3">
                <label for="max_weg" class="form-label required">Empty Weight</label>
                <input type="number" name="EMPTY_WEIGHT" id="EMPTY_WEIGHT" size="5"
                class="form-control" value="{{ old('EMPTY_WEIGHT') }}" 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="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 showPicker" 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>
</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>
    $('.showPicker').on('click', function () {
        this.showPicker();
    });
</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;
                if (document.querySelector(prefix + "_POSTAL")) {
                    document.querySelector(prefix + "_POSTAL").value = postcode;
                }
                break;
            case "postal_code_suffix":
                postcode = `${postcode}-${component.long_name}`;
                if (document.querySelector(prefix + "_POSTAL")) {
                    document.querySelector(prefix + "_POSTAL").value = postcode;
                }
                break;
            case "locality":
                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 (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;
        }
    }

    // Ensure the postal code is correctly updated after loop
    if (document.querySelector(prefix + "_POSTAL")) {
        document.querySelector(prefix + "_POSTAL").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.');
                }
            });
        });
    });


    if (window.location.hash === '#kt_stats_widget_16_tab_1') {
        document.getElementById('kt_stats_widget_16_tab_link_1').click();
    }
    if (window.location.hash === '#kt_stats_widget_16_tab_2') {
        document.getElementById('kt_stats_widget_16_tab_link_2').click();
    }

    if (window.location.hash === '#kt_stats_widget_16_tab_3') {
        document.getElementById('kt_stats_widget_16_tab_link_3').click();
    }

    if (window.location.hash === '#kt_stats_widget_16_tab_4') {
        document.getElementById('kt_stats_widget_16_tab_link_4').click();
    }

     $("#nav-stepper .stepper-item").click(function () {
                        var cntrl = $(this);
                        $("#nav-stepper .stepper-item").removeClass("current");
                        $(cntrl).addClass("current");
                    });

    function activetab(id) {
        if (id != '') {
            $('#activeTab').val(id);
        }
       
    }


    document.addEventListener("DOMContentLoaded", function () {
    document.querySelector("form").addEventListener("submit", function (event) {
        let customerSelect = document.getElementById("cid");
        if (!customerSelect.value) {
            event.preventDefault();
            alert("Please select a customer.");
            customerSelect.focus();
        }
    });
});
    

</script>
@endsection