@extends('layouts.site')
@section('title', 'Rate Your Stay')

@section('content')
    <section class="bg-slate-950 py-14 text-center text-white">
        <p class="text-xs font-bold uppercase tracking-[0.3em] text-gold-400">Your opinion matters</p>
        <h1 class="mt-2 font-serif text-4xl font-bold">Rate your stay</h1>
        <p class="mx-auto mt-3 max-w-lg px-4 text-slate-300">A minute of your time helps us make every future stay even better.</p>
    </section>

    <section class="mx-auto max-w-2xl px-4 py-12 sm:px-6">
        {{-- Booking summary --}}
        <div class="mb-6 flex flex-wrap items-center justify-between gap-3 rounded-3xl bg-white px-6 py-4 shadow-sm ring-1 ring-slate-200">
            <div>
                <p class="text-xs font-bold uppercase tracking-widest text-gold-600">Booking {{ $booking->code }}</p>
                <p class="mt-0.5 text-sm font-bold text-slate-900">{{ $booking->customer->name ?? 'Guest' }} · {{ $booking->roomType->name ?? 'Room' }}</p>
            </div>
            <p class="text-xs font-semibold text-slate-500">{{ $booking->check_in->format('j M Y') }} → {{ $booking->check_out->format('j M Y') }}</p>
        </div>

        @if ($review)
            {{-- Already reviewed --}}
            <div class="rounded-3xl bg-white p-8 text-center shadow-sm ring-1 ring-slate-200 sm:p-10">
                <span class="text-5xl">💛</span>
                <h2 class="mt-4 font-serif text-2xl font-bold text-slate-900">Thank you — you've already reviewed this stay!</h2>
                <div class="mt-4 text-2xl tracking-widest text-gold-500">
                    @for ($i = 1; $i <= 5; $i++)<span class="{{ $i <= $review->rating ? 'text-gold-500' : 'text-slate-200' }}">★</span>@endfor
                </div>
                @if ($review->title)<p class="mt-3 font-bold text-slate-900">“{{ $review->title }}”</p>@endif
                @if ($review->comment)<p class="mx-auto mt-2 max-w-md text-sm text-slate-500">{{ $review->comment }}</p>@endif
                <p class="mt-4 text-xs font-semibold text-slate-400">
                    @if ($review->status === 'approved') Your review is live on our site.
                    @elseif ($review->status === 'rejected') Your review has been reviewed by our team.
                    @else Your review is awaiting moderation.
                    @endif
                </p>
                <a href="{{ route('home') }}" class="mt-6 inline-block rounded-xl bg-slate-950 px-6 py-3 text-sm font-bold text-white">Back to home</a>
            </div>
        @else
            {{-- Review form --}}
            <form method="POST" action="{{ route('review.store', $booking->code) }}"
                  x-data="{ rating: {{ (int) old('rating', 0) }}, hover: 0, labels: ['', 'Poor', 'Fair', 'Good', 'Great', 'Excellent!'] }"
                  class="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-10">
                @csrf

                <div class="text-center">
                    <p class="text-xs font-bold uppercase tracking-widest text-slate-400">How was your stay?</p>
                    <div class="mt-3 flex items-center justify-center gap-1.5">
                        <template x-for="star in 5" :key="star">
                            <button type="button" @click="rating = star" @mouseenter="hover = star" @mouseleave="hover = 0"
                                    class="text-4xl transition-transform duration-150 hover:scale-125 focus:outline-none sm:text-5xl"
                                    :class="(hover || rating) >= star ? 'text-gold-500 drop-shadow' : 'text-slate-200'">★</button>
                        </template>
                    </div>
                    <p class="mt-2 h-5 text-sm font-bold text-gold-600" x-text="labels[hover || rating]"></p>
                    <input type="hidden" name="rating" :value="rating">
                    @error('rating')<p class="mt-1 text-xs font-semibold text-rose-600">Please tap a star to rate your stay.</p>@enderror
                </div>

                <div class="mt-6 space-y-4">
                    <label class="block">
                        <span class="mb-1 block text-xs font-bold uppercase text-slate-500">Title <span class="font-medium normal-case text-slate-400">(optional)</span></span>
                        <input name="title" value="{{ old('title') }}" maxlength="120" placeholder="Sum it up in a few words"
                               class="w-full rounded-xl border-slate-200 text-sm">
                        @error('title')<p class="mt-1 text-xs font-semibold text-rose-600">{{ $message }}</p>@enderror
                    </label>
                    <label class="block">
                        <span class="mb-1 block text-xs font-bold uppercase text-slate-500">Your review <span class="font-medium normal-case text-slate-400">(optional)</span></span>
                        <textarea name="comment" rows="4" maxlength="2000" placeholder="Tell us what you loved — and what we can do better"
                                  class="w-full rounded-xl border-slate-200 text-sm">{{ old('comment') }}</textarea>
                        @error('comment')<p class="mt-1 text-xs font-semibold text-rose-600">{{ $message }}</p>@enderror
                    </label>
                </div>

                <button :disabled="!rating"
                        :class="rating ? 'bg-gradient-to-r from-gold-400 to-gold-600 text-slate-950 shadow-lg shadow-gold-500/20 hover:brightness-110' : 'bg-slate-200 text-slate-400'"
                        class="mt-6 w-full rounded-xl py-3.5 text-sm font-extrabold transition">Submit review →</button>
            </form>
        @endif
    </section>
@endsection
