@extends('frontend.layouts.app')

@section('title', 'CCULB Resort | Comfort, Nature & Hospitality')

@section('content')
    <section class="hero" id="home">
        @if ($sliders->isNotEmpty())
            <div class="hero-slider" id="heroSlider">
                @foreach ($sliders as $slider)
                    <article
                        class="hero-slide {{ $loop->first ? 'active' : '' }}"
                        style="background-image:
                            linear-gradient(
                                90deg,
                                rgba(8, 25, 22, 0.84) 0%,
                                rgba(8, 25, 22, 0.58) 48%,
                                rgba(8, 25, 22, 0.18) 100%
                            ),
                            url('{{ asset('storage/'.$slider->image) }}');"
                    >
                        <div class="container hero-content">
                            @if ($slider->small_title)
                                <span class="eyebrow">
                                    {{ $slider->small_title }}
                                </span>
                            @endif

                            <h1>{{ $slider->title }}</h1>

                            @if ($slider->description)
                                <p>{{ $slider->description }}</p>
                            @endif

                            <div class="hero-actions">
                                @if ($slider->button_text)
                                    <a
                                        class="button button-gold"
                                        href="{{ $slider->button_url ?: '#welcome' }}"
                                    >
                                        {{ $slider->button_text }}
                                    </a>
                                @endif

                                <a class="button button-outline" href="#booking">
                                    Check Availability
                                </a>
                            </div>
                        </div>
                    </article>
                @endforeach

                @if ($sliders->count() > 1)
                    <button
                        class="slider-arrow slider-prev"
                        id="heroPrev"
                        type="button"
                        aria-label="Previous slide"
                    >
                        ‹
                    </button>

                    <button
                        class="slider-arrow slider-next"
                        id="heroNext"
                        type="button"
                        aria-label="Next slide"
                    >
                        ›
                    </button>

                    <div class="slider-dots">
                        @foreach ($sliders as $slider)
                            <button
                                class="slider-dot {{ $loop->first ? 'active' : '' }}"
                                type="button"
                                data-slide="{{ $loop->index }}"
                                aria-label="Open slide {{ $loop->iteration }}"
                            ></button>
                        @endforeach
                    </div>
                @endif
            </div>
        @else
            <article class="hero-slide hero-fallback active">
                <div class="container hero-content">
                    <span class="eyebrow">
                        Welcome to CCULB Resort
                    </span>

                    <h1>
                        Escape to Comfort, Nature and Hospitality
                    </h1>

                    <p>
                        Discover peaceful accommodation, refined hospitality
                        and memorable experiences in the heart of nature.
                    </p>

                    <div class="hero-actions">
                        <a class="button button-gold" href="#welcome">
                            Explore Our Resort
                        </a>

                        <a class="button button-outline" href="#booking">
                            Check Availability
                        </a>
                    </div>
                </div>
            </article>
        @endif
    </section>


@php
    /*
     * URL parameters কেবল active collections-এর
     * সঙ্গে মিললে preselection হিসেবে গ্রহণ হবে।
     */
    $requestedBookingPackage =
        $bookingOfferPackages->firstWhere(
            'slug',
            request()->query('package')
        );

    $requestedBookingVenue =
        $bookingVenues->firstWhere(
            'slug',
            request()->query('venue')
        );

    $requestedBookingEventType =
        $bookingEventTypes->firstWhere(
            'slug',
            request()->query('event')
        );

    /*
     * Validation-এর old booking_type সর্বোচ্চ
     * অগ্রাধিকার পাবে।
     */
    $defaultBookingType = 'room';

    if (
        $requestedBookingVenue
        || $requestedBookingEventType
    ) {
        $defaultBookingType = 'venue_event';
    } elseif($requestedBookingPackage) {
        $defaultBookingType = 'package';
    }

    $initialBookingType = old(
        'booking_type',
        $defaultBookingType
    );

    $initialPackageName = old(
        'package_service_name',
        $requestedBookingPackage?->name
    );

    /*
     * string comparison ব্যবহার করলে old input এবং
     * integer model ID—দুটির সঙ্গেই selection কাজ করবে।
     */
    $initialVenueId = (string) old(
        'venue_id',
        $requestedBookingVenue?->id
    );

    $initialEventTypeId = (string) old(
        'event_type_id',
        $requestedBookingEventType?->id
    );
@endphp


    <!-- Start Request a Reservation Section -->

    <section class="booking-bar booking-request-section" id="booking">
    <div class="container">
        <div class="booking-request-card">
            <div class="booking-request-heading">
                <div>
                    <span class="booking-eyebrow">
                        Plan Your Experience
                    </span>

                    <h2>Request a Reservation</h2>

                    <p>
                        Choose your booking type and share your preferred
                        schedule. Our reservation team will contact you
                        to confirm availability.
                    </p>
                </div>

                <div class="booking-contact-note">
                    <span>Need assistance?</span>
                    <strong>Our team is ready to help</strong>
                </div>
            </div>

            <form
                class="dynamic-booking-form"
                id="dynamicBookingForm"
                action="{{ route('reservations.store') }}"
                method="POST"
            >
                @csrf

                @if (session('reservation_success'))
    <div class="reservation-alert reservation-alert-success">
        <strong>
            Reservation Request Submitted
        </strong>

        <p>
            {{ session('reservation_success') }}
        </p>

        @if (session('booking_number'))
            <span>
                Booking Number:
                <b>{{ session('booking_number') }}</b>
            </span>
        @endif
    </div>
@endif

@if ($errors->any())
    <div class="reservation-alert reservation-alert-error">
        <strong>
            Please correct the following information:
        </strong>

        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

                <div class="booking-type-selector">
                    <label class="booking-type-option">
                        <input
                        type="radio"
                        name="booking_type"
                        value="room"
                        {{ $initialBookingType === 'room'
                                ? 'checked'
                                : '' }}
                    >

                        <span class="booking-type-card">
                            <span class="booking-type-icon">01</span>

                            <span>
                                <strong>Room & Suite</strong>
                                <small>
                                    Overnight accommodation
                                </small>
                            </span>
                        </span>
                    </label>

                    <label class="booking-type-option">
                        <input
                            type="radio"
                            name="booking_type"
                            value="venue_event"
                            {{ $initialBookingType === 'venue_event'
                                ? 'checked'
                                : '' }}
                        >

                        <span class="booking-type-card">
                            <span class="booking-type-icon">02</span>

                            <span>
                                <strong>Venue & Event</strong>
                                <small>
                                    Hall, meeting, wedding or picnic
                                </small>
                            </span>
                        </span>
                    </label>

                    <label class="booking-type-option">
                        <input
                            type="radio"
                            name="booking_type"
                            value="package"
                            {{ $initialBookingType === 'package'
                                ? 'checked'
                                : '' }}
                        >

                        <span class="booking-type-card">
                            <span class="booking-type-icon">03</span>

                            <span>
                                <strong>Day Package</strong>
                                <small>
                                    Day-long resort experiences
                                </small>
                            </span>
                        </span>
                    </label>
                </div>

                {{-- Room Booking Fields --}}
                <div
                    class="booking-fields-panel active"
                    data-booking-panel="room"
                >
                    <div class="booking-panel-heading">
                        <span>Accommodation Details</span>
                        <h3>Plan Your Resort Stay</h3>
                    </div>

                    <div class="booking-field-grid">
                        <label class="dynamic-booking-field field-wide">
                            <span>Room Type</span>

                            <select name="room_type_id">
                                <option value="">
                                    Select a room or suite
                                </option>

                               @foreach ($bookingRoomTypes as $roomType)
                                    <option
                                        value="{{ $roomType->id }}"
                                        {{ (string) old('room_type_id')
                                            === (string) $roomType->id
                                                ? 'selected'
                                                : '' }}
                                        >
                                        {{ $roomType->name }}

                                        @if ($roomType->maximum_guests)
                                            — Up to
                                            {{ $roomType->maximum_guests }}
                                            Guests
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                        </label>

                        <label class="dynamic-booking-field">
                            <span>Check In</span>

                            <input
                                id="bookingCheckIn"
                                type="date"
                                name="check_in"
                                value="{{ old('check_in') }}"
                                min="{{ now()->format('Y-m-d') }}"
                            >
                        </label>

                        <label class="dynamic-booking-field">
                            <span>Check Out</span>

                            <input
                                id="bookingCheckOut"
                                type="date"
                                name="check_out"
                                value="{{ old('check_out') }}"
                                min="{{ now()->addDay()->format('Y-m-d') }}"
                            >
                        </label>

                        <label class="dynamic-booking-field">
                            <span>Number of Rooms</span>

                            <select name="number_of_rooms">
                                @for ($room = 1; $room <= 10; $room++)
                                    <option
                                        value="{{ $room }}"
                                        {{ (int) old('number_of_rooms', 1) === $room
                                            ? 'selected'
                                            : '' }}
                                    >
                                        {{ $room }}
                                        {{ $room === 1 ? 'Room' : 'Rooms' }}
                                    </option>
                                @endfor
                            </select>
                        </label>

                        <label class="dynamic-booking-field">
                            <span>Adults</span>

                            <select name="adults">
                                @for ($adult = 1; $adult <= 20; $adult++)
                                    <option
                                        value="{{ $adult }}"
                                        {{ (int) old('adults', 2) === $adult
                                            ? 'selected'
                                            : '' }}
                                    >
                                        {{ $adult }}
                                        {{ $adult === 1 ? 'Adult' : 'Adults' }}
                                    </option>
                                @endfor
                            </select>
                        </label>

                        <label class="dynamic-booking-field">
                            <span>Children</span>

                            <select name="children">
                                @for ($child = 0; $child <= 10; $child++)
                                    <option
                                        value="{{ $child }}"
                                        {{ (int) old('children', 0) === $child
                                            ? 'selected'
                                            : '' }}
                                    >
                                        {{ $child }}
                                        {{ $child === 1 ? 'Child' : 'Children' }}
                                    </option>
                                @endfor
                            </select>
                        </label>
                    </div>
                </div>

                {{-- Venue and Event Fields --}}
                <div
                    class="booking-fields-panel"
                    data-booking-panel="venue_event"
                    hidden
                >
                    <div class="booking-panel-heading">
                        <span>Venue & Event Details</span>
                        <h3>Plan Your Special Occasion</h3>
                    </div>

                    <div class="booking-field-grid">
                        <label class="dynamic-booking-field">
                            <span>Required Venue</span>

                            <select
    name="venue_id"
    class="@error('venue_id')
        is-invalid
    @enderror"
