<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cancelar reserva — 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-xl">
            <div class="mb-6 text-center">
                <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-indigo-600 text-xl font-black text-white">R</div>
                <h1 class="text-3xl font-black text-gray-950">Cancelar reserva</h1>
                <p class="mt-2 text-sm text-gray-500">Ingresa el código de tu reserva y el celular registrado para continuar.</p>
            </div>

            <div class="overflow-hidden rounded-3xl border border-gray-100 bg-white shadow-xl">
                <div class="border-b border-gray-100 bg-gradient-to-br from-indigo-600 to-cyan-500 p-6">
                    <p class="text-sm font-bold uppercase tracking-wide text-white/80">AsignaPro</p>
                    <h2 class="mt-1 text-2xl font-black text-white">Busca tu cita</h2>
                </div>

                <form method="POST" action="{{ route('public.bookings.cancel.lookup.submit') }}" class="space-y-5 p-6 md:p-8">
                    @csrf

                    @if (session('error'))
                        <div class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
                            {{ session('error') }}
                        </div>
                    @endif

                    <label class="block">
                        <span class="text-sm font-semibold text-gray-700">Código de reserva *</span>
                        <input name="code" value="{{ old('code') }}" required autofocus class="mt-1.5 w-full rounded-xl border-gray-300 text-sm uppercase tracking-wide focus:border-indigo-500 focus:ring-indigo-500" placeholder="BK-202604-000002">
                        @error('code') <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
                    </label>

                    <label class="block">
                        <span class="text-sm font-semibold text-gray-700">Celular registrado *</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="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
                    </label>

                    <button type="submit" class="inline-flex w-full items-center justify-center rounded-full bg-ink-900 px-5 py-3 text-sm font-black text-white hover:bg-ink-800">
                        Continuar con cancelación
                    </button>

                    <p class="text-center text-xs text-gray-400">
                        Si no tienes el código, revisa el correo de confirmación o comunícate con el negocio.
                    </p>
                </form>
            </div>
        </div>
    </main>
    @livewireScriptConfig
</body>
</html>
