@extends('layouts.site')

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

@php
    $heroBg = asset('images/hero/excursions-hero.jpg');
@endphp

@section('content')
    <div class="tour-show-page">

        {{-- HERO --}}
        <section class="relative full-bleed">
            <div class="h-[34vh] md:h-[38vh] relative overflow-hidden bg-slate-900 bg-cover bg-center"
                style="background-image: url('{{ $heroBg }}');">

                <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">
                            One Day Excursions
                        </div>

                        <h1 class="mt-3 text-white text-3xl md:text-5xl font-semibold"
                            style="font-family: var(--font-display);">
                            Excursion Request
                        </h1>

                        <p class="mt-3 text-white/80 text-sm md:text-base max-w-2xl">
                            Tell us your travel date, pickup point, and group details. We’ll prepare the right excursion
                            option and contact you via WhatsApp or email.
                        </p>
                    </div>
                </div>
            </div>
        </section>

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

                    {{-- LEFT: FORM --}}
                    <div class="lg:col-span-7 order-1">
                        <div class="card p-6 md:p-8">
                            <div class="text-2xl font-semibold" style="font-family: var(--font-display);">
                                Request Your Excursion
                            </div>

                            <p class="mt-2 text-sm text-slate-600">
                                Fill in the details below and our team will get back to you with the best available option.
                            </p>

                            @if(session('success'))
                                <div class="mt-4 rounded-2xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-800">
                                    {{ session('success') }}
                                </div>
                            @endif

                            <form method="POST" action="{{ route('excursions.request.store') }}" class="mt-6 space-y-5">
                                @csrf

                                <div class="grid md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="text-xs font-medium text-slate-600">Full Name</label>
                                        <input name="full_name" value="{{ old('full_name') }}" class="mt-1 input-premium" required>
                                        @error('full_name')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                    </div>

                                    <div>
                                        <label class="text-xs font-medium text-slate-600">Citizenship</label>
                                        <input name="citizenship" value="{{ old('citizenship') }}" class="mt-1 input-premium" required>
                                        @error('citizenship')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                    </div>

                                    <div>
                                        <label class="text-xs font-medium text-slate-600">Email</label>
                                        <input name="email" type="email" value="{{ old('email') }}" class="mt-1 input-premium" required>
                                        @error('email')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                    </div>

                                    <div>
                                        <label class="text-xs font-medium text-slate-600">Phone</label>
                                        <input name="phone" value="{{ old('phone') }}" class="mt-1 input-premium" required>
                                        @error('phone')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                    </div>

                                    <div>
                                        <label class="text-xs font-medium text-slate-600">WhatsApp</label>
                                        <input name="whatsapp" value="{{ old('whatsapp') }}" class="mt-1 input-premium" required>
                                        @error('whatsapp')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                    </div>

                                    <div>
                                        <label class="text-xs font-medium text-slate-600">Travel Date</label>
                                        <input name="travel_date" type="date" value="{{ old('travel_date') }}" class="mt-1 input-premium" required>
                                        @error('travel_date')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                    </div>

                                    <div>
                                        <label class="text-xs font-medium text-slate-600">Adults</label>
                                        <input id="adults" name="adults" type="number" min="1" value="{{ old('adults', 1) }}"
                                            class="mt-1 input-premium" required>
                                        @error('adults')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                    </div>

                                    <div>
                                        <label class="text-xs font-medium text-slate-600">Children</label>
                                        <input id="children" name="children" type="number" min="0" value="{{ old('children', 0) }}"
                                            class="mt-1 input-premium" oninput="generateExcursionChildAges()">
                                        @error('children')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                    </div>
                                </div>

                                <div id="excursion-children-wrap" class="hidden rounded-2xl border border-amber-200 bg-amber-50 px-4 py-4">
                                    <div class="text-sm font-semibold text-slate-900">Children Policy</div>
                                    <div class="mt-1 text-sm text-slate-700 leading-relaxed">
                                        Children <strong>0–5 years travel free of charge</strong>.  
                                        Children <strong>5–12 years are charged half price</strong>.  
                                        Children <strong>above 12 years are considered adults</strong>.
                                    </div>

                                    <div id="excursion-children-ages" class="mt-4"></div>
                                </div>

                                <div class="grid md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="text-xs font-medium text-slate-600">Pickup Location</label>
                                        <input name="pickup_location" value="{{ old('pickup_location') }}" class="mt-1 input-premium" required>
                                        @error('pickup_location')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                    </div>

                                    <div>
                                        <label class="text-xs font-medium text-slate-600">Drop Location</label>
                                        <input name="drop_location" value="{{ old('drop_location') }}" class="mt-1 input-premium">
                                        @error('drop_location')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                    </div>
                                </div>

                                <div>
                                    <label class="text-xs font-medium text-slate-600">Destination / Excursion</label>
                                    <input name="destination" value="{{ old('destination') }}" class="mt-1 input-premium"
                                        placeholder="Ella, Sigiriya, Galle, Yala...">
                                    @error('destination')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                </div>

                                <div>
                                    <label class="text-xs font-medium text-slate-600">Note / Message</label>
                                    <textarea name="message" rows="4" class="mt-1 input-premium"
                                        placeholder="Special requests, hotel name, pickup details, etc.">{{ old('message') }}</textarea>
                                    @error('message')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                </div>

                                <button class="btn-gold w-full justify-center" type="submit">
                                    Send Excursion Request
                                </button>

                                <div class="text-[11px] text-slate-500 text-center">
                                    By submitting, you agree we may contact you by WhatsApp, phone, or email.
                                </div>
                            </form>
                        </div>
                    </div>

                    {{-- RIGHT: SIDE CONTENT --}}
                    <aside class="lg:col-span-5 order-2">
                        <div class="space-y-6 lg:sticky lg:top-28">

                            <div class="card p-6">
                                <div class="text-lg font-semibold" style="font-family: var(--font-display);">
                                    Why Request with Us?
                                </div>

                                <div class="mt-4 space-y-4 text-sm text-slate-600">
                                    <div class="flex gap-3">
                                        <span class="text-gold-600 mt-0.5"><i class="fa-solid fa-circle-check"></i></span>
                                        <span>Fast reply via WhatsApp or email</span>
                                    </div>
                                    <div class="flex gap-3">
                                        <span class="text-gold-600 mt-0.5"><i class="fa-solid fa-circle-check"></i></span>
                                        <span>Flexible pickup and drop arrangements</span>
                                    </div>
                                    <div class="flex gap-3">
                                        <span class="text-gold-600 mt-0.5"><i class="fa-solid fa-circle-check"></i></span>
                                        <span>Private and comfortable transport options</span>
                                    </div>
                                    <div class="flex gap-3">
                                        <span class="text-gold-600 mt-0.5"><i class="fa-solid fa-circle-check"></i></span>
                                        <span>Local travel support from our team</span>
                                    </div>
                                </div>
                            </div>

                            @if(!empty($featuredTours) && $featuredTours->count())
                                <div class="card p-6">
                                    <div class="text-lg font-semibold" style="font-family: var(--font-display);">
                                        Popular Tours
                                    </div>

                                    <div class="mt-4 space-y-4">
                                        @foreach($featuredTours as $tour)
                                            @php
                                                $img = $tour->cover_image
                                                    ? asset('storage/' . ltrim($tour->cover_image, '/'))
                                                    : asset('img/hero/tours-hero.jpg');
                                            @endphp

                                            <a href="{{ route('tours.show', $tour->slug) }}"
                                                class="group flex gap-3 rounded-2xl hover:bg-slate-50 p-2 transition">
                                                <div class="h-16 w-20 rounded-2xl overflow-hidden border border-slate-200 bg-slate-100 shrink-0">
                                                    <img src="{{ $img }}" class="h-full w-full object-cover group-hover:scale-[1.03] transition" alt="">
                                                </div>
                                                <div class="min-w-0">
                                                    <div class="text-[11px] tracking-[.22em] uppercase text-slate-500">
                                                        {{ $tour->type?->name ?? 'Tour' }}
                                                    </div>
                                                    <div class="mt-1 font-semibold text-slate-900 leading-snug line-clamp-2">
                                                        {{ $tour->name }}
                                                    </div>
                                                </div>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                        </div>
                    </aside>

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

@push('scripts')
<script>
    function generateExcursionChildAges() {
        const childrenCount = parseInt(document.getElementById('children').value || 0);
        const wrap = document.getElementById('excursion-children-wrap');
        const agesBox = document.getElementById('excursion-children-ages');

        agesBox.innerHTML = '';

        if (childrenCount > 0) {
            wrap.classList.remove('hidden');

            let html = '<label class="text-xs font-medium text-slate-600">Children Ages</label>';
            html += '<div class="mt-2 flex flex-wrap gap-2">';

            for (let i = 0; i < childrenCount; i++) {
                html += `
                    <div class="w-20">
                        <input type="number"
                               name="children_ages[]"
                               min="0"
                               max="17"
                               class="input-premium text-center px-2"
                               placeholder="Age"
                               required>
                    </div>
                `;
            }

            html += '</div>';
            agesBox.innerHTML = html;
        } else {
            wrap.classList.add('hidden');
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        generateExcursionChildAges();
    });
</script>
@endpush