>
    <option value="">
        Select a venue
    </option>

    @foreach($bookingVenues as $bookingVenue)
        <option
            value="{{ $bookingVenue->id }}"
            {{
                $initialVenueId
                === (string) $bookingVenue->id
                    ? 'selected'
                    : ''
            }}
        >
            {{ $bookingVenue->name }}

            @if($bookingVenue->venue_type)
                — {{ $bookingVenue->venue_type }}
            @endif

            @if($bookingVenue->maximum_guests)
                (Up to {{
                    number_format(
                        $bookingVenue->maximum_guests
                    )
                }} guests)
            @endif
        </option>
    @endforeach
</select>
                        </label>

                        <label class="dynamic-booking-field">
                            <span>Event Type</span>

                           <select
    name="event_type_id"
    class="@error('event_type_id')
        is-invalid
    @enderror"
>
    <option value="">
        Select event type
    </option>

    @foreach(
        $bookingEventTypes as $bookingEventType
    )
        <option
            value="{{ $bookingEventType->id }}"
            {{
                $initialEventTypeId
                === (string) $bookingEventType->id
                    ? 'selected'
                    : ''
            }}
        >
            {{ $bookingEventType->name }}
        </option>
    @endforeach
</select>
                        </label>

                        <label class="dynamic-booking-field">
                            <span>Event Date</span>

                            <input
                                type="date"
                                name="event_date"
                                value="{{ old('event_date') }}"
                                min="{{ now()->format('Y-m-d') }}"
                            >
                        </label>

                        <label class="dynamic-booking-field">
                            <span>Expected Guests</span>

                            <input
                                type="number"
                                name="event_expected_guests"
                                value="{{ old('event_expected_guests') }}"
                                min="1"
                                max="10000"
                                placeholder="Example: 150"
                            >
                        </label>

                        <label class="dynamic-booking-field">
                            <span>Starting Time</span>

                            <input
                                type="time"
                                name="event_start_time"
                                value="{{ old('event_start_time') }}"
                            >
                        </label>

                        <label class="dynamic-booking-field">
                            <span>Ending Time</span>

                           <input
                                type="time"
                                name="event_end_time"
                                value="{{ old('event_end_time') }}"
                            >
                        </label>
                    </div>
                </div>

                {{-- Package Fields --}}
                <div
    class="booking-fields-panel"
    data-booking-panel="package"
    hidden
>
    <div class="booking-panel-heading">
        <span>Package Details</span>
        <h3>Choose Your Resort Experience</h3>
    </div>

    <div class="booking-field-grid">
        <label class="dynamic-booking-field field-wide">
            <span>Preferred Package</span>

            <select
    name="package_service_name"
    class="@error('package_service_name')
        is-invalid
    @enderror"
>
    <option value="">
        Select a package
    </option>

    @foreach ($bookingOfferPackages as $bookingOfferPackage)
    <option
        value="{{ $bookingOfferPackage->name }}"
        {{ $initialPackageName
            === $bookingOfferPackage->name
                ? 'selected'
                : '' }}
    >
        {{ $bookingOfferPackage->name }}

        @if ($bookingOfferPackage->has_discount)
            — ৳{{ number_format(
                (float) $bookingOfferPackage->offer_price
            ) }}
        @elseif ($bookingOfferPackage->regular_price)
            — ৳{{ number_format(
                (float) $bookingOfferPackage->regular_price
            ) }}
        @endif
    </option>
@endforeach

    <option
        value="Custom Package"
        {{ $initialPackageName === 'Custom Package'
    ? 'selected'
    : '' }}
    >
        Custom Package
    </option>
</select>
        </label>

        <label class="dynamic-booking-field">
            <span>Preferred Date</span>

            <input
                type="date"
                name="package_date"
                value="{{ old('package_date') }}"
                min="{{ now()->format('Y-m-d') }}"
            >
        </label>

        <label class="dynamic-booking-field">
            <span>Adults</span>

            <input
                type="number"
                name="package_adults"
                value="{{ old('package_adults') }}"
                min="1"
                max="10000"
                placeholder="Number of adults"
            >
        </label>

        <label class="dynamic-booking-field">
            <span>Children</span>

            <input
                type="number"
                name="package_children"
                value="{{ old('package_children') }}"
                min="0"
                max="10000"
                placeholder="Number of children"
            >
        </label>

        <label class="dynamic-booking-field">
            <span>Total Expected Guests</span>

            <input
                type="number"
                name="package_expected_guests"
                value="{{ old('package_expected_guests') }}"
                min="1"
                max="10000"
                placeholder="Total guests"
            >
        </label>
    </div>
</div>

{{-- Guest Information section --}}
<div class="guest-information-panel">
    <div class="booking-panel-heading">
        <span>Contact Information</span>
        <h3>Tell Us About Yourself</h3>

        <p>
            Our reservation team will use this information
            to contact you and confirm availability.
        </p>
    </div>

    <div class="booking-field-grid">
        <label class="dynamic-booking-field">
            <span>Full Name *</span>

            <input
                type="text"
                name="guest_name"
                value="{{ old('guest_name') }}"
                maxlength="255"
                placeholder="Enter your full name"
                required
            >
        </label>

        <label class="dynamic-booking-field">
            <span>Phone Number *</span>

            <input
                type="tel"
                name="phone"
                value="{{ old('phone') }}"
                maxlength="30"
                placeholder="Example: +880 1XXXXXXXXX"
                required
            >
        </label>

        <label class="dynamic-booking-field">
            <span>Email Address</span>

            <input
                type="email"
                name="email"
                value="{{ old('email') }}"
                maxlength="255"
                placeholder="Enter your email address"
            >
        </label>

        <label class="dynamic-booking-field">
            <span>Company/Organization</span>

            <input
                type="text"
                name="company_name"
                value="{{ old('company_name') }}"
                maxlength="255"
                placeholder="Optional"
            >
        </label>

        <label class="dynamic-booking-field field-wide">
            <span>Address</span>

            <textarea
                name="address"
                rows="4"
                maxlength="1000"
                placeholder="Enter your address"
            >{{ old('address') }}</textarea>
        </label>

        <label class="dynamic-booking-field field-wide">
            <span>Special Request</span>

            <textarea
                name="special_request"
                rows="4"
                maxlength="2000"
                placeholder="Food, decoration, accessibility or other requirements"
            >{{ old('special_request') }}</textarea>
        </label>
    </div>
