@extends('layouts.admin')
@section('page-title')
    Rooms - {{ $establishment->name }}
@endsection
@section('page-top-title')
    Rooms - {{ $establishment->name }}
@endsection
@section('content-body')
    {{-- <link href="{{ asset('storage/backend-resources/vendor/lightgallery/css/lightgallery.min.css') }}" rel="stylesheet"> --}}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
    <div class="container-fluid">
        <!-- Row -->
        <div class="col-12">
            @include('backend.inc.messages')
        </div>
        <div class="col-xl-12 col-lg-12 col-md-12 col-xs-12">
            <div class="card">
                <div class="card-header border-0 p-3">
                    <h4 class="heading mb-0">Rooms - {{ $establishment->name }}</h4>
                    {{-- Add New Room Type Modal --}}
                    <a href="javascript:void" class="btn btn-light ms-2 btn-sm" data-bs-toggle="modal"
                        data-bs-target="#addNewRoomTypeModal"><i class="fa-solid fa-plus"></i> Add New Room</a>

                    <div class="modal modal-lg fade" id="addNewRoomTypeModal" tabindex="-1"
                        aria-labelledby="addNewRoomTypeModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-center">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="addNewRoomTypeModalLabel"><span> Add New
                                            Room to <small>{{ $establishment->name }}</small></span>

                                        {{-- <input type="hidden" name="hdnRoomTypeId" class="hdnRoom TypeId"> --}}
                                        <input type="hidden" name="hdnEstName" value="{{ $establishment->name }}">
                                    </h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <form id="add-room-form" class="needs-validation add-room-form"
                                    action="{{ route('establishment.rooms.store', $establishment->id) }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="modal-body add_room_container">
                                        <div class="row">
                                            <div class="col-3">
                                                <img src="{{ asset('storage/backend-resources/images/profile/profile.png') }}"
                                                    class="img-fluid rounded-circle establishment-edit-logo" alt=""
                                                    width="100px">
                                            </div>
                                            <div class="col-6">
                                                <label for="form-select form-control"
                                                    class="form-label mb-2 fs-13 font-w500">Room Image</label>
                                                <input class="form-control form-control-sm" name="room_image" type="file"
                                                    accept="image/jpeg, image/jpg, image/png">
                                                <small class="file-size-message">Max file size 2Mb</small>
                                            </div>
                                            <div class="col-3">
                                                <label for="view_type" class="form-label mb-2">Associated Est.</label>
                                                <input type="text" class="form-control form-control-sm"
                                                    value="{{ strtoupper($establishment->name) }}" readonly>
                                                <input type="hidden" name="hdnAssociatedEstablishmentId"
                                                    class="hdnAssociatedEstablishmentId" value="{{ $establishment->id }}">
                                            </div>

                                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 py-3">
                                                <label for="add_room_category"
                                                    class="form-label mb-2 fs-13 font-w500">Choose
                                                    Room Category</label>
                                                <select class="form-select form-control add_room_category room-dropdown"
                                                    required name="add_room_category" id="add_room_category">
                                                    <option value="-1">Room Category</option>
                                                    @isset($roomCategories)
                                                        @foreach ($roomCategories as $item)
                                                            <option value="{{ $item->id }}">
                                                                {{ ucfirst($item->name) }} (
                                                                {{ ucfirst($item->description) }} )
                                                            </option>
                                                        @endforeach
                                                    @endisset
                                                </select>
                                            </div>

                                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 py-3">
                                                <label for="add_bed_type" class="form-label mb-2 fs-13 font-w500">Choose
                                                    Bed Type</label>
                                                <select class="form-select form-control add_bed_type room-dropdown" required
                                                    name="add_bed_type" id="add_bed_type">
                                                    @php
                                                        $bedTypes = ['KING BED', 'QUEEN BED', 'TWIN BEDS'];
                                                    @endphp

                                                    <option value="-1">Bed Type</option>
                                                    @foreach ($bedTypes as $item)
                                                        <option value="{{ $item }}">
                                                            {{ ucfirst($item) }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 py-3">
                                                <label for="add_view_type" class="form-label mb-2 fs-13 font-w500">Choose
                                                    View Type</label>
                                                <select class="form-select form-control add_view_type room-dropdown"
                                                    required name="add_view_type" id="add_view_type">

                                                    @php
                                                        $viewType = [
                                                            'CITY VIEW',
                                                            'SEA VIEW',
                                                            'MOUNTAIN VIEW',
                                                            'RIVER VIEW',
                                                            'GARDEN VIEW',
                                                            'FOREST VIEW',
                                                        ];
                                                    @endphp

                                                    <option value="-1" onclick="this.blur();">View Type</option>
                                                    @foreach ($viewType as $item)
                                                        <option value="{{ $item }}" onclick="this.blur();">
                                                            {{ ucfirst($item) }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            {{-- <div class="col-xl-6 col-md-6 col-sm-6 col-xs-6">
                                                <label for="name" class="form-label mb-2">Name</label>
                                                <input type="text" name="name" class="form-control form-control-sm"
                                                    value="{{ old('name') }}" placeholder="Enter room name" required>
                                            </div> --}}
                                            <div class="col-6">
                                                <label for="room_count" class="form-label mb-2">Count</label>
                                                <input type="number" name="room_count" class="form-control form-control-sm"
                                                    placeholder="Enter room count" value="{{ old('room_count') }}"
                                                    required>
                                            </div>

                                            <div class="col-12 py-3">
                                                <label class="form-label mb-2" for="description">Room
                                                    Description</label>
                                                <textarea rows="4" id="ckeditor" class="form-control form-control-sm description" name="description"
                                                    placeholder="Enter room description">{!! old('description') !!}</textarea>
                                            </div>

                                            <div class="row py-2">
                                                <div class="col-4">
                                                    <div class="form-check d-inline-block">
                                                        <label class="form-check-label" for="add_is_extra_bed_allowed">
                                                            <input type="checkbox"
                                                                class="form-check-input me-2 add_is_extra_bed_allowed"
                                                                name="add_is_extra_bed_allowed">Is
                                                            Extra bed allowed?
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-check d-inline-block">
                                                        <label class="form-check-label" for="add_is_smoking_room">
                                                            <input type="checkbox"
                                                                class="form-check-input me-2 add_is_smoking_room"
                                                                name="add_is_smoking_room">Is smoking room?
                                                        </label>
                                                    </div>
                                                </div>

                                                <div class="col-4">
                                                    <div class="form-check d-inline-block">
                                                        <label class="form-check-label" for="add_has_wifi">
                                                            <input type="checkbox"
                                                                class="form-check-input me-2 add_has_wifi"
                                                                name="add_has_wifi">Has Wifi?
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-check d-inline-block">
                                                        <label class="form-check-label" for="add_has_mini_bar">
                                                            <input type="checkbox"
                                                                class="form-check-input me-2 add_has_mini_bar"
                                                                name="add_has_mini_bar">Has mini-bar?
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-check d-inline-block">
                                                        <label class="form-check-label" for="add_has_in_room_dining">
                                                            <input type="checkbox"
                                                                class="form-check-input me-2 add_has_in_room_dining"
                                                                name="add_has_in_room_dining">Has in-room
                                                            dining?
                                                        </label>
                                                    </div>
                                                </div>

                                                <div class="col-4">
                                                    <div class="form-check d-inline-block">
                                                        <label class="form-check-label" for="add_has_electric_kettle">
                                                            <input type="checkbox"
                                                                class="form-check-input me-2 add_has_electric_kettle"
                                                                name="add_has_electric_kettle">Has electric
                                                            kettle?
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-check d-inline-block">
                                                        <label class="form-check-label" for="add_has_coffee_maker">
                                                            <input type="checkbox"
                                                                class="form-check-input me-2 add_has_coffee_maker"
                                                                name="add_has_coffee_maker">Has coffee maker?
                                                        </label>
                                                    </div>
                                                </div>

                                                <div class="col-4">
                                                    <div class="form-check d-inline-block">
                                                        <label class="form-check-label" for="add_has_ironing_board">
                                                            <input type="checkbox"
                                                                class="form-check-input me-2 add_has_ironing_board"
                                                                name="add_has_ironing_board">Has Ironing
                                                            board?
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-check d-inline-block">
                                                        <label class="form-check-label" for="add_has_safety_locker">
                                                            <input type="checkbox"
                                                                class="form-check-input me-2 add_has_safety_locker"
                                                                name="add_has_safety_locker">Has Safety
                                                            locker?
                                                        </label>
                                                    </div>
                                                </div>

                                                <div class="col-4">
                                                    <div class="form-check d-inline-block">
                                                        <label class="form-check-label" for="add_has_bottled_water">
                                                            <input type="checkbox"
                                                                class="form-check-input add_has_bottled_water me-2"
                                                                name="add_has_bottled_water">Has bottled
                                                            water?
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-check d-inline-block">
                                                        <label class="form-check-label" for="add_has_slippers">
                                                            <input type="checkbox"
                                                                class="form-check-input me-2 add_has_slippers"
                                                                name="add_has_slippers">Has slippers?
                                                        </label>
                                                    </div>
                                                </div>

                                                <div class="col-4">
                                                    <div class="form-check d-inline-block">
                                                        <label class="form-check-label" for="add_has_toiletries">
                                                            <input type="checkbox"
                                                                class="form-check-input me-2 add_has_toiletries"
                                                                name="add_has_toiletries">Has toiletries?
                                                        </label>
                                                    </div>
                                                </div>

                                                <div class="col-4">
                                                    <div class="form-check d-inline-block">
                                                        <label class="form-check-label fs-4" for="add_is_active">
                                                            <input type="checkbox"
                                                                class="form-check-input me-2 add_is_active "
                                                                name="add_is_active" checked>Is Active?
                                                        </label>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-danger light"
                                            data-bs-dismiss="modal">Close</button>
                                        <button type="submit" class="btn btn-primary light">Add Room</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive basic-tbl Rooms-list-container">
                        <table id="smalldtb" class="display" style="min-width:600px;">
                            <thead>
                                <tr>
                                    <th>Image</th>
                                    <th>Room Category</th>
                                    <th>Bed Type</th>
                                    <th>Room Count</th>
                                    <th>Extra bed allowed</th>
                                    <th>Room View</th>
                                    <th>Smoking Room</th>
                                    <th>Active</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if ($establishment->EstablishmentRooms)
                                    @foreach ($establishment->EstablishmentRooms as $item)
                                        <tr id="establishment-room-{{ $item->id }}">
                                            <td>
                                                @php
                                                    $featuredGrdImgSrc = asset(
                                                        '/storage/backend-resources/images/trans/1.jpg',
                                                    );

                                                    if ($item->featured_image) {
                                                        $featuredGrdImgSrc = asset(
                                                            '/storage/Establishments/' .
                                                                $establishment->name .
                                                                '/Rooms/' .
                                                                $item->featured_image,
                                                        );
                                                    }
                                                @endphp

                                                <a href="{{ $featuredGrdImgSrc }}" data-lightbox="griid-images"
                                                    data-title="{{ $establishment->name }}  | {{ $item->name }}"><img
                                                        src="{{ $featuredGrdImgSrc }}" alt=""
                                                        class="est-room-image py-2 rounded-3"></a>
                                                {{-- <strong>{{ strtoupper($item->name) }}</strong> --}}
                                                <small><a
                                                        href="{{ route('establishment.room.gallery', ['establishment' => $establishment->id, 'room' => $item->id]) }}"
                                                        target="_blank" class="text-center">View More
                                                        Images</a></small>
                                            </td>
                                            <td>
                                                {{ $item->room_type }}</h4>
                                            </td>
                                            <td>
                                                {{ $item->bed_type }}</h4>
                                            </td>
                                            <td>
                                                {{ $item->room_count }} rooms</h4>
                                            </td>
                                            <td>
                                                {{ $item->is_extra_bed_allowed == 1 ? 'YES' : 'No' }}</h4>
                                            </td>
                                            <td>
                                                <span class="text-primary font-w300">{{ $item->view_type }}</span>
                                            </td>
                                            <td>
                                                {{ $item->is_smoking_room == 1 ? 'YES' : 'No' }}
                                            </td>
                                            <td>
                                                @if ($item->is_active)
                                                    <span class="badge bg-success">Room Active</span>
                                                @else
                                                    <span class="badge bg-info">Room Inactive</span>
                                                @endif
                                            </td>
                                            <td>
                                                <button onclick="deleteEstablishmentRoom({{ $item->id }})"
                                                    class="btn btn-danger light btn-sm text-nowrap"
                                                    message-heading = "Deleted" button-deny-text="Cancel"
                                                    message-text="Room deleted!"><i class="fa-solid fa-times"></i>
                                                    Delete Room</button>
                                                <form id="delete-form-{{ $item->id }}"
                                                    action="{{ route('establishment.room.delete', $item->id) }}"
                                                    method="POST" style="display: none;">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                                &nbsp;
                                                <a href="javascript:void"
                                                    class="btn btn-success light remove-img ms-2 btn-sm"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#viewDetailModal-{{ $item->id }}"><i
                                                        class="fa-solid fa-magnifying-glass"></i> View Details</a>
                                            </td>

                                            <!--*************** View Details Modal Popup ********************-->
                                            <div class="modal modal-xl fade" id="viewDetailModal-{{ $item->id }}"
                                                tabindex="-1" aria-labelledby="viewDetailModalLabel" aria-hidden="true">
                                                <div
                                                    class="modal-dialog modal-dialog-center est-room-view-modal-container">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="viewDetailModalLabel"><span><i
                                                                        class="fa-regular fa-images"></i> Viewing Room
                                                                    Details of -
                                                                    {{ strtoupper($item->room_type) }} -
                                                                    <div
                                                                        class="badge @if ($item->is_active) bg-success @else bg-danger @endif">
                                                                        {{ $item->is_active == 1 ? 'Active' : 'Inactive' }}
                                                                    </div>
                                                                </span>
                                                            </h5>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form
                                                                action="{{ route('establishment.rooms.update', $item->id) }}"
                                                                method="POST" id="editRoomDataForm-{{ $item->id }}"
                                                                class="editRoomDataForm">
                                                                @csrf
                                                                <input name="_method" value="PUT" type="hidden" />
                                                                <div class="row">
                                                                    <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12">
                                                                        <div class="row">
                                                                            <div class="col-12 pb-4 pt-1">
                                                                                @if ($item->EstablishmentRoomGalleryImage->count() > 0)
                                                                                    @php
                                                                                        $imageUrl = asset(
                                                                                            'storage/Establishments/' .
                                                                                                \App\Models\Establishment::find(
                                                                                                    $item->establishment_id,
                                                                                                )->name .
                                                                                                '/' .
                                                                                                $item->name .
                                                                                                '/',
                                                                                        );
                                                                                    @endphp
                                                                                    <div class="row">
                                                                                        @foreach ($item->EstablishmentRoomGalleryImage as $image)
                                                                                            <div class="col-6 p-1">
                                                                                                <a href="{{ $imageUrl . '/' . $image->image }}"
                                                                                                    data-lightbox="{{ $item->name }}"
                                                                                                    data-title="{{ $item->name }}">
                                                                                                    <img src="{{ $imageUrl . '/' . $image->image }}"
                                                                                                        alt=""
                                                                                                        style="width:100%;"></a>
                                                                                            </div>
                                                                                        @endforeach
                                                                                    </div>
                                                                                @else
                                                                                    <img src="{{ $featuredGrdImgSrc }}"
                                                                                        alt=""
                                                                                        style="width:100%;">
                                                                                @endif
                                                                            </div>
                                                                            {{-- <div
                                                                                class="col-xl-6 col-md-6 col-sm-6 col-xs-6">
                                                                                <label for="name"
                                                                                    class="form-label mb-2">Name</label>
                                                                                <input type="text" name='room_name'
                                                                                    class="form-control form-control-sm"
                                                                                    value="{{ strtoupper($item->name) }}"
                                                                                    required>
                                                                            </div> --}}
                                                                            <div class="col-6">
                                                                                <label for="room_count"
                                                                                    class="form-label mb-2">Room
                                                                                    Count</label>
                                                                                <input type="number" name="room_count"
                                                                                    class="form-control form-control-sm"
                                                                                    value="{{ ucfirst($item->room_count) }}"
                                                                                    required max="999">
                                                                            </div>

                                                                            <div class="col-6">
                                                                                <label for="edit_room_category"
                                                                                    class="form-label mb-2 fs-13 font-w500">Choose
                                                                                    Room Category</label>
                                                                                <select
                                                                                    class="form-select form-control edit_room_category room-dropdown"
                                                                                    required name="edit_room_category">
                                                                                    <option value="-1">Room Category
                                                                                    </option>
                                                                                    @isset($roomCategories)
                                                                                        @foreach ($roomCategories as $category)
                                                                                            <option
                                                                                                value="{{ $category->id }}"
                                                                                                {{ $item->room_type_id == $category->id ? 'selected' : '' }}>
                                                                                                {{ ucfirst($category->name) }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    @endisset
                                                                                </select>
                                                                            </div>
                                                                            <div class="col-6 py-3">
                                                                                <label for="edit_bed_type"
                                                                                    class="form-label mb-2 fs-13 font-w500">Choose
                                                                                    Bed Type</label>
                                                                                <select
                                                                                    class="form-select form-control edit_bed_type room-dropdown"
                                                                                    required name="edit_bed_type">
                                                                                    @php
                                                                                        $bedTypes = [
                                                                                            'KING BED',
                                                                                            'QUEEN BED',
                                                                                            'TWIN BEDS',
                                                                                        ];
                                                                                    @endphp

                                                                                    <option value="-1">Bed Type
                                                                                    </option>
                                                                                    @foreach ($bedTypes as $bedType)
                                                                                        <option
                                                                                            value="{{ $bedType }}"
                                                                                            {{ $item->bed_type == $bedType ? 'selected' : '' }}>
                                                                                            {{ ucfirst($bedType) }}
                                                                                        </option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </div>
                                                                            <div class="col-6 py-3">
                                                                                <label for="edit_view_type"
                                                                                    class="form-label mb-2 fs-13 font-w500">Choose
                                                                                    View Type</label>
                                                                                <select
                                                                                    class="form-select form-control edit_view_type room-dropdown"
                                                                                    required name="edit_view_type">

                                                                                    @php
                                                                                        $viewTypeItems = [
                                                                                            'CITY VIEW',
                                                                                            'SEA VIEW',
                                                                                            'MOUNTAIN VIEW',
                                                                                            'RIVER VIEW',
                                                                                            'GARDEN VIEW',
                                                                                            'FOREST VIEW',
                                                                                        ];
                                                                                    @endphp

                                                                                    <option value="-1"
                                                                                        onclick="this.blur();">View Type
                                                                                    </option>
                                                                                    @foreach ($viewTypeItems as $view)
                                                                                        <option
                                                                                            value="{{ $view }}"
                                                                                            onclick="this.blur();"
                                                                                            {{ $item->view_type == $view ? 'selected' : '' }}>
                                                                                            {{ ucfirst($view) }}
                                                                                        </option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </div>

                                                                            <div
                                                                                class="col-6 d-flex pb-2 align-items-center">
                                                                                <a href="{{ route('establishment.room.gallery', ['establishment' => $establishment->id, 'room' => $item->id]) }}"
                                                                                    target="_blank"
                                                                                    class="btn btn-primary mt-2 light btn-md text-nowrap view_room_gallery"><i
                                                                                        class="fa-regular fa-images">&nbsp;&nbsp;</i>View
                                                                                    Room Gallery</a>
                                                                            </div>
                                                                        </div>
                                                                    </div>



                                                                    <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12">
                                                                        <fieldset class="border p-2">
                                                                            <legend class="w-auto px-2">Room Features
                                                                            </legend>
                                                                            <div class="row">
                                                                                <div class="col-6 pt-3">
                                                                                    <div class="form-check d-inline-block">
                                                                                        <label class="form-check-label">
                                                                                            <input type="checkbox"
                                                                                                name="is_extra_bed_allowed"
                                                                                                class="form-check-input me-2"
                                                                                                @if ($item->is_extra_bed_allowed) checked @endif>Is
                                                                                            Extra bed
                                                                                            allowed?
                                                                                        </label>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-6 pt-3">
                                                                                    <div class="form-check d-inline-block">
                                                                                        <label class="form-check-label">
                                                                                            <input type="checkbox"
                                                                                                name="is_smoking_room"
                                                                                                class="form-check-input me-2"
                                                                                                @if ($item->is_smoking_room) checked @endif>Is
                                                                                            smoking room?
                                                                                        </label>
                                                                                    </div>
                                                                                </div>

                                                                                <div class="col-6">
                                                                                    <div class="form-check d-inline-block">
                                                                                        <label class="form-check-label">
                                                                                            <input type="checkbox"
                                                                                                name="has_wifi"
                                                                                                class="form-check-input me-2"
                                                                                                @if ($item->has_wifi) checked @endif>Has
                                                                                            Wifi?
                                                                                        </label>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-6">
                                                                                    <div class="form-check d-inline-block">
                                                                                        <label class="form-check-label">
                                                                                            <input type="checkbox"
                                                                                                name="has_minibar"
                                                                                                class="form-check-input me-2"
                                                                                                @if ($item->has_minibar) checked @endif>Has
                                                                                            mini-bar?
                                                                                        </label>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-6">
                                                                                    <div class="form-check d-inline-block">
                                                                                        <label class="form-check-label">
                                                                                            <input type="checkbox"
                                                                                                name="has_in_room_dining"
                                                                                                class="form-check-input me-2"
                                                                                                @if ($item->has_in_room_dining) checked @endif>Has
                                                                                            in-room dining?
                                                                                        </label>
                                                                                    </div>
                                                                                </div>

                                                                                <div class="col-6">
                                                                                    <div class="form-check d-inline-block">
                                                                                        <label class="form-check-label">
                                                                                            <input type="checkbox"
                                                                                                name="has_electric_kettle"
                                                                                                class="form-check-input me-2"
                                                                                                @if ($item->has_electric_kettle) checked @endif>Has
                                                                                            electric
                                                                                            kettle?
                                                                                        </label>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-6">
                                                                                    <div class="form-check d-inline-block">
                                                                                        <label class="form-check-label">
                                                                                            <input type="checkbox"
                                                                                                class="form-check-input me-2"
                                                                                                name="has_coffee_maker"
                                                                                                @if ($item->has_coffee_maker) checked @endif>Has
                                                                                            coffee maker?
                                                                                        </label>
                                                                                    </div>
                                                                                </div>

                                                                                <div class="col-6">
                                                                                    <div class="form-check d-inline-block">
                                                                                        <label class="form-check-label">
                                                                                            <input type="checkbox"
                                                                                                name="has_ironing_board"
                                                                                                class="form-check-input me-2"
                                                                                                @if ($item->has_ironing_board) checked @endif>Has
                                                                                            Ironing board?
                                                                                        </label>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-6">
                                                                                    <div class="form-check d-inline-block">
                                                                                        <label class="form-check-label">
                                                                                            <input type="checkbox"
                                                                                                name="has_safety_locker"
                                                                                                class="form-check-input me-2"
                                                                                                @if ($item->has_safety_locker) checked @endif>Has
                                                                                            Safety locker?
                                                                                        </label>
                                                                                    </div>
                                                                                </div>

                                                                                <div class="col-6">
                                                                                    <div class="form-check d-inline-block">
                                                                                        <label class="form-check-label">
                                                                                            <input type="checkbox"
                                                                                                class="form-check-input me-2"
                                                                                                name="has_bottled_water"
                                                                                                @if ($item->has_bottled_water) checked @endif>Has
                                                                                            bottled water?
                                                                                        </label>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-6">
                                                                                    <div class="form-check d-inline-block">
                                                                                        <label class="form-check-label">
                                                                                            <input type="checkbox"
                                                                                                name="has_slippers"
                                                                                                class="form-check-input me-2"
                                                                                                @if ($item->has_slippers) checked @endif>Has
                                                                                            slippers?
                                                                                        </label>
                                                                                    </div>
                                                                                </div>

                                                                                <div class="col-6">
                                                                                    <div class="form-check d-inline-block">
                                                                                        <label class="form-check-label">
                                                                                            <input type="checkbox"
                                                                                                name="has_toiletries"
                                                                                                class="form-check-input me-2"
                                                                                                @if ($item->has_toiletries) checked @endif>Has
                                                                                            toiletries?
                                                                                        </label>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-6">
                                                                                    <div class="form-check d-inline-block">
                                                                                        <label class="form-check-label"
                                                                                            for="is_active">
                                                                                            <input type="checkbox"
                                                                                                class="form-check-input me-2 is_active"
                                                                                                name="is_active"
                                                                                                @if ($item->is_active) checked @endif>Is
                                                                                            Active?
                                                                                        </label>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </fieldset>

                                                                        <div class="col-12 py-2">
                                                                            <label
                                                                                class="form-label mb-2">Description</label>
                                                                            <textarea id="editDescription-{{ $item->id }}" rows="6" class="form-control form-control-sm"
                                                                                name="editDescription">{!! $item->description !!}</textarea>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="modal-footer">
                                                                    <button type="submit"
                                                                        class="btn btn-primary light">Update
                                                                        Details</button>
                                                                    <button type="button" class="btn btn-danger light"
                                                                        data-bs-dismiss="modal">Close</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
    <script src="{{ asset('storage/backend-resources/vendor/peity/jquery.peity.min.js') }}"></script>
    <script src="{{ asset('storage/backend-resources/vendor/jquery-nice-select/js/jquery.nice-select.min.js') }}"></script>

    <script src="{{ asset('storage/backend-resources/vendor/lightgallery/js/lightgallery-all.min.js') }}"></script>
    <script src="{{ asset('storage/backend-resources/vendor/ckeditor/ckeditor.js') }}"></script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="{{ asset('js/sl-ntb-custom.js') }}"></script>
    <!--swiper-slider-->
    <script src="{{ asset('storage/backend-resources/vendor/swiper/js/swiper-bundle.min.js') }}"></script>
    <script src="{{ asset('storage/backend-resources/js/dashboard/custom.js') }}"></script>

    <script>
        $(document).ready(function() {
            const $form = $("#add-room-form"); //$('form');
            const $selects = $('.room-dropdown');

            $(document).on('shown.bs.modal', '[id^="editRoomDataForm-"]', function() {
                const editFormId = $(this).attr('id');
                console.log('--> ' + editFormId);
            });

            $form.on('submit', function(event) {
                let isValid = true;
                $selects.each(function() {
                    if ($(this).val() === '-1') {
                        isValid = false;
                        showError($(this));
                    } else {
                        removeError($(this));
                    }
                });

                console.log(isValid);
                if (!isValid) {
                    console.log('For submit blocked...')
                    event.preventDefault();
                }
            });

            $selects.on('change', function() {
                if ($(this).val() !== '-1') {
                    console.log('Valid...')
                    removeError($(this));
                } else {
                    console.log('Invalid...')
                    showError($(this));
                }
            });

            function showError($element) {
                removeError($element); // Remove any existing error first
                $('<div class="error-message text-danger mt-2">Please select a valid item</div>')
                    .insertAfter($element);
                $element.addClass('is-invalid');
            }

            function removeError($element) {
                $element.removeClass('is-invalid');
                $element.next('.error-message').remove();
            }

            $('.ck-content').on('change', function() {
                console.log($(this).text());
                if ($(this).text().trim() !== '') {
                    $(this).removeClass('is-invalid');

                    $(this).next('.error-message').remove();
                } else {
                    $('.ck-content').next('.error-message').remove();
                    $('<div class="error-message text-danger mt-2">Please enter a room description</div>')
                        .insertAfter($('.ck-content'));
                    // Highlight the select element
                    $('.ck-content').addClass('is-invalid');
                }
            });

            /// CKEditor for view details/edit popup
            let editEditors = {};

            // Function to initialize CKEditor
            function initEditCKEditor(modalId) {
                const textareaId = `editDescription-${modalId.split('-').pop()}`;
                const textarea = document.getElementById(textareaId);

                if (!textarea) {
                    console.error(`Textarea not found for modal ${modalId}`);
                    return;
                }

                if (editEditors[modalId]) {
                    editEditors[modalId].destroy();
                }

                ClassicEditor
                    .create(textarea, {
                        // CKEditor configuration options
                        toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList',
                            'blockQuote'
                        ],
                        placeholder: 'Enter the room description here...',
                    })
                    .then(editor => {
                        editEditors[modalId] = editor;
                    })
                    .catch(error => {
                        console.error(`Error initializing CKEditor for modal ${modalId}:`, error);
                    });
            }

            // Initialize CKEditor when edit modal is opened
            $(document).on('shown.bs.modal', '[id^="viewDetailModal-"]', function() {
                const modalId = $(this).attr('id');
                initEditCKEditor(modalId);
            });

            // Destroy CKEditor instance when modal is closed
            $(document).on('hidden.bs.modal', '[id^="viewDetailModal-"]', function() {
                const modalId = $(this).attr('id');
                if (editEditors[modalId]) {
                    editEditors[modalId].destroy();
                    delete editEditors[modalId];
                }
            });
        });
    </script>
@endsection