<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cancelar reserva {{ $booking->code }} — AsignaPro</title>
    <link rel="icon" type="image/png" href="{{ asset('favicon.png') }}">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased min-h-screen bg-gray-50 text-ink-900">
    <main class="min-h-screen flex items-center justify-center px-4 py-10">
        <div class="w-full max-w-2xl">
            <div class="bg-white border border-gray-100 rounded-3xl shadow-xl overflow-hidden">
                <div class="p-6 md:p-8 border-b border-gray-100" style="background: linear-gradient(135deg, {{ $booking->company?->primary_color ?? '#4f46e5' }}, {{ $booking->company?->secondary_color ?? '#06b6d4' }});">
                    <p class="text-sm font-bold text-white/80">Cancelar reserva</p>
                    <h1 class="mt-2 text-3xl font-black text-white">{{ $booking->company?->name }}</h1>
                    <p class="mt-1 text-white/80">{{ $booking->code }}</p>
                </div>

                <div class="p-6 md:p-8">
                    @if (session('success'))
                        <div class="mb-5 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 px-4 py-3 text-sm">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if (session('error'))
                        <div class="mb-5 rounded-2xl bg-rose-50 border border-rose-200 text-rose-800 px-4 py-3 text-sm">
                            {{ session('error') }}
                        </div>
                    @endif

                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                        <div>
                            <dt class="text-gray-500">Servicio</dt>
                            <dd class="font-bold text-gray-900">{{ $booking->service?->name }}</dd>
                        </div>
                        <div>
                            <dt class="text-gray-500">Fecha y hora</dt>
                            <dd class="font-bold text-gray-900">{{ $booking->scheduled_at?->format('d/m/Y H:i') }}</dd>
                        </div>
                        <div>
                            <dt class="text-gray-500">Profesional</dt>
                            <dd class="font-bold text-gray-900">{{ $booking->employee?->fullName() ?? 'Por asignar' }}</dd>
                        </div>
                        <div>
                            <dt class="text-gray-500">Estado</dt>
                            <dd><x-badge :color="$booking->status->color()">{{ $booking->status->label() }}</x-badge></dd>
                        </div>
                    </dl>

                    <div class="mt-6 rounded-2xl border border-gray-200 bg-gray-50 p-4 text-sm text-gray-700">
                        {{ $message }}
                    </div>

                    @if ($canCancel)
                        <form method="POST" action="{{ route('public.bookings.cancel', $booking) }}" class="mt-6 space-y-4">
                            @csrf
                            <label class="block">
                                <span class="text-sm font-semibold text-gray-700">Confirma tu celular *</span>
                                <input name="phone" value="{{ old('phone') }}" required class="mt-1.5 w-full rounded-xl border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="+57 300 000 0000">
                                @error('phone') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
                            </label>
                            <label class="block">
                                <span class="text-sm font-semibold text-gray-700">Motivo de cancelación</span>
                                <textarea name="reason" rows="3" maxlength="255" class="mt-1.5 w-full rounded-xl border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="Opcional">{{ old('reason') }}</textarea>
                                @error('reason') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
                            </label>
                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pt-2">
                                <a href="{{ $booking->company?->publicUrl() }}" class="text-sm font-bold text-gray-600 hover:text-gray-900">Reservar otra cita</a>
                                <button
                                    type="button"
                                    x-data
                                    x-on:click.prevent="$dispatch('open-modal', 'confirm-public-booking-cancel')"
                                    class="inline-flex items-center justify-center rounded-full bg-rose-600 px-5 py-3 text-sm font-black text-white shadow-sm hover:bg-rose-700"
                                >
                                    Cancelar mi reserva
                                </button>
                            </div>

                            <x-modal name="confirm-public-booking-cancel" maxWidth="md" focusable>
                                <div class="p-6 sm:p-7">
                                    <div class="flex items-start gap-4">
                                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-rose-50 text-rose-600 ring-1 ring-rose-100">
                                            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                                <path d="m15 9-6 6m0-6 6 6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </div>
                                        <div>
                                            <h2 class="text-xl font-black tracking-tight text-ink-950">Cancelar esta reserva</h2>
                                            <p class="mt-2 text-sm leading-6 text-ink-500">
                                                Antes de continuar, confirma que deseas cancelar tu cita. El negocio será notificado y el horario quedará disponible.
                                            </p>
                                        </div>
                                    </div>

                                    <div class="mt-6 rounded-2xl border border-ink-100 bg-ink-50/70 p-4">
                                        <dl class="grid gap-3 text-sm">
                                            <div class="flex items-center justify-between gap-4">
                                                <dt class="text-ink-500">Reserva</dt>
                                                <dd class="text-right font-black text-ink-900">{{ $booking->code }}</dd>
                                            </div>
                                            <div class="flex items-center justify-between gap-4">
                                                <dt class="text-ink-500">Servicio</dt>
                                                <dd class="text-right font-bold text-ink-900">{{ $booking->service?->name ?? 'Sin servicio' }}</dd>
                                            </div>
                                            <div class="flex items-center justify-between gap-4">
                                                <dt class="text-ink-500">Fecha</dt>
                                                <dd class="text-right font-bold text-ink-900">{{ $booking->scheduled_at?->format('d/m/Y H:i') }}</dd>
                                            </div>
                                            <div class="flex items-center justify-between gap-4">
                                                <dt class="text-ink-500">Profesional</dt>
                                                <dd class="text-right font-bold text-ink-900">{{ $booking->employee?->fullName() ?? 'Por asignar' }}</dd>
                                            </div>
                                        </dl>
                                    </div>

                                    <div class="mt-7 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
                                        <button type="button" class="btn btn-md btn-secondary justify-center" x-on:click="$dispatch('close')">
                                            Volver
                                        </button>
                                        <button type="submit" class="btn btn-md btn-danger justify-center">
                                            Sí, cancelar mi reserva
                                        </button>
                                    </div>
                                </div>
                            </x-modal>
                        </form>
                    @else
                        <div class="mt-6 flex justify-end">
                            <a href="{{ $booking->company?->publicUrl() }}" class="inline-flex items-center justify-center rounded-full bg-ink-900 px-5 py-3 text-sm font-black text-white hover:bg-ink-800">
                                Volver a la página del negocio
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </main>
    @livewireScriptConfig
</body>
</html>