</div>

{{-- Guest Information section --}}

                <div class="booking-form-footer">
                    <p>
                        This is an availability request. Final reservation
                        will be confirmed by the CCULB reservation team.
                    </p>

                    <button
                        class="booking-request-button"
                        id="submitReservationButton"
                        type="submit"
                    >
                        <span class="button-text">
                            Submit Reservation Request
                        </span>

                        <span class="button-arrow">→</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>

<!-- End Request a Reservation Section -->

    @if ($homepage?->show_welcome_section)
        <section class="welcome-section section" id="welcome">
            <div class="container welcome-grid">
                <div class="welcome-image-wrap">
                    @if ($homepage->welcome_image)
                        <img
                            class="welcome-image"
                            src="{{ asset(
                                'storage/'.$homepage->welcome_image
                            ) }}"
                            alt="{{ $homepage->welcome_title }}"
                        >
                    @else
                        <div class="welcome-placeholder">
                            <span>CCULB</span>
                            <strong>Resort Experience</strong>
                        </div>
                    @endif

                    <div class="experience-card">
                        <strong>Premium</strong>
                        <span>Resort Hospitality</span>
                    </div>
                </div>

                <div class="welcome-content">
                    @if ($homepage->welcome_small_title)
                        <span class="section-eyebrow">
                            {{ $homepage->welcome_small_title }}
                        </span>
                    @endif

                    <h2>
                        {{ $homepage->welcome_title }}
                    </h2>

                    @if ($homepage->welcome_description)
                        <div class="welcome-description">
                            {!! nl2br(e($homepage->welcome_description)) !!}
                        </div>
                    @endif

                    <div class="welcome-features">
                        <div>
                            <span>01</span>
                            <strong>Refined Comfort</strong>
                        </div>

                        <div>
                            <span>02</span>
                            <strong>Natural Setting</strong>
                        </div>

                        <div>
                            <span>03</span>
                            <strong>Warm Hospitality</strong>
                        </div>
                    </div>

                    @if ($homepage->welcome_button_text)
                        <a
                            class="text-link"
                            href="{{ $homepage->welcome_button_url ?: '#' }}"
                        >
                            {{ $homepage->welcome_button_text }}
                            <span>→</span>
                        </a>
                    @endif
                </div>
            </div>
        </section>
    @endif

    @if ($featuredRoomTypes->isNotEmpty())
        <section class="rooms-section section" id="rooms">
            <div class="container">
                <div class="rooms-heading">
                    <div class="section-heading">
                        <span class="section-eyebrow">
                            Stay in Refined Comfort
                        </span>

                        <h2>Rooms & Suites</h2>

                        <p>
                            Discover thoughtfully designed accommodation
                            surrounded by nature, comfort and warm hospitality.
                        </p>
                    </div>

                    <a
                        class="rooms-heading-link"
                        href="{{ route('rooms.index') }}"
                    >
                        Explore Our Rooms
                        <span>→</span>
                    </a>
                </div>

                <div class="rooms-grid">
                    @foreach ($featuredRoomTypes as $roomType)
                        <article class="room-card">
                            <div class="room-card-image">
                                @if ($roomType->featured_image)
                                    <img
                                        src="{{ asset(
                                            'storage/'.$roomType->featured_image
                                        ) }}"
                                        alt="{{ $roomType->name }}"
                                        loading="lazy"
                                    >
                                @else
                                    <div class="room-image-placeholder">
                                        <span>CCULB Resort</span>
                                    </div>
                                @endif

                                @if (
                                    $roomType->discount_price &&
                                    $roomType->discount_price <
                                    $roomType->base_price
                                )
                                    <span class="room-offer-badge">
                                        Special Rate
                                    </span>
                                @endif

                                @if ($roomType->view_type)
                                    <span class="room-view-badge">
                                        {{ $roomType->view_type }}
                                    </span>
                                @endif
                            </div>

                            <div class="room-card-body">
                                @if ($roomType->small_title)
                                    <span class="room-small-title">
                                        {{ $roomType->small_title }}
                                    </span>
                                @endif

                                <h3>{{ $roomType->name }}</h3>

                                <div class="room-meta">
                                    @if ($roomType->maximum_guests)
                                        <span>
                                            {{ $roomType->maximum_guests }}
                                            {{ $roomType->maximum_guests > 1
                                                ? 'Guests'
                                                : 'Guest' }}
                                        </span>
                                    @endif

                                    @if ($roomType->bed_type)
                                        <span>{{ $roomType->bed_type }}</span>
                                    @endif

                                    @if ($roomType->room_size)
                                        <span>{{ $roomType->room_size }}</span>
                                    @endif
                                </div>

                                @if ($roomType->short_description)
                                    <p class="room-description">
                                        {{ \Illuminate\Support\Str::limit(
                                            $roomType->short_description,
                                            125
                                        ) }}
                                    </p>
                                @endif

                                <div class="room-card-footer">
                                    <div class="room-price">
                                        <small>Starting from</small>

                                        @if (
                                            $roomType->discount_price &&
                                            $roomType->discount_price <
                                            $roomType->base_price
                                        )
                                            <div>
                                                <span class="old-price">
                                                    ৳{{ number_format(
                                                        $roomType->base_price
                                                    ) }}
                                                </span>

                                                <strong>
                                                    ৳{{ number_format(
                                                        $roomType->discount_price
                                                    ) }}
                                                </strong>
                                            </div>
                                        @else
                                            <strong>
                                                ৳{{ number_format(
                                                    $roomType->base_price
                                                ) }}
                                            </strong>
                                        @endif

                                        <span class="price-unit">/ night</span>
                                    </div>

                                    <a
                                        class="room-button"
                                        href="{{ route('rooms.show', $roomType->slug) }}"
                                    >
                                        {{ $roomType->button_text
                                            ?: 'View Details' }}

                                        <span>→</span>
                                    </a>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif


