@extends('frontend.layouts.app')

@section('title', 'Rooms & Suites | CCULB Resort')

@section(
    'meta_description',
    'Explore the rooms and suites of CCULB Resort and find the '
    .'perfect accommodation for your relaxing stay in Gazipur.'
)

@section('content')
    <section class="rooms-page-hero">
        <div class="rooms-page-hero-overlay"></div>

        <div class="container rooms-page-hero-content">
            <span class="rooms-page-eyebrow">
                Refined Comfort in Nature
            </span>

            <h1>Rooms & Suites</h1>

            <p>
                Thoughtfully designed accommodation for peaceful
                holidays, family time and memorable resort experiences.
            </p>

            <div class="rooms-breadcrumb">
                <a href="{{ route('home') }}">Home</a>
                <span>•</span>
                <strong>Rooms & Suites</strong>
            </div>
        </div>
    </section>

    <section class="rooms-listing-section" id="rooms">
        <div class="container">
            <div class="rooms-listing-heading">
                <div>
                    <span class="rooms-section-eyebrow">
                        Choose Your Stay
                    </span>

                    <h2>Discover Our Accommodation</h2>
                </div>

                <p>
                    Every room is designed to bring together comfort,
                    privacy and the calm natural surroundings of
                    CCULB Resort.
                </p>
            </div>

            @if ($roomTypes->isNotEmpty())
                <div class="rooms-listing-grid">
                    @foreach ($roomTypes as $roomType)
                        <article class="listing-room-card">
                            <a
                                class="listing-room-image"
                                href="{{ route(
                                    'rooms.show',
                                    $roomType->slug
                                ) }}"
                                aria-label="View {{ $roomType->name }}"
                            >
                                @if ($roomType->featured_image)
                                    <img
                                        src="{{ asset(
                                            'storage/'
                                            .$roomType->featured_image
                                        ) }}"
                                        alt="{{ $roomType->name }}"
                                        loading="lazy"
                                    >
                                @else
                                    <div class="listing-image-placeholder">
                                        <span>CCULB Resort</span>
                                    </div>
                                @endif

                                <div class="listing-image-overlay"></div>

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

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

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

                                <h2>
                                    <a
                                        href="{{ route(
                                            'rooms.show',
                                            $roomType->slug
                                        ) }}"
                                    >
                                        {{ $roomType->name }}
                                    </a>
                                </h2>

                                <div class="listing-room-meta">
                                    @if ($roomType->maximum_guests)
                                        <span>
                                            <strong>
                                                {{ $roomType->maximum_guests }}
                                            </strong>

                                            {{ $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="listing-description">
                                        {{ \Illuminate\Support\Str::limit(
                                            $roomType->short_description,
                                            150
                                        ) }}
                                    </p>
                                @endif

                                @if (
                                    is_array($roomType->amenities) &&
                                    count($roomType->amenities)
                                )
                                    <div class="listing-amenities">
                                        @foreach (
                                            array_slice(
                                                $roomType->amenities,
                                                0,
                                                4
                                            ) as $amenity
                                        )
                                            <span>
                                                <i>✓</i>
                                                {{ $amenity }}
                                            </span>
                                        @endforeach
                                    </div>
                                @endif

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

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

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

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

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

                                        <span>→</span>
                                    </a>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>
            @else
                <div class="rooms-empty-state">
                    <span>CCULB Resort</span>

                    <h2>Our Rooms Are Being Prepared</h2>

                    <p>
                        Accommodation information will be available
                        here soon. Please contact us for reservation
                        assistance.
                    </p>

                    <a href="{{ route('home') }}#contact">
                        Contact the Resort
                        <span>→</span>
                    </a>
                </div>
            @endif
        </div>
    </section>

    <section class="rooms-listing-cta" id="booking">
        <div class="container rooms-listing-cta-inner">
            <div>
                <span>Need Help Choosing?</span>

                <h2>Plan Your Perfect Resort Stay</h2>

                <p>
                    Contact our reservation team for room availability,
                    group bookings and personalized assistance.
                </p>
            </div>

            <a href="{{ route('home') }}#contact">
                Contact for Reservation
                <span>→</span>
            </a>
        </div>
    </section>
@endsection

@push('styles')
    <style>
        .rooms-page-hero {
            position: relative;
            display: flex;
            min-height: 460px;
            align-items: center;
            overflow: hidden;
            background:
                linear-gradient(
                    115deg,
                    rgba(9, 39, 32, 0.98),
                    rgba(15, 60, 49, 0.80)
                ),
                url("{{ asset(
                    'assets/frontend/images/rooms-hero.jpg'
                ) }}") center/cover no-repeat;
            color: #ffffff;
        }

        .rooms-page-hero-overlay {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(
                    circle at 82% 25%,
                    rgba(197, 160, 88, 0.24),
                    transparent 32%
                );
        }

        .rooms-page-hero-content {
            position: relative;
            z-index: 1;
            padding-top: 70px;
            padding-bottom: 70px;
        }

        .rooms-page-eyebrow,
        .rooms-section-eyebrow {
            display: block;
            color: #d2ad66;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .rooms-page-hero h1 {
            max-width: 760px;
            margin: 12px 0 18px;
            font-family: "Playfair Display", serif;
            font-size: clamp(45px, 7vw, 78px);
            line-height: 1.06;
        }

        .rooms-page-hero p {
            max-width: 650px;
            margin: 0;
            color: rgba(255, 255, 255, 0.78);
            font-size: 16px;
            line-height: 1.8;
        }

        .rooms-breadcrumb {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 30px;
            font-size: 12px;
        }

        .rooms-breadcrumb a {
            color: rgba(255, 255, 255, 0.72);
            text-decoration: none;
        }

        .rooms-breadcrumb a:hover {
            color: #d2ad66;
        }

        .rooms-breadcrumb span {
            color: #d2ad66;
        }

        .rooms-breadcrumb strong {
            color: #ffffff;
            font-weight: 600;
        }

        .rooms-listing-section {
            padding: 100px 0;
            background:
                radial-gradient(
                    circle at top right,
                    rgba(190, 151, 74, 0.09),
                    transparent 30%
                ),
                #f7f5ef;
        }

        .rooms-listing-heading {
            display: grid;
            grid-template-columns:
                minmax(0, 1fr)
                minmax(300px, 500px);
            align-items: end;
            gap: 50px;
            margin-bottom: 48px;
        }

        .rooms-listing-heading h2 {
            margin: 9px 0 0;
            color: #11382f;
            font-family: "Playfair Display", serif;
            font-size: clamp(34px, 4vw, 52px);
            line-height: 1.15;
        }

        .rooms-listing-heading p {
            margin: 0;
            color: #687772;
            font-size: 14px;
            line-height: 1.85;
        }

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

        .listing-room-card {
            min-width: 0;
            overflow: hidden;
            border: 1px solid rgba(17, 56, 47, 0.08);
            border-radius: 5px;
            background: #ffffff;
            box-shadow: 0 18px 55px rgba(15, 50, 42, 0.08);
            transition:
                transform 0.35s ease,
                box-shadow 0.35s ease;
        }

        .listing-room-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 26px 65px rgba(15, 50, 42, 0.14);
        }

        .listing-room-image {
            position: relative;
            display: block;
            height: 360px;
            overflow: hidden;
            background: #173d34;
        }

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

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

        .listing-image-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                180deg,
                rgba(7, 31, 25, 0.04) 35%,
                rgba(7, 31, 25, 0.52) 100%
            );
        }

        .listing-image-placeholder {
            display: grid;
            width: 100%;
            height: 100%;
            place-items: center;
            background:
                linear-gradient(
                    135deg,
                    rgba(195, 157, 83, 0.24),
                    transparent
                ),
                #173d34;
        }

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

        .listing-offer-badge,
        .listing-view-badge {
            position: absolute;
            z-index: 2;
            top: 20px;
            padding: 9px 13px;
            color: #ffffff;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .listing-offer-badge {
            left: 20px;
            background: #bc9348;
        }

        .listing-view-badge {
            right: 20px;
            background: rgba(12, 47, 39, 0.88);
            backdrop-filter: blur(8px);
        }

        .listing-room-body {
            padding: 29px 29px 27px;
        }

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

        .listing-room-body h2 {
            margin: 0 0 15px;
            font-family: "Playfair Display", serif;
            font-size: 29px;
            line-height: 1.25;
        }

        .listing-room-body h2 a {
            color: #12382f;
            text-decoration: none;
            transition: color 0.25s ease;
        }

        .listing-room-body h2 a:hover {
            color: #b58c43;
        }

        .listing-room-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 9px 18px;
            margin-bottom: 17px;
            color: #687772;
            font-size: 12px;
        }

        .listing-room-meta span {
            position: relative;
        }

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

        .listing-room-meta strong {
            color: #173d34;
        }

        .listing-description {
            min-height: 74px;
            margin: 0;
            color: #687772;
            font-size: 13px;
            line-height: 1.8;
        }

        .listing-amenities {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px 15px;
            margin-top: 20px;
            padding: 18px;
            background: #f8f8f4;
        }

        .listing-amenities span {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            color: #66736f;
            font-size: 11px;
        }

        .listing-amenities i {
            display: inline-grid;
            flex: 0 0 18px;
            width: 18px;
            height: 18px;
            place-items: center;
            border-radius: 50%;
            background: #173d34;
            color: #ffffff;
            font-size: 9px;
            font-style: normal;
        }

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

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

        .listing-price strong {
            color: #173d34;
            font-family: "Playfair Display", serif;
            font-size: 24px;
            line-height: 1;
        }

        .listing-old-price {
            margin-right: 7px;
            color: #9ba6a2;
            font-size: 13px;
            text-decoration: line-through;
        }

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

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

        .listing-details-button:hover {
            gap: 14px;
            background: #b89048;
        }

        .rooms-empty-state {
            max-width: 760px;
            margin: 0 auto;
            padding: 70px 30px;
            border: 1px solid rgba(17, 56, 47, 0.09);
            background: #ffffff;
            text-align: center;
            box-shadow: 0 18px 55px rgba(15, 50, 42, 0.07);
        }

        .rooms-empty-state > span {
            color: #b28b43;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .rooms-empty-state h2 {
            margin: 12px 0;
            color: #12382f;
            font-family: "Playfair Display", serif;
            font-size: 35px;
        }

        .rooms-empty-state p {
            max-width: 540px;
            margin: 0 auto;
            color: #687772;
            font-size: 14px;
            line-height: 1.8;
        }

        .rooms-empty-state a {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-top: 25px;
            padding: 13px 20px;
            background: #173d34;
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            text-decoration: none;
        }

        .rooms-listing-cta {
            padding: 75px 0;
            background: #11382f;
            color: #ffffff;
        }

        .rooms-listing-cta-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 45px;
        }

        .rooms-listing-cta span {
            color: #d2ad66;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        .rooms-listing-cta h2 {
            margin: 9px 0 10px;
            font-family: "Playfair Display", serif;
            font-size: clamp(30px, 4vw, 44px);
            line-height: 1.15;
        }

        .rooms-listing-cta p {
            max-width: 680px;
            margin: 0;
            color: rgba(255, 255, 255, 0.70);
            font-size: 14px;
            line-height: 1.8;
        }

        .rooms-listing-cta a {
            display: inline-flex;
            flex: 0 0 auto;
            min-height: 50px;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 13px 21px;
            border: 1px solid #d2ad66;
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-decoration: none;
            transition:
                gap 0.25s ease,
                background 0.25s ease;
        }

        .rooms-listing-cta a span {
            color: inherit;
            font-size: inherit;
            letter-spacing: 0;
        }

        .rooms-listing-cta a:hover {
            gap: 15px;
            background: #b89048;
        }

        @media (max-width: 960px) {
            .rooms-listing-heading {
                grid-template-columns: 1fr;
                gap: 18px;
            }

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

            .listing-room-image {
                height: 400px;
            }
        }

        @media (max-width: 720px) {
            .rooms-page-hero {
                min-height: 400px;
            }

            .rooms-page-hero-content {
                padding-top: 55px;
                padding-bottom: 55px;
            }

            .rooms-listing-section {
                padding: 75px 0;
            }

            .listing-room-image {
                height: 290px;
            }

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

            .rooms-listing-cta-inner {
                align-items: flex-start;
                flex-direction: column;
            }
        }

        @media (max-width: 480px) {
            .listing-room-body {
                padding: 23px 19px;
            }

            .listing-amenities {
                grid-template-columns: 1fr;
            }

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

            .listing-details-button {
                width: 100%;
            }

            .rooms-listing-cta a {
                width: 100%;
            }
        }
    </style>
@endpush