@extends('layouts.main-app')

@section('title')
@section('content')

<style>
    #carousel {
        min-width: calc(9 * 5rem);
        /* Width for 9 items at 5rem each (adjust as needed) */
        overflow-x: hidden;
        /* Hide overflow items */
        scroll-behavior: smooth;
        /* Smooth scrolling */
    }

    #carousel>div {
        flex: 0 0 auto;
        /* Prevent shrinking or stretching of items */
        width: 9rem;
        /* Fixed width for each date box */
        text-align: center;
    }

    /* Hide scrollbar for carousel */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
</style>
<div class="relative w-full">
    <!-- Background Image -->
    <img class="absolute object-cover h-[500px] lg:h-[40rem] lg:w-full" src="{{ asset('images/XCLV-Banner.webp') }}"
        alt="XCLV-banner">

    <!-- Navbar -->
    @include('layouts.navbar')

    <div class="relative ">
        <div class="flex items-center justify-center text-6xl text-white lg:py-44">
            <p>Reserve Your Spot Now!</p>
        </div>

        <div class="container w-full mx-auto bg-white rounded-lg shadow-2xl">
            <!-- Reservation Form Modal -->
            <div class="relative z-50">
                <div id="reservationModal"
                    class="fixed inset-0 flex items-center justify-center hidden overflow-y-auto bg-gray-500 bg-opacity-50 h-fixed">
                    <div class="w-full max-w-lg p-6 bg-white rounded-lg ">
                        <div id="errorMessages" class="hidden mb-4 text-red-600"></div>
                        <form method="POST" action="{{ route('user.reservations.store') }}" id="reservationForm">
                            @csrf <!-- Laravel CSRF Token for Security -->
                            <h2 class="mb-4 text-2xl font-bold">Reservation Details</h2>

                            <!-- Hidden fields for the selected seat data -->
                            <input type="hidden" name="seat_id" id="seat_id" readonly>
                            <input type="hidden" name="seat_name" id="seat_name" readonly>
                            <input type="hidden" name="seat_price" id="seat_price" readonly>
                            <input type="hidden" name="seat_available" id="seat_available" readonly>
                            <input type="hidden" name="seat_time" id="seat_time" readonly>
                            <input type="hidden" name="door_charge" id="door_charge" readonly>

                            <!-- Dynamic Table Information -->
                            <h1 id="tableInfo" class="mb-4 text-xl font-semibold"></h1>

                            <!-- Full Name Input -->
                            <div class="mt-4">
                                <label for="fullName" class="block mb-2">Full Name:</label>
                                <input type="text" name="fullName" id="fullName" class="w-full p-2 border rounded"
                                    placeholder="Enter your full name" required>
                            </div>

                            <!-- Contact Number Input -->
                            <div class="mt-4">
                                <label for="contactNumber" class="block mb-2">Contact Number:</label>
                                <input
                                    type="tel"
                                    name="contactNumber"
                                    id="contactNumber"
                                    class="w-full p-2 border rounded"
                                    placeholder="Enter your contact number"
                                    maxlength="11"
                                    oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 11)"
                                    required>
                            </div>

                            <!-- Email Address Input -->
                            <div class="mt-4">
                                <label for="emailAddress" class="block mb-2">Email Address:</label>
                                <input type="email" name="emailAddress" id="emailAddress" class="w-full p-2 border rounded"
                                    placeholder="Enter your email address" required>
                            </div>

                            <!-- Estimated Time of Arrival -->
                            <div class="mt-4">
                                <label for="eta" class="block mb-2">Estimated Time of Arrival (ETA):</label>
                                <select name="eta" id="eta" class="w-full p-2 border rounded" required>
                                    <!-- Dynamic options will be populated here -->
                                </select>
                            </div>

                            <!-- Number of Guests -->
                            <div class="mt-4">
                                <label for="guests" class="block mb-2">No. of Guests:</label>
                                <input type="number" name="guests" id="guests" class="w-full p-2 border rounded"
                                    placeholder="Enter number of guests" required min="1">
                            </div>

                            <!-- Special Notes -->
                            <div class="mt-4">
                                <label for="notes" class="block mb-2">Special Notes (optional):</label>
                                <textarea name="notes" id="notes" class="w-full p-2 border rounded"
                                    placeholder="Any special requests or notes?"></textarea>
                            </div>

                            <!-- Hidden field for amount to pay -->
                            <!-- <input type="hidden" name="amount_to_pay" id="amount_to_pay"> -->

                            <!-- Submit and Close Buttons -->
                            <div class="flex justify-between mt-4">
                                <button id="confirmReservationButton" type="submit" class="bg-[#EBB757] text-white py-2 px-4 rounded hover:bg-[#d8a746]">
                                    Confirm Reservation
                                </button>
                                <button type="button" id="closeModalButton"
                                    class="px-4 py-2 text-white bg-red-500 rounded hover:bg-red-700">
                                    Close
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>


            <!-- Thank You Modal -->
            @if (session('success'))
            <div id="thankYouModal"
                class="fixed inset-0 flex items-center justify-center bg-gray-500 bg-opacity-50 backdrop-blur-md">
                <div class="relative w-full max-w-lg p-6 text-center bg-white rounded-lg">
                    <!-- Modal Content -->
                    <h2 class="mb-2 text-2xl font-bold text-green-600">Confirmation!</h2>
                    <p class="mb-4 text-lg font-semibold text-black">Your reservation has been successfully submitted!
                    </p>
                    <p class="mb-4 text-sm text-gray-700">Details of your reservation will be emailed to you shortly. Kindly check your spam if you don't find our confirmation email in your inbox.</p>

                    <!--<p class="mb-4 text-sm text-gray-700">Check your spam.</p>-->

                    <!-- Action Button to Close Modal -->
                    <div class="flex justify-center mt-4">
                        <button id="closeBtn"
                            class="px-6 py-2 font-bold text-white bg-red-600 rounded hover:bg-red-700">
                            Close
                        </button>
                    </div>
                </div>
            </div>
            @endif

            @if (!session('success'))
            <div id="warningModal"
                class="fixed inset-0 z-50 flex items-center justify-center hidden bg-gray-500 bg-opacity-50 backdrop-blur-md">
                <div class="relative w-full max-w-lg p-6 text-center bg-white rounded-lg">
                    <!-- Warning Icon -->
                    <div class="flex justify-center mb-4">
                        <img class="h-14" src="{{ asset('images/age-limit-18-icon.png') }}" alt="age-limit-icon">
                    </div>

                    <!-- Warning Title -->
                    <h2 class="mb-2 text-2xl font-bold text-red-600">WARNING</h2>
                    <p class="text-lg font-semibold text-black">This site is for adults only!</p>

                    <!-- Warning Description -->
                    <p class="mt-2 text-sm text-gray-700">
                        By law in the Philippines, individuals under 18 years old are prohibited from entering bars or
                        consuming alcoholic beverages.
                        If you are 18 or older, please check the box below to proceed with your reservation.
                    </p>

                    <!-- Checkbox and Action Button -->
                    <div class="flex flex-col items-center gap-4 mt-6">
                        <!-- Checkbox -->
                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="ageCheck" class="w-5 h-5 text-red-600 border-gray-300 rounded focus:ring-red-500">
                            <label for="ageCheck" class="text-sm text-gray-700">I am 18+ years old</label>
                        </div>

                        <!-- Button -->
                        <button id="continueBtn"
                            class="w-full max-w-xs px-6 py-2 font-bold text-white bg-red-600 rounded hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
                            disabled>
                            Continue
                        </button>
                    </div>
                </div>
            </div>
            @endif

            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    // Check if the user has already seen the modal
                    if (!localStorage.getItem('ageWarningShown')) {
                        const modal = document.getElementById('warningModal');
                        modal.style.display = 'flex'; // Show the modal

                        // Set localStorage so the modal won't show again
                        localStorage.setItem('ageWarningShown', 'true');
                    }
                    document.getElementById('closeBtn')?.addEventListener('click', function() {
                        const modal = document.getElementById('thankYouModal');
                        modal.style.display = 'none'; // Hide the modal
                    });
                    // Enable the button when checkbox is checked
                    document.getElementById('ageCheck')?.addEventListener('change', function() {
                        const continueBtn = document.getElementById('continueBtn');
                        continueBtn.disabled = !this.checked; // Enable button only if checked
                    });

                    document.getElementById('continueBtn')?.addEventListener('click', function() {
                        const modal = document.getElementById('warningModal');
                        modal.style.display = 'none'; // Hide the modal
                    });
                });
            </script>



            <div class="px-0 px-2 py-4 lg:px-14 ">
                <div>
                    <h1 class="font-semibold">Table Reservation System</h1>

                    <form method="GET" action="{{ url('xclvdvoreservations') }}">
                        <label for="reservationDate" class="block text-sm font-medium text-gray-700">
                            Select Reservation Date
                        </label>
                        <div class="flex flex-row flex-wrap gap-2 mt-2">
                            <div>
                                <input
                                    type="date"
                                    id="reservationDate"
                                    name="reservation_date"
                                    class="block w-full p-2 border border-gray-300 rounded-md shadow-sm lg:w-44 focus:ring-indigo-500 focus:border-indigo-500"
                                    value="{{ request()->input('reservation_date', date('Y-m-d')) }}"
                                    min="{{ now()->toDateString() }}">
                            </div>

                            <div>
                                <button type="submit" class="px-4 py-2 text-white bg-blue-500 rounded">Check Availability</button>
                            </div>

                        </div>

                    </form>

                    <div class="bg-[#7B04D0] my-4">
                        <p class="flex justify-center py-4 text-white text-md md:text-2xl">
                            TABLES/SEATS ON:
                            {{ request()->input('reservation_date', now()->format('m-d-Y')) }}
                        </p>
                    </div>
                </div>
                @if ($errors->any())
                <div class="mb-4 text-red-500">
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <div class="overflow-x-auto">
                    <div class="grid items-start grid-cols-7 gap-0 pt-14">

                        <!-- VVIP 2 -->
                        <div class="border-2 border-black flex items-center  mr-2 justify-center h-14 lg:h-32 cursor-pointer col-span-2
                            @php
                                $pendingReservation = $vvip2->reservations
                                    ->whereIn('status', ['confirmed', 'pending','occupied'])
                                    ->where('reservation_date', $selectedDate)
                                    ->first();
                            @endphp
                            @php
                                $unavailableReservation = $vvip2->unavailable
                                    ->where('status', 'unavailable')
                                    ->where('date', $selectedDate)
                                    ->first();
                            @endphp
                            @if ($pendingReservation)
                                bg-gray-500 text-black pointer-events-none
                          
                            @elseif ($unavailableReservation) 
                                text-gray-500 bg-black
                            @elseif ($vvip2->status === 'occupied') 
                                bg-gray-500 text-black
                            @else     
                                bg-[#EBB757] text-black openModal
                            @endif
                            
                            "
                            data-id="{{ $vvip2->id }}"
                            data-name="{{ $vvip2->name }}"
                            data-time="{{$vvip2->time}}"
                            data-price="{{ $vvip2->priceForDate($selectedDate) }}"
                            data-door-charge="{{ $vvip2->doorchargeForDate($selectedDate) }}"
                            data-seats="{{ $vvip2->seat_available }}"
                            data-show-price="{{ $vvip2->show_price }}">
                            <p class="py-8 text-xs text-center lg:text-3xl">
                                {{ $vvip2->name }}

                            </p>
                        </div>


                        <!-- STAGE -->
                        <div class="flex flex-col items-center justify-center col-span-3 py-2 bg-black lg:py-8 ">
                            <img class="w-10 lg:w-40" src="{{asset('images/logo-nav.webp')}}" alt="">
                            <p class="text-xs text-center lg:text-3xl">STAGE</p>
                        </div>

                        <div class="border-2 border-black flex items-center  ml-2 justify-center h-8 lg:h-24 cursor-pointer p-4 lg:py-8
                              @php
                                $pendingReservation = $vvip3->reservations
                                    ->whereIn('status', ['confirmed', 'pending','occupied'])
                                    ->where('reservation_date', $selectedDate)
                                    ->first();
                                @endphp
                            @php
                                $unavailableReservation = $vvip3->unavailable
                                    ->where('status', 'unavailable')
                                    ->where('date', $selectedDate)
                                    ->first();
                            @endphp
                            @if ($pendingReservation )
                                text-black bg-gray-500 pointer-events-none
                        
                            @elseif ($unavailableReservation) 
                                bg-black text-gray-500
                            @elseif ($vvip3->status === 'occupied') 
                                text-black bg-gray-500
                            @else 
                                text-black bg-[#EBB757] openModal
                            @endif"
                            data-id="{{ $vvip3->id }}" data-name="{{ $vvip3->name }}"
                            data-time="{{$vvip3->time}}"
                            data-price="{{ $vvip3->priceForDate($selectedDate) }}"
                            data-door-charge="{{ $vvip3->doorchargeForDate($selectedDate) }}"
                            data-seats="{{ $vvip3->seat_available }}"
                            data-show-price="{{ $vvip3->show_price }}">
                            <p class="py-8 text-xs text-center lg:text-3xl">
                                {{ $vvip3->name }}
                            </p>
                        </div>

                        <div class="border-2 border-black flex items-center justify-center cursor-pointer  h-24 lg:h-[20rem] p-4 lg:py-8
                            @php
                            $pendingReservation = $vvip4->reservations
                                ->whereIn('status', ['confirmed', 'pending','occupied'])
                                ->where('reservation_date', $selectedDate)
                                ->first();
                            @endphp
                           @php
                                $unavailableReservation = $vvip4->unavailable
                                    ->where('status', 'unavailable')
                                    ->where('date', $selectedDate)
                                    ->first();
                            @endphp
                            @if ($pendingReservation )
                                text-black bg-gray-500 pointer-events-none
                            @elseif ($unavailableReservation) 
                                bg-black text-gray-500
                            @elseif ($vvip4->status === 'occupied') 
                                bg-gray-500 text-black
                            @else 
                                bg-[#EBB757] text-black openModal
                            @endif"
                            data-id="{{ $vvip4->id }}" data-name="{{ $vvip4->name }}"
                            data-time="{{$vvip4->time}}"
                            data-price="{{ $vvip4->priceForDate($selectedDate) }}"
                            data-door-charge="{{ $vvip4->doorchargeForDate($selectedDate) }}"
                            data-seats="{{ $vvip4->seat_available }}"
                            data-show-price="{{ $vvip4->show_price }}">
                            <p class="py-8 text-xs text-center lg:text-3xl">
                                {{ $vvip4->name }}
                                @if ($vvip4->status === 'occupied')
                                @elseif ($vvip4->status === 'unavailable')
                                @endif
                            </p>
                        </div>

                        <div class="grid h-96 gap-4 -mt-[2rem] ">
                            <div class="grid grid-cols-1 gap-0 lg:grid-rows-2">
                                <div class="border-2 border-black flex items-center justify-center h-20 lg:h-full p-4 lg:py-8 cursor-pointer
                                    @php
                                    $pendingReservation = $vvip1->reservations
                                        ->whereIn('status', ['confirmed', 'pending','occupied'])
                                        ->where('reservation_date', $selectedDate)
                                        ->first();
                                    @endphp
                                    @php
                                        $unavailableReservation = $vvip1->unavailable
                                            ->where('status', 'unavailable')
                                            ->where('date', $selectedDate)
                                            ->first();
                                    @endphp
                                    @if ($pendingReservation )
                                        text-black bg-gray-500  pointer-events-none
                                    @elseif ($unavailableReservation) 
                                        text-gray-500 bg-black
                                    @elseif ($vvip1->status === 'occupied') 
                                        text-black bg-gray-500
                                    @else      
                                        bg-[#EBB757] text-black openModal
                                    @endif"
                                    data-id="{{ $vvip1->id }}" data-name="{{ $vvip1->name }}"
                                    data-time="{{$vvip1->time}}"
                                    data-price="{{ $vvip1->priceForDate($selectedDate) }}"
                                    data-door-charge="{{ $vvip1->doorchargeForDate($selectedDate) }}"
                                    data-seats="{{ $vvip1->seat_available }}"
                                    data-show-price="{{ $vvip1->show_price }}">
                                    <p class="py-8 text-xs text-center lg:text-3xl">
                                        {{ $vvip1->name }}
                                        @if ($vvip1->status === 'occupied')
                                        @elseif ($vvip1->status === 'unavailable')
                                        @endif
                                    </p>
                                </div>

                                <div class="flex flex-col gap-0 -mt-[10rem] lg:mt-0">
                                    <div class="border-2 border-black flex items-center justify-center h-14 lg:h-32  p-4 lg:py-8
                                        @php
                                        $pendingReservation = $vip3->reservations
                                            ->whereIn('status', ['confirmed', 'pending','occupied'])
                                            ->where('reservation_date', $selectedDate)
                                            ->first();
                                        @endphp
                                        @php
                                            $unavailableReservation = $vip3->unavailable
                                                ->where('status', 'unavailable')
                                                ->where('date', $selectedDate)
                                                ->first();
                                        @endphp
                                        @if ($pendingReservation )
                                            text-black bg-gray-500 pointer-events-none

                                        @elseif ($unavailableReservation) 
                                            text-gray-500 bg-black
                                        @elseif ($vip3->status === 'occupied') 
                                            text-black bg-gray-500
                                        @else 
                                            bg-[#7B04D0] text-white cursor-pointer openModal
                                        @endif"
                                        data-id="{{ $vip3->id }}" data-name="{{ $vip3->name }}"
                                        data-time="{{$vip3->time}}"
                                        data-price="{{ $vip3->priceForDate($selectedDate) }}"
                                        data-door-charge="{{ $vip3->doorchargeForDate($selectedDate) }}"
                                        data-seats="{{ $vip3->seat_available }}"
                                        data-show-price="{{ $vip3->show_price }}">
                                        <p class="py-8 text-xs text-center lg:text-3xl">
                                            {{ $vip3->name }}
                                            @if ($vip3->status === 'occupied')
                                            @elseif ($vip3->status === 'unavailable')
                                            @endif
                                        </p>
                                    </div>

                                    <div class="border-2 border-black flex items-center justify-center h-14 lg:h-32  p-4 lg:py-8
                                        @php
                                            $pendingReservation2 = $vip2->reservations
                                            ->whereIn('status', ['confirmed', 'pending','occupied'])
                                                ->where('reservation_date', $selectedDate)
                                                ->first();
                                        @endphp
                                       @php
                                            $unavailableReservation = $vip2->unavailable
                                                ->where('status', 'unavailable')
                                                ->where('date', $selectedDate)
                                                ->first();
                                        @endphp
                                        @if ($pendingReservation2)
                                            text-black bg-gray-500 pointer-events-none
                                        
                                        @elseif ($unavailableReservation) 
                                            bg-black text-gray-500
                                        @elseif ($vip2->status === 'occupied') 
                                            text-black bg-gray-500
                                        @else 
                                            bg-[#7B04D0] text-white cursor-pointer openModal
                                        @endif"
                                        data-id="{{ $vip2->id }}" data-name="{{ $vip2->name }}"
                                        data-time="{{$vip2->time}}"
                                        data-price="{{ $vip2->priceForDate($selectedDate) }}"
                                        data-door-charge="{{ $vip2->doorchargeForDate($selectedDate) }}"
                                        data-seats="{{ $vip2->seat_available }}"
                                        data-show-price="{{ $vip2->show_price }}">
                                        <p class="py-8 text-xs text-center lg:text-3xl">
                                            {{ $vip2->name }}
                                            @if ($vip2->status === 'occupied')
                                            @elseif ($vip2->status === 'unavailable')
                                            @endif
                                        </p>
                                    </div>

                                    <div class="border-2 border-black flex items-center justify-center h-14 lg:h-32  p-4 lg:py-8
                                        @php
                                            $pendingReservation1 = $vip1->reservations
                                                ->whereIn('status', ['confirmed', 'pending'])
                                                ->where('reservation_date', $selectedDate)
                                                ->first();
                                        @endphp
                                        @php
                                            $unavailableReservation = $vip1->unavailable
                                                ->where('status', 'unavailable')
                                                ->where('date', $selectedDate)
                                                ->first();
                                        @endphp
                                        @if ($pendingReservation1 )
                                            text-black bg-gray-500 pointer-events-none
                                        
                                        @elseif ($unavailableReservation) 
                                            bg-black text-gray-500
                                        @elseif ($vip1->status === 'occupied') 
                                            text-black bg-gray-500
                                        @else 
                                            bg-[#7B04D0] text-white cursor-pointer openModal
                                        @endif"
                                        data-id="{{ $vip1->id }}" data-name="{{ $vip1->name }}"
                                        data-time="{{$vip1->time}}"
                                        data-price="{{ $vip1->priceForDate($selectedDate) }}"
                                        data-door-charge="{{ $vip1->doorchargeForDate($selectedDate) }}"
                                        data-seats="{{ $vip1->seat_available }}"
                                        data-show-price="{{ $vip1->show_price }}">
                                        <p class="py-8 text-xs text-center lg:text-3xl">
                                            {{ $vip1->name }}
                                            @if ($vip1->status === 'occupied')
                                            @elseif ($vip1->status === 'unavailable')
                                            @endif
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="grid h-2 grid-cols-7 col-span-5 gap-1 px-2 lg:h-14">
                            @foreach (range(12, 71) as $id)
                            @php
                            // Find the seat by ID (assuming 'id' is the field name in your database)
                            $seat = $seats->firstWhere('id', $id);
                            @endphp

                            @if ($id === 65)
                            <!-- Empty div at position 65 -->
                            <div></div>
                            @elseif ($seat && $seat->name)
                            <!-- Ensure that seat exists and has a name -->
                            <div class="border-2  rounded-lg flex items-center justify-center h-10 lg:h-24 lg:py-8
                                @php
                                // Check if the seat has a reservation for the selected date
                                $reservation = $seat->reservations
                                ->where('reservation_date', $selectedDate)
                                ->whereIn('status', ['confirmed', 'pending','occupied'])
                                ->first();
                                @endphp
                                @php
                                    $unavailableReservation = $seat->unavailable
                                        ->where('status', 'unavailable')
                                        ->where('date', $selectedDate)
                                        ->first();
                                @endphp
                                @if ($reservation )
                                text-black bg-gray-500 pointer-events-none
                                
                                @elseif ($unavailableReservation) 
                                    bg-black text-gray-500
                                @elseif ($seat->status === 'occupied') 
                                    text-black bg-gray-500
                                @else 
                                    border-[#7B04D0] bg-white text-black cursor-pointer openModal
                                @endif"
                                data-id="{{ $seat->id }}" data-name="{{ $seat->name }}"
                                data-time="{{$seat->time}}"
                                data-price="{{ $seat->priceForDate($selectedDate) }}"
                                data-door-charge="{{ $seat->doorchargeForDate($selectedDate) }}"
                                data-seats="{{ $seat->seat_available }}"
                                data-show-price="{{ $seat->show_price }}">
                                <p class="py-8 text-[10px] text-center lg:text-3xl">
                                    {{ $seat->name }}
                                </p>
                            </div>
                            @endif
                            @endforeach
                        </div>


                        <div class="flex flex-col gap-0">
                            <div class="border-2 border-black flex items-center justify-center h-14 lg:h-44  p-4 lg:py-8
                                @php
                                $pendingReservation4 = $vip4->reservations
                                    ->whereIn('status', ['confirmed', 'pending','occupied'])
                                    ->where('reservation_date', $selectedDate)
                                    ->first();
                                @endphp
                                @php
                                    $unavailableReservation = $vip4->unavailable
                                        ->where('status', 'unavailable')
                                        ->where('date', $selectedDate)
                                        ->first();
                                @endphp
                                @if ($pendingReservation4)
                                    text-black bg-gray-500 pointer-events-none
                                
                                @elseif ($unavailableReservation) 
                                    bg-black text-gray-500
                                @elseif ($vip4->status === 'occupied') 
                                    text-black bg-gray-500
                                @else 
                                    bg-[#7B04D0] text-white cursor-pointer openModal
                                @endif"

                                data-id="{{ $vip4->id }}" data-name="{{ $vip4->name }}"
                                data-time="{{$vip4->time}}"
                                data-price="{{ $vip4->priceForDate($selectedDate) }}"
                                data-door-charge="{{ $vip4->doorchargeForDate($selectedDate) }}"
                                data-seats="{{ $vip4->seat_available }}"
                                data-show-price="{{ $vip4->show_price }}">
                                <p class="py-8 text-xs text-center lg:text-3xl">
                                    {{ $vip4->name }}
                                    @if ($vip4->status === 'occupied')
                                    @elseif ($vip4->status === 'unavailable')
                                    @endif
                                </p>
                            </div>
                            <div class="border-2 border-black flex items-center justify-center h-14 lg:h-44  p-4 lg:py-8
                                @php
                                $pendingReservation5 = $vip5->reservations
                                    ->whereIn('status', ['confirmed', 'pending','occupied'])
                                    ->where('reservation_date', $selectedDate)
                                    ->first();
                                @endphp
                                @php
                                    $unavailableReservation = $vip5->unavailable
                                        ->where('status', 'unavailable')
                                        ->where('date', $selectedDate)
                                        ->first();
                                @endphp
                                 @if ($pendingReservation5)
                                        text-black bg-gray-500 pointer-events-none
                                        
                                        @elseif ($unavailableReservation) 
                                           bg-black text-gray-500
                                        @elseif ($vip5->status === 'occupied') 
                                            text-black bg-gray-500
                                        @else 
                                            bg-[#7B04D0] text-white cursor-pointer openModal
                                        @endif"
                                data-id="{{ $vip5->id }}" data-name="{{ $vip5->name }}"
                                data-time="{{$vip5->time}}"
                                data-price="{{ $vip5->priceForDate($selectedDate) }}"
                                data-door-charge="{{ $vip5->doorchargeForDate($selectedDate) }}"
                                data-seats="{{ $vip5->seat_available }}"
                                data-show-price="{{ $vip5->show_price }}">
                                <p class="py-8 text-xs text-center lg:text-3xl">
                                    {{ $vip5->name }}
                                    @if ($vip5->status === 'occupied')
                                    @elseif ($vip5->status === 'unavailable')
                                    @endif
                                </p>
                            </div>
                            <div class="border-2 border-black flex items-center justify-center h-14 lg:h-44  p-4 lg:py-8
                                @php
                                $pendingReservation6 = $vip6->reservations
                                    ->whereIn('status', ['confirmed', 'pending','occupied'])
                                    ->where('reservation_date', $selectedDate)
                                    ->first();
                                @endphp
                                @php
                                    $unavailableReservation = $vip6->unavailable
                                        ->where('status', 'unavailable')
                                        ->where('date', $selectedDate)
                                        ->first();
                                @endphp
                               @if ($pendingReservation6 )
                                        text-black bg-gray-500 pointer-events-none
                       
                                        @elseif ($unavailableReservation) 
                                            bg-black text-gray-500
                                        @elseif ($vip6->status === 'occupied') 
                                            text-black bg-gray-500
                                        @else 
                                            bg-[#7B04D0] text-white cursor-pointer openModal
                                        @endif"
                                data-id="{{ $vip6->id }}" data-name="{{ $vip6->name }}"
                                data-time="{{$vip6->time}}"
                                data-price="{{ $vip6->priceForDate($selectedDate) }}"
                                data-door-charge="{{ $vip6->doorchargeForDate($selectedDate) }}"
                                data-seats="{{ $vip6->seat_available }}"
                                data-show-price="{{ $vip6->show_price }}">
                                <p class="py-8 text-xs text-center lg:text-3xl">
                                    {{ $vip6->name }}
                                    @if ($vip6->status === 'occupied')
                                    @elseif ($vip6->status === 'unavailable')
                                    @endif
                                </p>
                            </div>
                            <div class="border-2 border-black flex items-center justify-center h-14 lg:h-48 p-4 lg:py-8
                                @php
                                $pendingReservation7 = $vip7->reservations
                                    ->whereIn('status', ['confirmed', 'pending','occupied'])
                                    ->where('reservation_date', $selectedDate)
                                    ->first();
                                @endphp
                               @php
                                    $unavailableReservation = $vip7->unavailable
                                        ->where('status', 'unavailable')
                                        ->where('date', $selectedDate)
                                        ->first();
                                @endphp
                                        @if ($pendingReservation7)
                                            text-black bg-gray-500 pointer-events-none
                                 
                                         @elseif ($unavailableReservation) 
                                            bg-black text-gray-500
                                        @elseif ($vip7->status === 'occupied') 
                                            text-black bg-gray-500
                                        @else 
                                            bg-[#7B04D0] text-white cursor-pointer openModal
                                        @endif"

                                data-id="{{ $vip7->id }}" data-name="{{ $vip7->name }}"
                                data-time="{{$vip7->time}}"
                                data-price="{{ $vip7->priceForDate($selectedDate) }}"
                                data-door-charge="{{ $vip7->doorchargeForDate($selectedDate) }}"
                                data-seats="{{ $vip7->seat_available }}"
                                data-show-price="{{ $vip7->show_price }}">
                                <p class="py-8 text-xs text-center lg:text-3xl">
                                    {{ $vip7->name }}
                                    @if ($vip7->status === 'occupied')
                                    @elseif ($vip7->status === 'unavailable')
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="">
                        <div class="flex cursor-pointer justify-center items-center -mt-8 lg:mt-[5rem] border-2 border-black">
                            @foreach (range(72, 84) as $id)
                            @php
                            // Find the seat by ID (assuming 'id' is the field name in your database)
                            $seat = $seats->firstWhere('id', $id);
                            @endphp

                            @if ($seat && $seat->name)
                            <!-- Ensure that seat exists and has a name -->
                            <div class="border-2 text-black rounded-full flex items-center justify-center w-2 h-2 lg:w-24 lg:h-24 p-3 lg:py-8
                                @php
                                $pendingReservation = $seat->reservations
                                ->whereIn('status', ['confirmed', 'pending','occupied'])
                                ->where('reservation_date', $selectedDate)
                                ->first();

                                @endphp
                                
                                @php
                                $unavailableReservation = $seat->unavailable
                                ->where('status', 'unavailable')
                                ->where('date', $selectedDate)
                                ->first();
                                @endphp
                                @if ($pendingReservation )
                                    text-black bg-gray-500 pointer-events-none
                            
                                @elseif ($unavailableReservation) 
                                    bg-black text-gray-500
                                @elseif ($seat->status === 'occupied') 
                                    text-black bg-gray-500
                                @else 
                                    bg-white text-black openModal
                                @endif"
                                data-id="{{ $seat->id }}" data-name="{{ $seat->name }}"
                                data-time="{{$seat->time}}"
                                data-price="{{ $seat->priceForDate($selectedDate) }}"
                                data-door-charge="{{ $seat->doorchargeForDate($selectedDate) }}"
                                data-seats="{{ $seat->seat_available }}"
                                data-show-price="{{ $seat->show_price }}">
                                <p class="py-8 text-[10px] lg:text-3xl text-center">
                                    {{ $seat->name }}
                                </p>
                            </div>
                            @endif
                            @endforeach
                        </div>
                    </div>
                    <div class="flex justify-center py-4 text-lg text-white bg-black lg:text-3xl">
                        BAR COUNTER
                    </div>
                    <div>
                        <div class="py-8">
                            <h1 class="flex justify-center text-xl">TABLE/BAR SEATS PRICES</h1>


                            @if ($vvip1->reservations->where('reservation_date', $selectedDate))
                            <p class="text-[10px] sm:text-[12px] md:text-base lg:text-lg flex justify-center text-center">
                                {{ $vvip1->name }}: {{ $vvip1->priceForDate($selectedDate) }} ({{ $vvip1->doorchargeForDate($selectedDate) ?: 'No Door Charge' }})
                            </p>

                            @endif
                            @if ($vvip2->reservations->where('reservation_date', $selectedDate))
                            <p class="text-[10px] sm:text-[12px] md:text-base lg:text-lg flex justify-center text-center">
                                {{ $vvip2->name }}: {{ $vvip2->priceForDate($selectedDate) }} ({{ $vvip2->doorchargeForDate($selectedDate) ?: 'No Door Charge' }})
                            </p>
                            @endif

                            @if ($vvip3->reservations->where('reservation_date', $selectedDate))
                            <p class="text-[10px] sm:text-[12px] md:text-base lg:text-lg flex justify-center text-center">
                                {{ $vvip3->name }}: {{ $vvip3->priceForDate($selectedDate) }} ({{ $vvip3->doorchargeForDate($selectedDate) ?: 'No Door Charge' }})
                            </p>
                            @endif
                            @if ($vvip4->reservations->where('reservation_date', $selectedDate))
                            <p class="text-[10px] sm:text-[12px] md:text-base lg:text-lg flex justify-center text-center">
                                {{ $vvip4->name }}: {{ $vvip4->priceForDate($selectedDate) }} ({{ $vvip4->doorchargeForDate($selectedDate) ?: 'No Door Charge' }})
                            </p>
                            @endif


                            @if ($vip1->reservations->where('reservation_date', $selectedDate))
                            <p class="text-[10px] sm:text-[12px] md:text-base lg:text-lg flex justify-center text-center">
                                {{ $vip1->name }}: {{ $vip1->priceForDate($selectedDate) }} ({{ $vip1->doorchargeForDate($selectedDate) ?: 'No Door Charge' }})
                            </p>

                            @endif
                            @if ($vip2->reservations->where('reservation_date', $selectedDate))
                            <p class="text-[10px] sm:text-[12px] md:text-base lg:text-lg flex justify-center text-center">
                                {{ $vip2->name }}: {{ $vip2->priceForDate($selectedDate) }} ({{ $vip2->doorchargeForDate($selectedDate) ?: 'No Door Charge' }})
                            </p>

                            @endif
                            @if ($vip3->reservations->where('reservation_date', $selectedDate))
                            <p class="text-[10px] sm:text-[12px] md:text-base lg:text-lg flex justify-center text-center">
                                {{ $vip3->name }}: {{ $vip3->priceForDate($selectedDate) }} ({{ $vip3->doorchargeForDate($selectedDate) ?: 'No Door Charge' }})
                            </p>

                            @endif
                            @if ($vip4->reservations->where('reservation_date', $selectedDate))
                            <p class="text-[10px] sm:text-[12px] md:text-base lg:text-lg flex justify-center text-center">
                                {{ $vip4->name }}: {{ $vip4->priceForDate($selectedDate) }} ({{ $vip4->doorchargeForDate($selectedDate) ?: 'No Door Charge' }})
                            </p>

                            @endif
                            @if ($vip5->reservations->where('reservation_date', $selectedDate))
                            <p class="text-[10px] sm:text-[12px] md:text-base lg:text-lg flex justify-center text-center">
                                {{ $vip5->name }}: {{ $vip5->priceForDate($selectedDate) }} ({{ $vip5->doorchargeForDate($selectedDate) ?: 'No Door Charge' }})
                            </p>

                            @endif
                            @if ($vip6->reservations->where('reservation_date', $selectedDate))
                            <p class="text-[10px] sm:text-[12px] md:text-base lg:text-lg flex justify-center text-center">
                                {{ $vip6->name }}: {{ $vip6->priceForDate($selectedDate) }} ({{ $vip6->doorchargeForDate($selectedDate) ?: 'No Door Charge' }})
                            </p>

                            @endif
                            @if ($vip7->reservations->where('reservation_date', $selectedDate))
                            <p class="text-[10px] sm:text-[12px] md:text-base lg:text-lg flex justify-center text-center">
                                {{ $vip7->name }}: {{ $vip7->priceForDate($selectedDate) }} ({{ $vip7->doorchargeForDate($selectedDate) ?: 'No Door Charge' }})
                            </p>
                            @endif



                            @php
                            $barSeats = range(72, 84);
                            $standingSeats = range(12, 71);
                            @endphp

                            <div id="bar-seats" class="flex flex-col items-center">
                                @foreach ($barSeats as $id)
                                @php
                                $seat = $seats->firstWhere('id', $id);
                                @endphp
                                @if ($seat)
                                <div class="flex flex-col items-center justify-center ">
                                    <p class="text-[10px] sm:text-[12px] md:text-base lg:text-lg seat-detail"
                                        style="display: {{ $loop->first ? 'block' : 'none' }};">
                                        BAR SEAT {{ $seat->name }}: {{ $seat->priceForDate($selectedDate) }}({{ $seat->doorchargeForDate($selectedDate) ?: 'No Door Charge' }})
                                    </p>
                                    <!-- The 'Show More' button for bar seats, aligned next to the first seat -->
                                    @if ($loop->first)
                                    <button id="show-more-bar" class="flex items-center space-x-2 text-sm text-black" onclick="toggleSeats('bar-seats')">
                                        <div class="flex items-center justify-center w-6 h-6 bg-gray-100 border rounded-full">
                                            <i class="text-lg text-gray-500 bx bx-chevron-down"></i>
                                        </div>
                                        <span>Show More</span>

                                    </button>
                                    @endif
                                </div>
                                @endif
                                @endforeach
                            </div>

                            <div id="standing-seats" class="flex flex-col items-center">
                                @foreach ($standingSeats as $id)
                                @php
                                $seat = $seats->firstWhere('id', $id);
                                @endphp
                                @if ($seat)
                                <div class="flex flex-col items-center justify-center ">
                                    <p class="text-[10px] sm:text-[12px] md:text-base lg:text-lg seat-detail"
                                        style="display: {{ $loop->first ? 'block' : 'none' }};">
                                        Standing Table {{ $seat->name }}: {{ $seat->priceForDate($selectedDate) }} ({{ $seat->doorchargeForDate($selectedDate) ?: 'No Door Charge' }})
                                    </p>
                                    <!-- The 'Show More' button for standing seats, aligned next to the first seat -->
                                    @if ($loop->first)
                                    <button id="show-more-standing" class="flex items-center space-x-2 text-sm text-black" onclick="toggleSeats('standing-seats')">
                                        <div class="flex items-center justify-center w-6 h-6 bg-gray-100 border rounded-full">
                                            <i class="text-lg text-gray-500 bx bx-chevron-down"></i>
                                        </div>
                                        <span>Show More</span>
                                    </button>
                                    @endif
                                </div>
                                @endif
                                @endforeach
                            </div>

                            <script>
                                function toggleSeats(seatType) {
                                    var seats = document.querySelectorAll(`#${seatType} .seat-detail`);
                                    var button = document.getElementById(`show-more-${seatType}`);

                                    // Check if seats are already fully visible
                                    var allSeatsVisible = Array.from(seats).every(seat => seat.style.display === 'block');

                                    // If all seats are visible, hide them and show only the first one
                                    if (allSeatsVisible) {
                                        seats.forEach((seat, index) => {
                                            seat.style.display = (index === 0) ? 'block' : 'none'; // Only show the first seat
                                        });
                                        button.innerText = 'Show More';
                                    } else {
                                        // Show all seats
                                        seats.forEach((seat) => {
                                            seat.style.display = 'block';
                                        });
                                        button.innerText = 'Show Less';
                                    }
                                }
                            </script>

                            <p class="text-[10px] sm:text-[12px] md:text-base lg:text-lg flex justify-center text-center mt-8">
                                FOR EVENTS OR LARGE BOOKING, CONTACT US DIRECTLY AT 0954-451-8755 OR EMAIL US AT XCLV.DAVAO@gmail.com
                            </p>
                        </div>

                    </div>


                </div>

            </div>
        </div>


    </div>
    @include('layouts.footer')
</div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const reservationForm = document.getElementById('reservationForm');
        const errorMessagesContainer = document.getElementById('errorMessages');
        const confirmReservationButton = document.getElementById('confirmReservationButton');

        reservationForm.addEventListener('submit', function(event) {
            const fullName = document.getElementById('fullName').value.trim();
            const contactNumber = document.getElementById('contactNumber').value.trim();
            const emailAddress = document.getElementById('emailAddress').value.trim();
            const eta = document.getElementById('eta').value.trim();
            const guests = document.getElementById('guests').value.trim();

            let hasError = false;
            let errorMessages = [];

            errorMessagesContainer.innerHTML = ''; // Clear previous messages

            if (!fullName) {
                errorMessages.push("Full Name is required.");
                hasError = true;
            }
            if (!contactNumber || contactNumber.length !== 11) {
                errorMessages.push("A valid 11-digit contact number is required.");
                hasError = true;
            }
            if (!emailAddress.includes('@')) {
                errorMessages.push("A valid email address is required.");
                hasError = true;
            }
            if (!eta) {
                errorMessages.push("Please select an Estimated Time of Arrival.");
                hasError = true;
            }
            if (!guests || parseInt(guests) < 1) {
                errorMessages.push("Number of guests must be at least 1.");
                hasError = true;
            }

            if (hasError) {
                event.preventDefault(); // Prevent form submission
                errorMessagesContainer.classList.remove('hidden');
                errorMessagesContainer.innerHTML = `<ul>${errorMessages.map(msg => `<li>${msg}</li>`).join('')}</ul>`;
            } else {
                confirmReservationButton.disabled = true;
                confirmReservationButton.textContent = 'Processing...'; // Indicate processing state only if no errors
                errorMessagesContainer.classList.add('hidden'); // Hide error messages if no errors
            }
        });

        // Close the modal only when explicitly clicking "Close"
        document.getElementById('closeModalButton').addEventListener('click', function() {
            document.getElementById('reservationModal').classList.add('hidden');
        });
    });


    document.addEventListener("DOMContentLoaded", function() {
        const vvipElements = document.querySelectorAll('.openModal');

        const guestsInput = document.getElementById('guests');
        const etaSelect = document.getElementById('eta');
        const reservationModal = document.getElementById('reservationModal');

        let maxSeats = 0;

        guestsInput.addEventListener('input', function() {
            let guests = parseInt(this.value) || 0;
            if (guests > maxSeats) {
                this.value = maxSeats;
                const errorMessage = document.getElementById('errorMessages');
                errorMessage.textContent = `The maximum number of guests for this reservation is ${maxSeats}.`;
                errorMessage.classList.remove('hidden');
                setTimeout(() => errorMessage.classList.add('hidden'), 5000); // Hide after 5 seconds
            }
        });

        vvipElements.forEach(function(vvip) {
            vvip.addEventListener('click', function() {
                const vvipId = vvip.getAttribute('data-id');
                const vvipName = vvip.getAttribute('data-name');
                const vvipPrice = vvip.getAttribute('data-price');
                const vvipDoorCharge = vvip.getAttribute('data-door-charge');
                const vvipSeats = parseInt(vvip.getAttribute('data-seats'), 10); // Convert to number
                const showPrice = vvip.getAttribute('data-show-price');
                const vvipTime = vvip.getAttribute('data-time');

                maxSeats = vvipSeats; // Update maxSeats dynamically

                let tableInfo = `Table: ${vvipName} (${vvipSeats} Seat)`;

                if (showPrice == 1 && vvipPrice > 0) {
                    tableInfo += ` ₱${vvipPrice}`;
                }

                document.getElementById('tableInfo').textContent = tableInfo;
                document.getElementById('seat_id').value = vvipId;
                document.getElementById('seat_name').value = vvipName;
                document.getElementById('seat_price').value = vvipPrice;
                document.getElementById('door_charge').value = vvipDoorCharge;
                document.getElementById('seat_available').value = vvipSeats;
                document.getElementById('seat_time').value = vvipTime;

                guestsInput.setAttribute('max', vvipSeats);
                guestsInput.value = ''; // Clear previous value

                etaSelect.innerHTML = '<option value="" disabled selected>Select ETA</option>';
                const availableTimes = vvipTime.split(',');

                function convertTo12HourFormat(time) {
                    const [hour, minute] = time.split(':');
                    let hours = parseInt(hour, 10);
                    let period = 'AM';

                    if (hours >= 12) {
                        period = 'PM';
                        if (hours > 12) hours -= 12;
                    } else if (hours === 0) {
                        hours = 12;
                    }
                    return `${hours}:${minute} ${period}`;
                }

                availableTimes.forEach(function(time) {
                    const formattedTime = convertTo12HourFormat(time);
                    const option = document.createElement('option');
                    option.value = time;
                    option.textContent = formattedTime;
                    etaSelect.appendChild(option);
                });

                reservationModal.classList.remove('hidden');
            });
        });

        document.getElementById('closeModalButton').addEventListener('click', function() {
            reservationModal.classList.add('hidden');
        });
    });


    // Enable the 'Continue' button when the checkbox is checked
    document.getElementById('ageCheck').addEventListener('change', function() {
        const continueBtn = document.getElementById('continueBtn');
        continueBtn.disabled = !this.checked;
    });

    // Close the modal when the 'Continue' button is clicked
    document.getElementById('continueBtn').addEventListener('click', function() {
        // Close the modal by hiding it
        document.getElementById('warningModal').style.display = 'none';
    });
</script>



@endsection