@extends('layouts.site')

@section('title', $destination->name . ' - Visit Sri Lanka 360')

@php
    $cover = $destination->cover_image ? asset('storage/' . ltrim($destination->cover_image, '/')) : null;
    $row = collect($destination->gallery_row ?? [])->take(3);
    $grid = collect($destination->gallery_grid ?? []);
@endphp

@section('content')
    {{-- HERO --}}
    <section class="relative">
        <div class="h-[46vh] md:h-[52vh] w-full relative overflow-hidden">
            @if($cover)
                <img src="{{ $cover }}" class="absolute inset-0 h-full w-full object-cover" alt="{{ $destination->name }}">
            @else
                <div class="absolute inset-0 bg-slate-200"></div>
            @endif
            <div class="absolute inset-0 bg-black/35"></div>

            <div class="relative container-site h-full flex items-center justify-center text-center">
                <div>
                    <div class="text-white/80 text-xs tracking-[.22em] uppercase">
                        {{ strtoupper($destination->type ?? 'Destination') }}
                    </div>
                    <h1 class="mt-3 text-white text-4xl md:text-6xl font-semibold"
                        style="font-family: var(--font-display);">
                        {{ $destination->name }}
                    </h1>
                </div>
            </div>
        </div>
    </section>

    {{-- CONTENT + SIDEBAR --}}
    <section class="py-10 md:py-14">
        <div class="container-site">
            <div class="grid lg:grid-cols-12 gap-10">

                {{-- MAIN --}}
                <div class="lg:col-span-8">
                    <h2 class="text-2xl md:text-3xl font-semibold" style="font-family: var(--font-display);">
                        Epic {{ $destination->name }}
                    </h2>

                    @if($destination->excerpt)
                        <p class="mt-3 text-slate-600">{{ $destination->excerpt }}</p>
                    @endif

                    {{-- rich content --}}
                    @if($destination->content)
                        <div class="mt-6 prose max-w-none prose-slate">
                            {!! $destination->content !!}
                        </div>
                    @endif

                    {{-- 3 image row --}}
                    @if($row->count())
                        <div class="mt-8 grid md:grid-cols-3 gap-4">
                            @foreach($row as $img)
                                @php $src = !empty($img['image']) ? asset('storage/' . ltrim($img['image'], '/')) : null; @endphp
                                <div class="rounded-3xl overflow-hidden border border-slate-200 bg-slate-100">
                                    @if($src)
                                        <img src="{{ $src }}" class="h-56 w-full object-cover" alt="">
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @endif

                    {{-- another section title like screenshot --}}
                    <div class="mt-10">
                        <h3 class="text-xl font-semibold" style="font-family: var(--font-display);">Municipalities</h3>
                        <p class="mt-2 text-slate-600">
                            Explore areas, viewpoints, and local highlights across {{ $destination->name }}.
                        </p>
                    </div>

                    {{-- gallery grid (masonry-like) --}}
                    @if($grid->count())
                        <div class="mt-6 grid grid-cols-2 md:grid-cols-3 gap-3">
                            @foreach($grid as $img)
                                @php $src = !empty($img['image']) ? asset('storage/' . ltrim($img['image'], '/')) : null; @endphp
                                <div class="rounded-2xl overflow-hidden border border-slate-200 bg-slate-100">
                                    @if($src)
                                        <img src="{{ $src }}" class="h-44 md:h-56 w-full object-cover" alt="">
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                {{-- SIDEBAR --}}
                <aside class="lg:col-span-4">
                    <div class="sticky top-28 space-y-6">

                        {{-- search --}}
                        <div class="rounded-3xl border border-slate-200 bg-white p-5">
                            <div class="font-semibold">Search</div>
                            <form class="mt-3" action="{{ route('destinations.index') }}" method="GET">
                                <input name="q" class="input-premium" placeholder="Search destinations...">
                            </form>
                        </div>

                        {{-- categories/types --}}
                        <div class="rounded-3xl border border-slate-200 bg-white p-5">
                            <div class="font-semibold">Categories</div>
                            <div class="mt-3 space-y-2 text-sm">
                                @forelse($types as $t)
                                    <a class="block text-slate-700 hover:text-gold-700"
                                        href="{{ route('destinations.index', ['type' => $t]) }}">
                                        {{ ucwords(str_replace('-', ' ', $t)) }}
                                    </a>
                                @empty
                                    <div class="text-slate-500">No categories yet.</div>
                                @endforelse
                            </div>
                        </div>

                        {{-- latest --}}
                        <div class="rounded-3xl border border-slate-200 bg-white p-5">
                            <div class="font-semibold">Latest Destinations</div>
                            <div class="mt-4 space-y-4">
                                @foreach($latestDestinations as $d)
                                    @php $thumb = $d->cover_image ? asset('storage/' . ltrim($d->cover_image, '/')) : null; @endphp
                                    <a href="{{ route('destinations.show', $d->slug) }}" class="flex gap-3">
                                        <div class="h-14 w-14 rounded-2xl bg-slate-100 border border-slate-200 overflow-hidden">
                                            @if($thumb)<img src="{{ $thumb }}" class="h-full w-full object-cover">@endif
                                        </div>
                                        <div>
                                            <div class="text-sm font-semibold text-slate-900">{{ $d->name }}</div>
                                            <div class="text-xs text-slate-500">{{ $d->created_at?->format('M d, Y') }}</div>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        </div>

                        {{-- tags --}}
                        <div class="rounded-3xl border border-slate-200 bg-white p-5">
                            <div class="font-semibold">Tags</div>
                            <div class="mt-3 flex flex-wrap gap-2">
                                @php
                                    $tags = array_filter([
                                        $destination->type,
                                        'Sri Lanka',
                                        'Travel',
                                        'Culture',
                                        'Nature'
                                    ]);
                                @endphp
                                @foreach($tags as $tag)
                                    <span class="px-3 py-1 rounded-full border border-slate-200 text-xs text-slate-600">
                                        {{ ucwords(str_replace('-', ' ', $tag)) }}
                                    </span>
                                @endforeach
                            </div>
                        </div>

                    </div>
                </aside>

            </div>
        </div>
    </section>
@endsection