@if(
    $featuredVenues->isNotEmpty()
    || $featuredEventTypes->isNotEmpty()
)
    <section
        class="featured-experiences-section section"
        id="venues-events"
    >
        <div class="container">
            <div class="featured-experiences-heading">
                <div class="section-heading">
                    <span class="section-eyebrow">
                        Gather, Celebrate & Connect
                    </span>

                    <h2>
                        Venues & Event
                        <em>Experiences</em>
                    </h2>

                    <p>
                        Explore distinctive resort spaces and
                        thoughtfully arranged experiences for
                        celebrations, corporate gatherings and
                        memorable occasions.
                    </p>
                </div>

                <div class="experience-heading-actions">
                    <a href="{{ route('venues.index') }}">
                        View Venues
                        <span aria-hidden="true">→</span>
                    </a>

                    <a href="{{ route('events.index') }}">
                        View Events
                        <span aria-hidden="true">→</span>
                    </a>
                </div>
            </div>

            @if($featuredVenues->isNotEmpty())
                <div class="experience-group">
                    <div class="experience-group-heading">
                        <div>
                            <span>01</span>

                            <div>
                                <small>Exceptional Spaces</small>
                                <h3>Featured Venues</h3>
                            </div>
                        </div>

                        <a href="{{ route('venues.index') }}">
                            Explore All Venues →
                        </a>
                    </div>

                    <div class="featured-experience-grid">
                        @foreach(
                            $featuredVenues as $featuredVenue
                        )
                            @php
                                $venuePrice =
                                    $featuredVenue->has_discount
                                        ? $featuredVenue
                                            ->discount_price
                                        : $featuredVenue
                                            ->base_price;
                            @endphp

                            <article class="featured-experience-card">
                                <a
                                    href="{{ route(
                                        'venues.show',
                                        $featuredVenue->slug
                                    ) }}"
                                    class="featured-experience-image"
                                >
                                    @if(
                                        $featuredVenue
                                            ->featured_image
                                    )
                                        <img
                                            src="{{ asset(
                                                'storage/' .
                                                $featuredVenue
                                                    ->featured_image
                                            ) }}"
                                            alt="{{
                                                $featuredVenue->name
                                            }}"
                                            loading="lazy"
                                        >
                                    @else
                                        <div
                                            class="experience-placeholder"
                                        >
                                            <span>◇</span>
                                            <small>CCULB Resort</small>
                                        </div>
                                    @endif

                                    <span
                                        class="experience-image-overlay"
                                    ></span>

                                    <span
                                        class="experience-type-badge"
                                    >
                                        {{
                                            $featuredVenue
                                                ->venue_type
                                                ?: 'Resort Venue'
                                        }}
                                    </span>

                                    <span
                                        class="experience-featured-badge"
                                    >
                                        Featured
                                    </span>
                                </a>

                                <div class="experience-card-content">
                                    @if(
                                        $featuredVenue->small_title
                                    )
                                        <span
                                            class="experience-small-title"
                                        >
                                            {{
                                                $featuredVenue
                                                    ->small_title
                                            }}
                                        </span>
                                    @endif

                                    <h3>
                                        <a
                                            href="{{ route(
                                                'venues.show',
                                                $featuredVenue->slug
                                            ) }}"
                                        >
                                            {{
                                                $featuredVenue->name
                                            }}
                                        </a>
                                    </h3>

                                    <div class="venue-quick-information">
                                        <span>
                                            ♙ Up to
                                            {{
                                                number_format(
                                                    $featuredVenue
                                                        ->maximum_guests
                                                )
                                            }}
                                            guests
                                        </span>

                                        @if(
                                            $featuredVenue->venue_size
                                        )
                                            <span>
                                                □ {{
                                                    $featuredVenue
                                                        ->venue_size
                                                }}
                                            </span>
                                        @endif
                                    </div>

                                    <div class="experience-card-footer">
                                        <div>
                                            <small>Starting From</small>

                                            <strong>
                                                ৳{{ number_format(
                                                    (float)
                                                    $venuePrice,
                                                    0
                                                ) }}
                                            </strong>

                                            @if(
                                                $featuredVenue
                                                    ->has_discount
                                            )
                                                <del>
                                                    ৳{{ number_format(
                                                        (float)
                                                        $featuredVenue
                                                            ->base_price,
                                                        0
                                                    ) }}
                                                </del>
                                            @endif
                                        </div>

                                        <a
                                            href="{{ route(
                                                'venues.show',
                                                $featuredVenue->slug
                                            ) }}"
                                            aria-label="View {{
                                                $featuredVenue->name
                                            }}"
                                        >
                                            →
                                        </a>
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    </div>
                </div>
            @endif

            @if($featuredEventTypes->isNotEmpty())
                <div class="experience-group event-experience-group">
                    <div class="experience-group-heading">
                        <div>
                            <span>02</span>

                            <div>
                                <small>Memorable Occasions</small>
                                <h3>Featured Events</h3>
                            </div>
                        </div>

                        <a href="{{ route('events.index') }}">
                            Explore All Events →
                        </a>
                    </div>

                    <div class="featured-experience-grid">
                        @foreach(
                            $featuredEventTypes
                            as $featuredEventType
                        )
                            @php
                                $eventFeatures = collect(
                                    $featuredEventType
                                        ->features ?? []
                                )
                                    ->filter()
                                    ->take(3);
                            @endphp

                            <article class="featured-experience-card">
                                <a
                                    href="{{ route(
                                        'events.show',
                                        $featuredEventType->slug
                                    ) }}"
                                    class="featured-experience-image"
                                >
                                    @if(
                                        $featuredEventType
                                            ->featured_image
                                    )
                                        <img
                                            src="{{ asset(
                                                'storage/' .
                                                $featuredEventType
                                                    ->featured_image
                                            ) }}"
                                            alt="{{
                                                $featuredEventType
                                                    ->name
                                            }}"
                                            loading="lazy"
                                        >
                                    @else
                                        <div
                                            class="experience-placeholder"
                                        >
                                            <span>✦</span>
                                            <small>CCULB Resort</small>
                                        </div>
                                    @endif

                                    <span
                                        class="experience-image-overlay"
                                    ></span>

                                    <span
                                        class="experience-type-badge"
                                    >
                                        Event Experience
                                    </span>

                                    <span
                                        class="experience-featured-badge"
                                    >
                                        Featured
                                    </span>
                                </a>

                                <div class="experience-card-content">
                                    @if(
                                        $featuredEventType
                                            ->small_title
                                    )
                                        <span
                                            class="experience-small-title"
                                        >
                                            {{
                                                $featuredEventType
                                                    ->small_title
                                            }}
                                        </span>
                                    @endif

                                    <h3>
                                        <a
                                            href="{{ route(
                                                'events.show',
                                                $featuredEventType
                                                    ->slug
                                            ) }}"
                                        >
                                            {{
                                                $featuredEventType
                                                    ->name
                                            }}
                                        </a>
                                    </h3>

                                    @if($eventFeatures->isNotEmpty())
                                        <ul class="event-quick-features">
                                            @foreach(
                                                $eventFeatures
                                                as $eventFeature
                                            )
                                                <li>
                                                    <span>✓</span>
                                                    {{ $eventFeature }}
                                                </li>
                                            @endforeach
                                        </ul>
                                    @else
                                        <p
                                            class="event-planning-text"
                                        >
                                            Tailored planning and
                                            personalised assistance
                                            for your special occasion.
                                        </p>
                                    @endif

                                    <div class="experience-card-footer">
                                        <div>
                                            <small>
                                                Event Planning
                                            </small>

                                            <strong
                                                class="planning-label"
                                            >
                                                Tailored Assistance
                                            </strong>
                                        </div>

                                        <a
                                            href="{{ route(
                                                'events.show',
                                                $featuredEventType
                                                    ->slug
                                            ) }}"
                                            aria-label="View {{
                                                $featuredEventType
                                                    ->name
                                            }}"
                                        >
                                            →
                                        </a>
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </section>
@endif









    @if ($featuredOfferPackages->isNotEmpty())
        <section
            class="featured-offers-section section"
            id="offers"
        >
            <div class="container">
                <div class="featured-offers-heading">
                    <div class="section-heading">
                        <span class="section-eyebrow">
                            Curated Resort Experiences
                        </span>

                        <h2>
                            Exclusive Offers &
                            <em>Packages</em>
                        </h2>

                        <p>
                            Explore our carefully prepared resort packages
                            for relaxing stays, family outings, events and
                            memorable celebrations.
                        </p>
                    </div>

                    <a
                        class="featured-offers-view-all"
                        href="{{ route('offers.index') }}"
                    >
                        View All Packages
                        <span aria-hidden="true">→</span>
                    </a>
                </div>

                <div class="featured-offers-grid">
                    @foreach (
                        $featuredOfferPackages as $offerPackage
                    )
                        <article class="featured-offer-card">
                            <a
                                class="featured-offer-image"
                                href="{{ route(
                                    'offers.show',
                                    $offerPackage->slug
                                ) }}"
                            >
                                @if ($offerPackage->featured_image)
                                    <img
                                        src="{{ asset(
                                            'storage/'.
                                            $offerPackage->featured_image
                                        ) }}"
                                        alt="{{ $offerPackage->name }}"
                                        loading="lazy"
                                    >
                                @else
                                    <div
                                        class="featured-offer-placeholder"
                                    >
                                        <span>CCULB</span>
                                        <small>Resort Package</small>
                                    </div>
                                @endif

                                <div
                                    class="featured-offer-image-overlay"
                                ></div>

                                <span class="featured-offer-type">
                                    {{ \Illuminate\Support\Str::headline(
                                        $offerPackage->package_type
                                    ) }}
                                </span>

                                @if ($offerPackage->has_discount)
                                    <span
                                        class="featured-offer-discount"
                                    >
                                        {{ $offerPackage
                                            ->discount_percentage }}%
                                        Off
                                    </span>
                                @endif
                            </a>

                            <div class="featured-offer-content">
                                @if ($offerPackage->small_title)
                                    <span
                                        class="featured-offer-small-title"
                                    >
                                        {{ $offerPackage->small_title }}
                                    </span>
                                @endif

                                <h3>
                                    <a
                                        href="{{ route(
                                            'offers.show',
                                            $offerPackage->slug
                                        ) }}"
                                    >
                                        {{ $offerPackage->name }}
                                    </a>
                                </h3>

                                <div class="featured-offer-validity">
                                    <span class="validity-icon">◇</span>

                                    <div>
                                        <small>Package validity</small>

                                        <strong>
                                            @if (
                                                $offerPackage->start_date &&
                                                $offerPackage->end_date
                                            )
                                                {{ $offerPackage
                                                    ->start_date
                                                    ->format('d M Y') }}
                                                –
                                                {{ $offerPackage
                                                    ->end_date
                                                    ->format('d M Y') }}
                                            @elseif (
                                                $offerPackage->end_date
                                            )
                                                Available until
                                                {{ $offerPackage
                                                    ->end_date
                                                    ->format('d M Y') }}
                                            @elseif (
                                                $offerPackage->start_date
                                            )
                                                Available from
                                                {{ $offerPackage
                                                    ->start_date
                                                    ->format('d M Y') }}
                                            @else
                                                Available throughout
                                                the year
                                            @endif
                                        </strong>
                                    </div>
                                </div>

                                <div class="featured-offer-footer">
                                    <div class="featured-offer-price">
                                        <small>Package starts from</small>

                                        <div>
                                            @if (
                                                $offerPackage->has_discount
                                            )
                                                <del>
                                                    ৳{{ number_format(
                                                        (float)
                                                        $offerPackage
                                                            ->regular_price
                                                    ) }}
                                                </del>
                                            @endif

                                            <strong>
                                                ৳{{ number_format(
                                                    (float)
                                                    $offerPackage
                                                        ->current_price
                                                ) }}
                                            </strong>
                                        </div>
                                    </div>

                                    <a
                                        class="featured-offer-button"
                                        href="{{ route(
                                            'offers.show',
                                            $offerPackage->slug
                                        ) }}"
                                        aria-label="View {{ $offerPackage->name }}"
                                    >
                                        <span>
                                            {{ $offerPackage->button_text
                                                ?: 'View Details' }}
                                        </span>

                                        <span aria-hidden="true">→</span>
                                    </a>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif






    @if ($homepage?->show_video_section && $homepage->video_url)
        <section class="video-section section">
            <div class="container">
                <div class="video-card">
                    @if ($homepage->video_thumbnail)
                        <img
                            src="{{ asset(
                                'storage/'.$homepage->video_thumbnail
                            ) }}"
                            alt="{{ $homepage->video_title }}"
                        >
                    @endif

                    <div class="video-overlay"></div>

                    <div class="video-content">
                        @if ($homepage->video_small_title)
                            <span class="section-eyebrow light">
                                {{ $homepage->video_small_title }}
                            </span>
                        @endif

                        <h2>{{ $homepage->video_title }}</h2>

                        @if ($homepage->video_description)
                            <p>{{ $homepage->video_description }}</p>
                        @endif
                    </div>

                    <a
                        class="play-button"
                        href="{{ $homepage->video_url }}"
                        target="_blank"
                        rel="noopener noreferrer"
                        aria-label="Play resort video"
                    >
                        <span>▶</span>
                    </a>
                </div>
            </div>
        </section>
    @endif

    @if (
        $homepage?->show_client_logos &&
        $clientLogos->isNotEmpty()
    )
        <section class="clients-section section-small">
            <div class="container">
                <div class="section-heading centered compact">
                    <span class="section-eyebrow">
                        Trusted Relationships
                    </span>

                    <h2>Our Clients & Partners</h2>
                </div>

                <div class="client-logos">
                    @foreach ($clientLogos as $clientLogo)
                        @if ($clientLogo->website_url)
                            <a
                                class="client-logo"
                                href="{{ $clientLogo->website_url }}"
                                target="_blank"
                                rel="noopener noreferrer"
                                title="{{ $clientLogo->name }}"
                            >
                                <img
                                    src="{{ asset(
                                        'storage/'.$clientLogo->logo
                                    ) }}"
                                    alt="{{ $clientLogo->name }}"
                                >
                            </a>
                        @else
                            <div
                                class="client-logo"
                                title="{{ $clientLogo->name }}"
                            >
                                <img
                                    src="{{ asset(
                                        'storage/'.$clientLogo->logo
                                    ) }}"
                                    alt="{{ $clientLogo->name }}"
                                >
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="cta-section">
        <div class="container cta-inner">
            <div>
                <span class="section-eyebrow light">
                    Your Memorable Stay Begins Here
                </span>

                <h2>Discover a Different Kind of Resort Experience</h2>
            </div>

            <a class="button button-gold" href="#booking">
                Reserve Your Stay
            </a>
        </div>
    </section>
