@extends('layouts.master')
@section('title', 'Station : Add')
@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 Requests</h3>
                <a href="javascript::void()" class="backBtn common-btn deletemultiplerequests">Delete Multiple Requests</a>
            </div>
            <div class="leadership-list-data scroll">
                <ul class="listRecordsUl">
                    <div class="card">
                        <div class="card-body">
                            <div id="errormsg" class="text-center animated fadeIn" style="display: none; color:red">
                                <strong class="errormsg">Please select atlease one request</strong>
                            </div>
                            <div id="successMsg" class="text-center animated fadeIn" style="display: none; color:green">
                                <strong class="successMsg"></strong>
                            </div>
                            <table id="list"
                                class="table table-striped table-bordered viewdatatable dt-responsive nowrap"
                                style="width:100%">
                                <thead>
                                    <tr>
                                        <th class="text-center">
                                            <span class="deletespanclass">
                                                Delete Request<input type="checkbox" name="select" id="select_all"
                                                    style="zoom:1.7">
                                            </span>
                                        </th>
                                        <th>Id</th>
                                        <th>Name</th>
                                        <th>Address</th>
                                        <th>Latitude</th>
                                        <th>Longitude</th>
                                        <th>Company</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">
                                <form class="needs-validation" id="stationForm" novalidate enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="station_id" value="">
                                    <input type="hidden" name="request_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>
                                    @if ($action == 'add')
                                        <div class="company-images-wrap">
                                            <div class="row">
                                                <!-- Station Logo -->
                                                <div class="col-lg-6 col-md-6 col-sm-12">
                                                    <div class="company-images-left">
                                                        <div class="company-logo">
                                                            <div class="upload-container">
                                                                <div class="logo-thumbnail">
                                                                    <h5>Station Logo</h5>
                                                                    <div class="add-station-logos">
                                                                        <img src="{{ asset('images/thumbnail-images.png') }}"
                                                                            alt="Thumbnail 1" class="thumbnail"
                                                                            onclick="openModal('stationLogoImageModal')"
                                                                            id="stationLogoImageOutsidePreview">
                                                                        <div class="uploader-preview" style="cursor: pointer;"
                                                                            id="stationLogoOutsideUploadPreview">
                                                                            <img class="delete-preview"
                                                                                data-section="stationLogo"
                                                                                src="/images/delete-icon.png"
                                                                                style="display: none;">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="modal" id="stationLogoImageModal">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <span>Select Image</span>
                                                                        <button class="close-modal" type="button"
                                                                            onclick="closeModal('stationLogoImageModal')">×</button>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        <div class="tab-buttons">
                                                                            <button class="active" type="button"
                                                                                onclick="switchTab('uploadStationLogo')">Upload
                                                                                New</button>
                                                                            <button type="button"
                                                                                onclick="switchTab('galleryStationLogo')">Choose
                                                                                Existing</button>
                                                                        </div>
                                                                        <div class="tab-content active"
                                                                            id="uploadStationLogo">
                                                                            <div class="uploader-preview"
                                                                                id="stationLogoPreview">
                                                                                <div class="modal-delete-icon">
                                                                                    <img class="delete-preview"
                                                                                        src="/images/delete-icon.png"
                                                                                        data-section="stationLogo"
                                                                                        style="display: none;">
                                                                                </div>
                                                                                <img class="preview-box"
                                                                                    src="{{ asset('images/80x80.png') }}"
                                                                                    id="stationLogoImagePreview">
                                                                            </div>
                                                                            <div class="upload-area">
                                                                                <label for="stationLogoUpload">Click here
                                                                                    to
                                                                                    upload
                                                                                    a file</label>
                                                                                <input type="file"
                                                                                    id="stationLogoUpload"
                                                                                    accept="image/png, image/jpeg, image/svg+xml">
                                                                            </div>
                                                                        </div>
                                                                        <div class="tab-content" id="galleryStationLogo">
                                                                            <div class="gallery">
                                                                                <ul>
                                                                                    @foreach ($stationLogos as $key => $logo)
                                                                                        @if ($logo !== 'data:image/png;base64,')
                                                                                            <li data-id="{{ $key }}"
                                                                                                class="stationLogoSelectedOptions"
                                                                                                data-type="stationLogo">
                                                                                                <img
                                                                                                    src="{{ $logo }}">
                                                                                            </li>
                                                                                        @endif
                                                                                    @endforeach
                                                                                </ul>
                                                                            </div>
                                                                        </div>
                                                                        <div class="modal-footer-button">
                                                                            <button type="button"
                                                                                class="btn btn-secondary modal-cancel"
                                                                                data-bs-dismiss="modal"
                                                                                onclick="closeModal('stationLogoImageModal')">Cancel</button>
                                                                            <button type="button"
                                                                                class="btn btn-primary modal-save"
                                                                                onclick="saveImage('stationLogo')">Save</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Company Logo -->
                                                <div class="col-lg-6 col-md-6 col-sm-12">
                                                    <div class="company-images-right">
                                                        <div class="logo-thumbnail">
                                                            <h5>Company Images</h5>
                                                            <div class="add-station-logos">
                                                                <img src="{{ asset('images/thumbnail-images.png') }}"
                                                                    alt="Thumbnail 1" class="thumbnail"
                                                                    onclick="openModal('companyLogoImageModal')"
                                                                    id="companyLogoImageOutsidePreview">
                                                                <div class="uploader-preview" style="cursor: pointer;"
                                                                    id="companyLogoOutsideUploadPreview">
                                                                    <img class="delete-preview"
                                                                        src="/images/delete-icon.png"
                                                                        data-section="companyLogo" style="display: none;">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="modal" id="companyLogoImageModal">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <span>Select Image</span>
                                                                    <button class="close-modal" type="button"
                                                                        onclick="closeModal('companyLogoImageModal')">×</button>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <div class="tab-buttons">
                                                                        <button class="active" type="button"
                                                                            onclick="switchTab('uploadCompanyLogo')">Upload
                                                                            New</button>
                                                                        <button type="button"
                                                                            onclick="switchTab('galleryCompanyLogo')">Choose
                                                                            Existing</button>
                                                                    </div>
                                                                    <div class="tab-content active"
                                                                        id="uploadCompanyLogo">
                                                                        <div class="uploader-preview"
                                                                            id="companyLogoPreview">
                                                                            <div class="modal-delete-icon">
                                                                                <img class="delete-preview"
                                                                                    src="/images/delete-icon.png"
                                                                                    data-section="companyLogo"
                                                                                    style="display: none;">
                                                                            </div>
                                                                            <img class="preview-box"
                                                                                src="{{ asset('images/80x80.png') }}"
                                                                                id="companyLogoImagePreview">
                                                                        </div>
                                                                        <div class="upload-area">
                                                                            <label for="companyLogoUpload">Click here to
                                                                                upload
                                                                                a
                                                                                file</label>
                                                                            <input type="file" id="companyLogoUpload"
                                                                                accept="image/png, image/jpeg, image/svg+xml">
                                                                        </div>
                                                                    </div>
                                                                    <div class="tab-content" id="galleryCompanyLogo">
                                                                        <div class="gallery">
                                                                            <ul>
                                                                                @foreach ($companyLogos as $key => $logo)
                                                                                    @if ($logo !== 'data:image/png;base64,')
                                                                                        <li data-id="{{ $key }}"
                                                                                            class="companyLogoSelectedOptions"
                                                                                            data-type="companyLogo">
                                                                                            <img src="{{ $logo }}">
                                                                                        </li>
                                                                                    @endif
                                                                                @endforeach
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                    <div class="modal-footer-button">
                                                                        <button type="button"
                                                                            class="btn btn-secondary modal-cancel"
                                                                            data-bs-dismiss="modal"
                                                                            onclick="closeModal('companyLogoImageModal')">Cancel</button>
                                                                        <button type="button"
                                                                            class="btn btn-primary modal-save"
                                                                            onclick="saveImage('companyLogo')">Save</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <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
                    request?</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>
        var action = "{{ $action }}";
        var setStationLogoId = "";
        let setStationLogoValue = "";
        var setCompanyLogoId = "";
        var setCompanyLogoValue = "";

        $(document).ready(function() {
            $(".alert-success, .alert-danger").delay(5000).fadeOut();
            $('.request_menus').removeClass('collapsed');
            $('.request_menus').parent().find('.collapse').addClass('show');
            $(`.${action}Active`).addClass('active');
            $('.request_menus').addClass('active');
            fill_datatable();

            $('#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) {
                    if (action == "add") {
                        if (!setStationLogoValue && !setCompanyLogoValue && !setStationLogoId && !
                            setCompanyLogoId) {
                            alert(
                                "Please upload or select both the station logo and the company logo."
                            );
                            return false;
                        }
                        if (!setStationLogoValue && !setStationLogoId) {
                            alert("Please upload or select a station logo.");
                            return false;
                        }
                        if (!setCompanyLogoValue && !setCompanyLogoId) {
                            alert("Please upload or select a company logo.");
                            return false;
                        }
                    }
                    $('body').prepend('<div class="loader"></div>');
                    saveStation();
                    return false;
                }
            });
        });

        function fill_datatable() {
            var table = $('#list').DataTable({
                scrollX: true,
                lengthMenu: [
                    [10, 25, 50],
                    [10, 25, 50],
                ],
                "order": [
                    [1, "desc"]
                ],
                "columnDefs": [{
                        "targets": [1],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [],
                        "searchable": false
                    }
                ],
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ url('admin/station/addlist') }}",
                    "dataType": "json",
                    "type": "POST",
                    "data": {
                        '_token': "{{ csrf_token() }}",
                        'action': action
                    }
                },
                "columns": [{
                        "data": "deleteRequests",
                        "sortable": false,
                        'className': "text-center"
                    },
                    {
                        "data": "id",
                        "sortable": false,
                        "className": "text-center"
                    },
                    {
                        "data": "name",
                        "sortable": false,
                        "className": "text-center"
                    },
                    {
                        "data": "address",
                        "sortable": false,
                        "className": "text-center"
                    },
                    {
                        "data": "latitude"
                    },
                    {
                        "data": "longitude",
                        "className": "text-center"
                    },
                    {
                        "data": "company",
                        "className": "text-center"
                    },
                    {
                        "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').hide();
            $('.details_view').show();
            console.log(details);
            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);
            }
            if (details.station_id) {
                $("input[name=station_id]").val(details.station_id);
            }
            $("input[name=request_id]").val(details.id);

            if (details.info) {
                var info = JSON.parse(details.info)
                if (info.Døgnåpent && info.Døgnåpent != 0) {
                    $('.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);
                }
                console.log(info);
                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) {
                    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;
                            }
                        }
                    }
                }

            }
        });
        $(document).ready(function() {

            $('.timepicker').each(function() {
                $(this).timepicker({
                    format: 'HH:mm'
                });
            });
            $('.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();
                        let startTemp = startTime.split(":");
                        let endTemp = endTime.split(":");
                        let start = new Date();
                        let end = new Date();
                        start.setHours((parseInt(startTemp[0]) - 1 + 24) %
                            24);
                        start.setMinutes(parseInt(startTemp[1]));
                        end.setHours((parseInt(endTemp[0]) - 1 + 24) % 24);
                        end.setMinutes(parseInt(endTemp[1]));
                        if (end < start || end.getTime() === start.getTime()) {
                            endInput.value = '';
                            endInput.setCustomValidity('End time must be after start time.');
                        } else {
                            endInput.setCustomValidity('');
                        }
                    }
                }
            });

            $('.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;
                }
            });

            const updateAllTimePickers = () => {
                const options = {};
                $('.options-control').each(function() {
                    const value = this.value.trim();
                    if (value) {
                        options[this.id] = value;
                    }
                });
                $('.timepicker').each(function() {
                    $(this).timepicker('option', options);
                });
            };
            $('.options-control').on('change', updateAllTimePickers);
            updateAllTimePickers();
        });
        $(document).on('click', '.backBtn', function() {
            $("#stationForm")[0].reset();
            $('.details_view').hide();
            $('.list_view').show();
        });
        $("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 formData = new FormData($('#stationForm')[0]);
            if (action == "add") {
                if (setStationLogoId) {
                    formData.append('stationLogoId', setStationLogoId);
                }
                if (setCompanyLogoId) {
                    formData.append('companyLogoId', setCompanyLogoId);
                }
                if (setCompanyLogoValue) {
                    formData.append('companyLogo', setCompanyLogoValue);
                }
                if (setStationLogoValue) {
                    formData.append('stationLogo', setStationLogoValue);
                }
            }
            const url = "{{ url('admin/station/save') }}";
            try {
                $.ajax({
                    url: url,
                    type: "POST",
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: "json",
                    data: formData,
                    success: function(response) {
                        $('.loader').remove();
                        $("button[type=submit]").removeAttr('disabled');
                        window.location.href = `{{ url('admin/station/${action}') }}`;
                    },
                    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();
                    },
                });
            } catch (error) {
                $('.errormsg').text(error);
                $("#errormsg").show().delay(3000).fadeOut();
                $('.loader').remove();
            }
        }
        $(document).on('click', '.cancelbtn', function() {
            $('.commanpopup').hide();
        });
        $(document).on('click', '#select_all', function(event) {
            if (this.checked) {
                $('.checkbox').each(function() {
                    this.checked = true;
                });
            } else {
                $('.checkbox').each(function() {
                    this.checked = false;
                });
            }
        });
        $(document).on('click', '.checkbox', function(event) {
            if ($('.checkbox:checked').length == $('.checkbox').length) {
                $('#select_all').prop('checked', true);
            } else {
                $('#select_all').prop('checked', false);
            }
        });
        var requestIds = [];
        $(document).on('click', '.deletemultiplerequests', function(event) {
            event.preventDefault();
            var checkedLength = $('.checkbox:checked').length;
            if (checkedLength > 0) {
                $("input:checkbox[name=requestId]:checked").each(function() {
                    requestIds.push($(this).val());
                });
                $(".rejectbtn").text("Delete");
                $(".titlemsg").html("Are you sure you want to <br> delete this requests ?");
                $(".rejectbtn").attr('data-ids', requestIds);
                $('.rejectbtn').addClass('deleteRequests');
                $('.commanpopup').show();
            } else {
                $("#errormsg").show().delay(3000).fadeOut();
            }
        });
        $(document).on('click', '.deleteRequests', function(event) {
            event.preventDefault();
            var requestIds = $(this).attr('data-ids');
            $('.commanpopup').hide();
            $('body').prepend('<div class="loader"></div>');

            $.ajax({
                url: "{{ url('admin/station/request/delete') }}",
                method: "post",
                data: {
                    requestIds,
                    '_token': "{{ csrf_token() }}"
                },
                success: function(data) {
                    $('#select_all').prop('checked', false);
                    $('.commanpopup').hide();
                    $("#list").DataTable().ajax.reload(null, false)
                    $('.successMsg').text(data.message);
                    $("#successMsg").show().delay(3000).fadeOut();
                    $('.loader').remove();
                },
                error: function(xhr, status, error) {
                    $('.errormsg').text('Failed to delete station request. Please try again.');
                    $("#errormsg").show().delay(3000).fadeOut();
                    $('.loader').remove();
                }
            });
        });

        function openModal(modalName) {
            document.getElementById(modalName).style.display = "flex";
            const tabName = modalName.replace('ImageModal', '');
            const tabId = 'upload' + tabName.charAt(0).toUpperCase() + tabName.slice(1);
            switchTab(tabId);
        }

        function closeModal(modalName) {
            document.getElementById(modalName).style.display = "none";
            const section = modalName.replace('ImageModal', '');
            $(`[data-section="${section}"]`).click();
        }

        function switchTab(tabId) {
            $(".tab-buttons button").removeClass("active");
            $(".tab-content").removeClass("active");
            $(`[onclick="switchTab('${tabId}')"]`).addClass("active");
            $(`#${tabId}`).addClass("active");

            let tab = '';
            if (tabId.includes('gallery')) {
                tab = tabId.replace('gallery', '');
            } else if (tabId.includes('upload')) {
                tab = tabId.replace('upload', '');
            }

            if (tab) {
                const tabSection = tab.charAt(0).toLowerCase() + tab.slice(1);
                $(`[data-section="${tabSection}"]`).click();
                const galleryTabId = 'gallery' + tab;
                const uploadTabId = 'upload' + tab;
                const tabCount = $(`#${galleryTabId} ul li`).length;
                $(`#${galleryTabId} ul li`).removeClass("selected");
                if (tabCount === 0 && tabId.includes('gallery')) {
                    alert('No existing images found.');
                    $(".tab-buttons button").removeClass("active");
                    $(".tab-content").removeClass("active");
                    $(`[onclick="switchTab('${uploadTabId}')"]`).addClass("active");
                    $(`#${uploadTabId}`).addClass("active");
                }
            }
        }

        $(document).on("change", "#stationLogoUpload, #companyLogoUpload", function(event) {
            const file = event.target.files[0];
            const validTypes = ["image/png", "image/jpeg", "image/svg+xml"];
            const maxSize = 20 * 1024 * 1024;

            if (!validTypes.includes(file.type)) {
                alert("Invalid file type. Please upload a PNG, JPG, or SVG file.");
                event.target.value = "";
                return;
            }

            if (file.size > maxSize) {
                alert(`File size exceeds the maximum allowed size of ${maxSize}MB.`);
                event.target.value = "";
                return;
            }
            const reader = new FileReader();
            reader.onload = function(e) {
                const type = $(event.target).attr("id").replace("Upload", "");
                $(`#${type}ImagePreview`).attr("src", e.target.result);
                $(`#${type}Preview .delete-preview`).show();
                $(`#${type}Preview .delete-preview`).parent().show();
                $(`#${type}Upload`).prop("disabled", true);
                if (type === 'stationLogo') {
                    setStationLogoValue = e.target.result;
                    setStationLogoId = '';
                } else {
                    setCompanyLogoValue = e.target.result;
                    setCompanyLogoId = '';
                }
            };
            reader.readAsDataURL(file);
        });

        $(document).on("click", ".delete-preview", function(e) {
            e.stopPropagation();
            const activeTab = $(".tab-content.active").attr("id");
            const $this = $(this);
            const section = $this.attr('data-section');
            const type = $this.closest(".uploader-preview").attr("id").replace("Preview", "");
            const imageElement = type.replace('OutsideUpload', '');
            $(`#${imageElement}ImagePreview`).attr("src", "{{ asset('images/80x80.png') }}");
            $(`#${imageElement}ImageOutsidePreview`).attr("src", '');
            $(`#${imageElement}ImageOutsidePreview`).css("pointer-events", 'auto');
            $(`#${imageElement}ImageOutsidePreview`).attr("src",
                "{{ asset('images/thumbnail-images.png') }}");
            $(`#${imageElement}Upload`).val("");
            $(`#${imageElement}Upload`).prop("disabled", false);
            $(`[data-section="${section}"]`).hide();
            $(`[data-section="${section}"]`).parent().hide();
            if (imageElement === "stationLogo") {
                setStationLogoValue = "";
                setStationLogoId = '';
            } else if (imageElement === "companyLogo") {
                setCompanyLogoValue = "";
                setCompanyLogoId = "";
            }
        });


        $(document).on("click", ".gallery ul li", function(e) {
            e.stopPropagation();
            const type = $(this).attr("data-type");
            $(`.${type}SelectedOptions`).removeClass("selected");
            $(this).addClass("selected");
            if (type === "stationLogo") {
                setStationLogoId = $(this).attr("data-id");
                setStationLogoValue = "";
            } else {
                setCompanyLogoId = $(this).attr("data-id");
                setCompanyLogoValue = "";
            }
        });


        function saveImage(type) {
            const activeTab = $(".tab-content.active").attr("id");
            const modalName = type + "ImageModal";
            if (type === 'stationLogo' && activeTab === 'uploadStationLogo' && !setStationLogoValue) {
                alert("Please upload a station logo to proceed.");
                return;
            }
            if (type === 'stationLogo' && activeTab === 'galleryStationLogo' && !setStationLogoId) {
                alert("Please select a station logo from the existing images in the gallery.");
                return;
            }

            if (type === 'companyLogo' && activeTab === 'uploadCompanyLogo' && !setCompanyLogoValue) {
                alert("Please upload a company logo to proceed.");
                return;
            }

            if (type === 'companyLogo' && activeTab === 'galleryCompanyLogo' && !setCompanyLogoId) {
                alert("Please select a company logo from the existing images in the gallery.");
                return;
            }
            document.getElementById(modalName).style.display = "none";
            let previewPath = '';
            let hasSelectedClass = false;
            $(`.${type}SelectedOptions`).each(function() {
                if (hasSelectedClass) {
                    return false;
                }
                hasSelectedClass = $(this).hasClass("selected");
                if (hasSelectedClass) {
                    previewPath = $(this).find('img').attr("src");
                }
            });
            if (!hasSelectedClass) {
                previewPath = $(`#${type}ImagePreview`).attr("src");
            }
            $(`#${type}ImageOutsidePreview`).attr("src", previewPath);
            $(`#${type}ImageOutsidePreview`).css("pointer-events", 'none');
            $(`#${type}OutsideUploadPreview`).show();
            $(`#${type}OutsideUploadPreview .delete-preview`).show();
        }
    </script>
@stop