@extends('layouts.master')
@section('title', 'Station : List')
@section('content')
<style>
    .sync-data-btn {
    background: linear-gradient(135deg, #002C3E 0%, #001f2e 100%) !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0,44,62,0.3) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sync-data-btn:hover {
    background: linear-gradient(135deg, #001f2e 0%, #001122 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0,44,62,0.4) !important;
}

.sync-data-btn:active {
    transform: translateY(0px) !important;
}
/* Modal Box */
.price-modal-box{
    max-width: 420px;
    width: 90%;
    background: #fff;
    border-radius: 28px;
    padding: 35px 30px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.15);
}

/* Title */
.price-modal-box .titlemsg{
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 30px;
}

/* Input Wrapper */
.price-input-wrapper{
    margin-bottom: 30px;
}

.price-input-wrapper label{
    display: block;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #333;
}



.price-field:focus-within{
    border-color: #ff4b5c;
    box-shadow: 0 0 0 4px rgba(255,75,92,0.12);
    background: #fff;
}

/* Currency Icon */
.currency-icon{
    font-size: 26px;
    font-weight: 700;
    color: #ff4b5c;
    margin-right: 10px;
}

/* Input */
.price-input{
    border: none !important;
    background: transparent !important;
    width: 100%;
    height: 100%;
    font-size: 22px;
    font-weight: 600;
    color: #222;
    outline: none !important;
    box-shadow: none !important;
}

.price-input::placeholder{
    color: #b0b0b0;
    font-weight: 500;
}

/* Buttons */
.btn-group-custom{
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 10px;
}

/* Common Button */
.common-btn{
    min-width: 150px;
    height: 58px;
    border: none;
    border-radius: 40px;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

/* Save Button */
.save-btn{
    background: linear-gradient(135deg, #ff4b5c, #002b5b);
}

/* Cancel Button */
.cancel-btn{
    background: linear-gradient(135deg, #d9465f, #002b5b);
}

/* Hover */
.common-btn:hover{
    transform: translateY(-2px);
    opacity: 0.95;
}
/* Price Row */
.price-row{
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 30px;
}

/* Label */
.price-row label{
    min-width: 80px;
    font-size: 26px;
    font-weight: 700;
    color: #222;
    margin: 0;
}

/* Input Box */
.price-field{
    display: flex;
    align-items: center;
    background: #f7f7f9;
    border: 2px solid #ff5b6b;
    border-radius: 18px;
    padding: 0 18px;
    transition: 0.3s;
}

.price-field:focus-within{
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255,91,107,0.12);
}

/* Currency */
.currency-icon{
    font-size: 28px;
    font-weight: 700;
    color: #ff4b5c;
    margin-right: 12px;
}

/* Input */
.price-input{
    width: 100%;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 22px;
    font-weight: 600;
    color: #222;
}

.price-input::placeholder{
    color: #b8b8b8;
}
</style>
    <div class="middle-part-wrap location-list-page-wrap list_view">
        <div class="leadership-list-wrap location-list-wrap">
            <div class="leadership-top-header">
                <h3>Stations</h3>
                <div class="debug-buttons" style="margin-top: 10px;">
                                        <button class="sync-data-btn" onclick="showSyncConfirm()" 
                                                        >
                        Sync Prices
                    </button>
                                    </div>
            </div>
            <div id="errormsg" class="text-center animated fadeIn" style="display: none; color:red">
                <strong class="errormsg"></strong>
            </div>
            <div id="successMsg" class="text-center animated fadeIn" style="display: none; color:green">
                <strong class="successMsg"></strong>
            </div>
            <div class="leadership-list-data scroll">
                <ul class="listRecordsUl">
                    <div class="card">
                        <div class="card-body">
                            <table id="list" class="table table-striped table-bordered viewdatatable dt-responsive nowrap" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Name</th>
                                        <th>Company</th>
                                        <th>Address</th>
                                        <th>Latitude</th>
                                        <th>Longitude</th>
                                        <th>B95</th>
                                        <th>Diesel</th>
                                        <th>Last Updated</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </ul>
            </div>
        </div>
    </div>

    <div class="middle-part-wrap location-list-page-wrap details_view" style="display:none">
        <div class="leadership-list-wrap location-list-wrap">
            <div class="leadership-top-header">
                <h3>Stations Details</h3>
                <a href="javascript::void()" class="backBtn common-btn">Back</a>
            </div>
            <div class="leadership-list-data scroll">
                <ul class="listRecordsUl">
                    <div class="card">
                        <div class="card-body">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-12 order-md-1">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="name"><strong>Name : </strong></label>
                                                <span name="name"></span>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="company"><strong>Company : </strong></label>
                                                <span name="company"></span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="latitude"><strong>Latitude : </strong></label>
                                                <span name="latitude"></span>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="longitude"><strong>Longitude : </strong></label>
                                                <span name="longitude"></span>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="address"><strong>Adresse : </strong></label>
                                            <span name="address"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row other_details">
                                    
                                    <div class="d-flex align-items-center mb-3 gap-4">
                                        <label for="dognapent" class="mr-2"><strong>Døgnåpent : </strong></label>
                                        <div class="dognapent-switch">
                                            <p class="mb-0" name="dognapent">Yes</p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 order-md-2 mb-4">
                                        <div class="week-day week-day-list">
                                            <ul class="list-group mb-3">
                                                <li class="list-group-item d-flex align-items-center gap-4 lh-condensed custom-time">
                                                    <div class="week-day-name">
                                                        <h6 class="my-0"><strong>Days</strong></h6>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <h6 class="mb-0"><strong>Start Time</strong></h6>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <h6 class="mb-0"><strong>End Time</strong></h6>
                                                    </div>
                                                </li>
                                                <li class="list-group-item d-flex align-items-center gap-4 lh-condensed fully-time">
                                                    <div class="week-day-name">
                                                        <h6 class="my-0"><strong>Days</strong></h6>
                                                    </div>
                                                    <label class="hour_text_lable p-0">24 Hours</label>
                                                </li>
                                                <li class="list-group-item d-flex align-items-center gap-4 lh-condensed">
                                                    <div class="week-day-name">
                                                        <h6 class="my-0"><strong>Mandag : </strong></h6>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <span name="startMonday"></span>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <span name="endMonday"></span>
                                                    </div>
                                                    <label class="hour_text_lable p-0">24 Hours</label>
                                                </li>
                                                <li class="list-group-item d-flex align-items-center gap-4 lh-condensed">
                                                    <div class="week-day-name">
                                                        <h6 class="my-0"><strong>Tirsdag : </strong></h6>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <span name="startTuesday"></span>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <span name="endTuesday"></span>
                                                    </div>
                                                    <label class="hour_text_lable p-0">24 Hours</label>
                                                </li>
                                                <li class="list-group-item d-flex align-items-center gap-4 lh-condensed">
                                                    <div class="week-day-name">
                                                        <h6 class="my-0"><strong>Onsdag : </strong></h6>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <span name="startWednesday"></span>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <span name="endWednesday"></span>
                                                    </div>
                                                    <label class="hour_text_lable p-0">24 Hours</label>
                                                </li>
                                                <li class="list-group-item d-flex align-items-center gap-4 lh-condensed">
                                                    <div class="week-day-name">
                                                        <h6 class="my-0"><strong>Torsdag : </strong></h6>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <span name="startThursday"></span>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <span name="endThursday"></span>
                                                    </div>
                                                    <label class="hour_text_lable p-0">24 Hours</label>
                                                </li>
                                                <li class="list-group-item d-flex align-items-center gap-4 lh-condensed">
                                                    <div class="week-day-name">
                                                        <h6 class="my-0"><strong>Fredag : </strong></h6>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <span name="startFriday"></span>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <span name="endFriday"></span>
                                                    </div>
                                                    <label class="hour_text_lable p-0">24 Hours</label>
                                                </li>
                                                <li class="list-group-item d-flex align-items-center gap-4 lh-condensed">
                                                    <div class="week-day-name">
                                                        <h6 class="my-0"><strong>Lørdag : </strong></h6>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <span name="startSaturday"></span>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <span name="endSaturday"></span>
                                                    </div>
                                                    <label class="hour_text_lable p-0">24 Hours</label>
                                                </li>
                                                <li class="list-group-item d-flex align-items-center gap-4 lh-condensed">
                                                    <div class="week-day-name">
                                                        <h6 class="my-0"><strong>Søndag : </strong></h6>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <span name="startSunday"></span>
                                                    </div>
                                                    <div class="start-day-time mb-0">
                                                        <span name="endSunday"></span>
                                                    </div>
                                                    <label class="hour_text_lable p-0">24 Hours</label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-md-6 order-md-2 mb-4">
                                        <div class="station-services station-service-list">
                                            <ul class="list-group mb-3">
                                                <li class="list-group-item lh-condensed">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div class="service-title d-flex align-items-center">
                                                            <div class="service-icon">
                                                                <img src="{{ asset('images/InfoToalet.png') }}">
                                                            </div>
                                                            <label for="Kundetoaletter" class="mr-2"><strong>Kundetoaletter</strong></label>
                                                        </div>
                                                        <span name="Kundetoaletter"></span>
                                                    </div>
                                                </li>
                                                <li class="list-group-item lh-condensed">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div class="service-title d-flex align-items-center">
                                                            <div class="service-icon">
                                                                <img src="{{ asset('images/InfoHandi.png') }}">
                                                            </div>
                                                            <label for="Handikaptoalett" class="mr-2"><strong>Handikaptoalett</strong></label>
                                                        </div>
                                                        <span name="Handikaptoalett"></span>
                                                    </div>
                                                </li>
                                                <li class="list-group-item lh-condensed">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div class="service-title d-flex align-items-center">
                                                            <div class="service-icon">
                                                                <img src="{{ asset('images/InfoMaskin.png') }}">
                                                            </div>
                                                            <label for="Bilvask_Maskin" class="mr-2"><strong>Bilvask(Maskin)</strong></label>
                                                        </div>
                                                        <span name="Bilvask_Maskin"></span>
                                                    </div>
                                                </li>
                                                <li class="list-group-item lh-condensed">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div class="service-title d-flex align-items-center">
                                                            <div class="service-icon">
                                                                <img src="{{ asset('images/InfoSelvask.png') }}">
                                                            </div>
                                                            <label for="Bilvask_Selvvask" class="mr-2"><strong>Bilvask(Selvvask)</strong></label>
                                                        </div>
                                                        <span name="Bilvask_Selvvask"></span>
                                                    </div>
                                                </li>
                                                <li class="list-group-item lh-condensed">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div class="service-title d-flex align-items-center">
                                                            <div class="service-icon">
                                                                <img src="{{ asset('images/InfoGass-1.png') }}">
                                                            </div>
                                                            <label for="Gass" class="mr-2"><strong>Gass</strong></label>
                                                        </div>
                                                        <span name="Gass"></span>
                                                    </div>
                                                </li>
                                                <li class="list-group-item lh-condensed">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div class="service-title d-flex align-items-center">
                                                            <div class="service-icon">
                                                                <img src="{{ asset('images/InfoEliectric.png') }}">
                                                            </div>
                                                            <label for="Landestasjoner" class="mr-2"><strong>Landestasjoner</strong></label>
                                                        </div>
                                                        <span name="Landestasjoner"></span>
                                                    </div>
                                                </li>
                                                <li class="list-group-item lh-condensed">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div class="service-title d-flex align-items-center">
                                                            <div class="service-icon">
                                                                <img src="{{ asset('images/InfoTilheng.png') }}">
                                                            </div>
                                                            <label for="Tilhengerleie" class="mr-2"><strong>Tilhengerleie</strong></label>
                                                        </div>
                                                        <span name="Tilhengerleie"></span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </ul>
            </div>
        </div>
    </div>
    <div class="middle-part-wrap location-list-page-wrap update_view" style="display:none">
        <div class="leadership-list-wrap location-list-wrap">
            <div class="leadership-top-header">
                <h3>Stations Detail Update</h3>
                <a href="javascript::void()" class="backBtn common-btn">Back</a>
            </div>
            <div class="leadership-list-data scroll">
                <ul class="listRecordsUl">
                    <div class="card">
                        <div class="card-body">
                            <div class="container">
                                <form class="needs-validation" id="stationForm" novalidate>
                                    @csrf
                                    <input type="hidden" name="station_id" value="">
                                    <div class="row">
                                        <div class="col-md-12 order-md-1">
                                            <div class="row">
                                                <div class="col-md-6 mb-3">
                                                    <label for="name">Name</label>
                                                    <input type="text" class="form-control" id="name" name="name" placeholder="" value="" required>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label for="company">Company</label>
                                                    <input type="text" class="form-control" id="company" name="company" placeholder="" value="" required>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6 mb-3">
                                                    <label for="latitude">Latitude</label>
                                                    <input type="text" class="form-control" id="latitude" name="latitude" placeholder="" value="" required>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label for="longitude">Longitude</label>
                                                    <input type="text" class="form-control" id="longitude" name="longitude" placeholder="" value="" required>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label for="address">Adresse</label>
                                                <textarea type="text" class="form-control" id="address" name="address" placeholder=""></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="d-flex align-items-center mb-3 gap-4">
                                            <label for="dognapent" class="mr-2">Døgnåpent</label>
                                            <div class="dognapent-switch">
                                                <input type="checkbox" id="toggle" class="toggleCheckbox" name="dognapent" />
                                                <label for="toggle" class='toggleContainer'>
                                                    <div>Yes</div>
                                                    <div>No</div>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6 order-md-2 mb-4">
                                            <div class="week-day">
                                                <ul class="list-group mb-3">
                                                    
                                                    <li class="list-group-item d-flex align-items-center gap-4 lh-condensed">
                                                        <div class="week-day-name">
                                                            <h6 class="my-0">Mandag</h6>
                                                        </div>
                                                        <div class="start-day-time">
                                                            <input type="text" name="startMonday" class="form-control timepicker" id="start-monday" placeholder="Start Time">
                                                        </div>
                                                        <div class="start-day-time">
                                                            <input type="text" name="endMonday" class="form-control timepicker" id="end-monday" placeholder="End Time">
                                                        </div>
                                                        <label class="hour_text_lable">24 Hours</label>
                                                    </li>
                                                    <li class="list-group-item d-flex align-items-center gap-4 lh-condensed">
                                                        <div class="week-day-name">
                                                            <h6 class="my-0">Tirsdag</h6>
                                                        </div>
                                                        <div class="start-day-time">
                                                            <input type="text" name="startTuesday" class="form-control timepicker" id="start-tuesday" placeholder="Start Time">
                                                        </div>
                                                        <div class="start-day-time">
                                                            <input type="text" name="endTuesday" class="form-control timepicker" id="end-tuesday" placeholder="End Time">
                                                        </div>
                                                        <label class="hour_text_lable">24 Hours</label>
                                                    </li>
                                                    <li class="list-group-item d-flex align-items-center gap-4 lh-condensed">
                                                        <div class="week-day-name">
                                                            <h6 class="my-0">Onsdag</h6>
                                                        </div>
                                                        <div class="start-day-time">
                                                            <input type="text" name="startWednesday" class="form-control timepicker" id="start-wednesday" placeholder="Start Time">
                                                        </div>
                                                        <div class="start-day-time">
                                                            <input type="text" name="endWednesday" class="form-control timepicker" id="end-wednesday" placeholder="End Time">
                                                        </div>
                                                        <label class="hour_text_lable">24 Hours</label>
                                                    </li>
                                                    <li class="list-group-item d-flex align-items-center gap-4 lh-condensed">
                                                        <div class="week-day-name">
                                                            <h6 class="my-0">Torsdag</h6>
                                                        </div>
                                                        <div class="start-day-time">
                                                            <input type="text" name="startThursday" class="form-control timepicker" id="start-thursday" placeholder="Start Time">
                                                        </div>
                                                        <div class="start-day-time">
                                                            <input type="text" name="endThursday" class="form-control timepicker" id="end-thursday" placeholder="End Time">
                                                        </div>
                                                        <label class="hour_text_lable">24 Hours</label>
                                                    </li>
                                                    <li class="list-group-item d-flex align-items-center gap-4 lh-condensed">
                                                        <div class="week-day-name">
                                                            <h6 class="my-0">Fredag</h6>
                                                        </div>
                                                        <div class="start-day-time">
                                                            <input type="text" name="startFriday" class="form-control timepicker" id="start-friday" placeholder="Start Time">
                                                        </div>
                                                        <div class="start-day-time">
                                                            <input type="text" name="endFriday" class="form-control timepicker" id="end-friday" placeholder="End Time">
                                                        </div>
                                                        <label class="hour_text_lable">24 Hours</label>
                                                    </li>
                                                    <li class="list-group-item d-flex align-items-center gap-4 lh-condensed">
                                                        <div class="week-day-name">
                                                            <h6 class="my-0">Lørdag</h6>
                                                        </div>
                                                        <div class="start-day-time">
                                                            <input type="text" name="startSaturday" class="form-control timepicker" id="start-saturday" placeholder="Start Time">
                                                        </div>
                                                        <div class="start-day-time">
                                                            <input type="text" name="endSaturday" class="form-control timepicker" id="end-saturday" placeholder="End Time">
                                                        </div>
                                                        <label class="hour_text_lable">24 Hours</label>
                                                    </li>
                                                    <li class="list-group-item d-flex align-items-center gap-4 lh-condensed">
                                                        <div class="week-day-name">
                                                            <h6 class="my-0">Søndag</h6>
                                                        </div>
                                                        <div class="start-day-time">
                                                            <input type="text" name="startSunday" class="form-control timepicker" id="start-sunday" placeholder="Start Time">
                                                        </div>
                                                        <div class="start-day-time">
                                                            <input type="text" name="endSunday" class="form-control timepicker" id="end-sunday" placeholder="End Time">
                                                        </div>
                                                        <label class="hour_text_lable">24 Hours</label>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-md-6 order-md-2 mb-4">
                                            <div class="station-services">
                                                <ul class="list-group mb-3">
                                                    <li class="list-group-item lh-condensed">
                                                        <div class="d-flex align-items-center justify-content-between">
                                                            <div class="service-title d-flex align-items-center">
                                                                <div class="service-icon">
                                                                    <img src="{{ asset('images/InfoToalet.png') }}">
                                                                </div>
                                                                <label for="Kundetoaletter" class="mr-2">Kundetoaletter</label>
                                                            </div>
                                                            <input type="checkbox" class="form-check-input" id="Kundetoaletter" name="Kundetoaletter">
                                                        </div>
                                                    </li>
                                                    <li class="list-group-item lh-condensed">
                                                        <div class="d-flex align-items-center justify-content-between">
                                                            <div class="service-title d-flex align-items-center">
                                                                <div class="service-icon">
                                                                    <img src="{{ asset('images/InfoHandi.png') }}">
                                                                </div>
                                                                <label for="Handikaptoalett" class="mr-2">Handikaptoalett</label>
                                                            </div>
                                                            <input type="checkbox" class="form-check-input" id="Handikaptoalett" name="Handikaptoalett">
                                                        </div>
                                                    </li>
                                                    <li class="list-group-item lh-condensed">
                                                        <div class="d-flex align-items-center justify-content-between">
                                                            <div class="service-title d-flex align-items-center">
                                                                <div class="service-icon">
                                                                    <img src="{{ asset('images/InfoMaskin.png') }}">
                                                                </div>
                                                                <label for="Bilvask_Maskin" class="mr-2">Bilvask(Maskin)</label>
                                                            </div>
                                                            <input type="checkbox" class="form-check-input" id="Bilvask_Maskin" name="Bilvask_Maskin">
                                                        </div>
                                                    </li>
                                                    <li class="list-group-item lh-condensed">
                                                        <div class="d-flex align-items-center justify-content-between">
                                                            <div class="service-title d-flex align-items-center">
                                                                <div class="service-icon">
                                                                    <img src="{{ asset('images/InfoSelvask.png') }}">
                                                                </div>
                                                                <label for="Bilvask_Selvvask" class="mr-2">Bilvask(Selvvask)</label>
                                                            </div>
                                                            <input type="checkbox" class="form-check-input" id="Bilvask_Selvvask" name="Bilvask_Selvvask">
                                                        </div>
                                                    </li>
                                                    <li class="list-group-item lh-condensed">
                                                        <div class="d-flex align-items-center justify-content-between">
                                                            <div class="service-title d-flex align-items-center">
                                                                <div class="service-icon">
                                                                    <img src="{{ asset('images/InfoGass.png') }}">
                                                                </div>
                                                                <label for="Gass" class="mr-2">Gass</label>
                                                            </div>
                                                            <input type="checkbox" class="form-check-input" id="Gass" name="Gass">
                                                        </div>
                                                    </li>
                                                    <li class="list-group-item lh-condensed">
                                                        <div class="d-flex align-items-center justify-content-between">
                                                            <div class="service-title d-flex align-items-center">
                                                                <div class="service-icon">
                                                                    <img src="{{ asset('images/InfoEliectric.png') }}">
                                                                </div>
                                                                <label for="Landestasjoner" class="mr-2">Landestasjoner</label>
                                                            </div>
                                                            <input type="checkbox" class="form-check-input" id="Landestasjoner" name="Landestasjoner">
                                                        </div>
                                                    </li>
                                                    <li class="list-group-item lh-condensed">
                                                        <div class="d-flex align-items-center justify-content-between">
                                                            <div class="service-title d-flex align-items-center">
                                                                <div class="service-icon">
                                                                    <img src="{{ asset('images/InfoTilheng.png') }}">
                                                                </div>
                                                                <label for="Tilhengerleie" class="mr-2">Tilhengerleie</label>
                                                            </div>
                                                            <input type="checkbox" class="form-check-input" id="Tilhengerleie">
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="service-save-button">
                                        <button class="btn btn-primary btn-lg btn-block common-btn" type="submit">Save</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </ul>
            </div>
        </div>
    </div>
    <div class="commanpopup dltuser" style="display: none;">
        <div class="overlaybg"></div>
        <div class="main-box">
            <p class="titlemsg mt-0">Are you sure you want to <br><span class="warning_text">delete this station?</span></p>
            <button class="rejectbtn yesbtn common-btn" data-id="18">Yes</button>
            <button class="cancelbtn">Cancel</button>
        </div>
    </div>
    <div class="commanpopup syncconfirm" style="display: none;">
        <div class="overlaybg"></div>
        <div class="main-box">
            <p class="titlemsg mt-0">Are you sure you want to <br><span class="warning_text">sync prices from server?</span></p>
            <button class="syncyesbtn yesbtn common-btn">Yes</button>
            <button class="cancelbtn">Cancel</button>
        </div>
    </div>
    <div class="commanpopup price-edit-modal" style="display: none;">
        <div class="overlaybg"></div>

        <div class="main-box price-modal-box">
            <p class="titlemsg">Edit Price</p>

            <form id="priceEditForm" method="POST" action="{{ url('admin/station/savePrice') }}">
                @csrf

                <input type="hidden" id="editStationId" name="station_id" value="">
                <input type="hidden" id="editStationType" name="station_type" value="">

                <!-- Price Input -->
                <div class="price-row">
                    <label for="editPrice">Price</label>

                    <div class="price-field">
                        <span class="currency-icon">₹</span>

                        <input 
                            type="number" 
                            step="0.01"
                            id="editPrice"
                            name="price"
                            class="price-input"
                            placeholder="Enter price"
                            required
                        >
                    </div>
                </div>

                <!-- Buttons -->
                <div class="btn-group-custom">
                    <button type="submit" class="common-btn save-btn">
                        Save
                    </button>

                    <button type="button" class="cancelbtn common-btn cancel-btn">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>
    <link rel="stylesheet" type="text/css" media="screen" href="{!! asset('plugin/datatable/dataTables.bootstrap5.css') !!}">
    <script type="text/javascript" src="{!! asset('plugin/datatable/dataTables.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('plugin/datatable/dataTables.bootstrap5.js') !!}"></script>
    <!-- Bootstrap Timepicker CSS -->
    <script type="text/javascript" src="{{ asset('js/jquery.validate.min.js') }}"></script>
    <script src="{!! asset('js/popper.min.js') !!}"></script>
    <script src="{!! asset('js/dayjs.min.js') !!}"></script>
    <script src="{!! asset('js/customParseFormat.min.js') !!}"></script>
    <script src="{!! asset('js/all.min.js') !!}"></script>
    <script src="{!! asset('js/timepicker-bs4.js') !!}"></script>
    <script>

    $(document).ready(function () {
        $(".alert-success, .alert-danger").delay(5000).fadeOut();     
        $('#stationClass').addClass('active'); 
        fill_datatable();
    });
   
    function fill_datatable(){
      if ($.fn.DataTable.isDataTable('#list')) {
          $('#list').DataTable().destroy();
      }
      var table = $('#list').DataTable({
            scrollX: true,
            lengthMenu: [
                [10, 25, 50],
                [10, 25, 50],
            ],
            "order": [[1, "desc"]],
            "columnDefs": [
                  {
                        "targets": [],
                        "visible": false,
                        "searchable": false
                    },
                {
                    "targets": [],
                    "searchable": false
                }
            ],
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "{{url('admin/station/getList')}}",
                "dataType": "json",
                "type": "POST",
                "data": {'_token': "{{csrf_token()}}"}
            },
            "columns": [
                {"data": "id", "sortable": false},
                {"data": "name", "className": "text-center"},
                {"data": "company", "className": "text-center"},
                {"data": "address",  "className": "text-center"},
                {"data": "latitude"},
                {"data": "longitude", "className": "text-center"},
                {"data": "b95", "className": "text-center", "render": function(data, type, row) {
                    if (data === 'N/A') {
                        return '<span class="price-editable" data-station-id="' + row.id + '" data-station-type="B95" data-current-price="' + data + '" style="cursor: pointer; color: #dc3545;">' + data + '</span>';
                    }
                    return data;
                }},
                {"data": "diesel", "className": "text-center", "render": function(data, type, row) {
                    if (data === 'N/A') {
                        return '<span class="price-editable" data-station-id="' + row.id + '" data-station-type="D" data-current-price="' + data + '" style="cursor: pointer; color: #dc3545;">' + data + '</span>';
                    }
                    return data;
                }},
                {"data": "lastupdated"},
                {"data": "action", "sortable": false, "className": "text-center"}
            ],
      });
    }
    $(document).on('click', '.show-details', function(){
        var details = JSON.parse($(this).attr('data-details'));
        var id = $(this).attr('data-id');
        $('.list_view, .update_view').hide();
        $('.details_view').show();
        if(details.name){
            $("span[name=name]").text(details.name);
        }
        if(details.company){
            $("span[name=company]").text(details.company);
        }
        if(details.address){
            $("span[name=address]").text(details.address);
        }
        if(details.latitude){
            $("span[name=latitude]").text(details.latitude);
        }
        if(details.longitude){
            $("span[name=longitude]").text(details.longitude);
        }
        if(details.station_id){
            $("span[name=station_id]").text(details.station_id);
        }
        
        if(details.info){
            $('.other_details').show();
            var info = JSON.parse(details.info)
            if(info.Døgnåpent){
                $(".week-day ul li .start-day-time").attr("style", "display: none !important;");
                $('.list-group-item label.hour_text_lable').show();
                $(".custom-time").attr("style", "display: none !important;");
                $(".fully-time").attr("style", "display: flex !important;");
                $("p[name=dognapent]").text("Yes");
            }else{
                $('.list-group-item label.hour_text_lable').hide();
                $(".week-day ul li .start-day-time").attr("style", "display: flex !important;");
                $(".fully-time").attr("style", "display: none !important;");
                $(".custom-time").attr("style", "display: flex !important;");
                $("p[name=dognapent]").text("No");
            }
            if(info.Kundetoaletter){
                $("span[name=Kundetoaletter]").text("Yes");
            }else{
                $("span[name=Kundetoaletter]").text("No");
            }
            if(info.Handikaptoalett){
                $("span[name=Handikaptoalett]").text("Yes");
            }else{
                $("span[name=Handikaptoalett]").text("No");
            }
            if(info.Gass){
                $("span[name=Gass]").text("Yes");
            }else{
                $("span[name=Gass]").text("No");
            }
            if(info.Tilhengerleie){
                $("span[name=Tilhengerleie]").text("Yes");
            }else{
                $("span[name=Tilhengerleie]").text("No");
            }
            if(info.Landestasjoner){
                $("span[name=Landestasjoner]").text("Yes");
            }else{
                $("span[name=Landestasjoner]").text("No");
            }
            if (info["Bilvask (maskin)"] === true) {
                $("span[name=Bilvask_Maskin]").text("Yes");
            }else{
                $("span[name=Bilvask_Maskin]").text("No");
            }
            if (info["Bilvask (selvvask)"] === true) {
                $("span[name=Bilvask_Selvvask]").text("Yes");
            }else{
                $("span[name=Bilvask_Selvvask]").text("No");
            }
            if (info.Hours) {
                // Loop over each day of the week and set the corresponding start and end times
                for (let day in info.Hours) {
                    if (info.Hours.hasOwnProperty(day)) {
                        let timeRange = info.Hours[day];
                        let times = timeRange.split('-');
                        let startTime = times[0];
                        let endTime = times[1];
                        switch (day) {
                            case "Mandag":
                                $("span[name=startMonday]").text(startTime);
                                $("span[name=endMonday]").text(endTime);
                                break;
                            case "Tirsdag":
                                $("span[name=startTuesday]").text(startTime);
                                $("span[name=endTuesday]").text(endTime);
                                break;
                            case "Onsdag":
                                $("span[name=startWednesday]").text(startTime);
                                $("span[name=endWednesday]").text(endTime);
                                break;
                            case "Torsdag":
                                $("span[name=startThursday]").text(startTime);
                                $("span[name=endThursday]").text(endTime);
                                break;
                            case "Fredag":
                                $("span[name=startFriday]").text(startTime);
                                $("span[name=endFriday]").text(endTime);
                                break;
                            case "Lørdag":
                                $("span[name=startSaturday]").text(startTime);
                                $("span[name=endSaturday]").text(endTime);
                                break;
                            case "Søndag":
                                $("span[name=startSunday]").text(startTime);
                                $("span[name=endSunday]").text(endTime);
                                break;
                            default:
                                break;
                        }
                    }
                }
            }
        }else{
           $('.other_details').hide();
        }
    });
     $(document).on('click', '.backBtn', function(){
        $('.details_view, .update_view').hide();
        $('.list_view').show();
    });
    $(document).on('click', '.edit-details', function(){
        var details = JSON.parse($(this).attr('data-details'));
        var id = $(this).attr('data-id');
        $('.list_view, .details_view').hide();
        $('.update_view').show();
        
        if(details.name){
            $("input[name=name]").val(details.name);
        }
        if(details.company){
            $("input[name=company]").val(details.company);
        }
        if(details.address){
            $("textarea[name=address]").val(details.address);
        }
        if(details.latitude){
            $("input[name=latitude]").val(details.latitude);
        }
        if(details.longitude){
            $("input[name=longitude]").val(details.longitude);
        }
        $("input[name=station_id]").val(details.id);
        
        if(details.info){
            var info = JSON.parse(details.info)
            if(info.Døgnåpent){
                $('.list-group-item .start-day-time').hide();
                $('.list-group-item label.hour_text_lable').show();
                $("input[name=dognapent]").attr("checked", false);
            }else{
                $('.list-group-item label.hour_text_lable').hide();
                $('.list-group-item .start-day-time').show();
                $("input[name=dognapent]").attr("checked", true);
            }
            if(info.Kundetoaletter){
                $("input[name=Kundetoaletter]").attr("checked", true);
            }else{
                $("input[name=Kundetoaletter]").attr("checked", false);
            }
            if(info.Handikaptoalett){
                $("input[name=Handikaptoalett]").attr("checked", true);
            }else{
                $("input[name=Handikaptoalett]").attr("checked", false);
            }
            if(info.Gass){
                $("input[name=Gass]").attr("checked", true);
            }else{
                $("input[name=Gass]").attr("checked", false);
            }
            if(info.Tilhengerleie){
                $("input[name=Tilhengerleie]").attr("checked", true);
            }else{
                $("input[name=Tilhengerleie]").attr("checked", false);
            }
            if (info["Bilvask (maskin)"] === true) {
                $("input[name=Bilvask_Maskin]").attr("checked", true);
            }else{
                $("input[name=Bilvask_Maskin]").attr("checked", false);
            }
            
            if (info["Bilvask (selvvask)"] === true) {
                $("input[name=Bilvask_Selvvask]").attr("checked", true);
            }else{
                $("input[name=Bilvask_Selvvask]").attr("checked", false);
            }
            if (info.Hours) {
                // Loop over each day of the week and set the corresponding start and end times
                for (let day in info.Hours) {
                    if (info.Hours.hasOwnProperty(day)) {
                        let timeRange = info.Hours[day];
                        let times = timeRange.split('-');
                        let startTime = times[0];
                        let endTime = times[1];
                        switch (day) {
                            case "Mandag":
                                $('#start-monday').val(startTime);
                                $('#end-monday').val(endTime);
                                break;
                            case "Tirsdag":
                                $('#start-tuesday').val(startTime);
                                $('#end-tuesday').val(endTime);
                                break;
                            case "Onsdag":
                                $('#start-wednesday').val(startTime);
                                $('#end-wednesday').val(endTime);
                                break;
                            case "Torsdag":
                                $('#start-thursday').val(startTime);
                                $('#end-thursday').val(endTime);
                                break;
                            case "Fredag":
                                $('#start-friday').val(startTime);
                                $('#end-friday').val(endTime);
                                break;
                            case "Lørdag":
                                $('#start-saturday').val(startTime);
                                $('#end-saturday').val(endTime);
                                break;
                            case "Søndag":
                                $('#start-sunday').val(startTime);
                                $('#end-sunday').val(endTime);
                                break;
                            default:
                                break;
                        }
                    }
                }
            }
            
        }else{
            $('.list-group-item .start-day-time').hide();
            $('.list-group-item label.hour_text_lable').show();
            $("input[name=dognapent]").attr("checked", false);
        }
    });
    $(document).ready(function () {
        $('#stationForm').validate({
            rules: {
                name: {
                    required: true
                },
                company: {
                    required: true
                },
                latitude: {
                    required: true
                },
                longitude: {
                    required: true
                },
                address: {
                    required: true
                },
                startSunday: {
                    required: true
                },
                endSunday: {
                    required: true
                },
                startMonday: {
                    required: true
                },
                endMonday: {
                    required: true
                },
                startTuesday: {
                    required: true
                },
                endTuesday: {
                    required: true
                },
                startWednesday: {
                    required: true
                },
                endWednesday: {
                    required: true
                },
                startThursday: {
                    required: true
                },
                endThursday: {
                    required: true
                },
                startFriday: {
                    required: true
                },
                endFriday: {
                    required: true
                },
                startSaturday: {
                    required: true
                },
                endSaturday: {
                    required: true
                }
            },
            messages: {
                name: {
                    required: "Please enter name"
                },
                company: {
                    required: "Please enter company name"
                },
                latitude: {
                    required: "Please enter latitude"
                },
                longitude: {
                    required: "Please enter longitude"
                },
                address: {
                    required: "Please enter address"
                },
                startSunday: {
                    required: "Please enter start date"
                },
                endSunday: {
                    required: "Please enter end date"
                },
                startMonday: {
                    required: "Please enter start date"
                },
                endMonday: {
                    required: "Please enter end date"
                },
                startTuesday: {
                    required: "Please enter start date"
                },
                endTuesday: {
                    required: "Please enter end date"
                },
                startWednesday: {
                    required: "Please enter start date"
                },
                endWednesday: {
                    required: "Please enter end date"
                },
                startThursday: {
                    required: "Please enter start date"
                },
                endThursday: {
                    required: "Please enter end date"
                },
                startFriday: {
                    required: "Please enter start date"
                },
                endFriday: {
                    required: "Please enter end date"
                },
                startSaturday: {
                    required: "Please enter start date"
                },
                endSaturday: {
                    required: "Please enter end date"
                }
                
            },
            submitHandler: function(form) {
                $('body').prepend('<div class="loader"></div>');
                saveStation();
                return false;
            }
        });
        $('.timepicker').each(function () {
            $(this).timepicker({
                format: 'HH:mm'
            });
        });

        // Handle changes in time inputs
        $('.timepicker').on('change', function () {
            const inputValue = this.value.trim();
            const resetBtnId = `${this.id}-reset-btn`;
            const resetBtn = document.getElementById(resetBtnId);

            if (resetBtn) {
                resetBtn.disabled = inputValue.length === 0;
            }

            const [type, day] = this.id.split('-');
            if (type === 'start' || type === 'end') {
                const startInput = document.getElementById(`start-${day}`);
                const endInput = document.getElementById(`end-${day}`);

                if (startInput && endInput) {
                    let startTime = startInput.value.trim();
                    let endTime = endInput.value.trim();

                    // Parse the time inputs to hours and minutes
                    let startTemp = startTime.split(":");
                    let endTemp = endTime.split(":");

                    // Create Date objects to compare times
                    let start = new Date();
                    let end = new Date();

                    // Set the hours and minutes from the parsed time strings
                    start.setHours((parseInt(startTemp[0]) - 1 + 24) % 24);  // Adjust for timezone or other logic
                    start.setMinutes(parseInt(startTemp[1]));

                    end.setHours((parseInt(endTemp[0]) - 1 + 24) % 24);
                    end.setMinutes(parseInt(endTemp[1]));

                    // Check if end time is before or equal to start time
                    if (end < start || end.getTime() === start.getTime()) {
                        endInput.value = '';
                        endInput.setCustomValidity('End time must be after start time.');
                    } else {
                        endInput.setCustomValidity('');
                    }
                }
            }
        });


        // Reset button functionality
        $('.reset-btn').on('click', function () {
            const inputId = this.id.replace('-reset-btn', '');
            const input = document.getElementById(inputId);

            if (input) {
                input.value = '';
                $(input).trigger('input');
                this.disabled = true;
            }
        });

        // Function to update all timepicker options dynamically (if needed in future extensions)
        const updateAllTimePickers = () => {
            const options = {};
            $('.options-control').each(function () {
                const value = this.value.trim();
                if (value) {
                    options[this.id] = value;
                }
            });
            console.log(options);
            $('.timepicker').each(function () {
                $(this).timepicker('option', options);
            });
        };

        // Attach dynamic update logic (if needed for advanced use cases)
        $('.options-control').on('change', updateAllTimePickers);

        // Initial setup for all timepickers
        updateAllTimePickers();
    });
    $("input[name='dognapent']").change(function() {
        if ($(this).prop("checked")) {
            $('.list-group-item label.hour_text_lable').hide();
            $('.list-group-item .start-day-time').show();
        } else {
            $('.list-group-item .start-day-time').hide();
            $('.list-group-item label.hour_text_lable').show();
        }
    });
    function saveStation(){
        var data = $('#stationForm').serialize();
        $.ajax({
            url: "{{ url('admin/station/save') }}",
            type: 'POST',
            data: data,
            success: function(response) {
                $('.loader').remove();
                $("button[type=submit]").removeAttr('disabled');
                $('.details_view, .update_view').hide();
                $('.list_view').show();
                $("#list").DataTable().ajax.reload(null, false )
            },
            error: function(error) {
                $("button[type=submit]").removeAttr('disabled');
                $('.errormsg').text('Failed to delete station request. Please try again.');
                $("#errormsg").show().delay(3000).fadeOut();
                $('.loader').remove();
            },
        });
    }
    $(document).on('click', '.cancelbtn', function(){
        $('.commanpopup').hide();
    });
    var deleteId;
    $(document).on('click', '.delete-details', function() {
        deleteId = $(this).attr('data-id');
        $('.rejectbtn').addClass('deleteRequests');
        $('.commanpopup.dltuser').show();
    });
    $(document).on('click', '.deleteRequests', function() {
        $('.commanpopup').hide();
        $.ajax({
            url: "{{ url('admin/station/delete') }}",
            type: 'POST',
            data: {deleteId, _token:"{{csrf_token()}}"},
            success: function(response) {
                $('.successMsg').text(response.message);
                $("#successMsg").show().delay(3000).fadeOut();
                $('.loader').remove();
                $("#list").DataTable().ajax.reload(null, false )
            },
            error: function(error) {
                $("button[type=submit]").removeAttr('disabled');
                $('.errormsg').text('Failed to delete station request. Please try again.');
                $("#errormsg").show().delay(3000).fadeOut();
                $('.loader').remove();
                $("#list").DataTable().ajax.reload(null, false )
            },
        });
    });
    
    function refreshData() {
        // Show loader overlay
        $('body').prepend('<div class="loader"></div>');
        
        $.ajax({
            url: "{{ url('admin/station/prices/updates') }}",
            type: 'GET',
            success: function(response) {
                // Hide loader overlay
                $('.loader').remove();
                
                if (response.success == 200) {
                    $('.successMsg').text(response.message);
                    $("#successMsg").show().delay(3000).fadeOut();
                    $('#list').DataTable().ajax.reload(null, false);
                    
                    // Show detailed response popup for successful sync
                    if (response.response) {
                        let popupContent = `
                            <div style="background: white; padding: 20px; border-radius: 10px; max-width: 400px; margin: 20px auto; box-shadow: 0 4px 20px rgba(0,0,0,0.2);">
                                <h4 style="color: #002C3E; margin-bottom: 15px;">✅ Sync Success Details</h4>
                                <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 15px;">
                                    <p style="margin: 5px 0;"><strong>Message:</strong> ${response.message}</p>
                                </div>`;
                        
                        if (response.response.insertedRecords !== undefined) {
                            popupContent += `
                                <div style="background: #e8f5e8; padding: 15px; border-radius: 8px; margin-bottom: 15px;">
                                    <p style="margin: 5px 0; color: #28a745;"><strong>📊 Records Inserted:</strong> ${response.response.insertedRecords}</p>
                                </div>`;
                        }
                        
                        if (response.response.totalStations !== undefined) {
                            popupContent += `
                                <div style="background: #e3f2fd; padding: 15px; border-radius: 8px; margin-bottom: 15px;">
                                    <p style="margin: 5px 0; color: #1976d2;"><strong>🏢 Total Stations:</strong> ${response.response.totalStations}</p>
                                </div>`;
                        }
                        
                        popupContent += `
                                <button onclick="closeSyncPopup()" style="background: #002C3E; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">Close</button>
                            </div>`;
                        
                        // Create popup overlay
                        $('body').prepend(`
                            <div id="syncPopup" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,44,62,0.8); display: flex; justify-content: center; align-items: center; z-index: 9999;">
                                ${popupContent}
                            </div>
                        `);
                    }
                } else {
                    // Show error popup for rate limiting or other issues
                    $('.errormsg').text(response.message || 'Sync failed');
                    $("#errormsg").show().delay(3000).fadeOut();
                    
                    // Show rate limiting popup
                    let errorPopupContent = `
                        <div style="background: white; padding: 20px; border-radius: 10px; max-width: 400px; margin: 20px auto; box-shadow: 0 4px 20px rgba(0,0,0,0.2);">
                            <h4 style="color: #dc3545; margin-bottom: 15px;">⏰ Sync Restricted</h4>
                            <div style="background: #fff3cd; padding: 15px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid #ffc107;">
                                <p style="margin: 5px 0; color: #856404;"><strong>⚠️ Message:</strong> ${response.message}</p>
                            </div>
                            <div style="background: #f8d7da; padding: 15px; border-radius: 8px; margin-bottom: 15px;">
                                <p style="margin: 5px 0; color: #721c24;"><strong>ℹ️ Please wait for the required time period before attempting to sync prices again.</strong></p>
                            </div>
                            <button onclick="closeSyncPopup()" style="background: #dc3545; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">Close</button>
                        </div>`;
                    
                    // Create error popup overlay
                    $('body').prepend(`
                        <div id="syncPopup" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,44,62,0.8); display: flex; justify-content: center; align-items: center; z-index: 9999;">
                            ${errorPopupContent}
                        </div>
                    `);
                }
            },
            error: function(xhr, status, error) {
                // Hide loader overlay
                $('.loader').remove();
                
                // Check if it's a 400 status response (rate limiting)
                if (xhr.status === 400 && xhr.responseJSON) {
                    const response = xhr.responseJSON;
                    $('.errormsg').text(response.message || 'Sync failed');
                    $("#errormsg").show().delay(3000).fadeOut();
                    
                    // Show rate limiting popup
                    let errorPopupContent = `
                        <div style="background: white; padding: 20px; border-radius: 10px; max-width: 400px; margin: 20px auto; box-shadow: 0 4px 20px rgba(0,0,0,0.2);">
                            <h4 style="color: #dc3545; margin-bottom: 15px;">⏰ Sync Restricted</h4>
                            <div style="background: #fff3cd; padding: 15px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid #ffc107;">
                                <p style="margin: 5px 0; color: #856404;"><strong>⚠️ Message:</strong> ${response.message}</p>
                            </div>
                            <div style="background: #f8d7da; padding: 15px; border-radius: 8px; margin-bottom: 15px;">
                                <p style="margin: 5px 0; color: #721c24;"><strong>ℹ️ Please wait for the required time period before attempting to sync prices again.</strong></p>
                            </div>
                            <button onclick="closeSyncPopup()" style="background: #dc3545; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">Close</button>
                        </div>`;
                    
                    // Create error popup overlay
                    $('body').prepend(`
                        <div id="syncPopup" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,44,62,0.8); display: flex; justify-content: center; align-items: center; z-index: 9999;">
                            ${errorPopupContent}
                        </div>
                    `);
                } else {
                    // Handle other network errors
                    $('.errormsg').text('Network error: Failed to sync prices');
                    $("#errormsg").show().delay(3000).fadeOut();
                }
            }
        });
    }
    
    function showSyncConfirm() {
        $('.syncconfirm').show();
    }

    $(document).on('click', '.syncyesbtn', function() {
        $('.syncconfirm').hide();
        refreshData();
    });

    function closeSyncPopup() {
        $('#syncPopup').remove();
    }

    // Price edit modal functionality
    $(document).on('click', '.price-editable', function() {
        var stationId = $(this).data('station-id');
        var stationType = $(this).data('station-type');
        var currentPrice = $(this).data('current-price');

        $('#editStationId').val(stationId);
        $('#editStationType').val(stationType);
        $('#editPrice').val(currentPrice !== 'N/A' ? currentPrice : '');
        $('.price-edit-modal').show();
    });

    $('.price-edit-modal .cancelbtn').on('click', function() {
        $('.price-edit-modal').hide();
        $('#editPrice').val('');
    });

    $('#priceEditForm').on('submit', function(e) {
        e.preventDefault();
        var formData = $(this).serialize();
        $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            data: formData,
            success: function(response) {
                $('.price-edit-modal').hide();
                $('#editPrice').val('');
                fill_datatable();
                $('#successMsg').show().delay(3000).fadeOut();
            },
            error: function(error) {
                $('#errormsg').show().delay(3000).fadeOut();
            }
        });
    });
</script>
@stop