@endsection





@push('styles')
    <style>
        .booking-request-section {
    position: relative;
    z-index: 5;
    padding: 0;
    background: #f7f5ef;
}

.booking-request-section .container {
    position: relative;
}

.booking-request-card {
    overflow: hidden;
    margin-top: -38px;
    border: 1px solid rgba(184, 144, 72, 0.22);
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(11, 46, 38, 0.14);
}

.booking-request-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 31px 36px;
    background:
        linear-gradient(
            100deg,
            rgba(15, 57, 48, 0.98),
            rgba(22, 75, 63, 0.96)
        );
    color: #ffffff;
}

.booking-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #d8b66f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.booking-request-heading h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.15;
}

.booking-request-heading p {
    max-width: 680px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.7;
}

.booking-contact-note {
    flex: 0 0 auto;
    padding-left: 25px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.booking-contact-note span,
.booking-contact-note strong {
    display: block;
}

.booking-contact-note span {
    margin-bottom: 5px;
    color: #d8b66f;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.booking-contact-note strong {
    font-family: "Playfair Display", serif;
    font-size: 17px;
}

.dynamic-booking-form {
    padding: 34px 36px 32px;
}

.booking-type-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 34px;
}

.booking-type-option {
    position: relative;
    cursor: pointer;
}

.booking-type-option > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.booking-type-card {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 84px;
    padding: 17px;
    border: 1px solid #dfe5e1;
    background: #fbfcfa;
    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.booking-type-option:hover .booking-type-card {
    border-color: rgba(184, 144, 72, 0.65);
}

.booking-type-option > input:checked + .booking-type-card {
    border-color: #b89048;
    background: #fffaf0;
    box-shadow: inset 0 0 0 1px #b89048;
}

.booking-type-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    background: #173d34;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 15px;
    transition: background 0.25s ease;
}

.booking-type-option > input:checked
    + .booking-type-card
    .booking-type-icon {
    background: #b89048;
}

.booking-type-card strong,
.booking-type-card small {
    display: block;
}

.booking-type-card strong {
    color: #173d34;
    font-size: 13px;
}

.booking-type-card small {
    margin-top: 5px;
    color: #7d8985;
    font-size: 10px;
    line-height: 1.45;
}

.booking-fields-panel {
    padding: 28px;
    border: 1px solid #e4e8e5;
    background: #f9faf8;
}

.booking-fields-panel[hidden] {
    display: none;
}

.booking-panel-heading {
    margin-bottom: 22px;
}

.booking-panel-heading span {
    display: block;
    margin-bottom: 5px;
    color: #b28a42;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.booking-panel-heading h3 {
    margin: 0;
    color: #173d34;
    font-family: "Playfair Display", serif;
    font-size: 25px;
}

.booking-field-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.dynamic-booking-field {
    display: block;
    min-width: 0;
}

.dynamic-booking-field.field-wide {
    grid-column: span 2;
}

.dynamic-booking-field > span {
    display: block;
    margin-bottom: 8px;
    color: #3e554f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dynamic-booking-field input,
.dynamic-booking-field select {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1px solid #d9dfdc;
    border-radius: 0;
    outline: none;
    background: #ffffff;
    color: #173d34;
    font-family: inherit;
    font-size: 12px;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.dynamic-booking-field input:focus,
.dynamic-booking-field select:focus {
    border-color: #b89048;
    box-shadow: 0 0 0 3px rgba(184, 144, 72, 0.10);
}

.booking-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 24px;
}

.booking-form-footer p {
    max-width: 650px;
    margin: 0;
    color: #798681;
    font-size: 11px;
    line-height: 1.65;
}

.booking-request-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    padding: 13px 23px;
    border: 0;
    background: #b89048;
    color: #ffffff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        gap 0.25s ease,
        background 0.25s ease;
}

.booking-request-button:hover {
    gap: 17px;
    background: #173d34;
}

.reservation-alert {
    margin-bottom: 28px;
    padding: 20px 22px;
    border: 1px solid;
    font-size: 12px;
    line-height: 1.65;
}

