@extends('layouts.panel')

@section('title', 'Dashboard Gerencial - Operaciones en Vivo')

@section('content')

    {{-- Header del Turno --}}
    <div class="flex flex-col md:flex-row justify-between items-end border-b border-slate-200 pb-4 mb-6 gap-4 fade-in">
        <div>
            <div class="flex items-center gap-3 mb-1">
                <span class="inline-flex h-2.5 w-2.5 rounded-full bg-emerald-500 animate-pulse"></span>
                <p class="text-[#194B95] font-bold text-xs tracking-widest uppercase">Operación en Vivo</p>
            </div>
            <h1 class="text-3xl font-extrabold text-[#0f172a] tracking-tight">Tablero de Mando</h1>
        </div>
        <div class="text-right">
            <p class="text-[#0f172a] font-bold text-xl font-mono" id="reloj">00:00:00</p>
            <p class="text-slate-500 text-sm font-medium uppercase" id="fecha">---</p>
        </div>
    </div>
    
    {{-- KPIs Grid --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-6">
        
        {{-- Venta Neta --}}
        <div class="card-pro p-5 kpi-blue fade-in" style="animation-delay: 0ms;">
            <div class="flex justify-between items-start mb-3">
                <div class="p-2.5 bg-blue-50 rounded-xl text-[#194B95]"><i data-lucide="banknote" class="w-6 h-6"></i></div>
                <span id="kpiTrend" class="bg-emerald-50 text-emerald-700 text-xs font-bold px-2 py-1 rounded border border-emerald-100"><span id="kpiTrendText">+0%</span></span>
            </div>
            <p class="text-slate-500 text-xs font-bold uppercase tracking-wider">Venta Neta (Año Actual)</p>
            <h3 class="text-3xl font-black text-[#0f172a] mt-1" id="kpiVentaNeta">S/ 0.00</h3>
            <div class="w-full bg-slate-100 h-1.5 rounded-full mt-3 overflow-hidden">
                <div class="bg-[#194B95] h-full" style="width: 75%"></div>
            </div>
            <p class="text-[10px] text-slate-400 mt-1 text-right">Meta: S/ 20k</p>
        </div>

        {{-- Aforo --}}
        <div class="card-pro p-5 kpi-amber fade-in" style="animation-delay: 100ms;">
            <div class="flex justify-between items-start mb-3">
                <div class="p-2.5 bg-amber-50 rounded-xl text-amber-600"><i data-lucide="users" class="w-6 h-6"></i></div>
                <span class="bg-red-50 text-[#E21C21] text-xs font-bold px-2 py-1 rounded border border-red-100">Lleno</span>
            </div>
            <p class="text-slate-500 text-xs font-bold uppercase tracking-wider">Aforo Sala</p>
            <h3 class="text-3xl font-black text-[#0f172a] mt-1">92%</h3>
            <p class="text-xs text-slate-500 mt-1">Boxes: <span class="text-[#0f172a] font-bold">16/18</span> Ocupados</p>
        </div>

        {{-- Ticket Promedio --}}
        <div class="card-pro p-5 kpi-green fade-in" style="animation-delay: 200ms;">
            <div class="flex justify-between items-start mb-3">
                <div class="p-2.5 bg-emerald-50 rounded-xl text-emerald-600"><i data-lucide="trending-up" class="w-6 h-6"></i></div>
            </div>
            <p class="text-slate-500 text-xs font-bold uppercase tracking-wider">Ticket Promedio</p>
            <h3 class="text-3xl font-black text-[#0f172a] mt-1">S/ 320</h3>
            <p class="text-xs text-slate-500 mt-1">Prod. Top: <span class="text-[#194B95] font-bold">Black Label</span></p>
        </div>

        {{-- Incidencias --}}
        <div class="card-pro p-5 kpi-red fade-in" style="animation-delay: 300ms;">
            <div class="flex justify-between items-start mb-3">
                <div class="p-2.5 bg-red-50 rounded-xl text-[#E21C21]"><i data-lucide="alert-triangle" class="w-6 h-6"></i></div>
                <button onclick="openModal('modalNuevaIncidencia')" class="text-[#E21C21] hover:text-red-700 text-xs font-bold underline">Reportar</button>
            </div>
            <p class="text-slate-500 text-xs font-bold uppercase tracking-wider">Incidencias</p>
            <h3 class="text-3xl font-black text-[#0f172a] mt-1">2 <span class="text-base font-medium text-slate-400">Activas</span></h3>
            <p class="text-xs text-[#E21C21] font-bold mt-1">1 Crítica (Rotura Stock)</p>
        </div>
    </div>

    {{-- Gráficos --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        {{-- Ventas por Hora --}}
        <div class="lg:col-span-2 card-pro p-6 rounded-2xl fade-in" style="animation-delay: 400ms;">
            <div class="flex justify-between items-center mb-6">
                <h3 class="font-bold text-[#0f172a] flex items-center gap-2">
                    <i data-lucide="activity" class="w-5 h-5 text-[#194B95]"></i> Ritmo de Venta (Hora x Hora)
                </h3>
            </div>
            <div class="relative h-72 w-full">
                <canvas id="chartVentas"></canvas>
            </div>
        </div>

        {{-- Mix de Ventas --}}
        <div class="lg:col-span-1 card-pro p-6 rounded-2xl fade-in flex flex-col" style="animation-delay: 500ms;">
            <h3 class="font-bold text-[#0f172a] mb-4 flex items-center gap-2">
                <i data-lucide="pie-chart" class="w-5 h-5 text-fuchsia-600"></i> Mix de Ventas
            </h3>
            <div class="flex-1 relative flex items-center justify-center">
                <canvas id="chartCategorias"></canvas>
                <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                    <span class="text-3xl font-black text-[#0f172a]">520</span>
                    <span class="text-[10px] text-slate-400 uppercase tracking-widest font-bold">Items</span>
                </div>
            </div>
            <div class="mt-6 grid grid-cols-2 gap-2 text-xs text-slate-500 font-medium">
                <div class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full bg-[#194B95]"></span> Botellas (55%)</div>
                <div class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full bg-fuchsia-500"></span> Cocteles (20%)</div>
                <div class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span> Cervezas (15%)</div>
                <div class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-full bg-slate-400"></span> Otros (10%)</div>
            </div>
        </div>
    </div>

    {{-- Sección Inferior: Staff y Alertas --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 pb-4">
        
        {{-- Tabla Staff --}}
        <div class="lg:col-span-2 card-pro p-0 rounded-2xl overflow-hidden fade-in" style="animation-delay: 600ms;">
            <div class="p-5 border-b border-slate-100 flex justify-between items-center bg-slate-50">
                <h3 class="font-bold text-[#0f172a] flex items-center gap-2">
                    <i data-lucide="star" class="w-5 h-5 text-amber-500"></i> Top Rendimiento Staff
                </h3>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left text-sm">
                    <thead class="bg-white text-slate-500 uppercase text-[10px] font-bold border-b border-slate-100">
                        <tr>
                            <th class="px-5 py-3">Colaborador</th>
                            <th class="px-5 py-3">Zona</th>
                            <th class="px-5 py-3 text-right">Contacto</th>
                            <th class="px-5 py-3 text-right">Estado</th>
                            <th class="px-5 py-3 text-right text-emerald-600">Acciones</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-slate-700" id="staffTableBody">
                        {{-- Data will be populated by JS --}}
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Feed Alertas --}}
        <div class="lg:col-span-1 card-pro p-5 rounded-2xl fade-in flex flex-col border-l-4 border-l-[#E21C21]" style="animation-delay: 700ms;">
            <h3 class="font-bold text-[#0f172a] mb-4 flex items-center gap-2">
                <i data-lucide="bell-ring" class="w-5 h-5 text-[#E21C21]"></i> Últimas Alertas
            </h3>
            <div class="space-y-3 flex-1 overflow-y-auto custom-scroll max-h-64">
                <div class="p-3 rounded-lg bg-red-50 border border-red-100">
                    <div class="flex justify-between mb-1">
                        <span class="text-[10px] bg-[#E21C21] text-white px-2 py-0.5 rounded font-bold uppercase">Crítico</span>
                        <span class="text-[10px] text-slate-500 font-mono font-bold">01:30 AM</span>
                    </div>
                    <p class="text-xs font-bold text-[#0f172a]">Rotura Botella Whisky</p>
                    <p class="text-[10px] text-slate-500 mt-0.5">Barra 1 • Pérdida estimada: S/ 240</p>
                </div>
                <div class="p-3 rounded-lg bg-amber-50 border border-amber-100">
                    <div class="flex justify-between mb-1">
                        <span class="text-[10px] bg-amber-500 text-white px-2 py-0.5 rounded font-bold uppercase">Revisión</span>
                        <span class="text-[10px] text-slate-500 font-mono font-bold">00:15 AM</span>
                    </div>
                    <p class="text-xs font-bold text-[#0f172a]">Disputa Cuenta Box 5</p>
                    <p class="text-[10px] text-slate-500 mt-0.5">Cliente reclama cobro duplicado.</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Incidencia --}}
    <div id="modalNuevaIncidencia" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4">
        <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity" onclick="closeModal('modalNuevaIncidencia')"></div>
        <div class="bg-white border border-slate-200 rounded-2xl w-full max-w-lg shadow-2xl relative z-10 overflow-hidden transform transition-all scale-100">
            <div class="p-5 border-b border-slate-100 bg-slate-50 flex justify-between items-center">
                <h3 class="text-lg font-bold text-[#0f172a] flex items-center gap-2">
                    <i data-lucide="alert-triangle" class="w-5 h-5 text-[#E21C21]"></i> Reportar Incidencia
                </h3>
                <button onclick="closeModal('modalNuevaIncidencia')" class="text-slate-400 hover:text-[#E21C21]"><i data-lucide="x" class="w-5 h-5"></i></button>
            </div>
            <div class="p-6 space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1.5">Tipo</label>
                        <select class="w-full bg-white border border-slate-300 rounded-lg px-3 py-2.5 text-sm text-slate-700 focus:border-[#E21C21] outline-none font-medium">
                            <option>Rotura de Stock</option>
                            <option>Problema Cliente</option>
                            <option>Falla Sistema</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1.5">Ubicación</label>
                        <select class="w-full bg-white border border-slate-300 rounded-lg px-3 py-2.5 text-sm text-slate-700 focus:border-[#E21C21] outline-none font-medium">
                            <option>Barra Principal</option>
                            <option>Zona VIP</option>
                            <option>Entrada</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1.5">Monto (Pérdida S/)</label>
                    <input type="number" class="w-full bg-white border border-slate-300 rounded-lg px-3 py-2.5 text-sm text-slate-800 focus:border-[#E21C21] outline-none font-bold" placeholder="0.00">
                </div>
                <div>
                    <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1.5">Detalles</label>
                    <textarea class="w-full bg-white border border-slate-300 rounded-lg px-3 py-2.5 text-sm text-slate-700 focus:border-[#E21C21] outline-none h-24 resize-none" placeholder="Describe lo sucedido..."></textarea>
                </div>
            </div>
            <div class="p-5 border-t border-slate-100 bg-slate-50 flex justify-end gap-3">
                <button onclick="closeModal('modalNuevaIncidencia')" class="px-4 py-2 text-sm text-slate-600 hover:text-slate-800 font-bold">Cancelar</button>
                <button onclick="registrarIncidencia()" id="btnSave" class="px-5 py-2.5 bg-[#E21C21] hover:bg-[#c4181c] text-white rounded-lg text-sm font-bold shadow-lg shadow-red-100 transition-all flex items-center gap-2 transform active:scale-95">
                    <span>REGISTRAR AHORA</span>
                </button>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Configuración Gráficos
    Chart.defaults.font.family = "'Plus Jakarta Sans', sans-serif";
    Chart.defaults.color = '#64748b';
    Chart.defaults.scale.grid.color = 'rgba(0, 0, 0, 0.05)';

    document.addEventListener('DOMContentLoaded', () => {
        // Reloj en tiempo real
        setInterval(() => {
            const now = new Date();
            document.getElementById('reloj').innerText = now.toLocaleTimeString('es-PE', { hour12: false });
            document.getElementById('fecha').innerText = now.toLocaleDateString('es-PE', { weekday: 'long', day: 'numeric', month: 'long' });
        }, 1000);

        loadDashboardData();
    });

    async function loadDashboardData() {
        try {
            const userId = "{{ Auth::id() }}"; // Inject authenticated user ID
            const response = await fetch(`/api/Owner/Dashboard?user_id=${userId}`);
            const result = await response.json();

            if (result.status === 'ok') {
                updateKPIs(result.data.kpi);
                updateCharts(result.data.platos); // Usamos Platos para el Mix de Ventas por ahora
                updateStaffTable(result.data.managers);
            }
        } catch (error) {
            console.error('Error loading dashboard:', error);
        }
    }

    function updateKPIs(kpi) {
        // Venta Neta
        document.getElementById('kpiVentaNeta').innerText = `S/ ${parseFloat(kpi.ingresosTotales).toLocaleString('es-PE', { minimumFractionDigits: 2 })}`;
        
        // Crecimiento
        const kpiTrend = document.getElementById('kpiTrend');
        const kpiTrendText = document.getElementById('kpiTrendText');
        kpiTrendText.innerText = `${kpi.porcentajeCrecimiento}%`;
        
        if (kpi.esCrecimientoPositivo) {
            kpiTrend.classList.replace('text-red-700', 'text-emerald-700');
            kpiTrend.classList.replace('bg-red-50', 'bg-emerald-50');
            kpiTrend.classList.replace('border-red-100', 'border-emerald-100');
        } else {
            kpiTrend.classList.replace('text-emerald-700', 'text-red-700');
            kpiTrend.classList.replace('bg-emerald-50', 'bg-red-50');
            kpiTrend.classList.replace('border-emerald-100', 'border-red-100');
        }
    }

    function updateStaffTable(managers) {
        const tbody = document.getElementById('staffTableBody');
        tbody.innerHTML = ''; // Limpiar mocks

        if (!managers || managers.length === 0) {
            tbody.innerHTML = '<tr><td colspan="5" class="px-5 py-3 text-center text-slate-500">No hay gerentes activos</td></tr>';
            return;
        }

        managers.forEach(manager => {
            const initials = manager.nombre.match(/\b\w/g).slice(0, 2).join('').toUpperCase();
            
            const row = `
                <tr class="hover:bg-blue-50 transition-colors">
                    <td class="px-5 py-3 font-bold flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full bg-[#194B95] text-white flex items-center justify-center text-[10px] font-bold">
                            ${manager.foto_url ? `<img src="${manager.foto_url}" class="w-full h-full rounded-full">` : initials}
                        </div> 
                        ${manager.nombre}
                    </td>
                    <td class="px-5 py-3 text-slate-500">Gerente</td>
                    <td class="px-5 py-3 text-right font-mono font-bold">${manager.email}</td>
                    <td class="px-5 py-3 text-right text-emerald-600 font-bold">${manager.activo ? 'Activo' : 'Inactivo'}</td>
                    <td class="px-5 py-3 text-right font-bold text-emerald-600">
                        <button class="text-xs bg-slate-100 px-2 py-1 rounded hover:bg-slate-200">Ver</button>
                    </td>
                </tr>
            `;
            tbody.insertAdjacentHTML('beforeend', row);
        });
    }

    function updateCharts(platos) {
        // Chart Ventas (Mock por ahora, API no devuelve histórico horario aún)
        const ctx1 = document.getElementById('chartVentas').getContext('2d');
        const gradient = ctx1.createLinearGradient(0, 0, 0, 400);
        gradient.addColorStop(0, 'rgba(25, 75, 149, 0.2)');
        gradient.addColorStop(1, 'rgba(25, 75, 149, 0)');

        new Chart(ctx1, {
            type: 'line',
            data: {
                labels: ['22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00'],
                datasets: [{
                    label: 'Ventas S/',
                    data: [1200, 3500, 8000, 15000, 22000, 18000, 5000],
                    borderColor: '#194B95',
                    backgroundColor: gradient,
                    borderWidth: 3,
                    pointBackgroundColor: '#fff',
                    pointBorderColor: '#194B95',
                    pointRadius: 5,
                    fill: true,
                    tension: 0.4
                }]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, border: { display: false } }, x: { grid: { display: false }, border: { display: false } } } }
        });

        // Chart Mix (Top Productos del API)
        if (platos && platos.length > 0) {
            const labels = platos.map(p => p.nombrePlato);
            const data = platos.map(p => p.totalPedidos);
            
            const ctx2 = document.getElementById('chartCategorias').getContext('2d');
            new Chart(ctx2, {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        data: data,
                        backgroundColor: ['#194B95', '#d946ef', '#f59e0b', '#94a3b8', '#10b981'],
                        borderColor: '#ffffff',
                        borderWidth: 4
                    }]
                },
                options: { responsive: true, maintainAspectRatio: false, cutout: '80%', plugins: { legend: { display: false } } }
            });
        }
    }

    // Lógica del Modal
    function openModal(id) { 
        const modal = document.getElementById(id);
        modal.classList.remove('hidden'); 
        modal.classList.add('flex'); 
    }
    
    function closeModal(id) { 
        const modal = document.getElementById(id);
        modal.classList.add('hidden'); 
        modal.classList.remove('flex');
    }

    function registrarIncidencia() {
        const btn = document.getElementById('btnSave');
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...`;
        lucide.createIcons();

        setTimeout(() => {
            alert("Incidencia reportada correctamente.");
            closeModal('modalNuevaIncidencia');
            btn.disabled = false;
            btn.innerHTML = originalText;
        }, 1000);
    }
</script>
@endpush