@extends('layouts.master')
@section('title', 'Station : List')
@section('content')
    <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>
            <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>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>
    <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(){
      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": "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').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 )
            },
        });
    });
    </script>
@stop