.reservation-alert strong,
.reservation-alert p,
.reservation-alert span {
    display: block;
}

.reservation-alert p {
    margin: 5px 0;
}

.reservation-alert-success {
    border-color: #b8d8c7;
    background: #eff9f3;
    color: #17583d;
}

.reservation-alert-success b {
    color: #b07f29;
    letter-spacing: 0.04em;
}

.reservation-alert-error {
    border-color: #e4b7b7;
    background: #fff3f3;
    color: #8c2929;
}

.reservation-alert-error ul {
    margin: 9px 0 0;
    padding-left: 19px;
}

.guest-information-panel {
    margin-top: 24px;
    padding: 28px;
    border: 1px solid #e4e8e5;
    background: #ffffff;
}

.guest-information-panel .booking-panel-heading p {
    max-width: 650px;
    margin: 8px 0 0;
    color: #798681;
    font-size: 11px;
    line-height: 1.65;
}

.dynamic-booking-field textarea {
    display: block;
    width: 100%;
    min-height: 105px;
    padding: 13px 14px;
    border: 1px solid #d9dfdc;
    border-radius: 0;
    outline: none;
    resize: vertical;
    background: #ffffff;
    color: #173d34;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.6;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.dynamic-booking-field textarea:focus {
    border-color: #b89048;
    box-shadow: 0 0 0 3px rgba(184, 144, 72, 0.10);
}

.dynamic-booking-field input.is-invalid,
.dynamic-booking-field select.is-invalid,
.dynamic-booking-field textarea.is-invalid {
    border-color: #ba4848;
}

.booking-request-button:disabled {
    gap: 12px;
    cursor: not-allowed;
    opacity: 0.72;
}



