@extends('layouts.panel') 
{{-- IMPORTANTE: Asegúrate que existe resources/views/layouts/panel.blade.php --}}

@section('title', 'Dashboard Gerencial - Piter Professional')

@section('content')

    {{-- Header del Dashboard --}}
    <div class="flex flex-col md:flex-row justify-between items-end mb-8 gap-6 border-b border-slate-200 pb-6">
        <div>
            <p class="text-[#194B95] font-bold text-xs tracking-[0.2em] uppercase mb-2 flex items-center gap-2">
                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> Business Intelligence
            </p>
            <h1 class="text-3xl md:text-4xl font-extrabold text-[#0f172a] tracking-tight">Tablero Directivo</h1>
            <p class="text-slate-500 text-sm mt-1 font-medium">Análisis de rentabilidad y tendencias de mercado.</p>
        </div>
        
        <div class="flex flex-wrap gap-4 items-center bg-white p-2 rounded-xl border border-slate-200 shadow-sm">
            <div class="flex bg-slate-100 rounded-lg p-1">
                <button class="filter-btn">7 Días</button>
                <button class="filter-btn active">Este Mes</button>
                <button class="filter-btn">Trimestre</button>
            </div>
            <div class="h-6 w-px bg-slate-200 mx-1"></div>
            <button class="flex items-center gap-2 bg-white hover:bg-slate-50 text-slate-600 px-4 py-2 rounded-lg text-xs font-bold transition-colors border border-slate-200 shadow-sm">
                <i data-lucide="download" class="w-4 h-4 text-[#194B95]"></i> Reporte PDF
            </button>
        </div>
    </div>

    {{-- Contenido Principal --}}
    <div class="space-y-8">
        
        {{-- Fila 1: KPIs (Tarjetas Superiores) --}}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            
            {{-- Ingresos --}}
            <div class="card-pro p-6 relative overflow-hidden group">
                <div class="flex justify-between items-start mb-4">
                    <div class="p-2 bg-blue-50 rounded-lg text-[#194B95]">
                        <i data-lucide="banknote" class="w-6 h-6"></i>
                    </div>
                    <span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded border border-emerald-100 flex items-center gap-1">
                        <i data-lucide="trending-up" class="w-3 h-3"></i> +12%
                    </span>
                </div>
                <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Ingresos Brutos</p>
                <h3 class="text-3xl font-black text-[#0f172a]">S/ 145,200</h3>
            </div>

            {{-- Utilidad --}}
            <div class="card-pro p-6 relative overflow-hidden group border-l-4 border-l-emerald-500">
                <div class="flex justify-between items-start mb-4">
                    <div class="p-2 bg-emerald-50 rounded-lg text-emerald-600">
                        <i data-lucide="pie-chart" class="w-6 h-6"></i>
                    </div>
                    <span class="text-xs font-bold text-slate-500">Margen: <b class="text-[#0f172a]">47%</b></span>
                </div>
                <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Utilidad Neta</p>
                <h3 class="text-3xl font-black text-emerald-600">S/ 68,450</h3>
            </div>

            {{-- Ticket Promedio --}}
            <div class="card-pro p-6 relative overflow-hidden group">
                <div class="flex justify-between items-start mb-4">
                    <div class="p-2 bg-amber-50 rounded-lg text-amber-600">
                        <i data-lucide="shopping-bag" class="w-6 h-6"></i>
                    </div>
                    <span class="text-xs font-bold text-rose-600 bg-rose-50 px-2 py-1 rounded border border-rose-100 flex items-center gap-1">
                        <i data-lucide="trending-down" class="w-3 h-3"></i> -2%
                    </span>
                </div>
                <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Ticket Promedio</p>
                <h3 class="text-3xl font-black text-[#0f172a]">S/ 285.00</h3>
            </div>

            {{-- Gastos --}}
            <div class="card-pro p-6 relative overflow-hidden group">
                <div class="flex justify-between items-start mb-4">
                    <div class="p-2 bg-rose-50 rounded-lg text-[#E21C21]">
                        <i data-lucide="activity" class="w-6 h-6"></i>
                    </div>
                    <span class="text-xs font-bold text-slate-400">Nómina e Insumos</span>
                </div>
                <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Gastos Operativos</p>
                <h3 class="text-3xl font-black text-[#0f172a]">S/ 42,100</h3>
            </div>
        </div>

        {{-- Fila 2: Gráficos --}}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            
            {{-- Gráfico de Barras --}}
            <div class="lg:col-span-2 card-pro p-6 fade-in" style="animation-delay: 100ms;">
                <div class="flex justify-between items-center mb-6">
                    <div>
                        <h3 class="font-bold text-[#0f172a] text-lg">Rendimiento Semanal</h3>
                        <p class="text-xs text-slate-500 font-medium">Comparativa Ingresos vs Costos</p>
                    </div>
                    <div class="flex gap-2">
                        <div class="flex items-center gap-1 text-xs font-bold text-slate-500"><span class="w-2 h-2 rounded-full bg-[#194B95]"></span> Ingresos</div>
                        <div class="flex items-center gap-1 text-xs font-bold text-slate-500"><span class="w-2 h-2 rounded-full bg-slate-300"></span> Costos</div>
                    </div>
                </div>
                <div class="relative h-80 w-full">
                    <canvas id="chartRevenue"></canvas>
                </div>
            </div>

            {{-- Gráfico Dona --}}
            <div class="lg:col-span-1 card-pro p-6 fade-in flex flex-col" style="animation-delay: 200ms;">
                <h3 class="font-bold text-[#0f172a] text-lg mb-4">Mix de Ventas</h3>
                <div class="flex-1 flex items-center justify-center relative min-h-[250px]">
                    <canvas id="chartMix"></canvas>
                    <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                        <span class="text-3xl font-black text-[#0f172a]">100%</span>
                        <span class="text-[10px] text-slate-400 uppercase tracking-widest font-bold">Total</span>
                    </div>
                </div>
                <div class="mt-4 space-y-2 text-xs font-medium text-slate-500">
                    <div class="flex justify-between items-center"><span class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-[#194B95]"></span> Bebidas</span> <span class="font-bold text-[#0f172a]">45%</span></div>
                    <div class="flex justify-between items-center"><span class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-emerald-500"></span> Comida</span> <span class="font-bold text-[#0f172a]">35%</span></div>
                    <div class="flex justify-between items-center"><span class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-amber-500"></span> Entradas</span> <span class="font-bold text-[#0f172a]">20%</span></div>
                </div>
            </div>
        </div>

        {{-- Fila 3: Tabla --}}
        <div class="card-pro p-0 overflow-hidden fade-in" style="animation-delay: 300ms;">
            <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50">
                <h3 class="font-bold text-[#0f172a] text-lg flex items-center gap-2">
                    <i data-lucide="star" class="w-5 h-5 text-amber-500"></i> Top Productos Rentables
                </h3>
                <button class="text-xs font-bold text-[#194B95] hover:underline">Ver Reporte Completo</button>
            </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 tracking-wider">
                        <tr>
                            <th class="px-6 py-4">Producto</th>
                            <th class="px-6 py-4 text-center">Categoría</th>
                            <th class="px-6 py-4 text-center">Und. Vendidas</th>
                            <th class="px-6 py-4 text-right">Ingresos</th>
                            <th class="px-6 py-4 text-right text-emerald-600">Margen</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-slate-700 font-medium">
                        <tr class="hover:bg-slate-50 transition-colors">
                            <td class="px-6 py-4 font-bold text-[#0f172a]">JW Black Label</td>
                            <td class="px-6 py-4 text-center"><span class="px-2 py-1 rounded bg-amber-50 text-amber-700 text-[10px] font-bold border border-amber-100">WHISKY</span></td>
                            <td class="px-6 py-4 text-center">145</td>
                            <td class="px-6 py-4 text-right font-mono font-bold">S/ 42,500</td>
                            <td class="px-6 py-4 text-right text-emerald-600 font-bold">72%</td>
                        </tr>
                        <tr class="hover:bg-slate-50 transition-colors">
                            <td class="px-6 py-4 font-bold text-[#0f172a]">Lomo Saltado</td>
                            <td class="px-6 py-4 text-center"><span class="px-2 py-1 rounded bg-blue-50 text-[#194B95] text-[10px] font-bold border border-blue-100">COCINA</span></td>
                            <td class="px-6 py-4 text-center">320</td>
                            <td class="px-6 py-4 text-right font-mono font-bold">S/ 14,400</td>
                            <td class="px-6 py-4 text-right text-emerald-600 font-bold">65%</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>

@endsection

@push('scripts')
<script>
    // Configuración Global ChartJS
    Chart.defaults.font.family = '"Plus Jakarta Sans", sans-serif';
    Chart.defaults.color = '#64748b';
    Chart.defaults.scale.grid.color = '#f1f5f9';

    document.addEventListener('DOMContentLoaded', function() {
        
        // 1. Chart Revenue (Barra Doble)
        const ctxRev = document.getElementById('chartRevenue');
        if (ctxRev) {
            new Chart(ctxRev.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: ['Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab', 'Dom'],
                    datasets: [
                        {
                            label: 'Ingresos',
                            data: [12000, 15000, 18000, 22000, 35000, 42000, 28000],
                            backgroundColor: '#194B95',
                            borderRadius: 4, barPercentage: 0.6,
                        },
                        {
                            label: 'Costos',
                            data: [5000, 6000, 7500, 9000, 12000, 15000, 10000],
                            backgroundColor: '#cbd5e1',
                            borderRadius: 4, barPercentage: 0.6,
                        }
                    ]
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        y: { beginAtZero: true, border: { display: false } },
                        x: { grid: { display: false }, border: { display: false } }
                    }
                }
            });
        }

        // 2. Chart Mix (Dona)
        const ctxMix = document.getElementById('chartMix');
        if (ctxMix) {
            new Chart(ctxMix.getContext('2d'), {
                type: 'doughnut',
                data: {
                    labels: ['Bebidas', 'Comida', 'Entradas'],
                    datasets: [{
                        data: [45, 35, 20],
                        backgroundColor: ['#194B95', '#10b981', '#f59e0b'],
                        borderColor: '#ffffff', borderWidth: 4, hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true, maintainAspectRatio: false, cutout: '75%',
                    plugins: { legend: { display: false } }
                }
            });
        }
    });
</script>
@endpush