@extends('layouts.master')
@section('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css" />
    <style>
        .select2-container--bootstrap5 .select2-selection--single.form-select-solid .select2-selection__placeholder {
            color: white !important;
        }

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

        .select2-selection__rendered {
            padding: 0px !important;
        }

        .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: #eceeef;
            border-radius: inherit;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
            box-sizing: content-box;
        }

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

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

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

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

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

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

        .switch-handle {
            position: absolute;
            top: 2px;
            right: 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;
        }

        /* ion range slider */
        .irs--flat.irs-with-grid {
            width: 180px !important;
        }

        .irs--flat .irs-from,
        .irs--flat .irs-to,
        .irs--flat .irs-single,
        .irs--flat .irs-bar,
        .irs--flat .irs-handle>i:first-child,
        .irs--flat .irs-from:before,
        .irs--flat .irs-to:before,
        .irs--flat .irs-single:before {
            background-color: var(--bs-primary) !important;
        }

        .irs--flat .irs-from:before,
        .irs--flat .irs-to:before,
        .irs--flat .irs-single:before {
            border-top-color: var(--bs-primary) !important;
        }

        .th-primary {
            background-color: #007bff !important; /* Bootstrap primary blue color */
            color: white !important; /* Text color to white */
           
        }
        .map-container {
            border-radius: 12px;
            margin-bottom: 20px;
            height: 400px;
            overflow: hidden;
            position: relative;
        }

        #map {
            width: 100%;
            height: 100%;
        }
        .map-container.loading::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* Dark overlay */
            backdrop-filter: blur(4px); /* Blur effect */
            z-index: 5; /* Layer behind the loading div */
        }

        #loading {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10; /* Layer above the blur */
            /* background: rgba(255, 255, 255, 0.9); */
            padding: 30px 40px;
            border-radius: 8px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #fff;
            /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
        }
        .search-header {
            display: flex;
            justify-content: space-between;
        }
        .labels {
            color: blue;
            background-color: white;
            font-family: "Lucida Grande", "Arial", sans-serif;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            /*width: 25px;*/
            max-width: 250px;
            border: 1px solid black;
            white-space: nowrap;
        }
        .gmnoprint,
        .gm-fullscreen-control,
        .gm-style > div:nth-child(10){
            display:none;
        }
        .filter-category .filter-collection__filter-item .filter-item__icon img{
            display: none;
            max-width: 100%;
        }
        .filter-category .filter-collection__filter-item .filter-item__icon img.disable-location{
            display: block;
        }
        .filter-category .filter-collection__filter-item .filter-item__icon img.active-location{
            display: none;
        }
        .filter-category .filter-collection__filter-item.isactive .filter-item__icon img.active-location{
            display: block;
        }
        .filter-category .filter-collection__filter-item.isactive .filter-item__icon img.disable-location{
            display: none;
        }
        
        .filter-category .filter-collection__filter-weight-station .filter-item__icon img{
            display: none;
            max-width: 100%;
        }
        .filter-category .filter-collection__filter-weight-station .filter-item__icon img.disable-station{
            display: block;
        }
        .filter-category .filter-collection__filter-weight-station .filter-item__icon img.active-station{
            display: none;
        }
        .filter-category .filter-collection__filter-weight-station.isactive .filter-item__icon img.active-station{
            display: block;
        }
        .filter-category .filter-collection__filter-weight-station.isactive .filter-item__icon img.disable-station{
            display: none;
        }
        
        .filter-category .filter-collection__filter-cdl-physical .filter-item__icon img{
            display: none;
            max-width: 100%;
        }
        .filter-category .filter-collection__filter-cdl-physical .filter-item__icon img.disable-physical{
            display: block;
        }
        .filter-category .filter-collection__filter-cdl-physical .filter-item__icon img.active-physical{
            display: none;
        }
        .filter-category .filter-collection__filter-cdl-physical.isactive .filter-item__icon img.active-physical{
            display: block;
        }
        .filter-category .filter-collection__filter-cdl-physical.isactive .filter-item__icon img.disable-physical{
            display: none;
        }
        
        .filter-category .filter-collection__filter-dot-drug .filter-item__icon img{
            display: none;
            max-width: 100%;
        }
        .filter-category .filter-collection__filter-dot-drug .filter-item__icon img.disable-drug{
            display: block;
        }
        .filter-category .filter-collection__filter-dot-drug .filter-item__icon img.active-drug{
            display: none;
        }
        .filter-category .filter-collection__filter-dot-drug.isactive .filter-item__icon img.active-drug{
            display: block;
        }
        .filter-category .filter-collection__filter-dot-drug.isactive .filter-item__icon img.disable-drug{
            display: none;
        }
        
        .filter-category .filter-collection__filter-casino-item .filter-item__icon img{
            display: none;
            max-width: 100%;
        }
        .filter-category .filter-collection__filter-casino-item .filter-item__icon img.disable-casino{
            display: block;
        }
        .filter-category .filter-collection__filter-casino-item .filter-item__icon img.active-casino{
            display: none;
        }
        .filter-category .filter-collection__filter-casino-item.isactive .filter-item__icon img.active-casino{
            display: block;
        }
        .filter-category .filter-collection__filter-casino-item.isactive .filter-item__icon img.disable-casino{
            display: none;
        }
        .filter-category .filter-collection__filter-walmart .filter-item__icon img{
            display: none;
            max-width: 100%;
        }
        .filter-category .filter-collection__filter-walmart .filter-item__icon img.disable-walmart{
            display: block;
        }
        .filter-category .filter-collection__filter-walmart .filter-item__icon img.active-walmart{
            display: none;
        }
        .filter-category .filter-collection__filter-walmart.isactive .filter-item__icon img.active-walmart{
            display: block;
        }
        .filter-category .filter-collection__filter-walmart.isactive .filter-item__icon img.disable-walmart{
            display: none;
        }
        .filter-item__name {
            font-size: 12px;
        }
        .filter-category-inside-block {
            display: flex;
            justify-content: space-between;
        }
        .remove-extra-address {
            border: none;
            background: none;
        }
        .main_container{
            max-width: 100% !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 main_container">
            <div class="d-flex flex-column flex-lg-row">
                <div class="flex-column flex-lg-row-auto w-100 w-lg-250px w-xxl-250px mb-8 mb-lg-0 me-lg-4 me-5">
                <div class="card mb-5">
                            <div class="card-body">
                            <label class="fs-6 form-label fw-bold text-gray-900">Search by Store/State/Price
                            </label>
                                <div class="position-relative">
                              
                                    <i
                                        class="ki-outline ki-magnifier fs-3 text-gray-500 position-absolute top-50 translate-middle ms-6"></i>
                                       
                                        <input type="text" class="form-control form-control-solid ps-10" name="search"
                                        value="" id="search" placeholder="Search">
                                </div>
                                <div class="separator separator-dashed my-8"></div>
                                <div class="mb-5">
                                <label class="fs-6 form-label fw-bold text-gray-900">Search By City</label>
                                    <input type="text" class="form-control form-control form-control-solid" placeholder="Enter Address"
                                         id="location" value="">
                                         <input type="hidden" name="location_city" id="location_city">
                                         <input type="hidden" name="location_state" id="location_state">
                                         <div class="search-bar__results-region __results-region" style="max-height: 12px;">
                                            <ul class="search-results-collection"></ul>
                                        </div>
                                </div>
                              
                            </div>
                 </div>
                    <form action="#" id="searchform">
                        <div class="card">
                            <div class="card-body">
                                <!-- <div class="position-relative">
                                    <i
                                        class="ki-outline ki-magnifier fs-3 text-gray-500 position-absolute top-50 translate-middle ms-6"></i>
                                    <input type="text" class="form-control form-control-solid ps-10" name="search"
                                        value="" id="search" placeholder="Search">
                                </div>

                                <div class="separator separator-dashed my-8"></div> -->

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Date</label>
                                    <div id="range" class="form-control"
                                        style="background: #fff; cursor: pointer; border: 1px solid #ccc; width: 100%">
                                        <i class="fa fa-calendar"></i>&nbsp;
                                        <span></span> <i class="fa fa-caret-down"></i>
                                    </div>
                                    <input type="hidden" class="form-control sm" name="start_date" id="start_date">
                                    <input type="hidden" class="form-control sm" name="end_date" id="end_date">
                                </div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">STORE NUM</label>
                                    <input type="text" class="form-control form-control form-control-solid"
                                        name="STORE_NUM" id="STORE_NUM" value="">
                                </div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">State</label>
                                    <select class="form-select form-select-solid" data-control="select2"
                                        data-hide-search="true" data-placeholder="Select a State" name="ST"
                                        id="ST" multiple>
                                        <option value="">Select State</option>
                                        @php
                                            $states = [
                                                'AL',
                                                'AK',
                                                'AZ',
                                                'AR',
                                                'CA',
                                                'CO',
                                                'CT',
                                                'DE',
                                                'FL',
                                                'GA',
                                                'HI',
                                                'ID',
                                                'IL',
                                                'IN',
                                                'IA',
                                                'KS',
                                                'KY',
                                                'LA',
                                                'ME',
                                                'MD',
                                                'MA',
                                                'MI',
                                                'MN',
                                                'MS',
                                                'MO',
                                                'MT',
                                                'NE',
                                                'NV',
                                                'NH',
                                                'NJ',
                                                'NM',
                                                'NY',
                                                'NC',
                                                'ND',
                                                'OH',
                                                'OK',
                                                'OR',
                                                'PA',
                                                'RI',
                                                'SC',
                                                'SD',
                                                'TN',
                                                'TX',
                                                'UT',
                                                'VT',
                                                'VA',
                                                'WA',
                                                'WV',
                                                'WI',
                                                'WY',
                                            ];
                                        @endphp

                                        @foreach ($states as $state)
                                            <option value="{{ $state }}">{{ $state }}</option>
                                        @endforeach()
                                    </select>
                                </div>
                                
                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900"> Interstates</label>
                                    <select class="form-select form-control form-control-solid" name="interstate"
                                        id="interstate" data-control="select2" data-hide-search="true"
                                        data-placeholder="Select a Interstate" multiple>
                                        <option value="">Select TYPE</option>
                                        @foreach($interstates as $interstate)
                                        <option value="{{$interstate->Interstate}}">{{$interstate->Interstate}}</option>
                                      
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">TYPE</label>
                                    <select class="form-select form-control form-control-solid" name="TYPE"
                                        id="TYPE" data-control="select2" data-hide-search="true"
                                        data-placeholder="Select a TYPE" multiple>
                                        <option value="">Select TYPE</option>
                                        <option value="TA">TA</option>
                                        <option value="PILOT">PILOT</option>
                                    </select>
                                </div>

                                <div class="mb-5 mt-0">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Discount</label>
                                    <div id="example">
                                        <input type="hidden" id="from" step="0.001" name="from" value="0.000">
                                        <input type="hidden" id="to" name="to" step="0.001" value="2.000">
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex mt-5 mb-5" style="margin: 0 auto; !important">
                                <button type="button" id="submit" class="btn btn-primary me-5" onclick="changeExport()">Search</button>
                                <button type="button" id="clear" class="btn btn-primary me-5">Clear</button>
                            </div>
                        </div>
                    </form>

   <!-- Display Retail in crd -->
   <div class="card mt-3">
                            <div class="card-body">
                                <div class="">
                                    <table  class="table table-bordered fw-bold" style="border: 1px solid black;">
                                        <tr class="table-dark">
                                            <th class="fs-7 text-gray-500 text-uppercase th-primary" colspan="5" id="">Retail</th>
                                        </tr>
                                        <tr>
                                            <td class="" colspan="5" id="retailRow"></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Display Discount in crd -->
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="">
                                    <table  class="table table-bordered fw-bold" style="border: 1px solid black;">
                                        <tr class="table-dark">
                                            <th class="fs-7 text-gray-500 text-uppercase th-primary" colspan="5" id="">Discount</th>
                                        </tr>
                                        <tr>
                                            <td class="" colspan="10" id="discRow"></td>
                                        </tr>
                                        <tr  style="background: lightgreen;">                                                
                                            <td class="text-center" colspan="10" id = 'total'></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>

                    <div class="card mt-5">
                            <div class="card-body">
                               

                                <div class="search-header">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Route Search</label>
                                    <!-- <button type="submit" class="add_delivery_address_btn" title="Add Stop" style="border: none; background: none;">
                                        <h4>+</h4>
                                    </button> -->
                                </div>
                                <div class="mb-5">
                                    <input type="text" class="form-control form-control form-control-solid" placeholder="Enter Current location"
                                         id="current_location" value="">
                                         <div class="search-bar__results-region __results-region" style="max-height: 12px;">
                                            <ul class="search-results-collection"></ul>
                                        </div>
                                </div>
                                <div class="mb-5">
                                    <input type="text" class="form-control form-control form-control-solid" placeholder="Enter Pickup location"
                                         id="pickup_location" value="">
                                         <div class="search-bar__results-region __results-region">
                                            <ul class="search-results-collection"></ul>
                                        </div>
                                </div>
                                <div class="mb-5">
                                    <div class="search_destination_container">
                                        <input type="text" class="form-control form-control form-control-solid" placeholder="Enter Delivery location"
                                            id="delivery_location" value="">
                                            <div class="search-bar__results-region __results-region">
                                                <ul class="search-results-collection"></ul>
                                            </div>
                                    </div>
                                </div>
                                <div class="mb-5">
                                    <button type="submit" class="btn btn-primary btn-sm add_delivery_address_btn float-end">Add Stop</button>
                                </div>
                                <div class="mb-5 float-none" style="clear:both;">
                                    <div class="search__destination-region search__search-bar-container">
                                        <div class="form-check me-3 mb-2" style="width: 20%;">
                                            <input type="checkbox" class="form-check-input fuel_locations" name="fuel_locations" id="broker_rate_address_fuel_locations" placeholder="LOVES" value="LOVES" checked>
                                            <label class="form-check-label" for="profile_4">Loves</label>
                                        </div>
                                        <div class="form-check me-3 mb-2" style="width: 20%;">
                                            <input type="checkbox" class="form-check-input fuel_locations" name="fuel_locations" id="broker_rate_address_fuel_locations" placeholder="TA" value="TA" checked>
                                            <label class="form-check-label" for="profile_5">TA/Petro</label>
                                        </div>
                                        <div class="form-check me-3 mb-2" style="width: 20%;">
                                            <input type="checkbox" class="form-check-input fuel_locations" name="fuel_locations" id="broker_rate_address_fuel_locations" placeholder="PILOT" value="PILOT" checked>
                                            <label class="form-check-label" for="profile_6">Pilot/FJ</label>
                                        </div>     
                                    </div>
                                </div>

                                <div class="mb-5">
                                    <div class="search__destination-region search__search-bar-container" style="display:none;">
                                        <!-- <div class="search-bar"> -->
                                            <input class="form-control form-control form-control-solid" id="broker_rate_address_bar" type="text" placeholder="Enter Broker Rate" value="0">
                                            <div class="search-bar__icon tmdcloud-broker-rate">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 512"><path d="M209.2 233.4l-108-31.6C88.7 198.2 80 186.5 80 173.5c0-16.3 13.2-29.5 29.5-29.5h66.3c12.2 0 24.2 3.7 34.2 10.5 6.1 4.1 14.3 3.1 19.5-2l34.8-34c7.1-6.9 6.1-18.4-1.8-24.5C238 74.8 207.4 64.1 176 64V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48h-2.5C45.8 64-5.4 118.7.5 183.6c4.2 46.1 39.4 83.6 83.8 96.6l102.5 30c12.5 3.7 21.2 15.3 21.2 28.3 0 16.3-13.2 29.5-29.5 29.5h-66.3C100 368 88 364.3 78 357.5c-6.1-4.1-14.3-3.1-19.5 2l-34.8 34c-7.1 6.9-6.1 18.4 1.8 24.5 24.5 19.2 55.1 29.9 86.5 30v48c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-48.2c46.6-.9 90.3-28.6 105.7-72.7 21.5-61.6-14.6-124.8-72.5-141.7z"/></svg>
                                            </div>
                                        <!-- </div> -->
                                    </div>
                                </div>
                                
                                <div class="d-flex mt-5 mb-5" style="margin: 0 auto; !important">
                                    <button id="submit_route" type="submit" class="btn btn-primary me-5">Run Fuel Optimizer</button>
                                </div>


                                <div class="filter-block-main">   
                                    <div class="filter-card" id="filter-parking-category" style="display: none;">
                                        <div class="filter-category parking-category">
                                            <h6>Set Filter</h6>
                                            <div class="filter-category-inside-block">
                                                <!-- parking space -->
                                                <div class="filter-collection__filter-item isactive filter-cat">
                                                    <div class="filter-item__icon"> 
                                                        <img class="disable-location" src="/public/assets/images_24012025/icons8-truck-stop-parking-lot-48_deactive.png">
                                                        <img class="active-location" src="/public/assets/images_24012025/icons8-truck-stop-parking-lot-48.png">
                                                    </div>  
                                                    <div class="filter-item__name">Parking Space</div>
                                                </div>
                                                <!-- parking space -->

                                                <!-- weight station -->
                                                <div class="filter-collection__filter-weight-station isactive filter-cat">
                                                    <div class="filter-item__icon">
                                                        <img class="disable-station" src="/public/assets/images_24012025/icons8-weight-station-48_deactive.png">
                                                        <img class="active-station" src="/public/assets/images_24012025/icons8-weight-station-48.png">
                                                    </div>  
                                                    <div class="filter-item__name">Weight Station</div>
                                                </div>
                                                <!-- weight station -->
                                            </div>

                                            <div class="filter-category-inside-block">
                                                <!-- CDL Physical -->
                                                <div class="filter-collection__filter-cdl-physical filter-cat">
                                                    <div class="filter-item__icon">
                                                        <img class="disable-physical" src="/public/assets/images_24012025/icons8-heart-health-48_deactive.png">
                                                        <img class="active-physical" src="/public/assets/images_24012025/icons8-heart-health-48.png">
                                                    </div>  
                                                    <div class="filter-item__name">CDL Physical</div>
                                                </div>
                                                <!-- CDL Physical -->

                                                <!-- Drug Records -->
                                                <div class="filter-collection__filter-dot-drug filter-cat">
                                                    <div class="filter-item__icon">
                                                        <img class="disable-drug" src="/public/assets/images_24012025/icons8-dot-48_deactive.png">
                                                        <img class="active-drug" src="/public/assets/images_24012025/icons8-dot-48.png">
                                                    </div>  
                                                <div class="filter-item__name">DOT Drug</div>
                                                </div>
                                                <!-- Drug Records -->
                                            </div>
                                                    
                                            <div class="filter-category-inside-block">
                                                <!-- Casino Records -->
                                                <div class="filter-collection__filter-casino-item isactive filter-cat">
                                                    <div class="filter-item__icon">
                                                        <img class="disable-casino" src="/public/assets/images_24012025/icons8-casino-48_deactive.png">
                                                        <img class="active-casino" src="/public/assets/images_24012025/icons8-casino-48.png">
                                                    </div>  
                                                    <div class="filter-item__name">Casino</div>
                                                </div>
                                                <!-- Casino Records -->

                                                <!-- Walmart Records -->             
                                                <div class="filter-collection__filter-walmart filter-cat">
                                                    <div class="filter-item__icon">
                                                        <img class="disable-walmart" src="/public/assets/images_24012025/icons8-walmart-48_deactive.png">
                                                        <img class="active-walmart" src="/public/assets/images_24012025/icons8-walmart-48.png">
                                                    </div>  
                                                    <div class="filter-item__name">Walmart</div>
                                                </div>
                                                <!-- Walmart Records -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>

                     
                </div>
                <div class="flex-lg-row-fluid">
                    <div class="d-flex flex-wrap flex-stack mb-5">
                        <div class="d-flex flex-wrap align-items-center my-1">
                            <h3 class="fw-bold me-5 my-1">
                                Daily Pricing
                            </h3>
                        </div>
                        <a href="{{ route('carrierPricing.index') }}" class="btn btn-primary btn-sm">Horizontal Layout</a>
                        <a href="https://tms.tmdashboard.com/iCommune2/app_mobile_new_2025.php" class="btn btn-primary btn-sm me-5"
                            target="_blank">Mobile search</a>
                            <a href="javascript:void(0)" class="btn btn-primary btn-sm me-5 d-none"
                            data-bs-toggle="modal" data-bs-target="#moneyCodeModal">Share</a>
                            <a href="{{ route('carrierPricing.todayExport') }}"class="btn btn-primary btn-sm">Download Today Pricing</a>
                        <a href="https://app.tmdashboard.com/email_pricelist.php?email={{ getAuthMemberInfo()->email }}"
                            class="btn btn-primary btn-sm me-5 d-none" target="_blank">Email Alerts</a>
                        <div class="float-end">
                            <select name="downloadOptions" id="downloadOptions"
                                class="form-select form-select-solid form-select-sm bg-primary" data-control="select2"
                                data-hide-search="true" data-placeholder="Export">
                                <option value="" >Export</option>
                                <option value="excel">Excel</option>
                                <option value="csv">CSV</option>
                                <option value="print">Print</option>
                                <!-- <option value="reset">Reset</option>
                                <option value="reload">Reload</option> -->
                            </select>
                        </div>

                    </div>

                    <div class="tab-content">
                        <div id="kt_project_users_table_pane" class="tab-pane fade show active">

                                                 

                            <div class="card card-flush">
                                <div class="pt-0">
                                    <div class="table-responsive p-5">
                                       <div class="mb-15">
                                       

                                        {!! $dataTable->table() !!}

                                        
                                       </div> 
                                        
                                    </div>
                                </div>
                            </div>
                            <div class="card-body pt-5">
                                <!-- <div class="card card-flush h-xl-100"> -->
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="map-container">
                                                <div id="loading">
                                                    Loading...
                                                </div>
                                                <div id="map"></div>
                                            </div>
                                        </div>
                                    </div>
                                <!-- </div> -->
                            </div> 
                            <div class="card-body pb-5 mt-5 d-none hide">
                                <div class="card card-flush h-xl-100">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="card-header mb-10">
                                            <h4 class="fw-bold me-5 m-3" align="center" style="color:red;">
                                            FUEL PRICES SUBJECT TO CHANGE
                                            </h4>
                                            </div>
                                            <div class="chart">
                                                <canvas id="fuelpriceingChart" width="400" height="200"></canvas>
                                            </div>
                                        </div>
                                        <!-- <div class="col-md-6">
                                            <table  class="table table-bordered fw-bold mb-10" style="border: 1px solid black; margin-top: 11rem;">
                                            <tr class="table-dark">
                                                    <th class="fs-7 text-gray-500 text-uppercase th-primary" colspan="5" id="">Retail</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase th-primary" colspan="5" id="">Discount</th>
                                                </tr>
                                                <tr>
                                                    <td class="" colspan="5" id="retailRow"></td>
                                                    <td class="" colspan="10" id="discRow"></td>
                                                </tr>
                                                <tr  style="background: lightgreen;">                                                
                                                    <td class="text-center" colspan="10" id = 'total'></td>
                                                    
                                                </tr>
                                            </table>
                                        </div> -->
                                    </div>
                                  
                                </div>
                            </div>

                            <div class="card-body pt-5 d-none hide">
                            <div class="card card-flush h-xl-100">
                           
                                       <table class="table table-bordered fw-bold mt-5 mb-10" style="border: 1px solid black;" id="tableCount">
                                            <thead class="table-dark">
                                                <tr>
                                                    <th class="fs-7 text-gray-500 text-uppercase th-primary">0.10+</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase th-primary">0.20+</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase th-primary">0.30+</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase th-primary">0.40+</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase th-primary">0.50+</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase th-primary">0.60+</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase th-primary">0.70+</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase th-primary">0.80+</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase th-primary">0.90+</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase th-primary">1.0+</th>
                                                </tr>
                                               
                                            </thead>
                                            <tfoot  align="right" >    
                                                <tr>                                                
                                                    <td id = 'rebate2_0_10_plus_avg'></td>
                                                    <td id = 'rebate2_0_20_plus_avg'></td>
                                                    <td id = 'rebate2_0_30_plus_avg'></td>
                                                    <td id = 'rebate2_0_40_plus_avg'></td>
                                                    <td id = 'rebate2_0_50_plus_avg'></td>
                                                    <td id = 'rebate2_0_60_plus_avg'></td>
                                                    <td id = 'rebate2_0_70_plus_avg'></td>
                                                    <td id = 'rebate2_0_80_plus_avg'></td>
                                                    <td id = 'rebate2_0_90_plus_avg'></td>
                                                    <td id = 'rebate2_1_10_plus_avg'></td>
                                                </tr> 
                                                
                                            </tfoot>
                                           
                                        </table>
                                        </div>
                                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="print_fule_table" style="display:none"></div>

    <div class="parkings__list-region-container" style="display:none">
                            <!-- edited code -->
                            <div class="parking-set-title " id="top5">
                                <button type="button" id="top5title" class="active btn btn-primary" onclick="$('#tbl_top_5_locations_nears').hide();$('#tbl_top_5_locations').show();">Lowest Price</button>
                                <button type="button" id="top5_nears_title" class="active btn btn-primary" onclick="$('#tbl_top_5_locations').hide();$('#tbl_top_5_locations_nears').show();">Near By (Within 100 miles)</button>
                                <table id="tbl_top_5_locations" class="table table-striped" style="background: white;">
                                    <thead>
                                    <tr>
                                        <th>Store</th>
                                        <th>Your Price</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbl_top_5_locations_body">
                                    </tbody>
                                </table>
                                <table id="tbl_top_5_locations_nears" class="table table-striped" style="background: white;display:none;">
                                    <thead>
                                    <tr>
                                        <th>Store</th>
                                        <th>Your Price</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbl_top_5_locations_body_nears">
                                    </tbody>
                                </table>
                                
                            </div>
                            <!-- edited code -->
                            <div class="parking-set-title" id="routeTitle">
                                Route Calculatons
                            </div>
                            
                            <div class="suggested-parkings__list-region ">
                                <div class="parking-collection">
                                    <div class="parking-item">
                                        <div id="fule_table" class="parking-item__parking __parking js-route-parking">
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="suggested-parkings__list-region" id="diretionroute">
                                <div class="parking-collection">
                                    <div class="parking-item">
                                        <div id="directions_panel" class="parking-item__parking __parking js-route-parking">
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="parkings__container" id="parkingtotal">
                                <div class="parkings__from-point ">
                                    <div class="point__address--bold"> 
                                        <span id="total">
                                            
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="parking-detail-notice" id="parkingdetailtotal">
                                <p>
                                    All data is estimates and approximations. Speed has probably the biggest impact on mpg when loaded.
                                    Much depends on type of load, location and terrain. A truck traveling at 75 mph consumes 27% more fuel than one going 65 mph. Also traffic can also have adverse effects as well. Idling is another huge fuel guzzler
                                </p>
                            </div>

                        </div>
    <div class="modal fade" id="moneyCodeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Email</h5>
                </div>
                <form method="post" id="sendmailform">
                    @csrf
                    <div class="modal-body">
                         <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="max_weg" class="form-label ">Enter Email to share routing</label>
                                    <input type="text" class="form-control" id="sharing_link_email" name="share_email"
                                        value="{{ old('share_email') }}">
                                        <input type="hidden" name="sharing_link" id="sharing_link" value="https://tms.tmdashboard.com/iCommune2/app_mobile.php">
                                    @error('share_email')
                                        <p class="text-danger">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal"
                            aria-label="Close">Close</button>
                        <button type="button" class="btn btn-primary btn-sm" onclick="sendmail()">
                            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true" id="sendMailLoader"></span>
                             Send Mail
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection()
@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5BQa0hFcyKzBa_dA2cbKt3QvdiWhxOvY&libraries=geometry,places"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

    <script>
        function addEmailAlert(email, locationId, vendorId, id) {
            var url = "{{ route('carrierAddEmailAlert') }}";
            $.ajax({
                url: url,
                method: 'POST',
                data: {
                    email: email,
                    locationId: locationId,
                    vendorId: vendorId,
                    id: id,
                    _token: "{{ csrf_token() }}"
                },
                success: function(res) {
                    toastr.success('Email Alert Added Successfully');
                    $('#setbuttons' + id).html(res);
                },
                error: function(error) {
                    toastr.error(error);
                }
            });
        }

        function removeEmailAlert(email, locationId, vendorId, id) {
            var url = "{{ route('carrierRemoveEmailAlert') }}";
            $.ajax({
                url: url,
                method: 'GET',
                data: {
                    email: email,
                    locationId: locationId,
                    vendorId: vendorId,
                    id: id
                },
                success: function(res) {
                    toastr.success('Email Alert Removed Successfully');
                    $('#setbuttons' + id).html(res);
                },
                error: function(error) {
                    toastr.error(error);
                }
            });
        }
    </script>
    <script>
        $(function() {
            var start = moment();
            var end = moment();

            function cb(start, end) {
                $('#range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                $("#start_date").val(start.format('YYYY-MM-DD'));
                $("#end_date").val(end.format('YYYY-MM-DD'));
            }

            $('#range').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()]
                }
            }, cb);
            cb(start, end);

            const table = $('#carrierpricing-table');

            table.on('preXhr.dt', function(e, setting, data) {
                data.search = $('#search').val();
                data.start_date = $('#start_date').val();
                data.end_date = $('#end_date').val();
                data.STORE_NUM = $('#STORE_NUM').val();
                data.ST = $('#ST').val();
                data.interstate = $('#interstate').val();
                data.TYPE = $('#TYPE').val();
                data.to = $('#to').val();
                data.from = $('#from').val();
                data.location = $('#location').val();
                data.city = $('#location_city').val();
                data.state = $('#location_state').val();
                data.filteredMarkers = JSON.stringify([]);
            });

            const tableCount = $('#tableCount');

            tableCount.on('preXhr.dt', function(e, setting, count) {
                count.search = $('#search').val();
                count.start_date = $('#start_date').val();
                count.end_date = $('#end_date').val();
                count.STORE_NUM = $('#STORE_NUM').val();
                count.ST = $('#ST').val();
                count.interstate = $('#interstate').val();
                count.TYPE = $('#TYPE').val();
                count.to = $('#to').val();
                count.from = $('#from').val();
                count.location = $('#location').val();
                count.city = $('#location_city').val();
                count.state = $('#location_state').val();
            });
            $('#submit').on('click', function() {
                formSubmit();
            });

            $('#search').on('keyup', function() {
                if (event.key === "Enter" || event.keyCode === 13) {
                    formSubmit();
                }
            });

            //     function formSubmit() {
            //     table.DataTable().ajax.reload();
            //         tableCount.DataTable().ajax.reload();
            //          var formData = $('#searchform').serialize();
                
            //          var search= $('#search').val();
            //          var start_date = $('#start_date').val();
            //          var end_date = $('#end_date').val();
            //          var STORE_NUM = $('#STORE_NUM').val();
            //          var ST = $('#ST').val();
            //          var TYPE = $('#TYPE').val();
            //          var from = $('#to').val();             
                

            //         var data = {
            //                 search: search,
            //                 start_date: start_date,
            //                 end_date: end_date,
            //                 STORE_NUM: STORE_NUM,
            //                 ST: ST,
            //                 TYPE: TYPE,
            //                 from: from,
            //                 to: to
            //             };
                
            //         fetchChartData(search,start_date,end_date,STORE_NUM,ST,TYPE,from);
                
                    
            //         return false;
            // }

            function getCityCoordinates(city, callback) {
                const geocodeUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${city}&key=AIzaSyD5BQa0hFcyKzBa_dA2cbKt3QvdiWhxOvY`;

                $.get(geocodeUrl, function(response) {
                    if (response.status === 'OK') {
                        const location = response.results[0].geometry.location;
                        callback(location.lat, location.lng);
                    } else {
                        callback(null, null);
                    }
                });
            }

            function haversineDistance(lat1, lon1, lat2, lon2) {
                const toRad = (angle) => (Math.PI / 180) * angle;
                const R = 3958.8; // Earth radius in miles

                const dLat = toRad(lat2 - lat1);
                const dLon = toRad(lon2 - lon1);
                
                const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                        Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
                        Math.sin(dLon / 2) * Math.sin(dLon / 2);
                        
                const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

                return R * c; // Distance in miles
            }

            // Global array to store markers separately from markersAllAPI
            var filteredCityMarkersArray = [];

            function formSubmit() {
                // table.DataTable().ajax.reload();
                // tableCount.DataTable().ajax.reload();
                var formData = $('#searchform').serialize();
                var search = $('#search').val().trim(); // City name or other input
                var start_date = $('#start_date').val();
                var end_date = $('#end_date').val();
                var STORE_NUM = $('#STORE_NUM').val();
                var ST = $('#ST').val();
                var TYPE = $('#TYPE').val();
                var from = $('#to').val();
                var radius = 100; // Miles
                var interstate = $('#interstate').val(); // Miles
                var location_city = $('#location_city').val();
                var location_state= $('#location_state').val();
                filteredCityMarkersArray = [];
                // var filteredMarkers = [];
                if (search != "") {
                    
                getCityCoordinates(search, function(cityLat, cityLng) {
                    if (cityLat !== null && cityLng !== null) {
                        // The search input is a valid city
                        filteredCityMarkersArray = markersAllAPI.filter(marker => marker.position);
                        
                        // Filter markers within 100 miles
                        var filteredMarkers = filteredCityMarkersArray.filter(marker => {
                            if (!marker.position) return false;
                            const lat = marker.position.lat();
                            const lng = marker.position.lng();
                            return haversineDistance(cityLat, cityLng, lat, lng) <= radius;
                        });

                        // console.log("Filtered Markers:", filteredMarkers);
                        fetchChartData(search, start_date, end_date, STORE_NUM, ST, TYPE, from, filteredMarkers,interstate,location_city,location_state);

                        table.on('preXhr.dt', function(e, setting, data) {
                                data.filteredMarkers = JSON.stringify(filteredMarkers.map(marker => ({
                                    lat: marker.position.lat(),
                                    lng: marker.position.lng(),
                                })));
                            });
                            table.DataTable().ajax.reload();
                tableCount.DataTable().ajax.reload();
                    } else {
                        fetchChartData(search, start_date, end_date, STORE_NUM, ST, TYPE, from, [],interstate,location_city,location_state);
                        table.DataTable().ajax.reload();
                tableCount.DataTable().ajax.reload();
                    }
                });
            } else {
                fetchChartData(search, start_date, end_date, STORE_NUM, ST, TYPE, from, [],interstate,location_city,location_state);
                table.DataTable().ajax.reload();
                tableCount.DataTable().ajax.reload();
            }
                return false;
            }


            $('#downloadOptions').on('change', function() {
                var downloadOptions = this.value;
                $(".buttons-" + downloadOptions).click();
                var datatableId = 'carrierpricing-table';
                downloadDataTable(downloadOptions, datatableId);
            });

            $('#clear').on('click', function() {
                $('#search, #STORE_NUM').val('');
                $('#ST').val([]).trigger('change');
                $('#TYPE').val([]).trigger('change');
                $('#location').val('');
                $('#location_city').val('');
                $('#location_state').val('');
                var start = moment();
                var end = moment();
                $('#range').data('daterangepicker').setStartDate(start);
                $('#range').data('daterangepicker').setEndDate(end);
            
                $('#range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

                $("#start_date").val(start.format('YYYY-MM-DD'));
                $("#end_date").val(end.format('YYYY-MM-DD'));

                var slider = $("#example").data("ionRangeSlider");
                slider.update({
                    from: 0,
                    to: 2
                });
                $('#from').val('0');
                $('#to').val('2');
            
                        const locationInput = document.getElementById('location');
                        locationInput.focus();
                        locationInput.dispatchEvent(new KeyboardEvent("keydown", { keyCode: 40 }));
                        initMap();
                   
                        $('#carrierpricing-table').on('preXhr.dt', function(e, settings, data) {
                            data.city = '';
                            data.state = '';
                        });

                table.DataTable().ajax.reload();
                clearMapFilter();
               
            });
        });
    </script>

    {!! $dataTable->scripts() !!}

    <script>
        $(document).ready(function() {


            $('#tableCount').DataTable({
                dom: 'Bfrt',
               // buttons: ['csv', 'excel', 'print', 'reset', 'reload'],
                processing: true,
                serverSide: true,
                ajax: '{!! route('carrierPricing.carrierPricingCount') !!}',
                data: {
                    formName: 'afscpMcn',
                    action: 'search',
                },
                pageLength: 25,
                order: [
                    [0, 'desc']
                ],
                footerCallback: function(tfoot, data, start, end, display) {                  
                    var rebate2_0_10_plus_avg = data[0].rebate2_0_10_plus_avg ? data[0].rebate2_0_10_plus_avg : '0%';
                    var rebate2_0_20_plus_avg = data[0].rebate2_0_20_plus_avg ? data[0].rebate2_0_20_plus_avg : '0%';
                    var rebate2_0_30_plus_avg = data[0].rebate2_0_30_plus_avg ? data[0].rebate2_0_30_plus_avg : '0%';
                    var rebate2_0_40_plus_avg = data[0].rebate2_0_40_plus_avg ? data[0].rebate2_0_40_plus_avg : '0%';
                    var rebate2_0_50_plus_avg = data[0].rebate2_0_50_plus_avg ? data[0].rebate2_0_50_plus_avg : '0%';
                    var rebate2_0_60_plus_avg = data[0].rebate2_0_60_plus_avg ? data[0].rebate2_0_60_plus_avg : '0%';
                    var rebate2_0_70_plus_avg = data[0].rebate2_0_70_plus_avg ? data[0].rebate2_0_70_plus_avg : '0%';
                    var rebate2_0_80_plus_avg = data[0].rebate2_0_80_plus_avg ? data[0].rebate2_0_80_plus_avg : '0%';
                    var rebate2_0_90_plus_avg = data[0].rebate2_0_90_plus_avg ? data[0].rebate2_0_90_plus_avg : '0%';
                    var rebate2_1_10_plus_avg = data[0].rebate2_1_10_plus_avg ? data[0].rebate2_1_10_plus_avg : '0%';
                    var minRetail = data[0].minRetail ? data[0].minRetail : 0;
                    var maxRetail = data[0].maxRetail ? data[0].maxRetail : 0;
                    var avgRetail = data[0].avgRetail ? data[0].avgRetail : 0;
                    var mindisc = data[0].mindisc ? data[0].mindisc : 0;
                    var maxdisc = data[0].maxdisc ? data[0].maxdisc : 0;
                    var avgdisc = data[0].avgdisc ? data[0].avgdisc : 0;

                    $("#rebate2_0_10_plus_avg").html(rebate2_0_10_plus_avg);
                    $("#rebate2_0_20_plus_avg").html(rebate2_0_20_plus_avg);
                    $("#rebate2_0_30_plus_avg").html(rebate2_0_30_plus_avg);
                    $("#rebate2_0_40_plus_avg").html(rebate2_0_40_plus_avg);
                    $("#rebate2_0_50_plus_avg").html(rebate2_0_50_plus_avg);
                    $("#rebate2_0_60_plus_avg").html(rebate2_0_60_plus_avg);
                    $("#rebate2_0_70_plus_avg").html(rebate2_0_70_plus_avg);
                    $("#rebate2_0_80_plus_avg").html(rebate2_0_80_plus_avg);
                    $("#rebate2_0_90_plus_avg").html(rebate2_0_90_plus_avg);
                    $("#rebate2_1_10_plus_avg").html(rebate2_1_10_plus_avg);
                    $("#total").html('Total : '+data[0].rebate2_total_count+' (TA: '+data[0].rebate2_total_ta_count+', PILOT: '+data[0].rebate2_total_pilot_count+')');
                    // $("#retailRow").html('MIN: '+minRetail+' MAX: '+maxRetail+' AVG: '+avgRetail);
                    $("#retailRow").html('Low: ' + minRetail + '<br>High: ' + maxRetail + '<br>Avg: ' + avgRetail);
                    $("#discRow").html('Low: '+mindisc+' <br>High: '+maxdisc+'<br>Avg: '+avgdisc); 
                 
                    

                },
                columns: [{
                        data: 'rebate2_0_10_plus',
                        name: '0.10+'
                    },
                    {
                        data: 'rebate2_0_20_plus',
                        name: '0.20+'
                    },
                    {
                        data: 'rebate2_0_30_plus',
                        name: '0.30+'
                    },
                    {
                        data: 'rebate2_0_40_plus',
                        name: '0.40+'
                    },
                    {
                        data: 'rebate2_0_50_plus',
                        name: '0.50+'
                    },
                    {
                        data: 'rebate2_0_60_plus',
                        name: '0.60+'
                    },
                    {
                        data: 'rebate2_0_70_plus',
                        name: '0.70+'
                    },
                    {
                        data: 'rebate2_0_80_plus',
                        name: '0.80+'
                    },
                    {
                        data: 'rebate2_0_90_plus',
                        name: '0.90+'
                    },
                    {
                        data: 'rebate2_1_00_plus',
                        name: '1.0+'
                    },
                ],
                "createdRow": function(row, data, dataIndex) {
                    $(row).addClass("fs-6");
                },
            });



            var slider = $("#example").ionRangeSlider({
                type: "double",
                min: 0,
                max: 2,
                from: 0,
                to: 2,
                step: 0.001,
                grid: true,
            onFinish: function(data) {
                    $('#from').val(data.from);
                    $('#to').val(data.to);
                }
            }).data("ionRangeSlider");

            $('#from').val(slider.result.from);
            $('#to').val(slider.result.to);
        });

   

        function changeExport(){
          var value =   $("#downloadOptions").val();
           if(value != "" ){           
             console.log("inside");
            $('#downloadOptions option[value=""]').prop('selected', true);
            $('#downloadOptions').trigger('change');
            //  $("#downloadOptions").val("");
           }
           console.log("outside",value);

        }


        
       
        var pieChartInstance = null;

        function piechart(data) {
            console.log(data);


            var piechart_data = data || null;


            var ctx = document.getElementById('fuelpriceingChart').getContext('2d');

            // Destroy the previous chart instance if it exists
            if (pieChartInstance) {
                pieChartInstance.destroy();
            }

            // Create a new chart instance
            pieChartInstance = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: ['10+', '20+', '30+', '40+', '50+', '60+', '70+', '80+', '90+', '1.0+'],
                    datasets: [{
                        data: piechart_data,
                        backgroundColor: [
                            '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
                            '#FF9F40', '#FFCD56', '#4BC0C0', '#36A2EB', '#FF6384'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'right'
                        }
                    }
                }
            });
        }

        $(document).ready(function() {
            showDBDataOnMap(null);
            piechart(null);

        });

        function clearMapFilter() {
            var today = new Date().toISOString().split('T')[0];
            $.ajax({
                url: '{{route("carrierPricing.getChartData")}}',
                type: 'GET',
                data: { 
                    search: '',
                    start_date: today,
                    end_date: today,
                    STORE_NUM: '',
                    ST: '',
                    TYPE: '',
                    from: 2,
                    interstate: $('#interstate').val(),
                    filteredMarkers: JSON.stringify([])
                },
                // console.log("data", data);
                success: function (response) {
                    if (response.filter_type_data) {
                        showFilterDBDataOnMap(response.filter_type_data);
                        clearRouteMarkers(); 
                    } else {
                        console.warn('No chart data found in the response.');
                    }
                },
                error: function (xhr, status, error) {
                    console.error('Error fetching chart data:', error);
                }
            });
        }

        // function fetchChartData(search, start_date, end_date, STORE_NUM, ST, TYPE, from) {
        //     $.ajax({
        //         url: '{{route("carrierPricing.getChartData")}}',
        //         type: 'GET',
        //         data: { 
        //             search: search,
        //             start_date: start_date,
        //             end_date: end_date,
        //             STORE_NUM: STORE_NUM,
        //             ST: ST,
        //             TYPE: TYPE,
        //             from: from
        //         },
        //         success: function (response) {
        //             if (response.chartData) {
        //                 piechart(response.chartData); // Update the chart with new data
        //                 // showFilterDBDataOnMap(response.filter_type_data);
        //                 // markersAPI[i].setMap(null); 
        //             } 
        //             if (response.filter_type_data) {
        //                 if (search) {
        //                     showFilterZoomDBDataOnMap(response.filter_type_data);
        //                 } else if (!search) {
        //                     showFilterDBDataOnMap(response.filter_type_data);
        //                 }

        //                 clearRouteMarkers(); // Clear previous markers
        //             } else {
        //                 console.warn('No chart data found in the response.');
        //             }
        //         },
        //         error: function (xhr, status, error) {
        //             console.error('Error fetching chart data:', error);
        //         }
        //     });
        // }

        function fetchChartData(search, start_date, end_date, STORE_NUM, ST, TYPE, from, filteredMarkers,interstate,location_city,location_state) {

            if (!Array.isArray(filteredMarkers)) {
                filteredMarkers = [];
            }

            $.ajax({
                url: '{{route("carrierPricing.getChartData")}}',
                type: 'GET',
                data: { 
                    search: search,
                    start_date: start_date,
                    end_date: end_date,
                    STORE_NUM: STORE_NUM,
                    ST: ST,
                    TYPE: TYPE,
                    from: from,
                    interstate:interstate,
                    location_city:location_city,
                    location_state:location_state,
                    filteredMarkers: JSON.stringify(filteredMarkers.map(marker => ({
                        lat: marker.position.lat(),
                        lng: marker.position.lng(),
                    })))
                },
                success: function (response) {
                    if (response.chartData) {
                        piechart(response.chartData); // Update the chart with new data
                    }
                    if (response.filter_type_data) {
                        if (search) {
                            showFilterZoomDBDataOnMap(response.filter_type_data);
                        } else {
                            showFilterDBDataOnMap(response.filter_type_data);
                        }
                        clearRouteMarkers(); // Clear previous markers
                    } else {
                        console.warn('No chart data found in the response.');
                    }
                },
                error: function (xhr, status, error) {
                    console.error('Error fetching chart data:', error);
                }
            });
        }


        var filter_cluster = [];
        var labelMarkers = []; // Store markers with labels for future use
        function showFilterZoomDBDataOnMap(data) {
            // console.log("data from showFilterZoomDBDataOnMap", data);

                if (markerCluster) {
                markerCluster.clearMarkers();
            }
            clearAllMarkers();

            markersAPI = []; // Reset markers storage
            markersAllAPI = [];
            filter_cluster = [];
            labelMarkers = []; // Reset labeled markers

            var json1 = data;
            var flag = 0;
            var bounds = new google.maps.LatLngBounds(); // Bounds object to adjust zoom

            $.each(json1, function (key, data) {
                var latLng = new google.maps.LatLng(data.LAT, data.LNG);
                bounds.extend(latLng); // Extend bounds for each marker

                var iftaprice = parseFloat(data.IFTA_Price).toFixed(2);
                var YourPrice = parseFloat(data.YourPrice).toFixed(3);

                let icon_name;
                if (data.TYPE === 'TA') {
                    icon_name = { url: "ta.png", scaledSize: new google.maps.Size(50, 50) };
                } else if (data.TYPE === 'PILOT') {
                    icon_name = { url: "PFJ.png", scaledSize: new google.maps.Size(40, 40) };
                } else if (data.TYPE === 'LOVES') {
                    icon_name = { url: "love.png", scaledSize: new google.maps.Size(50, 50) };
                } else {
                    icon_name = { url: "fuel.png", scaledSize: new google.maps.Size(50, 50) };
                }

                flag++;

                var _content = `<p class="infobox-name">${data.TYPE} - ${data.Store}</p>
                                <p class="infobox-address">${data.ADDRESS}, ${data.StoreNum}, ${data.HIGHWAY}</p>
                                <p><table width="100%">
                                    <tr><td class="infobox-prices">IFTA Price</td><td class="infobox-prices">$${iftaprice}</td></tr>
                                    <tr><td class="infobox-prices" style="color:#2ABA66 !important;font-size:22px;">Your Price</td>
                                        <td class="infobox-prices" style="color:#2ABA66 !important;font-size:22px;">$${YourPrice}</td></tr>
                                    <tr><td class="infobox-prices">Retail Price</td><td class="infobox-prices">$${data.Retail}</td></tr>
                                </table></p>`;

                // **Marker for clustering (without label)**
                var markerNoLabel = new google.maps.Marker({
                    position: latLng,
                    icon: icon_name,
                    map: map,
                });

                // **Marker with label (stored for future but not shown now)**
                var markerWithLabel = new MarkerWithLabel({
                    position: latLng,
                    map: null, // Keep it hidden for now
                    info: _content,
                    icon: icon_name,
                    labelContent: flag + ' - ' + data.RetailPrice,
                    labelAnchor: new google.maps.Point(12, -5),
                    labelClass: "labels",
                    'Store': data.STORE_NUM,
                    'TYPE': data.TYPE,
                    'address': data.ADDRESS + ', ' + data.StoreNum + ', ' + data.HIGHWAY,
                    'yourPrice': YourPrice
                });

                // Attach info window to the no-label marker
                markerNoLabel.info = new google.maps.InfoWindow({ content: _content });

                google.maps.event.addListener(markerNoLabel, 'click', function () {
                    markerNoLabel.info.open(map, markerNoLabel);
                });

                // Push markers into respective arrays
                markersAPI.push(markerWithLabel); // Store labeled markers for future use
                markersAllAPI.push(markerWithLabel); // Keep a full list
                filter_cluster.push(markerNoLabel); // Only add non-labeled markers to clustering
            });

            // **Recreate the cluster**
            if (filter_cluster.length > 0) {
                markerCluster = new MarkerClusterer(map, filter_cluster, {
                    imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
                    gridSize: 60,
                    maxZoom: 12,
                });

                // **Zoom to fit the cluster bounds**
                map.fitBounds(bounds); // Adjust map zoom to fit all markers in view
                google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
                    if (map.getZoom() > 12) { // Set your preferred max zoom level
                        map.setZoom(7);
                    }
                });
            } 
        }

        function showDBDataOnMap(data) {
            // console.log("data from showDBDataOnMap", data);

            var json1=data;
                var items = [];
                var flag = 0;
                $.each(json1, function(key, data) {

                    var latLng = new google.maps.LatLng(data.LAT, data.LNG);
                    // Creating a marker and putting it on the map
                    var iftaprice = parseFloat(data.IFTA_Price);
                    var iftaprice1 =  iftaprice.toFixed(2);
                    var YourPrice = parseFloat(data.YourPrice);
                    var YourPrice1 =  YourPrice.toFixed(3);
                    if (data.TYPE == 'TA')
                    {
                        icon_name = {
                            url: "ta.png", // url
                            scaledSize: new google.maps.Size(50, 50), // size
                        };
                    }else if(data.TYPE == 'PILOT'){
                        icon_name = {
                            url: "PFJ.png", // url
                            scaledSize: new google.maps.Size(40, 40), // size
                        };
                    }else if(data.TYPE == 'LOVES'){
                        icon_name = {
                            url: "love.png", // url
                            scaledSize: new google.maps.Size(50, 50), // size
                        };
                    }else
                    {
                        icon_name = {
                            url: "fuel.png", // url
                            scaledSize: new google.maps.Size(50, 50), // size
                        };
                    }
                    
                    flag++;
                    
                    
                    _content = '<p class="infobox-name">'+ data.TYPE +' - '+ data.Store + '</p><p class="infobox-address">' + data.ADDRESS +', '+ data.StoreNum +', '+data.HIGHWAY+'</p><p class=""> <table width="100%"><tr><td class="infobox-prices">IFTA Price</td> <td class="infobox-prices">$'+iftaprice1 + '</td></tr><tr><td class="infobox-prices" style="color:#2ABA66 !important;font-size:22px;">Your Price</td> <td class="infobox-prices" style="color:#2ABA66 !important;font-size:22px;"> $' + YourPrice1 + '</td></tr><tr><td class="infobox-prices">Retail Price</td> <td class="infobox-prices"> $' + data.Retail + '</td></tr></table></p>';
                    markerApp = new MarkerWithLabel({
                        position: latLng,
                        map: map,
                        info: _content,
                        icon: icon_name,
                        labelContent: a+ ' - '+data.RetailPrice,
                        labelAnchor: new google.maps.Point(12, -5),
                        labelClass: "labels",
                        'Store':data.STORE_NUM,
                        'TYPE':data.TYPE,
                        'address':data.ADDRESS +', '+ data.StoreNum +', '+data.HIGHWAY,
                        'yourPrice':YourPrice1
                        
                    });
                    a++;
                    
                    markersAPI.push(markerApp);
                    markersAllAPI.push(markerApp);

                });
        }

        // function showDBDataOnMap(data) {
        //     console.log("data from showDBDataOnMap", data);

        //     // Loop through the data array to handle each item
        //     data.forEach(item => {
        //         // Create the LatLng object for each item
        //         var latLng = new google.maps.LatLng(item.LAT, item.LNG);

        //         // Set icon_name based on item.TYPE
        //         let icon_name;
        //         if (item.TYPE == 'TA') {
        //             icon_name = {
        //                 url: "ta.png", // url
        //                 scaledSize: new google.maps.Size(50, 50), // size
        //             };
        //         } else if (item.TYPE == 'PILOT') {
        //             icon_name = {
        //                 url: "PFJ.png", // url
        //                 scaledSize: new google.maps.Size(40, 40), // size
        //             };
        //         } else if (item.TYPE == 'LOVES') {
        //             icon_name = {
        //                 url: "love.png", // url
        //                 scaledSize: new google.maps.Size(50, 50), // size
        //             };
        //         } else {
        //             icon_name = {
        //                 url: "fuel.png", // url
        //                 scaledSize: new google.maps.Size(50, 50), // size
        //             };
        //         }

        //         // Add position and icon to the item
        //         item.position = latLng;
        //         item.icon = icon_name;

        //         // Push the item to markersAllAPI
        //         // markersAPI.push(item);
        //         // markersAllAPI.push(item);
        //     });
        // }


        function showFilterDBDataOnMap(data) {
            // Clear previous markers and clusters
            if (markerCluster) {
                markerCluster.clearMarkers();
            }
            clearAllMarkers();

            markersAPI = []; // Reset markers storage
            markersAllAPI = [];
            filter_cluster = [];
            labelMarkers = []; // Reset labeled markers

            var json1 = data;
            var flag = 0;

            $.each(json1, function (key, data) {
                var latLng = new google.maps.LatLng(data.LAT, data.LNG);

                var iftaprice = parseFloat(data.IFTA_Price).toFixed(2);
                var YourPrice = parseFloat(data.YourPrice).toFixed(3);

                let icon_name;
                if (data.TYPE === 'TA') {
                    icon_name = { url: "ta.png", scaledSize: new google.maps.Size(50, 50) };
                } else if (data.TYPE === 'PILOT') {
                    icon_name = { url: "PFJ.png", scaledSize: new google.maps.Size(40, 40) };
                } else if (data.TYPE === 'LOVES') {
                    icon_name = { url: "love.png", scaledSize: new google.maps.Size(50, 50) };
                } else {
                    icon_name = { url: "fuel.png", scaledSize: new google.maps.Size(50, 50) };
                }

                flag++;

                var _content = `<p class="infobox-name">${data.TYPE} - ${data.Store}</p>
                                <p class="infobox-address">${data.ADDRESS}, ${data.StoreNum}, ${data.HIGHWAY}</p>
                                <p><table width="100%">
                                    <tr><td class="infobox-prices">IFTA Price</td><td class="infobox-prices">$${iftaprice}</td></tr>
                                    <tr><td class="infobox-prices" style="color:#2ABA66 !important;font-size:22px;">Your Price</td>
                                        <td class="infobox-prices" style="color:#2ABA66 !important;font-size:22px;">$${YourPrice}</td></tr>
                                    <tr><td class="infobox-prices">Retail Price</td><td class="infobox-prices">$${data.Retail}</td></tr>
                                </table></p>`;

                // **Marker for clustering (without label)**
                var markerNoLabel = new google.maps.Marker({
                    position: latLng,
                    icon: icon_name,
                    map: map,
                });

                // **Marker with label (stored for future but not shown now)**
                var markerWithLabel = new MarkerWithLabel({
                    position: latLng,
                    map: null, // Keep it hidden for now
                    info: _content,
                    icon: icon_name,
                    labelContent: flag + ' - ' + data.RetailPrice,
                    labelAnchor: new google.maps.Point(12, -5),
                    labelClass: "labels",
                    'Store': data.STORE_NUM,
                    'TYPE': data.TYPE,
                    'address': data.ADDRESS + ', ' + data.StoreNum + ', ' + data.HIGHWAY,
                    'yourPrice': YourPrice
                });

                // Attach info window to the no-label marker
                markerNoLabel.info = new google.maps.InfoWindow({ content: _content });

                google.maps.event.addListener(markerNoLabel, 'click', function () {
                    markerNoLabel.info.open(map, markerNoLabel);
                });

                // Push markers into respective arrays
                markersAPI.push(markerWithLabel); // Store labeled markers for future use
                markersAllAPI.push(markerWithLabel); // Keep a full list
                filter_cluster.push(markerNoLabel); // Only add non-labeled markers to clustering
            });

            // **Recreate the cluster**
            if (filter_cluster.length > 0) {
                markerCluster = new MarkerClusterer(map, filter_cluster, {
                    imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
                    gridSize: 60,
                    maxZoom: 12,
                });
            }
        }

    
    </script>

    <script src="{{ asset('assets/js/custom/custom_21012025.js') }}"></script>
    <script src="{{ asset('assets/js/custom/markerwithlabel.js') }}"></script>
    <script src="{{ asset('assets/js/custom/markerclustererplus.min.js') }}"></script>

        <script>

        $.ajax({
            url:"https://ipapi.co/json/",
        	type:"GET",
        	dataType: "json",
        	success:function(response) {
        		var value1 = response.city+' '+response.region_code+','+' '+response.country_name;
        		current_state = response.region_code;
        		latlng_current = { lat: function(){ return response.latitude;}, lng: function(){ return  response.longitude;} };
        		$('#current_location').val(value1);
    		}
	    });


        var FUELMAPMARKER="N";
        let panorama;
        var poly;
        var map;
        var markerCluster;
        var bermudaTriangle;
        var markersAPI = [];
        var markersAllAPI = [];
        var Activemarkers = [];
        var topFiveLocation = [];
        var topFiveLocationDist = [];
        var triangleCoords = [];
        var routeMarkers = [];
            
        var markerscellSite = [];
        var markerCluster   = null;
        let markerArray = [];
        let countLoves = 0;
        let countTA = 0;
        let countPFJ = 0;
        const basePath = "/public/assets/images_24012025/";

        let circle = null;
        const radius = 100;
            
        var icon_name = '';
        icon_name = 'fuel.png';
        var marker = new google.maps.Marker({
            map: map,
            icon: icon_name
        });
        var i;
        var a = 1;
        var _content = [];
        var infowindow = new google.maps.InfoWindow();
        var directionDisplay;
        var directionsService = new google.maps.DirectionsService();

        var input_current = document.getElementById('current_location');
        var autocomplete_current = new google.maps.places.Autocomplete(input_current);
        console.log(autocomplete_current.getPlace());

        const circle_place = autocomplete_current.getPlace();

                        var input_pickup = document.getElementById('pickup_location');
        var autocomplete_pickup = new google.maps.places.Autocomplete(input_pickup);
        var latlng_pickup = '';
                 
        var pickup_state = '';
        
        var input_delivery = document.getElementById('delivery_location');
        var autocomplete_delivery = new google.maps.places.Autocomplete(input_delivery);


            
        var latlng_delivery = '';
                var delivery_state = '';
                    
        var exta_stops=[];
        var exta_stops_lat=[];
        var exta_stops_long=[];
        
        google.maps.event.addDomListener(window, 'load', initMap); 

        var trafficLayer = new google.maps.TrafficLayer();

        function initMap() {
            $(".map-container").addClass("loading");
            $("#loading").css("display", "block");
            directionsDisplay = new google.maps.DirectionsRenderer();
            map = new google.maps.Map(document.getElementById('map'), {                            
                zoom: 4,
                center: new google.maps.LatLng(parseFloat(39.8283), parseFloat(-98.5795)),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                gestureHandling: 'greedy'
            });

            document.getElementById('submit_route').addEventListener('click', function() {
                    
            <!--$(".map-page-loader").show();-->
            var x = document.getElementById("serachMenu");
                    
            <!--calculateAndDisplayRoute(directionsService, directionsDisplay);-->
            LocationArray=[];
            $('input:checkbox[name=fuel_locations]:checked').each(function(){
                LocationArray.push($(this).val());
            });
                    
            if(LocationArray.length > 0) {
                // x.style.display = "none";
                // $(".map-page-loader").show();
                // $('#loading-block').show();
                calculateAndDisplayRoute(directionsService, directionsDisplay);
            } else {
                alert('Please select at least one Fuel Locations');
                return false;
            }
        });

        callAjax('2025-05-09');
            var options = {
            types: ['(regions)'],
            componentRestrictions: {country: "us"}
        };

        trafficLayer.setMap(map);
        directionsDisplay.setMap(map); 
        setTimeout(function() {
            $(".map-container").addClass("loading");
            $("#loading").css("display", "block");
            displayAllMarkers();
            $(".map-container").removeClass("loading");
            $("#loading").css("display", "none");
        }, 3000);
        }

        let shouldAddMarkers = true;

        function displayAllMarkers() {
            // console.log("displayAllMarkers called");
            // console.log("markersAPI", markersAPI);
            // console.log("markersAllAPI", markersAllAPI);
            // $('#loading-block').show();

        if (markersAllAPI && markersAllAPI.length > 0) {
            // Clear existing markers if any
            clearAllMarkers();

            // Populate LocationArray with selected fuel locations
            LocationArray = [];
            $('input:checkbox[name=fuel_locations]:checked').each(function () {
                const value = $(this).val();
                LocationArray.push(value);
            });

            // Check if no filters are selected, display all markers
            const filterEnabled = LocationArray.length > 0;

            // Loop through all markersAllAPI items to create Google Maps markers
            for (let i = 0; i < markersAllAPI.length; i++) {
                const item = markersAllAPI[i];
                // console.log("item position", item.position);
                if (item) {
                    const markerType = item.icon.url;
                    // console.log("markerType", markerType);
                
                    if (shouldAddMarkers && (!filterEnabled || 
                        (markerType === 'love.png' && LocationArray.indexOf('LOVES') !== -1) ||
                        (markerType === 'ta.png' && LocationArray.indexOf('TA') !== -1) ||
                        (markerType === 'PFJ.png' && LocationArray.indexOf('PILOT') !== -1))) {

                        // Check for existing marker at the same position
                        let isMarkerAdded = false;
                        for (let j = 0; j < markerArray.length; j++) {
                            if (markerArray[j].getPosition().equals(item.position)) {
                                isMarkerAdded = true; // Marker already added at this position
                                break;
                            }
                        }

                        if (!isMarkerAdded) {
                            const marker = new google.maps.Marker({
                                position: item.position,
                                icon: {
                                    url: `${basePath}${markerType}`,
                                    scaledSize: new google.maps.Size(50, 50), // Adjust size for the icon
                                },
                                map: map,
                            });

                            marker.info = new google.maps.InfoWindow({
                                content: `<div><strong>${item.TYPE}</strong><br>${item.address}</div>`,
                            });

                            google.maps.event.addListener(marker, 'click', function() {
                                marker.info.open(map, marker);
                            });

                            markerArray.push(marker);
                        }
                    }
                }
            }

            // Apply clustering to the filtered markers with custom options
            if (markerArray.length > 0) {
                if (markerCluster) {
                    markerCluster.clearMarkers(); // Clear the current cluster
                }

                markerCluster = new MarkerClusterer(map, markerArray, {
                    imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
                    gridSize: 60, // Larger grid size for better spacing of clusters
                    maxZoom: 12,  // Maximum zoom level for clustering
                });
            }
            } else {
                console.log("No markers found in markersAllAPI.");
            }

            // $('#loading-block').hide();
        }

        function clearAllMarkers() {
            // console.log("clearAllMarkers called");
            if (markerCluster) {
                markerCluster.clearMarkers(); // Clear all clusters
                // console.log("MarkerCluster cleared");
            }

            // Remove each marker from the map
            for (let marker of markerArray) {
                marker.setMap(null); // Remove marker from the map
            }

            // Clear the markerArray
            markerArray = [];
            //   console.log("All markers removed from the map");
        }

        function formatDate (input) {
            var datePart = input.match(/\d+/g),
            year = datePart[0].substring(0,4), // get four digits
            month = datePart[1], day = datePart[2];
            
            return month+'/'+day+'/'+year;
        }

        var addedIndexd = 0;
        $(".add_delivery_address_btn").click(function(){
                
        var totalAddress = $(".search_destination_container > div").length;
                
        var htmlTemplate = '<div class="search__destination-region search__search-bar-container" style="display: flex;">';
            // htmlTemplate += '<div class="search-bar">';
                htmlTemplate += '<input class="form-control form-control form-control-solid extra_delivery_points" id="add_delivery_location'+addedIndexd+'" type="text" placeholder="Enter Delivery location">';
                    htmlTemplate += '<div class="search-bar__icon sprite-icon"></div>';
                        htmlTemplate += '<button class="remove-extra-address">';
                            htmlTemplate += '<svg class="bi bi-trash-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">';
                                htmlTemplate += '<path fill-rule="evenodd" d="M2.5 1a1 1 0 00-1 1v1a1 1 0 001 1H3v9a2 2 0 002 2h6a2 2 0 002-2V4h.5a1 1 0 001-1V2a1 1 0 00-1-1H10a1 1 0 00-1-1H7a1 1 0 00-1 1H2.5zm3 4a.5.5 0 01.5.5v7a.5.5 0 01-1 0v-7a.5.5 0 01.5-.5zM8 5a.5.5 0 01.5.5v7a.5.5 0 01-1 0v-7A.5.5 0 018 5zm3 .5a.5.5 0 00-1 0v7a.5.5 0 001 0v-7z" clip-rule="evenodd"/>';
                            htmlTemplate += '</svg>';
                        htmlTemplate += '</button>';
                        htmlTemplate += '<div class="search-bar__icon-logo sprite-icon"></div>';
                        htmlTemplate += '<div class="search-bar__clear-button __clear-button">';
                            htmlTemplate += '<div class="clear-sprite-icon sprite-icon"></div>';
                        htmlTemplate += '</div>';
                        // htmlTemplate += '<div class="search-bar__results-region __results-region">';
                        //     htmlTemplate += '<ul class="search-results-collection"></ul>';
                        // htmlTemplate += '</div>';
                    // htmlTemplate += '</div>';
                    htmlTemplate += '<script>';
                    htmlTemplate += 'var add_input_delivery'+addedIndexd+' = document.getElementById("add_delivery_location'+addedIndexd+'");';
                    htmlTemplate += 'new google.maps.places.Autocomplete( add_input_delivery'+addedIndexd+' )';
                    htmlTemplate += '<\/script>';
                htmlTemplate += '</div>';

                if( totalAddress <= 5 ){
                    $(".search_destination_container").append( htmlTemplate );
                    addedIndexd++;
                }
        });

        $("input[name=fuel_locations]").click(function(){
            displayAllMarkers();
            console.log( triangleCoords );
            console.log('dfdf5');
            if(triangleCoords.length > 0) 
                {
                     //alert(triangleCoords.length);
                    // $(".map-page-loader").show();
                    LocationArray=[];
                    $('input:checkbox[name=fuel_locations]:checked').each(function(){
                        LocationArray.push($(this).val());
                    });
                    topFiveLocation=[];
                    topFiveLocationDist=[];
                     var j= 1;
                    $('#tbl_top_5_locations_body').html(null);
                    console.log(LocationArray.length);
                    if(LocationArray.length > 0) {
                        var cascadiaFault = new google.maps.Polyline({
                             path: triangleCoords
                         });
                         cascadiaFault.setMap(null);
                        for (i = 0; i < markersFUELAPI.length; i++) {
                        if( markersFUELAPI[i] ) {
                                markersFUELAPI[i].setMap(null);
                                if(google.maps.geometry.poly.isLocationOnEdge(markersFUELAPI[i].getPosition(), cascadiaFault, 0.01) == true && (markersFUELAPI[i].icon.url == 'fuel.png' || markersFUELAPI[i].icon.url == 'ta.png'  || markersFUELAPI[i].icon.url == 'PFJ.png' || markersFUELAPI[i].icon.url == 'love.png'|| markersFUELAPI[i].icon.url == 'SappBros.png' || markersFUELAPI[i].icon.url == 'ambest.png')) 
                                {
                                    if(markersFUELAPI[i].icon.url == 'love.png' ) {
                                        if(LocationArray.indexOf('LOVES') == '-1'){
                                            markersFUELAPI[i].setMap(map);
                                            markersFUELAPI[i].setVisible(false);
                                            continue;
                                        }
                                    }
                                    if(markersFUELAPI[i].icon.url == 'ta.png' ) {
                                        if(LocationArray.indexOf('TA') == '-1'){
                                            markersFUELAPI[i].setMap(map);
                                            markersFUELAPI[i].setVisible(false);
                                            continue;
                                        }
                                    }
                                    if(markersFUELAPI[i].icon.url == 'PFJ.png' ) {
                                        if(LocationArray.indexOf('PILOT') == '-1'){
                                            markersFUELAPI[i].setMap(map);
                                            markersFUELAPI[i].setVisible(false);
                                            continue;
                                        }
                                    }
                                    if(markersFUELAPI[i].icon.url == 'SappBros.png' ) {
                                        if(LocationArray.indexOf('SAPP') == '-1'){
                                            markersFUELAPI[i].setMap(map);
                                            markersFUELAPI[i].setVisible(false);
                                            continue;
                                        }
                                    }
                                    if(markersFUELAPI[i].icon.url == 'ambest.png' ) {
                                        if(LocationArray.indexOf('AMBEST') == '-1'){
                                            markersFUELAPI[i].setMap(map);
                                            markersFUELAPI[i].setVisible(false);
                                            continue;
                                        }
                                    }
                                    var lat_current1 = latlng_current.lat();
                                    var lng_current1 = latlng_current.lng();
                                    var distmiles=distancemiles(lat_current1,lng_current1,markersFUELAPI[i].position.lat(),markersFUELAPI[i].position.lng());
                                    
                                    Lblcontant = markersFUELAPI[i].labelContent.split('-');
                                    
                                    markerNumber=$.trim(Lblcontant[0].match(/\d+/));
                                    lblPrice='';
                                    if (typeof Lblcontant[1]  !== 'undefined'){
                                        lblPrice=Lblcontant[1];
                                    }
                                    lblPrice = parseFloat(lblPrice).toFixed(3);
                                    var radius_selected = parseInt($.trim($("#radius").val()) * 1609);
                                    var _kCord = new google.maps.LatLng(markersFUELAPI[i].position.lat(), markersFUELAPI[i].position.lng());
                                    var _pCord = new google.maps.LatLng(lat_current1, lng_current1);
                                    
                                    if (google.maps.geometry.spherical.computeDistanceBetween(_kCord, _pCord) <= radius_selected) {
                                        if(topFiveLocationDist.length <= 8) {
                                            p='<p>'+ markersFUELAPI[i].TYPE +' - '+ markersFUELAPI[i].Store + '<br>' + markersFUELAPI[i].address +'</p>';
                                    
                                            tr='<tr><td>'+p+'</td><td><a href=# data-id='+i+' onclick=myClick(this);><b style=color:green>'+'#'+j+' - '+lblPrice+'</b></a></td></tr>';
                                            $('#tbl_top_5_locations_body_nears').append(tr);
                                            topFiveLocationDist.push(markersFUELAPI[i]);
                                        }
                                    }
                                    
                                    if(topFiveLocation.length <= 8) {
                                        p='<p>'+ markersFUELAPI[i].TYPE +' - '+ markersFUELAPI[i].Store + '<br>' + markersFUELAPI[i].address +'</p>';
                                        tr='<tr><td>'+p+'</td><td><a href=# data-id='+i+' onclick=myClickNew(this);><b style=color:green>'+'#'+j+' - '+lblPrice+'</b></a></td></tr>';
                                        $('#tbl_top_5_locations_body').append(tr);
                                        topFiveLocation[j]=markersFUELAPI[i];
                                    }
                                    markersFUELAPI[i].set('labelContent', '#'+j+' - '+lblPrice);
                                    markersFUELAPI[i].setMap(map);
                                    markersFUELAPI[i].setVisible(true);
                                    j++;
                                
                             } else {
                                 continue;
                             }
                        }
                    }
                    }
                    // $(".map-page-loader").hide();
                    // $('#loading-block').hide();
                }
        });

        autocomplete_delivery.addListener('place_changed', function() {
          
            infowindow.close();
            marker.setVisible(false);
            var place = autocomplete_delivery.getPlace();
            console.log("place", place);
            if (!place.geometry) {
                // User entered the name of a Place that was not suggested and
                // pressed the Enter key, or the Place Details request failed.
                window.alert("No details available for input: '" + place.name + "'");
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
                latlng_delivery = place.geometry.location;
                var address = place.formatted_address;
                var value = address.split(",");
                count = value.length;
                delivery_state = value[count - 2];
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17); // Why 17? Because it looks good.
            }
            marker.setPosition(place.geometry.location);
            marker.setVisible(true);
        });

        

        autocomplete_current.addListener('place_changed', function() {
            infowindow.close();
            marker.setVisible(false);
            var place = autocomplete_current.getPlace();
            console.log(place);
                
            if (!place.geometry) {
                // User entered the name of a Place that was not suggested and
                // pressed the Enter key, or the Place Details request failed.
                window.alert("No details available for input: '" + place.name + "'");
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
                latlng_current = place.geometry.location;
                var address_current = place.formatted_address;
                var value_current = address_current.split(",");
                count = value_current.length;
                current_state = value_current[count - 2];
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17); // Why 17? Because it looks good.
            }
        });

        autocomplete_pickup.addListener('place_changed', function() {
            infowindow.close();
            marker.setVisible(false);
            var place = autocomplete_pickup.getPlace();

            if (!place.geometry) {
                // User entered the name of a Place that was not suggested and
                // pressed the Enter key, or the Place Details request failed.
                window.alert("No details available for input: '" + place.name + "'");
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
                latlng_pickup = place.geometry.location;
                var address_pickup = place.formatted_address;
                var value_pickup = address_pickup.split(",");
                count_pickup = value_pickup.length;
                pickup_state = value_pickup[count_pickup - 2];
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17); // Why 17? Because it looks good.
            }

        });

        function clearRouteMarkers() {
            for (var i = 0; i < routeMarkers.length; i++) {
                routeMarkers[i].setMap(null);
            }
            routeMarkers = []; // Reset the array
        }


        function createOrUpdateCircle(map, location, radius) {
            if (circle) {
                // If a circle exists, remove it from the map
                circle.setMap(null);
            }

            // Convert miles to meters
            const radiusInMeters = radius * 1609;

            // Define circle options
            const circleOptions = {
                map: map,
                radius: radiusInMeters,
                fillColor: '#013220', // Green
                fillOpacity: 0.3,
                strokeColor: '#000',
                strokeWeight: 4,
            };

            // Create a new circle
            circle = new google.maps.Circle(circleOptions);

            // Set the circle's center to the provided location (LatLng object)
            if (location) {
                circle.setCenter(location); // Use the LatLng object directly
            }
        }

        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
                $(".map-container").addClass("loading");
                $("#loading").css("display", "block");
                // $("#loading").css("display", "block");
                clearAllMarkers();
                shouldAddMarkers = false; 
                
                
                //showAllMarkers();
                <!--if (bermudaTriangle){-->
                <!--    bermudaTriangle.setMap(null);-->
                <!--}-->
                var waypts = [];
                var checkboxArray = document.getElementById('pickup_location');
                waypts.push({
                    location: checkboxArray.value,
                    stopover: true
                });
                
                $(".search_destination_container .extra_delivery_points").each(function(){
                    
                    waypts.push({
                        location: $(this).val(),
                        stopover: true
                    });
                    
                });
        
                directionsDisplay.setPanel(document.getElementById("directions_panel"));
                directionsService.route({
                    origin: document.getElementById('current_location').value,
                    destination: document.getElementById('delivery_location').value,
                    waypoints: waypts,
                    optimizeWaypoints: true,
                    travelMode: 'DRIVING',
                    unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL
                }, function(response, status) {
                    if (status === 'OK') {
                        directionsDisplay.setDirections(response);
                        
                    
                        var polyline1 = new google.maps.Polyline({
                    		path: [],
                    		strokeColor: '#FF0000',
                    		strokeWeight: 3
                    	});
    
                       
                        var directionResult = response;
                        var myRoute = directionResult.routes[0]; //.legs[0];
                        var originLocation = myRoute.legs[0].start_location;

                        // Define a radius for the circle (in miles)
                        const radius = 200;

                        // Create circles at origin and destination
                        createOrUpdateCircle(map, originLocation, radius);

                        var overview_path = response.routes[0].overview_path;

                         var cascadiaFault = new google.maps.Polyline({
                             path: overview_path
                         });
                        
                        //console.log(myRoute);
                        var totalDistance = 0;
                        var totalDuration = 0;
                        if (myRoute.legs != null) {
                            for (var i = 0; i < myRoute.legs.length; i++) {
                                if (myRoute.legs[i].steps != null){
                                    for (var j = 0; j < myRoute.legs[i].steps.length; j++) {
                                        let polyline = polyline_decode(myRoute.legs[i].steps[j].polyline.points);
                                         var nextSegment = myRoute.legs[i].steps[j].path;
                                         //console.log(nextSegment+'nextSegment');
                                        // console.log(polyline+'polyline');
                                        for (var k = 0; k < polyline.length; k++) {
                                            triangleCoords.push({lat: polyline[k].latitude, lng: polyline[k].longitude}); 
                                        }
                                        
                                        for (l=0;l<nextSegment.length;l++) {
                                          polyline1.getPath().push(nextSegment[l]);
                                          //bounds.extend(nextSegment[l]);
                                        }
                                    }
                                }
                                totalDistance += myRoute.legs[i].distance.value;
                                totalDuration += myRoute.legs[i].duration.value;
                            }
                            var totalDistance_miles=totalDistance*0.000621371;
                            //alert(totalDistance);
                            //alert(totalDistance_miles);
                           // console.log(totalDistance+'----'+totalDistance_miles);
                            
                            //addstopmarker(polyline1.GetPointAtDistance(rest_meters),"9.5km","9.5km");
                            
                            var restmarkers=parseInt(totalDistance_miles/500);
                            //alert(restmarkers);
                            for (m=1;m<restmarkers;m++) {
                                var rest_meters=500*1609.344*m;
                                //makeMarker(polyline1.GetPointAtDistance(rest_meters), "Rest.png", "Rest Place", map);
                                // makeMarker(polyline1.GetPointAtDistance(rest_meters), "/public/assets/images_24012025/icons8-break-64.png", "Rest/Break Place", map);
                            }
                           // makeMarker(polyline1.GetPointAtDistance(rest_meters), "Rest.png", "Rest Place", map);
                            
                        }
                        
                         
                         
                        //var leg = response.routes[0].legs[0];
                       
                        
                        <!--bermudaTriangle = new google.maps.Polygon({-->
                        <!--    paths: triangleCoords,-->
                        <!--    strokeColor: '#FF0000',-->
                        <!--    strokeOpacity: 0.8,-->
                        <!--    strokeWeight: 3,-->
                        <!--    fillColor: '#FF0000',-->
                        <!--    fillOpacity: 0.35-->
                        <!--});-->
                        <!--bermudaTriangle.setMap(map);-->
                        
                        
                        <!-- edited code to remove inner fill and route stroke line start -->
                         cascadiaFault.setMap(null);
                         //markerCluster.clearMarkers();
                        <!-- edited code to remove inner fill and route stroke line ends--> 

                        var bounds = new google.maps.LatLngBounds( response.routes[0].legs[1].start_location, response.routes[0].legs[1].end_location);
                        var j= 1;
                        //Activemarkers = [];
                        topFiveLocation=[];
                        topFiveLocationDist=[];
                        $('#tbl_top_5_locations_body').html(null);
                        $('#tbl_top_5_locations_body_nears').html(null);
                        
                        countLoves = 0;
                        countTA = 0;
                        countPFJ = 0;
                        for (i = 0; i < markersAPI.length; i++) {
                            if( markersAPI[i] ){
                                if (google.maps.geometry.poly.isLocationOnEdge(markersAPI[i].getPosition(), cascadiaFault, 0.10) === false) {
                                    markersAPI[i].setMap(null); 
                                    continue;
                                }
                                

                                
                                <!-- edited code to show marker on edges only - polyline -->
                                if (google.maps.geometry.poly.isLocationOnEdge(markersAPI[i].getPosition(), cascadiaFault, 0.10) == true) {
                                    // console.log("markersAPI[i].icon.url", markersAPI[i].icon.url);
                                    if((markersAPI[i].icon.url == 'fuel.png' || markersAPI[i].icon.url == 'ta.png'  || markersAPI[i].icon.url == 'PFJ.png' || markersAPI[i].icon.url == 'love.png'))
                                    { 
                                        
                                        if(markersAPI[i].icon.url == 'love.png' ) {
                                            if(LocationArray.indexOf('LOVES') == '-1'){
                                                markersAPI[i].setMap(map);
                                                markersAPI[i].setVisible(false);
                                                continue;
                                            }
                                        }
                                        if(markersAPI[i].icon.url == 'ta.png' ) {
                                            //markersAPI[i].icon.url = "https://fuel.tmdashboard.com/public/assets/images_24012025/ta.png";
                                            if(LocationArray.indexOf('TA') == '-1'){
                                                markersAPI[i].setMap(map);
                                                markersAPI[i].setVisible(false);
                                                continue;
                                            }
                                        }
                                        if(markersAPI[i].icon.url == 'PFJ.png' ) {
                                            //markersAPI[i].icon.url = "https://fuel.tmdashboard.com/public/assets/images_24012025/PFJ.png";
                                            if(LocationArray.indexOf('PILOT') == '-1'){
                                                markersAPI[i].setMap(map);
                                                markersAPI[i].setVisible(false);
                                                continue;
                                            }
                                        }
                                        if(markersAPI[i].icon.url == 'SappBros.png' ) {
                                            if(LocationArray.indexOf('SAPP') == '-1'){
                                                markersAPI[i].setMap(map);
                                                markersAPI[i].setVisible(false);
                                                continue;
                                            }
                                        }
                                        if(markersAPI[i].icon.url == 'ambest.png' ) {
                                            if(LocationArray.indexOf('AMBEST') == '-1'){
                                                markersAPI[i].setMap(map);
                                                markersAPI[i].setVisible(false);
                                                continue;
                                            }
                                        }
                                        
                                        
                                        var lat_current1 = latlng_current.lat();
                                        var lng_current1 = latlng_current.lng();
                                        //console.log(markersAPI[i]);
                                        //$(".map-container").css("height", "400px");
                                        //$("#fuel-direction").css("display", "block");
                                        $("#filter-parking-category").css("display", "block");
                                        //$("#top5Checkbox").prop("checked", true).trigger("change");
                                        $(".map-container").removeClass("loading");
                                        $("#loading").css("display", "none");
                                        var distmiles=distancemiles(lat_current1,lng_current1,markersAPI[i].position.lat(),markersAPI[i].position.lng());
                                        //if(distmiles > 500){
                                             Lblcontant = markersAPI[i].labelContent.split('-');
                                             lblPrice='';
                                             if (typeof Lblcontant[1]  !== 'undefined'){
                                                lblPrice=Lblcontant[1];
                                             }
                                             
                                            
                                            lblPrice = parseFloat(lblPrice).toFixed(3);
                                            var radius_selected = parseInt($.trim($("#radius").val()) * 1609);
                                            
                                            var _kCord = new google.maps.LatLng(markersAPI[i].position.lat(), markersAPI[i].position.lng());
                                            var _pCord = new google.maps.LatLng(lat_current1, lng_current1);
                                            
                                            if (google.maps.geometry.spherical.computeDistanceBetween(_kCord, _pCord) <= radius_selected) {
                                                if(topFiveLocationDist.length <= 8) {
                                                    pdist='<p>'+ markersAPI[i].TYPE +' - '+ markersAPI[i].Store + '<br>' + markersAPI[i].address +'</p>';
                                            
                                                    trdist='<tr><td>'+pdist+'</td><td><a  href=# data-id='+i+' onclick=myClick(this);><b style=color:green>'+'#'+j+' - '+lblPrice+'<b></a></td></tr>';
                                                    $('#tbl_top_5_locations_body_nears').append(trdist);
                                                    topFiveLocationDist.push(markersAPI[i]);
                                                }
                                            }
                                            // console.log("test", markersAPI[i]);
                                            routeMarkers.push(markersAPI[i]);
                                            // if (circle) {
                                            //     // If a circle exists, remove it from the map
                                            //     circle.setMap(null);
                                            // }

                                            // // Convert miles to meters
                                            // const radiusInMeters = radius * 1609;

                                            // // Define circle options
                                            // const circleOptions = {
                                            //     map: map,
                                            //     radius: radiusInMeters,
                                            //     fillColor: '#013220', // Green
                                            //     fillOpacity: 0.3,
                                            //     strokeColor: '#000',
                                            //     strokeWeight: 4,
                                            // };

                                            // // Create a new circle
                                            // circle = new google.maps.Circle(circleOptions);

                                            // // Set the circle's center to the first selected location
                                            // if (selectedLocations.length > 0) {
                                            //     circle.setCenter(selectedLocations[0].latLng);
                                            // }
                                                                                        
                                            if(topFiveLocation.length <= 8) {
                                                p='<p>'+ markersAPI[i].TYPE +' - '+ markersAPI[i].Store + '<br>' + markersAPI[i].address +'</p>';
                                            
                                                tr='<tr><td>'+p+'</td><td><a href=# data-id='+i+' onclick=myClick(this);><b style=color:green>'+'#'+j+' - '+lblPrice+'</b></a></td></tr>';
                                                $('#tbl_top_5_locations_body').append(tr);
                                                topFiveLocation[j]=markersAPI[i];
                                            }
                                             
                                             
                                             
                                             markersAPI[i].set('labelContent', '#'+j+' - '+lblPrice);
                                             //markersAPI[i].set('labelContent', distmiles);
                                             markersAPI[i].setMap(map);
                                             Activemarkers.push(markersAPI[i]);
                                             j++;
                                        /*}else{
                                            markersAPI[i].setMap(null);
                                        }*/
                                         
                                        
                                    }
                                    else{
                                        markersAPI[i].set('labelContent', '');
                                        markersAPI[i].setMap(map);
                                        Activemarkers.push(markersAPI[i]);
                                    }
                                 }else{
                                     markersAPI[i].setMap(null);
                               
                                 }
                                 
                                 if (google.maps.geometry.poly.isLocationOnEdge(markersAPI[i].getPosition(), cascadiaFault, 0.10) == true) {
                                    if(markersAPI[i].icon.url == 'TPR.png')
                                    {
                                        markersAPI[i].set('labelContent', '');
                                        markersAPI[i].setMap(map);
                                        Activemarkers.push(markersAPI[i]);
                                    }
                                    
                                    if(markersAPI[i].icon.url == 'walmart.png')
                                    {
                                        //console.log(markersAPI[i].icon.url);
                                        markersAPI[i].set('labelContent', '');
                                        markersAPI[i].setMap(map);
                                        
                                        Activemarkers.push(markersAPI[i]);
                                    }
                                 }
                                 
                                 <!-- edited code to show marker on edges only - polyline -->
                            }
                        }
//                        markerCluster = new MarkerClusterer(map, markersAPI);

                        directionsDisplay.setDirections(response);
                        var trafficLayer = new google.maps.TrafficLayer();
                        trafficLayer.setMap(map);

                        // var route = response.routes[0];
                        // var summaryPanel = document.getElementById('directions_panel');
                        // summaryPanel.innerHTML = '';
                        
                        // for (var i = 0; i < route.legs.length; i++) {
                        //     var routeSegment = i + 1;
                        //     summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
                        //     '</b><br>';
                        //     summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
                        //     summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
                        //     summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
                        // }
                        $(".main__parkings-region").show();
                        $(".main__parkings-region .parkings").addClass('parkings--stretched');
                        $(".main__parkings-region .parkings").addClass('has-suggested-parkings');
                        $(".parkings__scroll-container").css("max-height", window.innerHeight - 550 + "px");
                         computeTotalDistance(response);
                        
                       
                        <!-- irshad code starts -->    
                        directionsDisplay.setMap(map);
                        directionsDisplay.setOptions( { suppressMarkers: true } );
                        var my_route = response.routes[0];
                        //  console.log(my_route.legs);
                        for (var i = 0; i < my_route.legs.length; i++) {
                               //addDraggableDirectionsMarker(my_route.legs[i].start_location, i+1, map, markers, directionsService, directionsDisplay);
                                  // var infocontent=my_route.legs[i].start_address;
                            makeMarker(my_route.legs[i].start_location, icons.start, my_route.legs[i].start_address, map);
                        }        
                         //  var infocontent=my_route.legs[i].start_address;
                        makeMarker(my_route.legs[i-1].end_location, icons.end, my_route.legs[i-1].end_address, map);
                        clearAllMarkers();
                        // $('#loading-block').hide();
                        $(".map-container").removeClass("loading");
                        $("#loading").css("display", "none");
                         <!-- irshad code ends -->   

                    } else {
                        window.alert('Directions request failed due to ' + status);
                        // $(".map-page-loader").hide();
                        // $('#loading-block').hide();
                    }

                });
            }

            if (!google.maps.Polygon.prototype.getBounds){
                google.maps.Polygon.prototype.getBounds = function() {
                    var bounds = new google.maps.LatLngBounds();
                    var paths = this.getPaths();
                    for (var i = 0; i < paths.getLength(); i++) {
                        var path = paths.getAt(i);
                        for (var j = 0; j < path.getLength(); j++) {
                            bounds.extend(path.getAt(j));
                        }
                    }
                    return bounds;
                }
            }

            var icons = {
                    start: new google.maps.MarkerImage(
                    // URL
                    'https://admin.drivercheckcall.com/www/DCCIcons/tred.png',
                    // (width,height)
                    new google.maps.Size(49, 60),
                    // The origin point (x,y)
                    new google.maps.Point(0, 0),
                    // The anchor point (x,y)
                    new google.maps.Point(24, 60)),
                    end: new google.maps.MarkerImage(
                    // URL
                    'https://admin.drivercheckcall.com/www/DCCIcons/torange.png',
                    // (width,height)
                    new google.maps.Size(49, 60),
                    // The origin point (x,y)
                    new google.maps.Point(0, 0),
                    // The anchor point (x,y)
                    new google.maps.Point(22, 32))
                };

            function makeMarker(position, icon, title, map) {
            
            // var api_key = 'bAi7rOqWKVpdYitLLUyY';
            // var api_code = 'x1-ynfN4WH73Cid2igSC2w';
            
            // var url1 = 'https://weather.cit.api.here.com/weather/1.0/report.json?product=observation&name='+title+'&app_id=' + api_key + '&app_code='+api_code;
            
            //     $.ajax({
            //         url: url1,
            //         type: 'GET', 
            //         success: function(result){
            //            //var w1=JSON.parse(result);    
            //             var myweather=result.observations.location[0].observation[0];
            //             var temp1=(myweather.temperature * 9/5) + 32;

            //             var infocontent=temp1.toFixed(2)+'°F ('+myweather.temperatureDesc+') <img src="'+myweather.iconLink+'"/>';
                    
                        var marker1 = new google.maps.Marker({
                            position: position,
                            map: map,
                            icon: icon,
                            title: title,
                            clickable: true
                        });
                        
                        // marker1.info = new google.maps.InfoWindow({
                        //   content: '<b>'+title+' : '+infocontent+'</b>'
                        // });
                        
                        google.maps.event.addListener(marker1, 'click', function() {
                          marker1.info.open(map, marker1);
                        });
                        
                        markersAPI.push(marker1);
                        
                }
            //     });

            // }

            function showAjaxTable(){
              
                if ($('#miles_pickup') != ""){

                }
                var data_form = $('#fuel_form').serialize();
                
                var current_location = $("#current_location").val();
                var pickup_location = $("#pickup_location").val();
                var delivery_location = $("#delivery_location").val();
                
                var lat_current = latlng_current.lat();
                var lng_current = latlng_current.lng();
                var lat_pickup = latlng_pickup.lat();
                var lng_pickup = latlng_pickup.lng();
                var lat_delivery = latlng_delivery.lat();
                var lng_delivery = latlng_delivery.lng();
                var truck_id = $("#truck_id").val();
                var driver_id = $("#driver_id").val();
                var effective_date = $("#effective_date").val();
                var id="";
                
                var len_extra_point = $('.search_destination_container .extra_delivery_points').length;
                var params = '&delivery_location='+delivery_location+'&pickup_location='+pickup_location+'&current_location='+current_location+'&lat_current=' + lat_current + '&lng_current=' + lng_current + '&lat_pickup=' + lat_pickup + '&lng_pickup=' + lng_pickup + '&lat_delivery=' + lat_delivery + '&lng_delivery=' + lng_delivery + '&delivery_state=' + delivery_state + '&current_state=' + current_state + '&pickup_state=' + pickup_state + '&len='+len_extra_point + '&truck_id=' + truck_id + '&driver_id=' + driver_id + '&effective_date=' + effective_date+'&id='+id;
                
                var z= 0;
                $(".search_destination_container .extra_delivery_points").each(function(){
                    //params+='&extra_delivery_points[]='+$(this).val();
                   
                   /* edited code */
                   extraId=$(this).data("id")
                    var str = $(this).val().split(",");
                    count = str.length;
                    pickup_extra = str[count - 2];
                    params+='&extra_delivery_points[]='+$(this).val()+'&extra_points'+z+'='+pickup_extra;
                    
                    z++;
                    /* edited code */
                    
                });
                
                $(".fuel_locations:checked").each(function(){
                   /* edited code */
                    params+='&chain[]='+$(this).val();
                    /* edited code */
                });
                
                var data = data_form + params;
                
                $.ajax({
                    url: "https://tms.tmdashboard.com/iCommune2/print-fueltable.php",
                    type: 'POST', 
                    data, 
                    success: function(result){
                        $("#print_fule_table").html(result);
                    }
                });
                
                $.ajax({
                    url: "https://tms.tmdashboard.com/iCommune2/fueltable2.php?is_appp=Y",
                    type: 'POST', 
                    data, 
                    success: function(result){
                        $("#fule_table").html(result);
                        
                        $.ajax({
                                url: "getrouteid_tms.php",
                                type: 'GET', 
                                success:function(resDataNew){
                                    history.replaceState(null, document.querySelector("title").innerText, window.location.pathname+"?id="+resDataNew);
                                    $("#sharing_link").val(window.location.pathname+"?id="+resDataNew);
                                }
                            });
                            
                            
                        //alert(result);
                        if (result != ''){

                            var current_gallons = parseInt($('#current_gallons').html());

                            var place = autocomplete_current.getPlace();
                            if (typeof place!="undefined") {

                                window.alert("No details available for input: '" + place.name + "'");
                                return;
                            }

                            var radius_selected = parseInt($.trim($("#radius").val()) * 1609);
                            var a = $.trim($("#hos_miles").html());
                            calcpay = a.toString().split(".")[0]

                            var brokerpay = parseInt(calcpay * 1609);
                            var fuel_tank = parseFloat($.trim($("#fule_tank_radius").html()) * 1609);

                            //marker.setPosition(place.geometry.location);
                            if(typeof place!="undefined"){
                                marker.setPosition(place.geometry.location);
                            } else {
                                myLatlng = new google.maps.LatLng(latlng_current.lat(),latlng_current.lng());
                                marker.setPosition(myLatlng);
                            }
                            
                            var circle = new google.maps.Circle({
                                map: map,
                                radius: radius_selected,
                                fillColor: '#013220', //green
                                fillOpacity: 0.3,
                                strokeColor: "#000",
                                strokeWeight: 4

                            });
                            circle.bindTo('center', marker, 'position');

                            var circle1 = new google.maps.Circle({
                                map: map,
                                radius: fuel_tank,
                                fillColor: '#ff8c00', //orange
                                fillOpacity: 0.5,
                                strokeColor: "#FFF",
                                strokeWeight: 2 
                            });
                            circle1.bindTo('center', marker, 'position');


                            var circle2 = new google.maps.Circle({
                                map: map,
                                radius: brokerpay,
                                fillColor: '#FF6600', //red
                                fillOpacity: 0.5,
                                strokeColor: "#FFF",
                                strokeWeight: 1

                            });
                            // circle2.bindTo('center', marker, 'position');
                        }    
                    }
                });
            }
            function showAllMarkers(){
//                for (i = 0; i < markers.length; i++) {markers[i].setMap(map); }
            }

            function computeTotalDistance(result) {
                showAjaxTable();
                var totalDist = 0;
                var totalTime = 0;
                var myroute = result.routes[0];

                console.log("myroute", myroute);
               
                for (i = 0; i < myroute.legs.length; i++) {
                    if (i == 0){
                        pickup_data = myroute.legs[i].distance.value;
                        pickup_data = parseFloat(myroute.legs[i].distance.value / 1000 * 0.621371).toFixed(2);
                        document.getElementById('miles_pickup').value = pickup_data;
                    }else{
                        waypoing_data = myroute.legs[i].distance.value;
                        waypoing_data = parseFloat(myroute.legs[i].distance.value / 1000 * 0.621371).toFixed(2);
                        document.getElementById('miles_waypoint').value = waypoing_data;
                    }

                    totalDist += myroute.legs[i].distance.value;
                    totalTime += myroute.legs[i].duration.value;
                }

                totalDist = totalDist / 1000;

                document.getElementById("total").innerHTML = "<strong>Total distance is: </strong>" + parseFloat(totalDist * 0.621371).toFixed(2) + " m<br><strong>Total time is: </strong>" + (totalTime / 60 / 60).toFixed(2) + " hours";
                document.getElementById('total_miles').value = parseFloat(totalDist * 0.621371).toFixed(2);
               
            }


            function polyline_decode(encoded){

                var points = [];
                var index = 0, len = encoded.length;
                var lat = 0, lng = 0;

                while (index < len) {
                    var b, shift = 0, result = 0;

                    do {
                        b = encoded.charAt(index++).charCodeAt(0) - 63;
                        result |= (b & 0x1f) << shift;
                        shift += 5;
                    } while (b >= 0x20);

                    var dlat = ((result & 1) != 0 ? ~(result >> 1) : (result >> 1));
                    lat += dlat;
                    shift = 0;
                    result = 0;

                    do {
                        b = encoded.charAt(index++).charCodeAt(0) - 63;
                        result |= (b & 0x1f) << shift;
                        shift += 5;
                    } while (b >= 0x20);

                    var dlng = ((result & 1) != 0 ? ~(result >> 1) : (result >> 1));
                    lng += dlng;
                    points.push({latitude:(lat / 1E5), longitude:(lng / 1E5)})
                }

                return points

            }

            function distancemiles(lat1, lon1, lat2, lon2, unit) {
                	if ((lat1 == lat2) && (lon1 == lon2)) {
                		return 0;
                	}
                	else {
                		var radlat1 = Math.PI * lat1/180;
                		var radlat2 = Math.PI * lat2/180;
                		var theta = lon1-lon2;
                		var radtheta = Math.PI * theta/180;
                		var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
                		if (dist > 1) {
                			dist = 1;
                		}
                		dist = Math.acos(dist);
                		dist = dist * 180/Math.PI;
                		dist = dist * 60 * 1.1515;
                		if (unit=="K") { dist = dist * 1.609344 }
                		if (unit=="N") { dist = dist * 0.8684 }
                		return dist;
                	}
            }

            google.maps.Polygon.prototype.GetPointAtDistance = function(metres) {
              // some awkward special cases
              if (metres == 0) return this.getPath().getAt(0);
              if (metres < 0) return null;
              if (this.getPath().getLength() < 2) return null;
              var dist=0;
              var olddist=0;
              for (var i=1; (i < this.getPath().getLength() && dist < metres); i++) {
                olddist = dist;
                dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i-1));
              }
              if (dist < metres) {
                return null;
              }
              var p1= this.getPath().getAt(i-2);
              var p2= this.getPath().getAt(i-1);
              var m = (metres-olddist)/(dist-olddist);
              return new google.maps.LatLng( p1.lat() + (p2.lat()-p1.lat())*m, p1.lng() + (p2.lng()-p1.lng())*m);
            }
            google.maps.LatLng.prototype.distanceFrom = function(newLatLng) {
              var EarthRadiusMeters = 6378137.0; // meters
              var lat1 = this.lat();
              var lon1 = this.lng();
              var lat2 = newLatLng.lat();
              var lon2 = newLatLng.lng();
              var dLat = (lat2-lat1) * Math.PI / 180;
              var dLon = (lon2-lon1) * Math.PI / 180;
              var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
                Math.sin(dLon/2) * Math.sin(dLon/2);
              var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
              var d = EarthRadiusMeters * c;
              return d;
            }
            google.maps.Polyline.prototype.GetPointAtDistance   = google.maps.Polygon.prototype.GetPointAtDistance;

        LocationArray=[];
        $('input:checkbox[name=fuel_locations]:checked').each(function(){
            LocationArray.push($(this).val());
        });
        if(LocationArray.length > 0) {
            var myVar = setInterval(function(){
                if(FUELMAPMARKER == "Y") {
                    // $(".map-page-loader").show();
                    calculateAndDisplayRoute(directionsService, directionsDisplay);
                    clearInterval(myVar);
                }
            }, 100);
        }
        $(document).on("click",' .search__destination-region .remove-extra-address',function(){               
            $(this).parents(".search__destination-region").remove();
            return false;
        });

        $("#broker_rate_address_bar").keyup(function(){
            var thisValue = $(this).val();
            $("#brokerpay").val( thisValue );
        });

        $("#brokerpay").keyup(function(){
            var thisValue = $(this).val();
            $("#broker_rate_address_bar").val( thisValue );
        });

        $(".filter-category .filter-cat").click(function(){
            $(this).toggleClass('isactive');

            for (i = 0; i < markersAPI.length; i++) {
                //console.log((markersAPI[i].icon.url));
                if((markersAPI[i].icon.url == 'weigh_station.png'))
                {
                    if($(".filter-category .filter-collection__filter-weight-station").hasClass('isactive') ){
                        markersAPI[i].setVisible(true);
                    }else{
                        markersAPI[i].setVisible(false);
                    }
                }
                if((markersAPI[i].icon.url == 'TPR.png'))
                {
                    if($(".filter-category .filter-collection__filter-item").hasClass('isactive') ){
                        markersAPI[i].setVisible(true);
                    }else{
                        markersAPI[i].setVisible(false);
                    }
                }
                    
                if((markersAPI[i].icon.url == 'CAS.png'))
                {
                    if($(".filter-category .filter-collection__filter-casino-item").hasClass('isactive') ){
                        markersAPI[i].setVisible(true);
                    }else{
                        markersAPI[i].setVisible(false);
                    }
                }
                    
                if((markersAPI[i].icon.url == 'CDL.png'))
                {
                    if($(".filter-category .filter-collection__filter-cdl-physical").hasClass('isactive') ){
                        markersAPI[i].setVisible(true);
                    }else{
                        markersAPI[i].setVisible(false);
                    }
                }
                if((markersAPI[i].icon.url == 'DOT.png'))
                {
                    if($(".filter-category .filter-collection__filter-dot-drug").hasClass('isactive') ){
                        markersAPI[i].setVisible(true);
                    }else{
                        markersAPI[i].setVisible(false);
                    }
                }
                    
                if((markersAPI[i].icon.url == 'walmart.png'))
                {
                    if($(".filter-category .filter-collection__filter-walmart").hasClass('isactive') ){
                        markersAPI[i].setVisible(true);
                    }else{
                        markersAPI[i].setVisible(false);
                    }
                }
                
            }

        });



    function initAutocomplete() {
        const input = document.getElementById('location');
        const autocomplete = new google.maps.places.Autocomplete(input, {
            types: ['geocode'],
            componentRestrictions: { country: 'us' }
        });

        autocomplete.addListener('place_changed', function () {
           
            infowindow.close();
            marker.setVisible(false);
            const place = autocomplete.getPlace();
            if (place.geometry.viewport) {            
                         map.fitBounds(place.geometry.viewport);
                         latlng_delivery = place.geometry.location;
                         var address = place.formatted_address;
                         var value = address.split(",");
                         count = value.length;
                         delivery_state = value[count - 2];
                     } else {
                         map.setCenter(place.geometry.location);
                         map.setZoom(17); // Why 17? Because it looks good.
                     }
                     marker.setPosition(place.geometry.location);
                     marker.setVisible(true);
         
            let city = '';
            let state = '';

            // Loop through address components
            place.address_components.forEach(component => {
                const types = component.types;
                if (types.includes('locality')) {
                    city = component.long_name;
                }
                if (types.includes('administrative_area_level_1')) {
                    state = component.short_name; // or use long_name if needed
                }
            });

            document.getElementById('location_city').value = city;
            document.getElementById('location_state').value = state;
           

            $('#carrierpricing-table').on('preXhr.dt', function(e, setting, data) {            
                  data.city = city;
                  data.state = state;                
              }).DataTable().ajax.reload();
         
        });
    }

    document.addEventListener("DOMContentLoaded", initAutocomplete);
    const formElement = document.getElementById('print_fule_table');
    var cache_width = formElement.width(); 
    function createPDF() {  
                        getCanvas().then(function (canvas) {  
                            var  
                             img = canvas.toDataURL("image/png"),  
                             doc = new jsPDF({  
                                 unit: 'px',  
                                 format: 'a4'  
                             });  
                            doc.addImage(img, 'JPEG', 20, 20);  
                            doc.save('parking-fuel.pdf');  
                            formElement.width(cache_width);  
                        });  
                    } 

    function getCanvas() {
    
    var a4 = [595.28, 841.89];

    if (!formElement || !document.body.contains(formElement)) {
        return Promise.reject(new Error("Element #print_fule_table is not in the DOM"));
    }

    // Wrap in jQuery before calling width()
    var cache_width = $(formElement).width();

    // Set styles for accurate rendering
    $(formElement).width((a4[0] * 1.33333) - 80).css('max-width', 'none');

    return html2canvas(formElement, {
        imageTimeout: 2000,
        useCORS: true,
        scale: 2,
    });
}


function sendmail() {
    var email = $("#sharing_link_email").val();

    if (!email) {
        alert('Please Enter Email Address');
        return;
    }
    $('#sendMailLoader').removeClass('d-none');
    var lat_current = latlng_current  ? latlng_current.lat() : '';
    var lng_current = latlng_current  ? latlng_current.lng() : '';

    var lat_pickup = latlng_pickup  ? latlng_pickup.lat() : '';
    var lng_pickup = latlng_pickup  ? latlng_pickup.lng() : '';

    var lat_delivery = latlng_delivery ? latlng_delivery.lat() : '';
    var lng_delivery = latlng_delivery  ? latlng_delivery.lng() : '';

    var truck_id = "";
    var driver_id = "";
    var effective_date = "";
    var id = "";
    var len_extra_point = $('.search_destination_container .extra_delivery_points').length;

    console.log("delivery_state", delivery_state)
    console.log("current_state", current_state)
    console.log("pickup_state", pickup_state)

    var params = '&delivery_location=' + delivery_location +
        '&pickup_location=' + pickup_location +
        '&current_location=' + current_location +
        '&lat_current=' + lat_current +
        '&lng_current=' + lng_current +
        '&lat_pickup=' + lat_pickup +
        '&lng_pickup=' + lng_pickup +
        '&lat_delivery=' + lat_delivery +
        '&lng_delivery=' + lng_delivery +
        '&delivery_state=' + delivery_state +
        '&current_state=' + current_state +
        '&pickup_state=' + pickup_state +
        '&len=' + len_extra_point +
        '&truck_id=' + truck_id +
        '&driver_id=' + driver_id +
        '&effective_date=' + effective_date +
        '&id=' + id;

    var z = 0;

    $(".search_destination_container .extra_delivery_points").each(function () {
        var extraId = $(this).data("id");
        var str = $(this).val().split(",");
        var count = str.length;
        var pickup_extra = str[count - 2];

        params += '&extra_delivery_points_lat[]=' + $("#add_delivery_location_lat" + extraId).val();
        params += '&extra_delivery_points_lng[]=' + $("#add_delivery_location_lng" + extraId).val();
        params += '&extra_delivery_points[]=' + $(this).val();
        params += '&extra_points' + z + '=' + pickup_extra;
        z++;
    });

    var top5html = escape($('#tbl_top_5_locations_body_nears').html());
    var top5Nearhtml = escape($('#tbl_top_5_locations_body').html());

    getCanvas()
        .then(function (canvas) {
            var img = canvas.toDataURL("image/png");

            $.ajax({
                url: "https://portal2.aitrans.co/sendroutemail_tms.php?" + params,
                type: "post",
                data: {
                    img: img,
                    email: $("#sharing_link_email").val(),
                    link: $("#sharing_link").val(),
                    top5html: top5html,
                    top5Nearhtml: top5Nearhtml
                },
                success: function () {
                    $(".tmscloud-sharing-btn-close").click();
                    alert("Email sent successfully");
                    $('#moneyCodeModal').modal('hide');
                },
                error: function () {
                    alert("Failed to send email.");
                },
                complete: function () {                   
                    $('#sendMailLoader').addClass('d-none');
                }
            });
        })
        .catch(function (err) {
            alert("Failed to generate image: " + err.message);
            console.error(err);
        });
}


    $(document).ready(function () {
   
    // $('#sendmailform').on('submit', function (e) {
    //     e.preventDefault();

    //     var lat_current = pickup_location.lat();
    //     var lng_current = latlng_current.lng();
    //     var lat_pickup = latlng_pickup.lat();
    //     var lng_pickup = latlng_pickup.lng();
    //     var lat_delivery = latlng_delivery.lat();
    //     var lng_delivery = latlng_delivery.lng();

    //     if(email_address != ''){

    //     }


        // let form = $('#sendmailform').serialize();
        // $.ajax({
        //     type: "POST",
        //     url: "{{route('carrierPricing.sendMail')}}",
        //     data: form,
        //     success: function (response) {
        //         // Success logic here
        //         alert('Mail sent successfully!');
        //         $('#sendmailform')[0].reset();
        //         // Optionally close modal
        //         $('.modal').modal('hide');
        //     },
        //     error: function (xhr) {
        //         // Handle validation errors or failure
        //         let errors = xhr.responseJSON.errors;
        //         if (errors && errors.share_email) {
        //             alert(errors.share_email[0]);
        //         } else {
        //             alert('Something went wrong.');
        //         }
        //     }
        // });
      
    
    // });
});
function downloadDataTable(option, datatableId) {
           
           switch (option) {
               case 'excel':
                   $('#' + datatableId).DataTable().buttons('.buttons-excel').trigger();
                   break;
               case 'csv':
                   $('#' + datatableId).DataTable().buttons('.buttons-csv').trigger();
                   break;
               case 'print':
                   $('#' + datatableId).DataTable().buttons('.buttons-print').trigger();
                   break;
               case 'reset':
                   $('#' + datatableId).DataTable().buttons('.buttons-reset').trigger();
                   break;
               case 'reload':
                   $('#' + datatableId).DataTable().buttons('.buttons-reload').trigger();
                   break;
               default:
                   break;
           }
       }
    </script>
@endsection()