@media (max-width: 900px) {
    .booking-request-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .booking-contact-note {
        padding-left: 0;
        border-left: 0;
    }

    .booking-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .booking-request-card {
        margin-top: 0;
    }

    .booking-request-heading,
    .dynamic-booking-form {
        padding: 27px 22px;
    }

    .booking-type-selector {
        grid-template-columns: 1fr;
    }

    .booking-field-grid {
        grid-template-columns: 1fr;
    }

    .dynamic-booking-field.field-wide {
        grid-column: auto;
    }

    .booking-fields-panel {
        padding: 22px 18px;
    }

    .booking-form-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .booking-request-button {
        width: 100%;
    }

    .guest-information-panel {
    padding: 22px 18px;
}
}









        .rooms-section {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(
                    circle at top right,
                    rgba(190, 151, 74, 0.10),
                    transparent 34%
                ),
                #f7f5ef;
        }

        .rooms-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            width: 1px;
            height: 70px;
            background: rgba(190, 151, 74, 0.55);
        }

        .rooms-heading {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 40px;
            margin-bottom: 42px;
        }

        .rooms-heading .section-heading {
            max-width: 680px;
        }

        .rooms-heading .section-heading h2 {
            margin: 8px 0 14px;
            color: #102d27;
            font-family: "Playfair Display", serif;
            font-size: clamp(34px, 4vw, 52px);
            line-height: 1.12;
        }

        .rooms-heading .section-heading p {
            max-width: 610px;
            margin: 0;
            color: #687772;
            font-size: 15px;
            line-height: 1.8;
        }

        .rooms-heading-link {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 10px;
            padding-bottom: 6px;
            border-bottom: 1px solid #b89048;
            color: #173d34;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-decoration: none;
            transition:
                color 0.25s ease,
                gap 0.25s ease;
        }

        .rooms-heading-link:hover {
            gap: 15px;
            color: #b89048;
        }

        .rooms-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 28px;
        }

        .room-card {
            min-width: 0;
            overflow: hidden;
            border: 1px solid rgba(15, 54, 45, 0.08);
            border-radius: 4px;
            background: #ffffff;
            box-shadow: 0 18px 50px rgba(18, 49, 42, 0.08);
            transition:
                transform 0.35s ease,
                box-shadow 0.35s ease;
        }

        .room-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 60px rgba(18, 49, 42, 0.14);
        }

        .room-card-image {
            position: relative;
            height: 270px;
            overflow: hidden;
            background: #183a32;
        }

        .room-card-image::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                180deg,
                transparent 50%,
                rgba(5, 24, 20, 0.42) 100%
            );
            pointer-events: none;
        }

        .room-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .room-card:hover .room-card-image img {
            transform: scale(1.06);
        }

        .room-image-placeholder {
            display: grid;
            width: 100%;
            height: 100%;
            place-items: center;
            background:
                linear-gradient(
                    135deg,
                    rgba(190, 151, 74, 0.20),
                    transparent
                ),
                #173d34;
        }

        .room-image-placeholder span {
            color: rgba(255, 255, 255, 0.78);
            font-family: "Playfair Display", serif;
            font-size: 22px;
        }

        .room-offer-badge,
        .room-view-badge {
            position: absolute;
            z-index: 2;
            top: 18px;
            padding: 8px 12px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .room-offer-badge {
            left: 18px;
            background: #bd964d;
            color: #ffffff;
        }

        .room-view-badge {
            right: 18px;
            background: rgba(13, 45, 38, 0.88);
            color: #ffffff;
            backdrop-filter: blur(8px);
        }

        .room-card-body {
            padding: 25px 25px 23px;
        }

        .room-small-title {
            display: block;
            margin-bottom: 7px;
            color: #b28b43;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .room-card h3 {
            margin: 0 0 14px;
            color: #12372f;
            font-family: "Playfair Display", serif;
            font-size: 25px;
            line-height: 1.25;
        }

        .room-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 16px;
            margin-bottom: 16px;
            color: #697873;
            font-size: 12px;
        }

        .room-meta span {
            position: relative;
        }

        .room-meta span:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 50%;
            right: -9px;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: #c5a467;
            transform: translateY(-50%);
        }

        .room-description {
            min-height: 70px;
            margin: 0;
            color: #687772;
            font-size: 13px;
            line-height: 1.75;
        }

        .room-card-footer {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 18px;
            margin-top: 22px;
            padding-top: 20px;
            border-top: 1px solid #ebece8;
        }

        .room-price {
            min-width: 0;
            color: #173d34;
        }

        .room-price small {
            display: block;
            margin-bottom: 4px;
            color: #87938f;
            font-size: 10px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .room-price strong {
            font-family: "Playfair Display", serif;
            font-size: 21px;
            line-height: 1;
        }

        .old-price {
            margin-right: 6px;
            color: #a1aaa7;
            font-size: 12px;
            text-decoration: line-through;
        }

        .price-unit {
            margin-left: 3px;
            color: #87938f;
            font-size: 10px;
        }

        .room-button {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 42px;
            padding: 10px 15px;
            background: #173d34;
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-decoration: none;
            transition:
                background 0.25s ease,
                gap 0.25s ease;
        }

        .room-button:hover {
            gap: 13px;
            background: #b89048;
        }

        @media (max-width: 1050px) {
            .rooms-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 720px) {
            .rooms-heading {
                display: block;
                margin-bottom: 30px;
            }

            .rooms-heading-link {
                margin-top: 20px;
            }

            .rooms-grid {
                grid-template-columns: 1fr;
            }

            .room-card-image {
                height: 250px;
            }

            .room-description {
                min-height: 0;
            }
        }

        @media (max-width: 420px) {
            .room-card-body {
                padding: 21px 18px;
            }

            .room-card-footer {
                align-items: flex-start;
                flex-direction: column;
            }

            .room-button {
                width: 100%;
            }
        }


                /*
         * Homepage Featured Offers
         */
        .featured-offers-section {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(
                    circle at 8% 18%,
                    rgba(199, 163, 90, 0.12),
                    transparent 27%
                ),
                linear-gradient(
                    135deg,
                    #0c2e27 0%,
                    #123d33 56%,
                    #174a3d 100%
                );
        }

        .featured-offers-section::before {
            position: absolute;
            top: -270px;
            right: -180px;
            width: 590px;
            height: 590px;
            border: 1px solid rgba(227, 203, 148, 0.13);
            border-radius: 50%;
            content: "";
            box-shadow:
                0 0 0 75px rgba(227, 203, 148, 0.022),
                0 0 0 150px rgba(227, 203, 148, 0.016);
            pointer-events: none;
        }

        .featured-offers-heading {
            position: relative;
            z-index: 2;
            margin-bottom: 43px;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 40px;
        }

        .featured-offers-heading .section-heading {
            max-width: 690px;
        }

        .featured-offers-heading .section-eyebrow {
            color: #e3cb94;
        }

        .featured-offers-heading h2 {
            margin: 10px 0 15px;
            color: #ffffff;
            font-family: "Playfair Display", Georgia, serif;
            font-size: clamp(35px, 4.5vw, 53px);
            font-weight: 500;
            line-height: 1.12;
        }

        .featured-offers-heading h2 em {
            color: #d2ae68;
            font-weight: inherit;
        }

        .featured-offers-heading p {
            max-width: 620px;
            margin: 0;
            color: rgba(255, 255, 255, 0.65);
            font-size: 14px;
            line-height: 1.8;
        }

        .featured-offers-view-all {
            min-height: 46px;
            padding: 0 17px;
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            border: 1px solid rgba(227, 203, 148, 0.65);
            color: #ffffff;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.7px;
            text-decoration: none;
            text-transform: uppercase;
            transition:
                border-color 0.25s ease,
                background 0.25s ease,
                color 0.25s ease;
        }

        .featured-offers-view-all:hover {
            border-color: #c7a35a;
            background: #c7a35a;
            color: #0d3029;
        }

        .featured-offers-grid {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 28px;
        }

        .featured-offer-card {
            min-width: 0;
            overflow: hidden;
            border: 1px solid rgba(227, 203, 148, 0.18);
            background: #ffffff;
            box-shadow: 0 19px 55px rgba(2, 21, 17, 0.2);
            transition:
                border-color 0.3s ease,
                transform 0.3s ease,
                box-shadow 0.3s ease;
        }

        .featured-offer-card:hover {
            border-color: rgba(227, 203, 148, 0.65);
            box-shadow: 0 25px 65px rgba(2, 21, 17, 0.32);
            transform: translateY(-8px);
        }

        .featured-offer-image {
            position: relative;
            height: 250px;
            overflow: hidden;
            display: block;
            background: #0d3029;
        }

        .featured-offer-image img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            transition: transform 0.65s ease;
        }

        .featured-offer-card:hover
        .featured-offer-image img {
            transform: scale(1.065);
        }

        .featured-offer-placeholder {
            width: 100%;
            height: 100%;
            display: grid;
            place-content: center;
            gap: 8px;
            background:
                radial-gradient(
                    circle at 72% 25%,
                    rgba(199, 163, 90, 0.32),
                    transparent 29%
                ),
                linear-gradient(
                    145deg,
                    #0d3029,
                    #174a3d
                );
            color: #e3cb94;
            text-align: center;
        }

        .featured-offer-placeholder span {
            font-family: "Playfair Display", Georgia, serif;
            font-size: 45px;
            line-height: 1;
        }

        .featured-offer-placeholder small {
            color: rgba(255, 255, 255, 0.62);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .featured-offer-image-overlay {
            position: absolute;
            inset: 0;
            background:
                linear-gradient(
                    to bottom,
                    rgba(7, 31, 25, 0.03) 35%,
                    rgba(7, 31, 25, 0.68) 100%
                );
        }

        .featured-offer-type,
        .featured-offer-discount {
            position: absolute;
            bottom: 16px;
            z-index: 2;
            padding: 8px 11px;
            font-size: 8px;
            font-weight: 900;
            letter-spacing: 0.8px;
            line-height: 1;
            text-transform: uppercase;
        }

        .featured-offer-type {
            left: 16px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            background: rgba(13, 48, 41, 0.84);
            color: #ffffff;
            backdrop-filter: blur(7px);
        }

        .featured-offer-discount {
            right: 16px;
            border-radius: 30px;
            background: #c7a35a;
            color: #0d3029;
        }

        .featured-offer-content {
            padding: 25px 24px 23px;
        }

        .featured-offer-small-title {
            display: block;
            margin-bottom: 7px;
            color: #b38c43;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 1.35px;
            text-transform: uppercase;
        }

        .featured-offer-content h3 {
            min-height: 61px;
            margin: 0;
            font-family: "Playfair Display", Georgia, serif;
            font-size: 24px;
            font-weight: 500;
            line-height: 1.28;
        }

        .featured-offer-content h3 a {
            color: #17352e;
            text-decoration: none;
            transition: color 0.25s ease;
        }

        .featured-offer-content h3 a:hover {
            color: #b38c43;
        }

        .featured-offer-validity {
            min-height: 62px;
            margin-top: 18px;
            padding: 13px 14px;
            display: flex;
            align-items: center;
            gap: 11px;
            background: #f2f6f3;
        }

        .validity-icon {
            width: 30px;
            height: 30px;
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: #ffffff;
            color: #c09a50;
            font-size: 16px;
        }

        .featured-offer-validity small {
            display: block;
            margin-bottom: 3px;
            color: #8a9793;
            font-size: 8px;
            font-weight: 800;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        .featured-offer-validity strong {
            display: block;
            color: #415b53;
            font-size: 10px;
            line-height: 1.45;
        }

        .featured-offer-footer {
            margin-top: 20px;
            padding-top: 18px;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 15px;
            border-top: 1px solid #e4e9e6;
        }

        .featured-offer-price {
            min-width: 0;
        }

        .featured-offer-price small {
            display: block;
            margin-bottom: 5px;
            color: #8a9793;
            font-size: 8px;
            font-weight: 800;
            letter-spacing: 0.7px;
            text-transform: uppercase;
        }

        .featured-offer-price div {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 7px;
        }

        .featured-offer-price del {
            color: #9da7a4;
            font-size: 11px;
        }

        .featured-offer-price strong {
            color: #174a3d;
            font-family: "Playfair Display", Georgia, serif;
            font-size: 23px;
            font-weight: 600;
            line-height: 1;
        }

        .featured-offer-button {
            min-height: 42px;
            padding: 0 14px;
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            background: #174a3d;
            color: #ffffff;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 0.5px;
            text-decoration: none;
            text-transform: uppercase;
            transition:
                background 0.25s ease,
                color 0.25s ease,
                gap 0.25s ease;
        }

        .featured-offer-button:hover {
            gap: 13px;
            background: #c7a35a;
            color: #0d3029;
        }

        @media (max-width: 1050px) {
            .featured-offers-grid {
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767px) {
            .featured-offers-heading {
                align-items: flex-start;
                flex-direction: column;
                gap: 24px;
            }

            .featured-offers-grid {
                grid-template-columns: 1fr;
            }

            .featured-offer-image {
                height: 245px;
            }

            .featured-offer-content h3 {
                min-height: 0;
            }
        }

        @media (max-width: 420px) {
            .featured-offer-content {
                padding: 22px 18px;
            }

            .featured-offer-footer {
                align-items: flex-start;
                flex-direction: column;
            }

            .featured-offer-button {
                width: 100%;
            }
        }

/*
 * Homepage Featured Venues & Events
 */
.featured-experiences-section {
    padding: 105px 0;
    background:
        linear-gradient(
            180deg,
            #f7f4ed 0%,
            #ffffff 100%
        );
}

.featured-experiences-heading {
    margin-bottom: 55px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.featured-experiences-heading
.section-heading {
    max-width: 720px;
}

.featured-experiences-heading h2 {
    margin: 12px 0 16px;
    color: #17352e;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(36px, 5vw, 55px);
    font-weight: 500;
    line-height: 1.12;
}

.featured-experiences-heading h2 em {
    color: #c7a35a;
    font-weight: inherit;
}

.featured-experiences-heading p {
    margin: 0;
    color: #61716c;
    font-size: 14px;
    line-height: 1.8;
}

.experience-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.experience-heading-actions a {
    min-height: 43px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #174a3d;
    color: #174a3d;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .6px;
    text-decoration: none;
    text-transform: uppercase;
    transition: .25s ease;
}

.experience-heading-actions a:hover {
    background: #174a3d;
    color: #fff;
}

.experience-group + .experience-group {
    margin-top: 70px;
}

.experience-group-heading {
    margin-bottom: 25px;
    padding-bottom: 17px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    border-bottom: 1px solid #e1e8e4;
}

.experience-group-heading > div {
    display: flex;
    align-items: center;
    gap: 14px;
}

.experience-group-heading > div > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #174a3d;
    color: #e3cb94;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 16px;
}

.experience-group-heading small {
    display: block;
    margin-bottom: 3px;
    color: #b38c43;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.experience-group-heading h3 {
    margin: 0;
    color: #17352e;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 28px;
    font-weight: 500;
}

.experience-group-heading > a {
    color: #174a3d;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .5px;
    text-decoration: none;
    text-transform: uppercase;
}

.featured-experience-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.featured-experience-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e1e8e4;
    background: #fff;
    box-shadow: 0 8px 30px rgba(19, 59, 49, .055);
    transition: .35s ease;
}

.featured-experience-card:hover {
    border-color: rgba(199, 163, 90, .55);
    box-shadow: 0 20px 55px rgba(18, 58, 48, .12);
    transform: translateY(-7px);
}

.featured-experience-image {
    position: relative;
    height: 245px;
    overflow: hidden;
    display: block;
    background: #0d3029;
}

.featured-experience-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .6s ease;
}

.featured-experience-card:hover
.featured-experience-image img {
    transform: scale(1.06);
}

.experience-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    gap: 7px;
    color: #e3cb94;
    text-align: center;
    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(199, 163, 90, .28),
            transparent 30%
        ),
        linear-gradient(145deg, #0d3029, #174a3d);
}

