@extends('layouts.epelcon')
@section('title', 'Service Bookings')

@section('content')
<div x-data="{ create: false, pay: null }">
    <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Service bookings</h1>
            <p class="text-sm text-slate-500">Spa sessions, pool passes, banquets and every personalised amenity request.</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('epelcon.services.index') }}" class="rounded-xl bg-white px-4 py-2.5 text-sm font-bold text-slate-700 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50">Manage services</a>
            <button @click="create = true" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">+ New booking</button>
        </div>
    </div>

    <div class="no-scrollbar mb-4 flex gap-2 overflow-x-auto">
        @foreach (['' => 'All', 'pending' => 'Pending', 'confirmed' => 'Confirmed', 'completed' => 'Completed', 'cancelled' => 'Cancelled'] as $value => $label)
            <a href="{{ route('epelcon.services.bookings', array_filter(['status' => $value])) }}"
               class="shrink-0 rounded-full px-4 py-2 text-xs font-bold {{ request('status', '') === $value ? 'bg-slate-900 text-white' : 'bg-white text-slate-600 ring-1 ring-slate-200' }}">{{ $label }}</a>
        @endforeach
    </div>

    @php $emojis = ['spa' => '💆', 'swimming_pool' => '🏊', 'jacuzzi' => '🛁', 'pedicure' => '💅', 'theater' => '🎬', 'banquet' => '🎪', 'gym' => '🏋️', 'other' => '✨']; @endphp

    <div class="space-y-3">
        @forelse ($bookings as $booking)
            @php $stat = ['pending' => 'bg-amber-100 text-amber-700', 'confirmed' => 'bg-sky-100 text-sky-700', 'completed' => 'bg-emerald-100 text-emerald-700', 'cancelled' => 'bg-rose-100 text-rose-700'][$booking->status]; @endphp
            <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200">
                <div class="flex flex-wrap items-center gap-3">
                    <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-lg">{{ $emojis[$booking->service->category ?? 'other'] ?? '✨' }}</div>
                    <div class="min-w-0 flex-1">
                        <p class="font-bold text-slate-900">{{ $booking->service->name ?? '—' }} <span class="ml-1 text-xs font-bold text-slate-400">{{ $booking->code }}</span></p>
                        <p class="text-xs text-slate-500">{{ $booking->customer_name }}{{ $booking->phone ? ' · ' . $booking->phone : '' }} · {{ $booking->scheduled_at->format('D j M, g:ia') }} · {{ $booking->guests }} {{ Str::plural('guest', $booking->guests) }}</p>
                    </div>
                    <p class="text-sm font-extrabold text-slate-900">@money($booking->amount)</p>
                    <span class="rounded-full px-2.5 py-1 text-[10px] font-bold uppercase {{ $booking->paid ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-500' }}">{{ $booking->paid ? 'Paid' : 'Unpaid' }}</span>
                    <span class="rounded-full px-2.5 py-1 text-[10px] font-bold uppercase {{ $stat }}">{{ $booking->status }}</span>
                    <div class="flex gap-1.5">
                        @if ($booking->status === 'pending')
                            <form method="POST" action="{{ route('epelcon.services.bookings.status', $booking) }}">@csrf<input type="hidden" name="status" value="confirmed">
                                <button class="rounded-lg bg-sky-600 px-3 py-1.5 text-xs font-bold text-white hover:bg-sky-700">Confirm</button></form>
                        @elseif ($booking->status === 'confirmed')
                            <form method="POST" action="{{ route('epelcon.services.bookings.status', $booking) }}">@csrf<input type="hidden" name="status" value="completed">
                                <button class="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-bold text-white hover:bg-emerald-700">Complete</button></form>
                        @endif
                        @if (! $booking->paid && $booking->status !== 'cancelled')
                            <button @click='pay = {{ json_encode(['id' => $booking->id, 'code' => $booking->code, 'amount' => $booking->amount]) }}'
                                    class="rounded-lg bg-amber-50 px-3 py-1.5 text-xs font-bold text-amber-700 hover:bg-amber-100">Mark paid</button>
                        @endif
                        @if (in_array($booking->status, ['pending', 'confirmed']))
                            <form method="POST" action="{{ route('epelcon.services.bookings.status', $booking) }}">@csrf<input type="hidden" name="status" value="cancelled">
                                <button class="rounded-lg bg-rose-50 px-3 py-1.5 text-xs font-bold text-rose-500 hover:bg-rose-100">Cancel</button></form>
                        @endif
                    </div>
                </div>
            </div>
        @empty
            <div class="rounded-2xl bg-white p-10 text-center text-slate-400 shadow-sm ring-1 ring-slate-200">No service bookings found.</div>
        @endforelse
    </div>

    <div class="mt-5">{{ $bookings->links() }}</div>

    {{-- New booking modal --}}
    <div x-cloak x-show="create" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="create = false"></div>
        <div x-show="create" x-transition class="relative max-h-[92vh] w-full max-w-md overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">New service booking</h2>
            <form method="POST" action="{{ route('epelcon.services.bookings.store') }}" class="space-y-4"
                  x-data="{ prices: {{ json_encode($services->pluck('price', 'id')) }}, amount: '' }">@csrf
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Service</span>
                    <select name="hotel_service_id" required class="w-full rounded-xl border-slate-200 text-sm" @change="amount = prices[$event.target.value] ?? ''">
                        <option value="">— Choose a service —</option>
                        @foreach ($services as $service)<option value="{{ $service->id }}">{{ $service->name }} — @money($service->price)</option>@endforeach
                    </select></label>
                <div class="grid grid-cols-2 gap-4">
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Customer name</span>
                        <input name="customer_name" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Phone</span>
                        <input name="phone" class="w-full rounded-xl border-slate-200 text-sm"></label>
                </div>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">In-house guest (optional)</span>
                    <select name="booking_id" class="w-full rounded-xl border-slate-200 text-sm">
                        <option value="">— Walk-in / external —</option>
                        @foreach ($inHouse as $stay)<option value="{{ $stay->id }}">Room {{ $stay->room->number ?? '?' }} — {{ $stay->customer->name ?? $stay->code }}</option>@endforeach
                    </select></label>
                <div class="grid grid-cols-2 gap-4">
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Date & time</span>
                        <input type="datetime-local" name="scheduled_at" required value="{{ now()->addHour()->format('Y-m-d\TH:00') }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Guests</span>
                        <input type="number" name="guests" min="1" value="1" class="w-full rounded-xl border-slate-200 text-sm"></label>
                </div>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Amount ({{ $CUR }})</span>
                    <input type="number" step="0.01" min="0" name="amount" x-model="amount" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Notes</span>
                    <textarea name="notes" rows="2" class="w-full rounded-xl border-slate-200 text-sm"></textarea></label>
                <div class="flex justify-end gap-2">
                    <button type="button" @click="create = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Create booking</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Mark paid modal --}}
    <div x-cloak x-show="pay" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="pay = null"></div>
        <div x-show="pay" x-transition class="relative w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-1 text-lg font-extrabold">Record payment</h2>
            <p class="mb-4 text-sm text-slate-500">Booking <span class="font-bold" x-text="pay?.code"></span> · {{ $CUR }}<span x-text="Number(pay?.amount ?? 0).toLocaleString()"></span></p>
            <form method="POST" :action="'{{ url('epelcon/services/bookings') }}/' + pay?.id + '/paid'" class="space-y-4">@csrf
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Payment method</span>
                    <select name="method" class="w-full rounded-xl border-slate-200 text-sm">
                        <option value="cash">Cash</option><option value="card">Card</option><option value="transfer">Transfer</option><option value="pos">POS</option>
                    </select></label>
                <div class="flex justify-end gap-2">
                    <button type="button" @click="pay = null" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-emerald-600 px-5 py-2.5 text-sm font-bold text-white">Mark paid</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
