@extends('layouts.site')

@section('title', 'Tours - Visit Sri Lanka 360')

@php
    $packages = $packages ?? collect();
    $types = $types ?? collect();

    $qType = request('type');
    $qDest = request('destination');
    $qMin = request('min');
    $qMax = request('max');

    $typeLabel = $types->firstWhere('slug', $qType)->name ?? null;
@endphp

@section('content')
    {{-- HERO --}}
    <section class="relative">
        <div class="h-[34vh] md:h-[38vh] relative overflow-hidden bg-slate-900 bg-cover bg-center"
            style="background-image: url('{{ asset('images/hero/tours-hero.jpg') }}');">
            {{-- overlays --}}
            <div class="absolute inset-0 bg-black/55"></div>
            <div
                class="absolute inset-0 bg-[radial-gradient(900px_500px_at_20%_30%,rgba(215,166,43,.35),transparent_60%),radial-gradient(800px_500px_at_85%_40%,rgba(255,255,255,.10),transparent_55%)]">
            </div>

            <div class="relative container-site h-full flex items-center">
                <div class="max-w-3xl">
                    <div class="text-white/70 text-xs tracking-[.22em] uppercase">
                        Explore Sri Lanka
                    </div>
                    <h1 class="mt-3 text-white text-3xl md:text-5xl font-semibold"
                        style="font-family: var(--font-display);">
                        Tour Packages
                    </h1>
                    <p class="mt-3 text-white/80 text-sm md:text-base">
                        Choose a package, filter by type and price, and book your journey.
                    </p>
                </div>
            </div>
        </div>
    </section>

    {{-- FILTER BAR --}}
    <section class="-mt-10 md:-mt-12 relative z-10">
        <div class="container-site">
            <div class="rounded-3xl border border-slate-200 bg-white shadow-soft p-5 md:p-6">
                <form method="GET" action="{{ route('tours.index') }}"
                    class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-4 items-end">

                    {{-- Type --}}
                    <div class="lg:col-span-4">
                        <label class="text-xs font-medium text-slate-600">Tour Type</label>
                        <select name="type" class="mt-1 input-premium">
                            <option value="">All Types</option>
                            @foreach($types as $t)
                                <option value="{{ $t->slug }}" @selected($qType === $t->slug)>{{ $t->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Price From --}}
                    <div class="lg:col-span-3">
                        <label class="text-xs font-medium text-slate-600">Price From</label>
                        <input name="min" type="number" value="{{ $qMin }}" class="mt-1 input-premium" placeholder="0">
                    </div>

                    {{-- Price To --}}
                    <div class="lg:col-span-3">
                        <label class="text-xs font-medium text-slate-600">Price To</label>
                        <input name="max" type="number" value="{{ $qMax }}" class="mt-1 input-premium" placeholder="500000">
                    </div>

                    {{-- Actions --}}
                    <div class="lg:col-span-2 flex gap-2">
                        <button class="btn-gold w-full justify-center" type="submit">Search</button>
                        <a href="{{ route('tours.index') }}" class="btn-outline w-full justify-center inline-flex">
                            Reset
                        </a>
                    </div>

                    {{-- Active filter chips --}}
                    <div class="lg:col-span-12 flex flex-wrap gap-2 pt-1">
                        @if($typeLabel)
                            <span class="px-3 py-2 rounded-2xl bg-gold-500/10 text-xs font-semibold text-gold-800">
                                Type: {{ $typeLabel }}
                            </span>
                        @endif

                        @if($qMin || $qMax)
                            <span class="px-3 py-2 rounded-2xl bg-slate-100 text-xs font-semibold text-slate-700">
                                Price: {{ $qMin ?: '0' }} – {{ $qMax ?: '∞' }}
                            </span>
                        @endif
                    </div>

                </form>
            </div>
        </div>
    </section>

    {{-- RESULTS --}}
    <section class="py-10 md:py-14">
        <div class="container-site">

            <div class="flex items-end justify-between gap-4">
                <div>
                    <h2 class="text-2xl md:text-3xl font-semibold" style="font-family: var(--font-display);">
                        Available Packages
                    </h2>
                    <p class="mt-2 text-slate-600 text-sm">
                        Showing {{ method_exists($packages, 'total') ? $packages->total() : $packages->count() }} tours
                    </p>
                </div>
            </div>

            @if(method_exists($packages, 'count') && $packages->count())
                <div class="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">

                    @foreach($packages as $p)
                        @php
                            $img = $p->cover_image ? asset('storage/' . ltrim($p->cover_image, '/')) : 'https://placehold.co/1200x800';
                            $destCount = $p->destinations?->count() ?? 0;
                            $price = $p->price_from ? number_format((float) $p->price_from, 0) : null;
                        @endphp

                        <a href="{{ route('tours.show', $p->slug) }}"
                            class="group rounded-3xl overflow-hidden border border-slate-200 bg-white hover:shadow-soft transition">
                            <div class="relative h-56 bg-slate-100 overflow-hidden">
                                <img src="{{ $img }}" alt="{{ $p->name }}"
                                    class="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:scale-[1.04]">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-transparent"></div>

                                <div class="absolute left-5 right-5 bottom-5">
                                    <div class="flex items-center justify-between gap-3">
                                        <div class="text-white/80 text-[11px] tracking-[.22em] uppercase">
                                            {{ $p->type?->name ?? 'Tour Package' }}
                                        </div>

                                        @if($price)
                                            <div class="px-3 py-1 rounded-full bg-white/90 text-slate-900 text-xs font-semibold">
                                                {{ $p->currency }} {{ $price }}
                                                <span class="text-[11px] font-medium text-slate-600">/{{ $p->price_unit }}</span>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="mt-2 text-white text-xl font-semibold" style="font-family: var(--font-display);">
                                        {{ $p->name }}
                                    </div>
                                </div>
                            </div>

                            <div class="p-5">
                                @if($p->short_description)
                                    <p class="text-sm text-slate-600 line-clamp-2">
                                        {{ $p->short_description }}
                                    </p>
                                @endif

                                <div class="mt-4 grid grid-cols-3 gap-3 text-xs">
                                    <div class="rounded-2xl bg-slate-50 border border-slate-200 p-3 text-center">
                                        <div class="font-semibold text-slate-900">{{ (int) $p->duration_days }}</div>
                                        <div class="text-slate-500">Days</div>
                                    </div>
                                    <div class="rounded-2xl bg-slate-50 border border-slate-200 p-3 text-center">
                                        <div class="font-semibold text-slate-900">{{ $destCount ?: '-' }}</div>
                                        <div class="text-slate-500">Places</div>
                                    </div>
                                    <div class="rounded-2xl bg-slate-50 border border-slate-200 p-3 text-center">
                                        <div class="font-semibold text-slate-900">{{ (int) $p->min_travellers }}</div>
                                        <div class="text-slate-500">Min Pax</div>
                                    </div>
                                </div>

                                <div class="mt-5 flex items-center justify-between">
                                    <span class="text-xs font-semibold tracking-[.22em] uppercase text-gold-700">
                                        View Details
                                    </span>
                                    <span
                                        class="h-10 w-10 rounded-2xl border border-slate-200 grid place-items-center text-slate-700 group-hover:border-gold-500 group-hover:text-gold-700 transition">
                                        <i class="fa-solid fa-arrow-right"></i>
                                    </span>
                                </div>
                            </div>
                        </a>
                    @endforeach

                </div>

                {{-- Pagination --}}
                @if(method_exists($packages, 'links'))
                    <div class="mt-10">
                        {{ $packages->links() }}
                    </div>
                @endif
            @else
                <div class="mt-8 rounded-3xl border border-slate-200 bg-white p-8 text-center">
                    <div class="text-lg font-semibold">No tours found</div>
                    <p class="mt-2 text-slate-600">Try changing filters or reset.</p>
                    <a href="{{ route('tours.index') }}" class="btn-outline mt-5 inline-flex">Reset filters</a>
                </div>
            @endif

        </div>
    </section>
@endsection