@extends('layouts.client')

@section('title', 'Reserva tu Experiencia')

@section('client_content')

<div class="reservation-wrapper">
    
    {{-- Botón Volver Flotante --}}
    <a href="{{ route('client.menu') }}" class="fixed top-6 left-6 z-50 flex items-center justify-center w-12 h-12 bg-white/90 backdrop-blur-md rounded-full text-slate-600 hover:text-brand-blue shadow-lg border border-white/50 transition-all group hover:scale-110">
        <i data-lucide="arrow-left" class="w-6 h-6 group-hover:-translate-x-1 transition-transform"></i>
    </a>

    <div class="glass-card fade-in">
        
        <div class="text-center mb-10">
            <h1 class="font-serif text-4xl font-black text-slate-900 mb-2">Reserva tu Mesa</h1>
            <div class="flex items-center justify-center gap-2 text-sm font-bold text-brand-blue uppercase tracking-widest">
                <span class="w-8 h-[2px] bg-brand-blue"></span>
                Club Campestre Premium
                <span class="w-8 h-[2px] bg-brand-blue"></span>
            </div>
        </div>
        
        {{-- Indicador de Pasos --}}
        <div class="steps-container">
            <div class="steps-track-bg"></div>
            <div class="steps-track-fill" id="stepsProgress"></div>
            
            <div class="step active" id="stepIndicator1">
                <div class="step-circle"><i data-lucide="calendar" class="w-5 h-5"></i></div>
                <p>Fecha</p>
            </div>
            <div class="step" id="stepIndicator2">
                <div class="step-circle"><i data-lucide="map-pin" class="w-5 h-5"></i></div>
                <p>Zona</p>
            </div>
            <div class="step" id="stepIndicator3">
                <div class="step-circle"><i data-lucide="user" class="w-5 h-5"></i></div>
                <p>Datos</p>
            </div>
            <div class="step" id="stepIndicator4">
                <div class="step-circle"><i data-lucide="check" class="w-5 h-5"></i></div>
                <p>Fin</p>
            </div>
        </div>

        <form id="bookingForm" class="mt-10">
            
            {{-- === PASO 1: FECHA Y OCASIÓN === --}}
            <div class="form-step active" id="step1">
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="input-group">
                        <label><i data-lucide="calendar-days" class="w-4 h-4 text-brand-blue"></i> ¿Cuándo nos visitas?</label>
                        <div class="input-wrapper">
                            <input type="date" id="fechaReserva" required class="cursor-pointer">
                        </div>
                    </div>
                    <div class="input-group">
                        <label><i data-lucide="clock" class="w-4 h-4 text-brand-blue"></i> Hora de llegada</label>
                        <div class="input-wrapper relative">
                            <select id="horaReserva" class="cursor-pointer appearance-none">
                                <option value="">Selecciona una hora</option>
                                <option value="12:00">12:00 PM - Almuerzo</option>
                                <option value="13:00">01:00 PM - Almuerzo</option>
                                <option value="14:00">02:00 PM - Almuerzo</option>
                                <option value="15:00">03:00 PM - Tarde</option>
                                <option value="19:00">07:00 PM - Cena</option>
                                <option value="20:00">08:00 PM - Cena</option>
                                <option value="21:00">09:00 PM - Cena</option>
                            </select>
                            <i data-lucide="chevron-down" class="input-icon absolute right-4 pointer-events-none" style="left: auto; right: 1rem;"></i>
                        </div>
                    </div>
                </div>
                
                <div class="input-group mt-6 mb-10">
                    <label><i data-lucide="party-popper" class="w-4 h-4 text-brand-blue"></i> Tipo de Ocasión</label>
                    <div class="input-wrapper relative">
                        <select id="tipoEvento" class="cursor-pointer appearance-none">
                            <option value="normal">Almuerzo / Cena Casual</option>
                            <option value="romantica">Cita Romántica / Aniversario</option>
                            <option value="cumple">Celebración de Cumpleaños</option>
                            <option value="negocios">Reunión de Negocios</option>
                        </select>
                        <i data-lucide="utensils" class="input-icon"></i>
                        <i data-lucide="chevron-down" class="input-icon absolute right-4 pointer-events-none" style="left: auto; right: 1rem;"></i>
                    </div>
                </div>

                <div class="flex justify-end">
                    <button type="button" class="btn-res btn-next w-full md:w-auto" onclick="nextStep(2)">
                        Continuar a Zonas <i data-lucide="arrow-right" class="w-5 h-5"></i>
                    </button>
                </div>
            </div>

            {{-- === PASO 2: SELECCIÓN VISUAL DE ZONAS === --}}
            <div class="form-step hidden" id="step2">
                <h3 class="text-lg font-bold text-slate-800 mb-6 flex items-center gap-2">
                    <i data-lucide="map" class="w-5 h-5 text-brand-blue"></i> Elige tu ambiente ideal:
                </h3>
                
                <div class="mesas-grid">
                    {{-- Opción 1 --}}
                    <div class="mesa-option" onclick="selectMesa(this, 'Terraza Panorámica', 0)">
                        <div class="mesa-img-wrapper">
                            <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=600&auto=format&fit=crop" alt="Terraza">
                            <div class="mesa-overlay"></div>
                            <div class="mesa-check"><i data-lucide="check" class="w-4 h-4"></i></div>
                        </div>
                        <div class="mesa-info">
                            <h4>Terraza Panorámica</h4>
                            <span>Aire libre y vista al valle</span>
                            <span class="price">Incluido</span>
                        </div>
                    </div>
                    
                    {{-- Opción 2 --}}
                    <div class="mesa-option" onclick="selectMesa(this, 'Salón Principal', 0)">
                        <div class="mesa-img-wrapper">
                            <img src="https://images.unsplash.com/photo-1552566626-52f8b828add9?q=80&w=600&auto=format&fit=crop" alt="Salón">
                            <div class="mesa-overlay"></div>
                            <div class="mesa-check"><i data-lucide="check" class="w-4 h-4"></i></div>
                        </div>
                        <div class="mesa-info">
                            <h4>Salón Principal</h4>
                            <span>Ambiente cálido interior</span>
                            <span class="price">Incluido</span>
                        </div>
                    </div>
                    
                    {{-- Opción 3 --}}
                    <div class="mesa-option" onclick="selectMesa(this, 'Jardín Campestre', 50)">
                        <div class="mesa-img-wrapper">
                            <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?q=80&w=600&auto=format&fit=crop" alt="Jardín">
                            <div class="mesa-overlay"></div>
                            <div class="mesa-check"><i data-lucide="check" class="w-4 h-4"></i></div>
                            <div class="absolute top-3 left-3 bg-green-500 text-white text-[10px] font-bold px-2 py-1 rounded-full uppercase">Popular</div>
                        </div>
                        <div class="mesa-info">
                            <h4>Jardín Campestre</h4>
                            <span>Rodeado de naturaleza</span>
                            <span class="price">+ S/ 50.00 (Reserva)</span>
                        </div>
                    </div>
                    
                    {{-- Opción 4 --}}
                    <div class="mesa-option" onclick="selectMesa(this, 'Box VIP Privado', 150)">
                        <div class="mesa-img-wrapper">
                            <img src="https://images.unsplash.com/photo-1594148555317-82174538d015?q=80&w=600&auto=format&fit=crop" alt="VIP">
                            <div class="mesa-overlay"></div>
                            <div class="mesa-check"><i data-lucide="check" class="w-4 h-4"></i></div>
                            <div class="absolute top-3 left-3 bg-brand-gold text-white text-[10px] font-bold px-2 py-1 rounded-full uppercase flex items-center gap-1">
                                <i data-lucide="crown" class="w-3 h-3"></i> Exclusivo
                            </div>
                        </div>
                        <div class="mesa-info">
                            <h4>Box VIP Privado</h4>
                            <span>Máxima privacidad y servicio</span>
                            <span class="price">+ S/ 150.00 (Reserva)</span>
                        </div>
                    </div>
                </div>
                <input type="hidden" id="mesaSeleccionada">
                
                <div class="flex justify-between mt-10 gap-4">
                    <button type="button" class="btn-res btn-prev" onclick="prevStep(1)">Atrás</button>
                    <button type="button" class="btn-res btn-next flex-1" onclick="nextStep(3)">
                        Ingresar Datos <i data-lucide="arrow-right" class="w-5 h-5"></i>
                    </button>
                </div>
            </div>

            {{-- === PASO 3: DATOS DEL CLIENTE === --}}
            <div class="form-step hidden" id="step3">
                <div class="grid md:grid-cols-2 gap-6 mb-6">
                    <div class="input-group">
                        <label><i data-lucide="user-circle" class="w-4 h-4 text-brand-blue"></i> Nombre de la Reserva</label>
                        <div class="input-wrapper relative">
                            <input type="text" placeholder="Ej: Familia Pérez o Juan D." id="nombreCliente" autocomplete="name">
                            <i data-lucide="user" class="input-icon"></i>
                        </div>
                    </div>
                    <div class="input-group">
                        <label><i data-lucide="smartphone" class="w-4 h-4 text-brand-blue"></i> Teléfono / WhatsApp</label>
                        <div class="input-wrapper relative">
                            <input type="tel" placeholder="999 999 999" id="telefonoCliente" autocomplete="tel">
                            <i data-lucide="phone" class="input-icon"></i>
                        </div>
                    </div>
                </div>

                <div class="input-group mb-6">
                    <label><i data-lucide="users" class="w-4 h-4 text-brand-blue"></i> Número de Personas</label>
                    <div class="input-wrapper relative">
                        <select id="numPersonas" class="cursor-pointer appearance-none">
                            @for($i = 2; $i <= 12; $i++)
                                <option value="{{ $i }}">{{ $i }} Personas</option>
                            @endfor
                            <option value="more">+12 (Coordinar por interno)</option>
                        </select>
                        <i data-lucide="users" class="input-icon"></i>
                        <i data-lucide="chevron-down" class="input-icon absolute right-4 pointer-events-none" style="left: auto; right: 1rem;"></i>
                    </div>
                </div>
                
                <div class="input-group mb-10">
                    <label><i data-lucide="message-square-plus" class="w-4 h-4 text-brand-blue"></i> Notas Adicionales (Opcional)</label>
                    <div class="input-wrapper relative">
                        <textarea placeholder="¿Alguna alergia, requerimiento especial o celebración? Cuéntanos..." rows="3"></textarea>
                        <i data-lucide="file-text" class="input-icon icon-textarea"></i>
                    </div>
                </div>
                
                <div class="flex justify-between mt-6 gap-4">
                    <button type="button" class="btn-res btn-prev" onclick="prevStep(2)">Atrás</button>
                    <button type="button" class="btn-res btn-next flex-1" onclick="nextStep(4)">
                        Revisar y Confirmar <i data-lucide="clipboard-check" class="w-5 h-5"></i>
                    </button>
                </div>
            </div>

            {{-- === PASO 4: CONFIRMACIÓN Y TICKET === --}}
            <div class="form-step hidden" id="step4">
                
                {{-- Ticket Resumen --}}
                <div class="ticket-summary">
                    <div class="ticket-header">
                        <h3 class="font-bold text-slate-800 uppercase text-sm tracking-wider flex items-center gap-2">
                            <i data-lucide="receipt" class="w-5 h-5 text-brand-blue"></i> Resumen de Reserva
                        </h3>
                        <span class="bg-blue-100 text-brand-blue text-xs font-black px-3 py-1 rounded-full uppercase">Borrador</span>
                    </div>
                    <div class="ticket-body">
                        <div class="ticket-row">
                            <span class="font-medium"><i data-lucide="calendar" class="w-4 h-4 inline mr-2 opacity-70"></i>Fecha:</span> 
                            <span id="resFecha" class="text-slate-900 font-bold"></span>
                        </div>
                        <div class="ticket-row">
                             <span class="font-medium"><i data-lucide="clock" class="w-4 h-4 inline mr-2 opacity-70"></i>Hora:</span> 
                             <span id="resHora" class="text-slate-900 font-bold"></span>
                        </div>
                        <div class="ticket-row">
                            <span class="font-medium"><i data-lucide="map-pin" class="w-4 h-4 inline mr-2 opacity-70"></i>Zona:</span> 
                            <span id="resZona" class="text-brand-blue font-black font-serif text-lg"></span>
                        </div>
                         <div class="ticket-row">
                            <span class="font-medium"><i data-lucide="users" class="w-4 h-4 inline mr-2 opacity-70"></i>Personas:</span> 
                            <span id="resPersonas" class="text-slate-900 font-bold"></span>
                        </div>
                        
                        <div class="ticket-row total">
                            <span>Costo de Reserva:</span> 
                            <span id="resTotal" class="text-brand-blue text-2xl"></span>
                        </div>
                        <p class="text-xs text-slate-500 mt-2 text-right">*El consumo se paga en el local.</p>
                    </div>
                </div>

                <div class="flex gap-4 items-start mb-8 p-5 bg-white/50 backdrop-blur-md rounded-2xl border border-slate-200 shadow-sm">
                    <div class="shrink-0 pt-1">
                         <input type="checkbox" id="terms" class="w-5 h-5 accent-brand-blue cursor-pointer rounded border-slate-300">
                    </div>
                    <label for="terms" class="cursor-pointer text-slate-600 text-sm font-medium leading-relaxed">
                        Acepto las <a href="#" class="text-brand-blue underline font-bold">políticas de reserva</a>. Entiendo que la tolerancia de espera es de 15 minutos.
                    </label>
                </div>

                <div class="flex justify-between gap-4">
                    <button type="button" class="btn-res btn-prev" onclick="prevStep(3)">Atrás</button>
                    <button type="submit" class="btn-res btn-next flex-1 text-white animate-pulse hover:animate-none">
                        ¡Confirmar Reserva Ahora! <i data-lucide="check-circle-2" class="w-6 h-6"></i>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- MODAL ÉXITO --}}
