@extends('layouts.panel')

@section('title', 'Recepción - Hostess')

{{-- Usamos el CSS operativo estándar que ya creamos --}}
@push('styles')
    @vite('resources/css/operational.css')
@endpush

@php
    // --- DATOS SIMULADOS (MOCK) ---
    // En un entorno real, esto vendría desde el controlador

    // 1. Reservas
    $reservas = [
        ['id' => 'R-1024', 'cliente' => 'Carlos Mendoza', 'dni' => '45889900', 'tipo' => 'VIP', 'pax' => 4, 'hora' => '20:00', 'estado' => 'checkin', 'zona' => 'Terraza'],
        ['id' => 'R-1025', 'cliente' => 'Ana Paula T.', 'dni' => '70112233', 'tipo' => 'Std', 'pax' => 2, 'hora' => '20:30', 'estado' => 'pendiente', 'zona' => 'Salón'],
        ['id' => 'R-1026', 'cliente' => 'Jorge L. (Cumple)', 'dni' => '10203040', 'tipo' => 'Evento', 'pax' => 10, 'hora' => '21:00', 'estado' => 'pendiente', 'zona' => 'Box 1'],
    ];

    // 2. Lista de Espera
    $espera = [
        ['id' => 'W-01', 'cliente' => 'Familia Ruiz', 'pax' => 5, 'tiempo' => '15 min', 'estado' => 'espera'],
        ['id' => 'W-02', 'cliente' => 'Pareja Barra', 'pax' => 2, 'tiempo' => '5 min', 'estado' => 'espera'],
    ];

    // 3. Zonas y Mesas
    $zonas = [
        'SALÓN PRINCIPAL' => [
            ['id' => 'M-01', 'cap' => 4, 'estado' => 'ocupada', 'tiempo' => '45m'],
            ['id' => 'M-02', 'cap' => 4, 'estado' => 'libre', 'tiempo' => ''],
            ['id' => 'M-03', 'cap' => 6, 'estado' => 'reservada', 'tiempo' => '20:00'],
            ['id' => 'M-04', 'cap' => 2, 'estado' => 'libre', 'tiempo' => ''],
            ['id' => 'M-05', 'cap' => 8, 'estado' => 'ocupada', 'tiempo' => '1h 10m'],
        ],
        'TERRAZA VIP' => [
            ['id' => 'T-01', 'cap' => 4, 'estado' => 'libre', 'tiempo' => ''],
            ['id' => 'T-02', 'cap' => 4, 'estado' => 'libre', 'tiempo' => ''],
            ['id' => 'BOX-1', 'cap' => 10, 'estado' => 'reservada', 'tiempo' => '21:00'],
        ]
    ];

    // Función auxiliar para estilos (traducida a clases Tailwind)
    function getMesaClasses($estado) {
        switch($estado) {
            case 'libre': return 'bg-white border-emerald-200 text-emerald-600 hover:border-[#194B95] hover:shadow-md';
            case 'ocupada': return 'bg-red-50 border-red-100 text-[#E21C21] cursor-not-allowed';
            case 'reservada': return 'bg-blue-50 border-blue-200 text-[#194B95] hover:bg-blue-100';
            default: return 'bg-slate-50 border-slate-200 text-slate-400';
        }
    }
@endphp