.experience-placeholder span {
    font-size: 47px;
}

.experience-placeholder small {
    color: rgba(255, 255, 255, .62);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.experience-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 42%,
        rgba(7, 31, 25, .66)
    );
}

.experience-type-badge,
.experience-featured-badge {
    position: absolute;
    z-index: 2;
    padding: 7px 10px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.experience-type-badge {
    bottom: 15px;
    left: 15px;
    background: rgba(13, 48, 41, .88);
    color: #fff;
}

.experience-featured-badge {
    top: 14px;
    right: 14px;
    background: #c7a35a;
    color: #0d3029;
}

.experience-card-content {
    padding: 23px 22px 21px;
}

.experience-small-title {
    display: block;
    margin-bottom: 7px;
    color: #b38c43;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.experience-card-content h3 {
    min-height: 58px;
    margin: 0 0 16px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.25;
}

.experience-card-content h3 a {
    color: #17352e;
    text-decoration: none;
}

.experience-card-content h3 a:hover {
    color: #b38c43;
}

.venue-quick-information {
    min-height: 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.venue-quick-information span {
    padding: 8px 10px;
    background: #f2f6f3;
    color: #52675f;
    font-size: 9px;
    font-weight: 700;
}

.event-quick-features {
    min-height: 70px;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
    list-style: none;
}

.event-quick-features li,
.event-planning-text {
    color: #596c66;
    font-size: 10px;
}

.event-quick-features li span {
    margin-right: 6px;
    color: #c7a35a;
    font-weight: 900;
}

.event-planning-text {
    min-height: 70px;
    margin: 0;
    line-height: 1.7;
}

.experience-card-footer {
    margin-top: auto;
    padding-top: 17px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid #e1e8e4;
}

.experience-card-footer small {
    display: block;
    margin-bottom: 4px;
    color: #8a9793;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.experience-card-footer strong {
    color: #174a3d;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 21px;
}

.experience-card-footer del {
    margin-left: 6px;
    color: #9da7a4;
    font-size: 10px;
}

.experience-card-footer
.planning-label {
    font-family: inherit;
    font-size: 11px;
}

.experience-card-footer > a {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: #174a3d;
    color: #fff;
    text-decoration: none;
    transition: .25s ease;
}

.experience-card-footer > a:hover {
    background: #c7a35a;
    color: #0d3029;
}

@media (max-width: 1050px) {
    .featured-experience-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .featured-experiences-section {
        padding: 80px 0;
    }

    .featured-experiences-heading,
    .experience-group-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .featured-experience-grid {
        grid-template-columns: 1fr;
    }

    .experience-card-content h3,
    .venue-quick-information,
    .event-quick-features,
    .event-planning-text {
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .experience-heading-actions {
        width: 100%;
    }

    .experience-heading-actions a {
        flex: 1;
        justify-content: center;
    }

    .experience-card-content {
        padding: 21px 18px;
    }
}

/*
 * Featured Experiences final card polish
 */
.featured-experience-grid {
    align-items: stretch;
}

.featured-experience-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.experience-card-content {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.experience-card-content h3 {
    overflow-wrap: anywhere;
}

.experience-card-footer {
    margin-top: auto;
}

.venue-quick-information,
.event-quick-features,
.event-planning-text {
    margin-bottom: 19px;
}

.experience-card-footer {
    margin-top: auto;
}


.experience-group {
    position: relative;
}

.event-experience-group {
    margin-right: -28px;
    margin-left: -28px;
    padding: 38px 28px;
    border: 1px solid rgba(199, 163, 90, .2);
    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(199, 163, 90, .1),
            transparent 25%
        ),
        #f2f6f3;
}

.event-experience-group
.experience-group-heading {
    border-color: rgba(23, 74, 61, .15);
}

.event-experience-group
.experience-group-heading > div > span {
    background: #c7a35a;
    color: #0d3029;
}

@media (max-width: 767px) {
    .event-experience-group {
        margin-right: -20px;
        margin-left: -20px;
        padding: 30px 20px;
    }
}

    </style>
@endpush



<!-- Dynamic JavaScript ROOM RESERVATION ---------  -->

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const bookingForm = document.getElementById(
                'dynamicBookingForm'
            );

            if (!bookingForm) {
                return;
            }

            const bookingTypeInputs = bookingForm.querySelectorAll(
                'input[name="booking_type"]'
            );

            const bookingPanels = bookingForm.querySelectorAll(
                '[data-booking-panel]'
            );

            function activateBookingPanel(selectedType) {
                bookingPanels.forEach(function (panel) {
                    const isActive =
                        panel.dataset.bookingPanel === selectedType;

                    panel.hidden = !isActive;
                    panel.classList.toggle('active', isActive);

                    panel.querySelectorAll(
                        'input, select, textarea'
                    ).forEach(function (field) {
                        field.disabled = !isActive;
                    });
                });
            }

            bookingTypeInputs.forEach(function (input) {
                input.addEventListener('change', function () {
                    activateBookingPanel(this.value);
                });
            });

            const selectedBookingType = bookingForm.querySelector(
                'input[name="booking_type"]:checked'
            );

            if (selectedBookingType) {
                activateBookingPanel(
                    selectedBookingType.value
                );
            }

            const checkIn = document.getElementById(
                'bookingCheckIn'
            );

            const checkOut = document.getElementById(
                'bookingCheckOut'
            );

            function updateMinimumCheckout() {
                if (!checkIn || !checkOut || !checkIn.value) {
                    return;
                }

                const dateParts = checkIn.value.split('-');

                const selectedDate = new Date(
                    Number(dateParts[0]),
                    Number(dateParts[1]) - 1,
                    Number(dateParts[2])
                );

                selectedDate.setDate(
                    selectedDate.getDate() + 1
                );

                const year = selectedDate.getFullYear();

                const month = String(
                    selectedDate.getMonth() + 1
                ).padStart(2, '0');

                const day = String(
                    selectedDate.getDate()
                ).padStart(2, '0');

                const minimumCheckout =
                    year + '-' + month + '-' + day;

                checkOut.min = minimumCheckout;

                if (
                    checkOut.value &&
                    checkOut.value < minimumCheckout
                ) {
                    checkOut.value = '';
                }
            }

            if (checkIn && checkOut) {
                checkIn.addEventListener(
                    'change',
                    updateMinimumCheckout
                );

                updateMinimumCheckout();
            }

            const submitButton = document.getElementById(
                'submitReservationButton'
            );

            let formSubmitted = false;

            bookingForm.addEventListener(
                'submit',
                function (event) {
                    if (formSubmitted) {
                        event.preventDefault();
                        return;
                    }

                    if (!bookingForm.checkValidity()) {
                        return;
                    }

                    formSubmitted = true;

                    if (submitButton) {
                        submitButton.disabled = true;

                        const buttonText =
                            submitButton.querySelector(
                                '.button-text'
                            );

                        if (buttonText) {
                            buttonText.textContent =
                                'Submitting Request...';
                        }
                    }
                }
            );

            @if ($errors->any() || session('reservation_success'))
                document.getElementById('booking')
                    ?.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
            @endif
        });
    </script>
@endpush

<!-- END Dynamic JavaScript ROOM RESERVATION ---------  -->