<div id="modalConfirm" class="modal-overlay">
    <div class="modal-content relative overflow-hidden">
        {{-- Confeti --}}
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
            <div class="absolute top-[-20%] left-[10%] w-10 h-10 bg-brand-blue/20 rounded-full blur-xl animate-pulse"></div>
             <div class="absolute bottom-[-20%] right-[10%] w-16 h-16 bg-brand-red/20 rounded-full blur-xl animate-pulse delay-300"></div>
        </div>
        
        <div class="relative z-10">
            <div class="w-24 h-24 bg-gradient-to-tr from-green-400 to-emerald-600 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg shadow-green-500/30">
                <i data-lucide="check" class="w-12 h-12 text-white"></i>
            </div>
            <h3 class="font-serif text-3xl font-black text-slate-900 mb-3 leading-tight">¡Reserva Exitosa!</h3>
            <p class="text-slate-600 text-lg mb-8 leading-relaxed">
                Tu mesa está reservada. ¡Prepárate para una experiencia inolvidable!
            </p>
            
            <button onclick="finalizarReserva()" class="w-full py-4 bg-brand-dark text-white rounded-2xl font-bold text-sm uppercase tracking-widest hover:bg-brand-blue transition-all shadow-xl transform hover:scale-[1.02]">
                Ver Detalles en Mis Reservas
            </button>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    lucide.createIcons();
    let currentStep = 1;
    let selectedMesaData = { name: '', price: 0 };
    const totalSteps = 4;
    
    // Configurar fecha mínima (Hoy)
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('fechaReserva').setAttribute('min', today);

    function updateProgress(step) {
        // Barra
        const progress = ((step - 1) / (totalSteps - 1)) * 100;
        document.getElementById('stepsProgress').style.width = `${progress}%`;

        // Círculos
        document.querySelectorAll('.step').forEach((el, index) => {
            el.classList.remove('active', 'completed');
            if(index + 1 < step) {
                el.classList.add('completed');
                el.querySelector('.step-circle').innerHTML = '<i data-lucide="check" class="w-5 h-5"></i>';
            } else if(index + 1 === step) {
                el.classList.add('active');
                 // Icono original activo
                 const icons = ['calendar', 'map-pin', 'user', 'check'];
                 el.querySelector('.step-circle').innerHTML = `<i data-lucide="${icons[index]}" class="w-5 h-5"></i>`;
            } else {
                 // Icono original inactivo
                 const icons = ['calendar', 'map-pin', 'user', 'check'];
                 el.querySelector('.step-circle').innerHTML = `<i data-lucide="${icons[index]}" class="w-5 h-5"></i>`;
            }
        });
        lucide.createIcons();
    }

    function nextStep(step) {
        let valid = true;
        const inputs = document.querySelectorAll(`#step${currentStep} input[required], #step${currentStep} select[required]`);
        
        inputs.forEach(input => {
            if (!input.value) {
                input.parentElement.style.borderColor = 'var(--brand-red)';
                valid = false;
            } else {
                input.parentElement.style.borderColor = '';
            }
        });

        if(step === 2 && !document.getElementById('fechaReserva').value) valid = false;
        if(step === 3 && !selectedMesaData.name) { 
            alert("Por favor selecciona una zona para continuar."); valid = false; 
        }
        if(step === 4 && (!document.getElementById('nombreCliente').value || !document.getElementById('telefonoCliente').value)) {
             valid = false;
             if(!document.getElementById('nombreCliente').value) document.getElementById('nombreCliente').parentElement.style.borderColor = 'var(--brand-red)';
             if(!document.getElementById('telefonoCliente').value) document.getElementById('telefonoCliente').parentElement.style.borderColor = 'var(--brand-red)';
        }

        if(valid) {
            if(step === 4) updateResumen();
            showStep(step);
        }
    }

    function prevStep(step) { showStep(step); }

    function showStep(step) {
        document.querySelectorAll('.form-step').forEach(el => {
            el.classList.remove('active');
            setTimeout(() => el.classList.add('hidden'), 200);
        });
        
        setTimeout(() => {
            const target = document.getElementById(`step${step}`);
            target.classList.remove('hidden');
            setTimeout(() => target.classList.add('active'), 10);
        }, 200);
        
        currentStep = step;
        updateProgress(step);
    }

    function selectMesa(el, name, price) {
        document.querySelectorAll('.mesa-option').forEach(e => e.classList.remove('selected'));
        el.classList.add('selected');
        selectedMesaData = { name, price };
        document.getElementById('mesaSeleccionada').value = name;
        // Scroll suave
        document.querySelector('#step2 .btn-next').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    function updateResumen() {
        const fecha = new Date(document.getElementById('fechaReserva').value);
        const opcionesFecha = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        
        document.getElementById('resFecha').innerText = fecha.toLocaleDateString('es-ES', opcionesFecha);
        document.getElementById('resHora').innerText = document.getElementById('horaReserva').value || 'Por definir';
        document.getElementById('resZona').innerText = selectedMesaData.name;
        document.getElementById('resPersonas').innerText = document.getElementById('numPersonas').value + ' Personas';
        document.getElementById('resTotal').innerText = (selectedMesaData.price === 0) ? 'Gratis' : `S/ ${selectedMesaData.price.toFixed(2)}`;
    }

    document.getElementById('bookingForm').addEventListener('submit', (e) => {
        e.preventDefault();
        if(!document.getElementById('terms').checked) { 
            alert("Debes aceptar las políticas de reserva."); 
            return; 
        }
        
        // Simulación
        const btn = e.target.querySelector('button[type="submit"]');
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<i data-lucide="loader-2" class="w-6 h-6 animate-spin"></i> Procesando...';
        lucide.createIcons();

        setTimeout(() => {
            document.getElementById('modalConfirm').classList.add('open');
            btn.innerHTML = originalText;
            btn.disabled = false;
        }, 2000);
    });

    function finalizarReserva() {
        window.location.href = "{{ route('client.orders') }}";
    }
    
    updateProgress(1);
</script>
@endpush