@section('content')

    {{-- Header --}}
    <header class="px-6 mb-4 flex flex-col md:flex-row items-start md:items-center justify-between shrink-0 gap-4 pt-6 fade-in">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center border border-slate-200 shadow-sm text-[#194B95]">
                <i data-lucide="book-open-check" class="w-6 h-6"></i>
            </div>
            <div>
                <h1 class="text-2xl font-black text-slate-800 tracking-tight leading-none">RECEPCIÓN</h1>
                <div class="flex gap-4 mt-1 text-xs font-bold text-slate-500">
                    <span class="flex items-center gap-1"><i data-lucide="users" class="w-3 h-3"></i> Total Pax: 42</span>
                    <span class="flex items-center gap-1"><i data-lucide="percent" class="w-3 h-3"></i> Ocupación: <span class="text-[#194B95]">65%</span></span>
                </div>
            </div>
        </div>

        <div class="flex gap-3 w-full md:w-auto">
            <button onclick="abrirModalReserva()" class="flex-1 md:flex-none bg-[#194B95] hover:bg-[#123670] text-white px-5 py-2.5 rounded-xl font-bold text-sm shadow-lg shadow-blue-200 transition-all active:scale-95 flex items-center justify-center gap-2">
                <i data-lucide="plus-circle" class="w-4 h-4"></i> NUEVA RESERVA
            </button>
            <button class="bg-white border border-slate-200 hover:border-[#194B95] text-slate-600 hover:text-[#194B95] px-4 py-2.5 rounded-xl transition-all shadow-sm">
                <i data-lucide="rotate-cw" class="w-5 h-5"></i>
            </button>
        </div>
    </header>

    <div class="flex-1 flex overflow-hidden px-4 md:px-6 gap-6 fade-in" style="animation-delay: 100ms;">
        
        {{-- Sidebar Izquierdo: Listas --}}
        <aside class="w-full md:w-[400px] bg-white border border-slate-200 rounded-2xl flex flex-col z-10 shadow-sm overflow-hidden">
            <div class="p-4 border-b border-slate-100 bg-slate-50/50">
                <div class="relative">
                    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                    <input type="text" id="searchInput" onkeyup="filtrarLista()" placeholder="Buscar por DNI, Nombre o ID..." 
                        class="op-input pl-10 text-sm font-medium">
                </div>
            </div>

            <div class="flex border-b border-slate-100">
                <button onclick="switchTab('reservas')" id="tab-reservas" class="nav-pill active flex-1 py-3 text-xs font-bold uppercase tracking-wide rounded-none border-b-2 border-transparent">
                    Reservas ({{ count($reservas) }})
                </button>
                <button onclick="switchTab('espera')" id="tab-espera" class="nav-pill flex-1 py-3 text-xs font-bold uppercase tracking-wide rounded-none border-b-2 border-transparent text-slate-500">
                    Espera ({{ count($espera) }})
                </button>
            </div>

            <div class="flex-1 overflow-y-auto p-2 space-y-2 custom-scrollbar bg-slate-50">
                
                {{-- Lista Reservas --}}
                <div id="list-reservas" class="space-y-2">
                    @foreach($reservas as $r)
                        @php 
                            $bgBadge = $r['tipo'] == 'VIP' ? 'bg-amber-100 text-amber-700' : 'bg-slate-100 text-slate-600';
                            $claseSelected = ''; // Para lógica JS posterior
                        @endphp
                        <div class="reserva-card bg-white p-3 rounded-xl border border-slate-200 shadow-sm cursor-pointer group hover:bg-slate-50 transition-colors" onclick="seleccionarCliente('{{ $r['cliente'] }}', '{{ $r['id'] }}')">
                            <div class="flex justify-between items-start mb-1">
                                <div class="flex flex-col">
                                    <h3 class="font-bold text-slate-800 text-sm group-hover:text-[#194B95]">{{ $r['cliente'] }}</h3>
                                    <span class="text-[10px] text-slate-400 font-mono">DNI: {{ $r['dni'] }}</span>
                                </div>
                                <span class="font-mono text-xs font-bold text-[#194B95]">{{ $r['hora'] }}</span>
                            </div>
                            <div class="flex justify-between items-center mt-2">
                                <div class="flex gap-2">
                                    <span class="text-[10px] font-bold px-2 py-0.5 rounded {{ $bgBadge }}">{{ $r['tipo'] }}</span>
                                    <span class="text-[10px] font-bold bg-blue-50 text-[#194B95] px-2 py-0.5 rounded flex items-center gap-1"><i data-lucide="users" class="w-3 h-3"></i> {{ $r['pax'] }}</span>
                                </div>
                                @if($r['estado'] == 'checkin')
                                    <span class="flex h-2 w-2 relative">
                                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                                        <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                                    </span>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>

                {{-- Lista Espera --}}
                <div id="list-espera" class="hidden space-y-2">
                    @foreach($espera as $w)
                        <div class="reserva-card bg-white p-3 rounded-xl border border-slate-200 shadow-sm cursor-pointer border-l-4 border-l-orange-400" onclick="seleccionarCliente('{{ $w['cliente'] }}', '{{ $w['id'] }}')">
                            <div class="flex justify-between items-center mb-1">
                                <h3 class="font-bold text-slate-800 text-sm">{{ $w['cliente'] }}</h3>
                                <span class="text-[10px] bg-orange-100 text-orange-700 px-2 py-0.5 rounded font-bold"><i data-lucide="clock" class="w-3 h-3 inline"></i> {{ $w['tiempo'] }}</span>
                            </div>
                            <div class="text-xs text-slate-500 flex gap-2">
                                <span class="font-bold"><i data-lucide="users" class="w-3 h-3 inline"></i> {{ $w['pax'] }} pax</span>
                                <span>• Llegó hace 5 min</span>
                            </div>
                        </div>
                    @endforeach
                </div>

            </div>
        </aside>

        {{-- Panel Derecho: Mapa de Mesas --}}
        <section class="flex-1 bg-white border border-slate-200 rounded-2xl relative flex flex-col min-w-0 shadow-sm overflow-hidden">
            
            {{-- Barra de Acción (Oculta por defecto) --}}
            <div id="action-bar" class="hidden bg-[#194B95] text-white p-3 flex justify-between items-center shadow-md animate-in slide-in-from-top-2">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center font-bold">
                        <i data-lucide="user" class="w-4 h-4"></i>
                    </div>
                    <div>
                        <p class="text-xs opacity-80 uppercase tracking-wide">Asignando mesa para:</p>
                        <p class="font-bold text-sm" id="lbl-cliente-asignar">Nombre Cliente</p>
                    </div>
                </div>
                <button onclick="cancelarSeleccion()" class="text-xs font-bold bg-white/10 hover:bg-white/20 px-3 py-1.5 rounded transition-colors">CANCELAR</button>
            </div>

            <div class="flex-1 overflow-auto p-6 md:p-8 custom-scrollbar bg-[#f8fafc]">
                <div class="max-w-6xl mx-auto space-y-8">
                    @foreach($zonas as $nombre => $mesas_zona)
                        <div>
                            <h3 class="text-sm font-black text-slate-400 uppercase tracking-widest mb-4 border-b border-slate-200 pb-2 flex items-center gap-2">
                                <i data-lucide="layout-grid" class="w-4 h-4"></i> {{ $nombre }}
                            </h3>
                            
                            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                                @foreach($mesas_zona as $m)
                                    @php
                                        $clases = getMesaClasses($m['estado']);
                                        $icon = $m['estado'] == 'reservada' ? 'clock' : ($m['estado'] == 'ocupada' ? 'users' : 'armchair');
                                        $statusColor = $m['estado'] == 'libre' ? 'bg-emerald-500' : ($m['estado'] == 'ocupada' ? 'bg-[#E21C21]' : 'bg-[#194B95]');
                                    @endphp
                                    <div onclick="clickMesa('{{ $m['id'] }}', '{{ $m['estado'] }}')" 
                                         class="relative aspect-square rounded-2xl border-2 p-3 flex flex-col justify-between cursor-pointer group transition-all duration-200 active:scale-95 {{ $clases }}">
                                        
                                        <div class="flex justify-between items-start">
                                            <span class="font-mono font-bold text-sm">{{ $m['id'] }}</span>
                                            <span class="w-2.5 h-2.5 rounded-full {{ $statusColor }} shadow-sm"></span>
                                        </div>

                                        <div class="flex flex-col items-center justify-center flex-1">
                                            <i data-lucide="{{ $icon }}" class="w-8 h-8 opacity-80 mb-1 group-hover:scale-110 transition-transform"></i>
                                            @if($m['tiempo'])
                                                <span class="text-[10px] font-mono font-bold opacity-70">{{ $m['tiempo'] }}</span>
                                            @endif
                                        </div>

                                        <div class="text-center">
                                            <span class="text-[10px] font-bold uppercase tracking-wide bg-white/50 px-2 py-0.5 rounded backdrop-blur-sm">
                                                {{ $m['cap'] }} PAX
                                            </span>
                                        </div>

                                        @if($m['estado'] == 'libre')
                                            <div class="absolute inset-0 bg-[#194B95]/90 rounded-[14px] flex flex-col items-center justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                                                <i data-lucide="check-circle-2" class="w-8 h-8 mb-1"></i>
                                                <span class="text-xs font-black">ASIGNAR</span>
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            
            <div class="p-3 bg-white border-t border-slate-200 flex justify-center gap-6 text-[10px] font-bold text-slate-500 uppercase">
                <span class="flex items-center gap-2"><span class="w-3 h-3 rounded bg-emerald-500"></span> Libre</span>
                <span class="flex items-center gap-2"><span class="w-3 h-3 rounded bg-[#E21C21]"></span> Ocupada</span>
                <span class="flex items-center gap-2"><span class="w-3 h-3 rounded bg-[#194B95]"></span> Reservada</span>
            </div>
        </section>
    </div>

    {{-- MODAL NUEVA RESERVA --}}
    <div id="modal-reserva" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-900/60 backdrop-blur-sm transition-opacity opacity-0">
        <div class="bg-white w-full max-w-lg rounded-2xl shadow-2xl overflow-hidden transform scale-95 transition-transform duration-200" id="modal-content">
            <div class="bg-[#194B95] p-5 flex justify-between items-center">
                <h3 class="text-white font-black text-lg flex items-center gap-2">
                    <i data-lucide="calendar-plus" class="w-5 h-5"></i> NUEVA RESERVA
                </h3>
                <button onclick="cerrarModalReserva()" class="text-white/80 hover:text-white"><i data-lucide="x" class="w-6 h-6"></i></button>
            </div>
            
            <form class="p-6 space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div class="col-span-2 md:col-span-1">
                        <label class="text-xs font-bold text-slate-500 uppercase mb-1 block">DNI / Cédula</label>
                        <div class="relative">
                            <input type="number" class="op-input pl-9 text-sm font-mono" placeholder="00000000">
                            <i data-lucide="credit-card" class="w-4 h-4 text-slate-400 absolute left-3 top-3"></i>
                            <button type="button" class="absolute right-2 top-2 bg-blue-50 text-[#194B95] p-1 rounded hover:bg-blue-100"><i data-lucide="search" class="w-3 h-3"></i></button>
                        </div>
                    </div>
                    <div class="col-span-2 md:col-span-1">
                        <label class="text-xs font-bold text-slate-500 uppercase mb-1 block">Teléfono</label>
                        <div class="relative">
                            <input type="tel" class="op-input pl-9 text-sm" placeholder="999 000 000">
                            <i data-lucide="phone" class="w-4 h-4 text-slate-400 absolute left-3 top-3"></i>
                        </div>
                    </div>
                    <div class="col-span-2">
                        <label class="text-xs font-bold text-slate-500 uppercase mb-1 block">Nombre Completo</label>
                        <div class="relative">
                            <input type="text" class="op-input pl-9 text-sm" placeholder="Ej: Juan Pérez">
                            <i data-lucide="user" class="w-4 h-4 text-slate-400 absolute left-3 top-3"></i>
                        </div>
                    </div>
                </div>

                <div class="h-px bg-slate-100 my-2"></div>

                <div class="grid grid-cols-3 gap-4">
                    <div>
                        <label class="text-xs font-bold text-slate-500 uppercase mb-1 block">Fecha</label>
                        <input type="date" class="op-input p-2 text-sm">
                    </div>
                    <div>
                        <label class="text-xs font-bold text-slate-500 uppercase mb-1 block">Hora</label>
                        <input type="time" class="op-input p-2 text-sm">
                    </div>
                    <div>
                        <label class="text-xs font-bold text-slate-500 uppercase mb-1 block">Personas</label>
                        <div class="flex items-center border border-slate-300 rounded-lg overflow-hidden bg-white">
                            <button type="button" class="px-3 py-2 hover:bg-slate-100 text-slate-600 font-bold">-</button>
                            <input type="text" value="2" class="w-full text-center text-sm font-bold border-none outline-none" readonly>
                            <button type="button" class="px-3 py-2 hover:bg-slate-100 text-slate-600 font-bold">+</button>
                        </div>
                    </div>
                </div>

                <div>
                    <label class="text-xs font-bold text-slate-500 uppercase mb-1 block">Preferencia de Zona</label>
                    <div class="flex gap-2">
                        <label class="cursor-pointer">
                            <input type="radio" name="zona" class="peer sr-only" checked>
                            <div class="px-3 py-1.5 rounded-lg border border-slate-200 text-xs font-bold text-slate-500 peer-checked:bg-[#194B95] peer-checked:text-white peer-checked:border-[#194B95] transition-all">Cualquiera</div>
                        </label>
                        <label class="cursor-pointer">
                            <input type="radio" name="zona" class="peer sr-only">
                            <div class="px-3 py-1.5 rounded-lg border border-slate-200 text-xs font-bold text-slate-500 peer-checked:bg-[#194B95] peer-checked:text-white peer-checked:border-[#194B95] transition-all">Terraza</div>
                        </label>
                        <label class="cursor-pointer">
                            <input type="radio" name="zona" class="peer sr-only">
                            <div class="px-3 py-1.5 rounded-lg border border-slate-200 text-xs font-bold text-slate-500 peer-checked:bg-[#194B95] peer-checked:text-white peer-checked:border-[#194B95] transition-all">VIP</div>
                        </label>
                    </div>
                </div>

                <div class="pt-4 flex gap-3">
                    <button type="button" onclick="cerrarModalReserva()" class="flex-1 border border-slate-300 text-slate-600 font-bold py-3 rounded-xl hover:bg-slate-50 text-sm transition-colors">CANCELAR</button>
                    <button type="button" class="flex-1 bg-[#194B95] hover:bg-[#123670] text-white font-bold py-3 rounded-xl shadow-lg shadow-blue-100 text-sm transition-colors">GUARDAR RESERVA</button>
                </div>
            </form>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    lucide.createIcons();

    let clienteActivo = null;

    function switchTab(tab) {
        document.querySelectorAll('.nav-pill').forEach(b => {
            b.classList.remove('active', 'text-[#194B95]', 'border-[#194B95]');
            b.classList.add('text-slate-500', 'border-transparent');
        });
        
        const btn = document.getElementById('tab-' + tab);
        btn.classList.add('active', 'text-[#194B95]', 'border-[#194B95]');
        btn.classList.remove('text-slate-500', 'border-transparent');
        
        document.getElementById('list-reservas').classList.add('hidden');
        document.getElementById('list-espera').classList.add('hidden');
        
        document.getElementById('list-' + tab).classList.remove('hidden');
    }

    function seleccionarCliente(nombre, id) {
        clienteActivo = { nombre: nombre, id: id };
        
        // Highlight Visual (Quitamos clase selected de todas y agregamos a la actual)
        // Nota: En la versión PHP pura no hay IDs únicos fáciles, así que usamos selectores generales.
        // En una app real, esto se manejaría mejor con IDs.
        
        // Mostrar Barra de Acción
        document.getElementById('lbl-cliente-asignar').innerText = nombre;
        document.getElementById('action-bar').classList.remove('hidden');
        document.getElementById('action-bar').classList.add('flex');
    }

    function cancelarSeleccion() {
        clienteActivo = null;
        document.getElementById('action-bar').classList.add('hidden');
        document.getElementById('action-bar').classList.remove('flex');
    }

    function clickMesa(id, estado) {
        if(!clienteActivo) {
            if(estado === 'ocupada') alert('Mesa ocupada. Ver detalles del consumo...');
            return;
        }

        if(estado !== 'libre') {
            alert('La mesa ' + id + ' no está disponible.');
            return;
        }

        if(confirm(`¿Confirmar asignación de mesa ${id} para ${clienteActivo.nombre}?`)) {
            alert('Mesa asignada con éxito.');
            cancelarSeleccion();
            location.reload(); 
        }
    }

    // --- BÚSQUEDA ---
    function filtrarLista() {
        let input = document.getElementById('searchInput').value.toLowerCase();
        let cards = document.querySelectorAll('.reserva-card');
        
        cards.forEach(card => {
            let texto = card.innerText.toLowerCase();
            card.style.display = texto.includes(input) ? 'block' : 'none';
        });
    }

    // --- MODAL ---
    function abrirModalReserva() {
        const modal = document.getElementById('modal-reserva');
        const content = document.getElementById('modal-content');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        setTimeout(() => {
            modal.classList.remove('opacity-0');
            content.classList.remove('scale-95');
            content.classList.add('scale-100');
        }, 10);
    }

    function cerrarModalReserva() {
        const modal = document.getElementById('modal-reserva');
        const content = document.getElementById('modal-content');
        modal.classList.add('opacity-0');
        content.classList.remove('scale-100');
        content.classList.add('scale-95');
        setTimeout(() => {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }, 200);
    }
</script>
@endpush