@extends('layouts.frontend')

@section('content')
    @include('frontend.partials.inner-hero', [
        'title' => $auditorium['title'],
        'eyebrow' => 'Auditorium Detail',
        'summary' => $auditorium['summary'],
        'image' => asset($auditorium['image']),
        'breadcrumbs' => ['Halls & Auditoriums' => url('/halls-auditoriums'), $auditorium['title'] => null],
    ])

    <section class="content-container my-space-xl py-space-md">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-space-xl items-center">
            <div class="lg:col-span-7">
                <img class="w-full h-[450px] object-cover rounded-xl shadow-lg" src="{{ asset($auditorium['image']) }}" alt="{{ $auditorium['title'] }}">
            </div>
            <div class="lg:col-span-5">
                <span class="font-label-md text-label-md text-primary uppercase tracking-widest">Overview</span>
                <h2 class="font-headline-lg text-headline-lg text-on-surface font-bold mt-space-xs">{{ $auditorium['title'] }}</h2>
                <p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">{{ $auditorium['description'] }}</p>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-space-sm mb-space-md">
                    <div class="bg-surface-container-lowest rounded-lg border border-surface-container p-space-sm">
                        <span class="text-xs text-outline uppercase block">Seating Capacity</span>
                        <strong class="font-title-md text-title-md text-on-surface">{{ $auditorium['capacity'] }}</strong>
                    </div>
                    <div class="bg-surface-container-lowest rounded-lg border border-surface-container p-space-sm">
                        <span class="text-xs text-outline uppercase block">Location</span>
                        <strong class="font-title-md text-title-md text-on-surface">{{ $auditorium['location'] }}</strong>
                    </div>
                </div>
                <div class="flex flex-wrap gap-space-sm">
                    <a class="inline-flex items-center gap-2 px-space-lg py-2.5 bg-primary-container text-on-primary font-title-md text-title-md rounded hover:bg-primary transition-colors"
                        href="{{ url('/booking') }}">
                        <span>Booking Enquiry</span>
                        <span class="material-symbols-outlined text-sm">east</span>
                    </a>
                    <a class="inline-flex items-center gap-2 px-space-lg py-2.5 bg-surface-container text-on-surface font-title-md text-title-md rounded hover:bg-surface-container-high transition-colors"
                        href="{{ url('/halls-auditoriums') }}">
                        <span>Back to Halls</span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="w-full my-space-xl py-space-xl px-gutter">
        <div class="max-w-7xl mx-auto">
            @include('frontend.partials.section-heading', ['eyebrow' => 'Facilities', 'title' => 'Amenities & Venue Support'])
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-space-lg">
                <article class="bg-surface-container-lowest rounded-xl border border-surface-container p-space-md h-full">
                    <h3 class="font-headline-sm text-headline-sm text-on-surface font-bold">Amenities</h3>
                    <ul class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed mb-0 ps-3">
                        @foreach ($auditorium['amenities'] as $amenity)
                            <li>{{ $amenity }}</li>
                        @endforeach
                    </ul>
                </article>
                <article class="bg-surface-container-lowest rounded-xl border border-surface-container p-space-md h-full">
                    <h3 class="font-headline-sm text-headline-sm text-on-surface font-bold">Available Facilities</h3>
                    <ul class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed mb-0 ps-3">
                        @foreach ($auditorium['facilities'] as $facility)
                            <li>{{ $facility }}</li>
                        @endforeach
                    </ul>
                </article>
                <article class="bg-surface-container-lowest rounded-xl border border-surface-container p-space-md h-full">
                    <h3 class="font-headline-sm text-headline-sm text-on-surface font-bold">Rental & Public Utility</h3>
                    <p class="font-body-sm text-body-sm text-on-surface-variant"><strong>Rental:</strong> {{ $auditorium['rental_info'] }}</p>
                    <p class="font-body-sm text-body-sm text-on-surface-variant mb-0"><strong>Public utility:</strong> {{ $auditorium['public_utility'] }}</p>
                </article>
            </div>
        </div>
    </section>

    <section class="content-container my-space-xl py-space-md">
        @include('frontend.partials.section-heading', ['eyebrow' => 'Gallery', 'title' => 'Auditorium Images'])
        @include('frontend.partials.static-gallery', ['images' => $auditorium['gallery'], 'alt' => $auditorium['title'].' gallery image'])
    </section>
@endsection