@extends('layouts.panel')

@section('title', 'Master Registry - CRM Clientes')

@section('content')

    {{-- Header y Filtros --}}
    <div class="flex flex-col md:flex-row justify-between items-center mb-6 gap-4 bg-white p-4 rounded-2xl border border-slate-200 shadow-sm shrink-0 fade-in">
        <div class="flex items-center gap-4 w-full md:w-auto">
            <div class="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center text-[#194B95] border border-blue-100">
                <i data-lucide="users" class="w-6 h-6"></i>
            </div>
            <div>
                <h1 class="font-black text-[#0f172a] text-lg tracking-tight leading-none">REGISTRO DE PERSONAL</h1>
                <p class="text-xs text-slate-500 font-medium mt-1">Base de Datos de Clientes & Historial</p>
            </div>
        </div>

        <div class="flex flex-1 gap-3 w-full md:max-w-2xl justify-end">
            <div class="relative flex-1">
                <i data-lucide="search" class="absolute left-3 top-2.5 w-4 h-4 text-slate-400"></i>
                <input type="text" id="searchInput" placeholder="Buscar cliente por nombre, DNI o ID..." 
                       class="input-light w-full rounded-xl py-2 pl-10 pr-4 text-sm font-medium shadow-sm">
            </div>
            <select id="filterStatus" class="input-light rounded-xl text-xs font-bold text-slate-600 px-4 cursor-pointer shadow-sm">
                <option value="all">Todos los Estados</option>
                <option value="reservado">Reservados</option>
                <option value="sentado">En Mesa</option>
                <option value="critico">Riesgo Crítico</option>
            </select>
            <button onclick="refreshData()" class="p-2.5 text-slate-400 hover:text-[#194B95] hover:bg-blue-50 rounded-xl transition-colors border border-transparent hover:border-blue-100" title="Actualizar">
                <i data-lucide="refresh-cw" class="w-5 h-5"></i>
            </button>
        </div>
    </div>

    {{-- Contenedor de la Tabla --}}
    <div class="bg-white border border-slate-200 rounded-2xl shadow-sm flex flex-col flex-1 overflow-hidden fade-in" style="animation-delay: 100ms;">
        <div class="flex-1 overflow-auto custom-scrollbar relative">
            <table class="w-full text-left border-collapse master-table">
                <thead>
                    <tr>
                        <th class="w-12 text-center"><i data-lucide="chevron-down" class="w-4 h-4 mx-auto"></i></th> 
                        <th>Cliente / DNI</th>
                        <th class="text-center">Nivel VIP</th>
                        <th class="text-center">Estado Hoy</th>
                        <th class="text-center">Riesgo</th>
                        <th class="text-right">LTV Total</th>
                        <th class="text-center">Visitas</th>
                        <th class="text-center">Mesa</th>
                        <th class="text-right">Acciones</th>
                    </tr>
                </thead>
                <tbody id="tableBody" class="text-sm text-slate-600 bg-white">
                    {{-- El contenido se llena con JS --}}
                </tbody>
            </table>
            
            {{-- Estado Vacío --}}
            <div id="emptyState" class="hidden py-20 flex flex-col items-center justify-center text-slate-400">
                <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mb-4">
                    <i data-lucide="search-x" class="w-8 h-8 opacity-50"></i>
                </div>
                <p class="font-medium">No se encontraron registros</p>
            </div>
        </div>

        <div class="p-4 border-t border-slate-200 bg-slate-50 rounded-b-2xl flex justify-between items-center text-xs text-slate-500 font-medium">
            <span>Mostrando resultados en tiempo real</span>
            <span>Total Registros: <span id="recordCount" class="text-[#194B95] font-bold">0</span></span>
        </div>
    </div>

    {{-- Toast Notification --}}
    <div id="toast" class="fixed bottom-8 right-8 bg-white border border-slate-200 text-slate-800 px-5 py-4 rounded-xl shadow-xl transform translate-y-24 opacity-0 transition-all duration-300 flex items-center gap-4 pointer-events-none">
        <div id="toastIcon" class="p-2 rounded-lg bg-slate-50"></div>
        <div>
            <h4 class="font-bold text-sm" id="toastTitle">Notificación</h4>
            <p class="text-xs text-slate-500" id="toastMsg">Acción realizada con éxito</p>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    // DATOS MOCK (Simulando Base de Datos)
    const clients = [
        {
            id: 'CLI-1001', nombre: 'Valentina Romanov', dni: '45889900', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=200',
            nivel: 'WHALE', ltv: 45200.00, visitas: 14, estado: 'reservado', riesgo: 'bajo', mesa: 'BOX-KING',
            notas: 'VIP Top. Requiere escolta al baño. No pedir DNI en puerta.',
            historial: [
                { fecha: '15/01/26', item: 'Dom Perignon x2', total: 3200 },
                { fecha: '31/12/25', item: 'New Year Pack', total: 4500 }
            ]
        },
        {
            id: 'CLI-1002', nombre: 'Roberto "El Toro"', dni: '09922112', avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=200',
            nivel: 'BANNED', ltv: 120.00, visitas: 2, estado: 'sin_reserva', riesgo: 'critico', mesa: '---',
            notas: 'VETADO PERMANENTE. Agresión a seguridad (Dic 2025).',
            historial: [
                { fecha: '20/12/25', item: 'Multa Daños', total: 120 }
            ]
        },
        {
            id: 'CLI-1003', nombre: 'Grupo Tech Corp', dni: 'RUC-2020', avatar: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=200',
            nivel: 'PLATINUM', ltv: 18500.00, visitas: 6, estado: 'sentado', riesgo: 'bajo', mesa: 'TER-01',
            notas: 'Suelen pedir factura al inicio. Trato corporativo.',
            historial: [
                { fecha: '16/01/26', item: 'Blue Label (Curso)', total: 1800 },
                { fecha: '10/01/26', item: 'After Office', total: 650 }
            ]
        },
        {
            id: 'CLI-1004', nombre: 'Carla & Amigas', dni: '77221133', avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=200',
            nivel: 'GOLD', ltv: 5400.00, visitas: 8, estado: 'checkin', riesgo: 'medio', mesa: 'BOX-02',
            notas: 'Grupo ruidoso pero gastan bien. Controlar shots.',
            historial: [
                { fecha: '05/01/26', item: 'Gin Party', total: 900 }
            ]
        }
    ];

    document.addEventListener("DOMContentLoaded", () => {
        renderTable(clients);
        
        // Listeners
        document.getElementById('searchInput').addEventListener('input', applyFilters);
        document.getElementById('filterStatus').addEventListener('change', applyFilters);
    });

    const tableBody = document.getElementById('tableBody');
    const emptyState = document.getElementById('emptyState');
    const recordCount = document.getElementById('recordCount');

    function renderTable(data) {
        tableBody.innerHTML = '';
        recordCount.innerText = data.length;

        if (data.length === 0) {
            emptyState.classList.remove('hidden');
            return;
        } else {
            emptyState.classList.add('hidden');
        }

        data.forEach((c) => {
            // Badges
            let nivelBadge = '';
            if(c.nivel === 'WHALE') nivelBadge = '<span class="px-2 py-0.5 bg-fuchsia-50 text-fuchsia-600 border border-fuchsia-100 rounded text-[10px] font-black tracking-wider shadow-sm">WHALE</span>';
            else if(c.nivel === 'BANNED') nivelBadge = '<span class="px-2 py-0.5 bg-red-50 border border-red-100 text-[#E21C21] rounded text-[10px] font-black tracking-wider shadow-sm">BANNED</span>';
            else nivelBadge = `<span class="px-2 py-0.5 bg-slate-100 text-slate-600 border border-slate-200 rounded text-[10px] font-bold tracking-wider">${c.nivel}</span>`;

            let statusBadge = '';
            if(c.estado === 'reservado') statusBadge = '<span class="bg-amber-50 text-amber-600 border border-amber-100 px-2 py-0.5 rounded text-[10px] font-bold flex items-center justify-center gap-1 w-fit mx-auto"><span class="w-1.5 h-1.5 bg-amber-500 rounded-full"></span> Reservado</span>';
            else if(c.estado === 'sentado') statusBadge = '<span class="bg-emerald-50 text-emerald-600 border border-emerald-100 px-2 py-0.5 rounded text-[10px] font-bold flex items-center justify-center gap-1 w-fit mx-auto"><span class="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse"></span> En Mesa</span>';
            else statusBadge = '<span class="text-slate-400 font-medium text-[10px]">Sin Reserva</span>';

            let riskIcon = c.riesgo === 'critico' 
                ? '<div class="flex items-center justify-center text-[#E21C21] gap-1 font-bold bg-red-50 px-2 py-0.5 rounded border border-red-100 w-fit mx-auto"><i data-lucide="skull" class="w-3 h-3"></i> ALTO</div>'
                : '<div class="flex items-center justify-center text-emerald-600 gap-1 font-bold"><i data-lucide="shield-check" class="w-4 h-4"></i> OK</div>';

            // ROW
            const row = document.createElement('tr');
            row.className = "row-hover group cursor-pointer transition-colors border-b border-slate-100";
            row.onclick = () => toggleRow(c.id);

            row.innerHTML = `
                <td class="text-center text-slate-400"><i data-lucide="chevron-right" class="w-4 h-4 transition-transform duration-200 mx-auto" id="icon-${c.id}"></i></td>
                <td>
                    <div class="flex items-center gap-4">
                        <div class="w-10 h-10 rounded-full bg-slate-100 border border-slate-200 p-0.5 flex-shrink-0">
                            <img src="${c.avatar}" class="w-full h-full rounded-full object-cover">
                        </div>
                        <div>
                            <p class="font-bold text-[#0f172a] text-sm leading-tight group-hover:text-[#194B95] transition-colors">${c.nombre}</p>
                            <p class="text-[11px] text-slate-500 font-mono tracking-wide mt-0.5">${c.id} • ${c.dni}</p>
                        </div>
                    </div>
                </td>
                <td class="text-center">${nivelBadge}</td>
                <td class="text-center">${statusBadge}</td>
                <td class="text-center text-xs">${riskIcon}</td>
                <td class="text-right font-mono font-bold text-slate-700">S/ ${c.ltv.toLocaleString()}</td>
                <td class="text-center font-bold text-slate-500"><span class="bg-slate-50 px-2 py-1 rounded border border-slate-100">${c.visitas}</span></td>
                <td class="text-center font-black text-[#194B95] text-sm">${c.mesa}</td>
                <td class="text-right">
                    <div class="flex justify-end gap-2" onclick="event.stopPropagation()">
                        <button onclick="triggerAction('${c.nombre}', 'SMS')" class="p-2 bg-white border border-slate-200 hover:border-[#194B95] hover:text-[#194B95] rounded-lg text-slate-400 transition-colors shadow-sm" title="SMS"><i data-lucide="message-square" class="w-4 h-4"></i></button>
                        <button onclick="triggerAction('${c.nombre}', 'CheckIn')" class="p-2 bg-[#194B95] hover:bg-[#123670] rounded-lg text-white transition-colors font-bold shadow-md shadow-blue-100" title="Check-in"><i data-lucide="check" class="w-4 h-4"></i></button>
                    </div>
                </td>
            `;

            // DETAIL ROW
            const detailRow = document.createElement('tr');
            detailRow.id = `detail-${c.id}`;
            detailRow.className = "hidden bg-slate-50/50 border-b border-slate-100";
            
            let historyHTML = c.historial.map(h => `
                <div class="flex justify-between items-center py-2 border-b border-slate-200 last:border-0 hover:bg-white px-2 rounded transition-colors">
                    <span class="text-xs text-slate-500 font-mono">${h.fecha}</span>
                    <span class="text-xs text-slate-700 font-bold">${h.item}</span>
                    <span class="text-xs font-mono text-emerald-600 font-bold">S/ ${h.total}</span>
                </div>
            `).join('');

            detailRow.innerHTML = `
                <td colspan="9" class="p-0">
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-8 shadow-inner">
                        <div>
                            <h5 class="text-xs font-bold text-[#194B95] uppercase tracking-widest mb-3 flex items-center gap-2">
                                <i data-lucide="file-text" class="w-3 h-3"></i> Notas de Staff & Seguridad
                            </h5>
                            <div class="p-4 bg-white border border-amber-100 rounded-xl shadow-sm relative overflow-hidden">
                                <div class="absolute left-0 top-0 bottom-0 w-1 bg-amber-400"></div>
                                <p class="text-sm text-slate-600 italic leading-relaxed">"${c.notas}"</p>
                            </div>
                            <div class="mt-4 flex gap-3">
                                <button class="px-4 py-2 bg-white border border-red-200 text-red-500 rounded-lg text-xs font-bold hover:bg-red-50 transition-colors shadow-sm">REPORTAR INCIDENTE</button>
                                <button class="px-4 py-2 bg-white border border-slate-200 text-slate-600 rounded-lg text-xs font-bold hover:border-[#194B95] hover:text-[#194B95] transition-colors shadow-sm">EDITAR PERFIL</button>
                            </div>
                        </div>

                        <div>
                            <h5 class="text-xs font-bold text-[#194B95] uppercase tracking-widest mb-3 flex items-center gap-2">
                                <i data-lucide="history" class="w-3 h-3"></i> Últimos Movimientos
                            </h5>
                            <div class="bg-white border border-slate-200 rounded-xl px-4 py-2 shadow-sm">
                                ${historyHTML}
                            </div>
                            <div class="mt-2 text-right">
                                <a href="#" class="text-[10px] text-[#194B95] font-bold hover:underline">Ver historial completo</a>
                            </div>
                        </div>
                    </div>
                </td>
            `;

            tableBody.appendChild(row);
            tableBody.appendChild(detailRow);
        });
        lucide.createIcons();
    }

    function toggleRow(id) {
        const detailRow = document.getElementById(`detail-${id}`);
        const icon = document.getElementById(`icon-${id}`);
        const row = icon.closest('tr');

        if (detailRow.classList.contains('hidden')) {
            detailRow.classList.remove('hidden');
            const contentDiv = detailRow.querySelector('div');
            contentDiv.classList.add('expand-enter');
            icon.classList.add('rotate-90');
            row.classList.add('bg-blue-50');
        } else {
            detailRow.classList.add('hidden');
            icon.classList.remove('rotate-90');
            row.classList.remove('bg-blue-50');
        }
    }

    function applyFilters() {
        const term = document.getElementById('searchInput').value.toLowerCase();
        const status = document.getElementById('filterStatus').value;

        const filtered = clients.filter(c => {
            const matchesSearch = c.nombre.toLowerCase().includes(term) || c.dni.includes(term) || c.id.toLowerCase().includes(term);
            const matchesStatus = status === 'all' ? true : (status === 'critico' ? c.riesgo === 'critico' : c.estado === status);
            return matchesSearch && matchesStatus;
        });

        renderTable(filtered);
    }

    function triggerAction(name, action) {
        const toast = document.getElementById('toast');
        const icon = document.getElementById('toastIcon');
        const title = document.getElementById('toastTitle');
        const msg = document.getElementById('toastMsg');

        toast.classList.remove('translate-y-24', 'opacity-0');
        
        if(action === 'SMS') {
            icon.innerHTML = '<i data-lucide="message-square" class="w-5 h-5 text-[#194B95]"></i>';
            icon.className = "p-2 rounded-lg bg-blue-50";
            title.innerText = "SMS Enviado";
            msg.innerText = `Mensaje de bienvenida enviado a ${name}`;
        } else {
            icon.innerHTML = '<i data-lucide="check-circle" class="w-5 h-5 text-emerald-600"></i>';
            icon.className = "p-2 rounded-lg bg-emerald-50";
            title.innerText = "Check-in Exitoso";
            msg.innerText = `${name} marcado como 'En Mesa'`;
        }

        lucide.createIcons();
        setTimeout(() => { toast.classList.add('translate-y-24', 'opacity-0'); }, 3000);
    }

    function refreshData() {
        const btn = document.querySelector('[title="Actualizar"] i');
        btn.classList.add('animate-spin');
        setTimeout(() => btn.classList.remove('animate-spin'), 1000);
    }
</script>
@endpush