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

        .gm-style-iw-chr {
            height: 24px !important;
            min-height: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            background: #ffffff !important;
            box-shadow: none !important;
            border: none !important;
            display: flex !important;
            align-items: center;
            justify-content: flex-end;
        }

        .gm-style-iw-chr button span {
            margin-top: 17px !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">
      
                    <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 Interstates</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">Network</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 Network</option>
                                        <option value="LOVES">LOVES</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="">Price Ranges</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="" colspan="10" id = 'total'></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
          <div class="card mb-5 mt-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>
                    <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://app.tmdashboard.com/price-search.php" class="btn btn-primary btn-sm me-5"
                            target="_blank">Mobile search</a> -->
                        <a href="https://tms.tmdashboard.com/iCommune2/app_mobile_new_2025_back_07_04_25.php" class="btn btn-primary btn-sm">Horizontal Layout</a>
                        <a href="https://tms.tmdashboard.com/iCommune2/app_mobile_new_2025_back_07_04_25.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">
                                     <h4 class="fw-bold me-5 m-3" align="center" style="color:red;">
                                            FUEL PRICES SUBJECT TO CHANGE
                                            </h4>
                                    <small>This price feed is provided to you as a decision tool and is not meant to be a guarantee of exact pricing. The savings shown are the difference between the retail cash price and the customer price available to you. All savings shown on the daily price feed are approximate and based on data received from multiple sources including third party truck stops, and may consequently include information that was erroneous at the time of transmission from the third party.</small>
                                    <div class="table-responsive p-5">
                                       <div class="mb-15">
                                       

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

                                        
                                       </div> 
                                        <h4 class="fw-bold me-5 m-3" align="center" style="color:red;">
                                            FUEL PRICES SUBJECT TO CHANGE
                                            </h4>
                                        <small>This price feed is provided to you as a decision tool and is not meant to be a guarantee of exact pricing. The savings shown are the difference between the retail cash price and the customer price available to you. All savings shown on the daily price feed are approximate and based on data received from multiple sources including third party truck stops, and may consequently include information that was erroneous at the time of transmission from the third party.</small>    
                                    </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">
                                <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 d-none">
                                                <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) {
                //console.log(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();
                }
            });

            $('#carrierpricing-table').on('xhr.dt', function (e, settings, json, xhr) {
               
                if (json.totals) {
                let rebate2_total_all_count = json.totals.rebate2_total_all_count ?? 0;
                let rebate2_total_pilot_count = json.totals.rebate2_total_pilot_count ?? 0;
                let rebate2_total_loves_count = json.totals.rebate2_total_loves_count ?? 0;
                let rebate2_total_ta_count = json.totals.rebate2_total_ta_count ?? 0;

                let maxRetail = json.totals.maxRetail ?? 0;
                let minRetail = json.totals.minRetail ?? 0;
                let avgRetail = json.totals.avgRetail ?? 0;

                let maxdisc = json.totals.maxdisc ?? 0;
                let mindisc = json.totals.mindisc ?? 0;
                let avgdisc = json.totals.avgdisc ?? 0;

                // Set in the footer
                //let invTotal = setInterval(() => {
                  $("#total").html('');
                    if($('#total').length){
                       $("#total").html('Total : '+rebate2_total_all_count+' (TA: '+rebate2_total_ta_count+', PILOT: '+rebate2_total_pilot_count+', LOVES: '+rebate2_total_loves_count+')');
                       $("#retailRow").html('Low: ' + minRetail + '<br>High: ' + maxRetail + '<br>Avg: ' + avgRetail);
                       $("#discRow").html('Low: '+mindisc+' <br>High: '+maxdisc+'<br>Avg: '+avgdisc); 
                        //clearInterval(invTotal);
                    } else {
                        console.log("not found total_invoice_amount");
                    }

                //}, 100); 

            }
           
            });

            $('#carrierpricing-table').on('draw.dt', function () {
                const json = $('#carrierpricing-table').DataTable().ajax.json();

               if (json.totals) {
                let rebate2_total_all_count = json.totals.rebate2_total_all_count ?? 0;
                let rebate2_total_pilot_count = json.totals.rebate2_total_pilot_count ?? 0;
                let rebate2_total_loves_count = json.totals.rebate2_total_loves_count ?? 0;
                let rebate2_total_ta_count = json.totals.rebate2_total_ta_count ?? 0;

                let maxRetail = json.totals.maxRetail ?? 0;
                let minRetail = json.totals.minRetail ?? 0;
                let avgRetail = json.totals.avgRetail ?? 0;

                let maxdisc = json.totals.maxdisc ?? 0;
                let mindisc = json.totals.mindisc ?? 0;
                let avgdisc = json.totals.avgdisc ?? 0;

                // Set in the footer
                //let invTotal = setInterval(() => {
                 $("#total").html('');
                    if($('#total').length){
                       $("#total").html('TA: '+rebate2_total_ta_count+' <br>  PILOT: '+rebate2_total_pilot_count+'<br>  LOVES: '+rebate2_total_loves_count+'<br>Total : '+rebate2_total_all_count);
                         $("#retailRow").html('Low: ' + minRetail + '<br>High: ' + maxRetail + '<br>Avg: ' + avgRetail);
                       $("#discRow").html('Low: '+mindisc+' <br>High: '+maxdisc+'<br>Avg: '+avgdisc); 
                        //clearInterval(invTotal);
                    } else {
                        console.log("not found total_invoice_amount");
                    }

                //}, 100); 

            }
                
            });

            //     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;
                    console.log(data);
                    $("#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+', LOVES: ' + data[0].rebate2_total_loves_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) {
                //console.log(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.OOP).toFixed(3);
                var retailsPrice = parseFloat(data.RetailPrice).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: "https://fuel.tmdashboard.com/public/assets/images_24012025/love.png", scaledSize: new google.maps.Size(50, 50) };
                } else {
                    icon_name = { url: "fuel.png", scaledSize: new google.maps.Size(50, 50) };
                }

                flag++;
                const formattedDate = convertYmdToMdy(data.EDATE);/*new Date(data.EDATE).toLocaleDateString('en-US', {
                    month: '2-digit',
                    day: '2-digit',
                    year: 'numeric'
                });*/
                //console.log(formattedDate);
                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><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><td class="infobox-prices">Date</td><td class="infobox-prices">$${formattedDate}</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",
                    'StoreNumber':data.STORE_NUM,
                    'Store': data.STORE_NAME,
                    'TYPE': data.TYPE,
                    'address': data.ADDRESS + ', ' + data.STORE_NUM + ', ' + data.HIGHWAY,
                    'yourPrice': YourPrice,
                    'discount': parseFloat(data.rebate2).toFixed(3),
                    'retailPrice':retailsPrice,
                    'date':data.EDATE,
                    // 'Date': data.Date,
                    // 'State': data.STATE,
                    // 'Highway': data.HIGHWAY
                });

                // 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.OOP);
                    var YourPrice1 =  YourPrice.toFixed(3);
                    var retailPrice = parseFloat(data.RetailPrice);
                    var retailPrice1 = retailPrice.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'){
                        //   alert('test2');
                        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++;
                    
                    const formattedDate = convertYmdToMdy(data.EDATE);
                    /*new Date(data.EDATE).toLocaleDateString('en-US', {
                                month: '2-digit',
                                day: '2-digit',
                                year: 'numeric'
                                });*/
                    _content = '<p class="infobox-name">'+ data.formattedDate +' - '+ 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",
                        'StoreNumber':data.STORE_NUM,
                        'Store':data.STORE_NAME,
                        'TYPE':data.TYPE,
                        'address':data.ADDRESS +', '+ data.STORE_NUM +', '+data.HIGHWAY,
                        'yourPrice':YourPrice1,
                        'discount': parseFloat(data.rebate2).toFixed(3),
                        'retailPrice':retailPrice1,
                        'date':data.EDATE,
                    });
                    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.OOP).toFixed(3);
                var retailsPrice = parseFloat(data.RetailPrice).toFixed(3);
                var discountPrice = parseFloat(data.rebate2).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: "https://fuel.tmdashboard.com/public/assets/images_24012025/love.png", scaledSize: new google.maps.Size(50, 50) };
                } else {
                    icon_name = { url: "fuel.png", scaledSize: new google.maps.Size(50, 50) };
                }

                flag++;
    
                const formattedDate = convertYmdToMdy(data.EDATE);
                /*new Date(data.EDATE).toLocaleDateString('en-US', {
                                month: '2-digit',
                                day: '2-digit',
                                year: 'numeric'
                                });*/
                var _content = `<div style="color:#000; font-family: Arial, sans-serif; line-height: 1.5; padding: 5px 0;">
                                        <div>
                                            <strong>Store:</strong> ${data.STORE_NAME} (#${data.STORE_NUM}) - ${data.TYPE}
                                        </div>
                                        <div><strong>Retail Price:</strong> <span style="color:#333;">$${retailsPrice}</span>&nbsp;&nbsp;<strong>Your Price:</strong> <span style="color:#2ABA66; font-weight: bold;">$${YourPrice}</span></div>
                                        <div><strong>Discount:</strong> <span style="color:#2ABA66; font-weight: bold;">$${discountPrice}</span>&nbsp;&nbsp;<strong>Date:</strong> ${formattedDate}</div>
                                        <div> ${data.ADDRESS}, ${data.STORE_NUM}, ${data.HIGHWAY}</div>
                                    </div>`;

                // **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",
                    'StoreNumber':data.STORE_NUM,
                    'Store': data.STORE_NAME,
                    'TYPE': data.TYPE,
                    'address': data.ADDRESS + ', ' + data.STORE_NUM + ', ' + data.HIGHWAY,
                    'yourPrice': YourPrice,
                    'discount': parseFloat(data.rebate2).toFixed(3),
                    'retailPrice':retailsPrice,
                    'date':data.EDATE,
                });

                // 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('2026-01-08');
            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", item);
                // 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,
                            });
                                const formattedDate = convertYmdToMdy(item.date);
                                /*new Date(item.date).toLocaleDateString('en-US', {
                                month: '2-digit',
                                day: '2-digit',
                                year: 'numeric'
                                });*/
                            marker.info = new google.maps.InfoWindow({
                                content: `
                                    <div style="color:#000; font-family: Arial, sans-serif; line-height: 1.5; padding: 5px 0;">
                                        <div>
                                            <strong>Store:</strong> ${item.Store} (#${item.StoreNumber}) - ${item.TYPE}
                                        </div>
                                        <div><strong>Retail Price:</strong> <span style="color:#333;">$${item.retailPrice}</span>&nbsp;&nbsp;<strong>Your Price:</strong> <span style="color:#2ABA66; font-weight: bold;">$${item.yourPrice}</span></div>
                                        <div><strong>Discount:</strong> <span style="color:#2ABA66; font-weight: bold;">$${item.discount}</span>&nbsp;&nbsp;<strong>Date:</strong> ${formattedDate}</div>
                                        <div>${item.address}</div>
                                        
                                    </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' ) {
                                            markersAPI[i].icon.url = "https://fuel.tmdashboard.com/public/assets/images_24012025/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;
           }
       }



      function convertYmdToMdy(dateStr) {
        if (!dateStr) return '';
        const parts = dateStr.split('-');
        if (parts.length === 3) {
            const [year, month, day] = parts;
            return `${month}/${day}/${year}`;
        }
        return dateStr; // return as-is if format unexpected
    }
    </script>
@endsection()