@extends('layouts.panel')

@section('title', 'Reportes Gerenciales & BI')

@section('content')

    {{-- Header --}}
    <div class="flex flex-col lg:flex-row justify-between items-end mb-8 gap-6 border-b border-slate-200 pb-6 fade-in">
        <div>
            <div class="flex items-center gap-3 mb-1">
                <div class="bg-[#194B95] p-2 rounded-lg shadow-md shadow-blue-100">
                    <i data-lucide="bar-chart-3" class="w-6 h-6 text-white"></i>
                </div>
                <div>
                    <h1 class="text-3xl font-black text-[#0f172a] tracking-tight">REPORTES & BI</h1>
                    <p class="text-slate-500 font-medium text-xs">Análisis financiero y operativo.</p>
                </div>
            </div>
        </div>
        
        <div class="flex flex-wrap gap-3 items-center w-full lg:w-auto">
            <div class="flex bg-slate-100 border border-slate-200 rounded-xl p-1">
                <button class="px-4 py-2 text-xs font-bold bg-white text-[#194B95] rounded-lg shadow-sm border border-slate-200 transition-all">Semanal</button>
                <button class="px-4 py-2 text-xs font-bold text-slate-500 hover:text-[#194B95] transition-colors">Mensual</button>
                <button class="px-4 py-2 text-xs font-bold text-slate-500 hover:text-[#194B95] transition-colors">Anual</button>
            </div>
            <div class="flex items-center gap-2 bg-white px-2 py-1 rounded-xl border border-slate-200">
                <input type="date" value="{{ date('Y-m-01') }}" class="border-none p-1 focus:ring-0 text-xs w-32">
                <span class="text-slate-400 font-bold">-</span>
                <input type="date" value="{{ date('Y-m-d') }}" class="border-none p-1 focus:ring-0 text-xs w-32">
            </div>
            <button onclick="generarReporte(this)" class="bg-[#194B95] hover:bg-[#123670] text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-blue-100 transition-all flex items-center gap-2 active:scale-95">
                <i data-lucide="filter" class="w-4 h-4"></i> Filtrar
            </button>
        </div>
    </div>

    {{-- Tabs --}}
    <div class="flex gap-1 mb-6 border-b border-slate-200 overflow-x-auto no-scrollbar fade-in" style="animation-delay: 100ms;">
        <button class="tab-report active" onclick="switchTab('ventas')">Ventas y Finanzas</button>
        <button class="tab-report" onclick="switchTab('productos')">Productos Top</button>
        <button class="tab-report" onclick="switchTab('staff')">Desempeño Staff</button>
        <button class="tab-report" onclick="switchTab('inventario')">Inventario Valorizado</button>
    </div>

    {{-- KPIs Financieros --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 fade-in" style="animation-delay: 200ms;">
        <div class="kpi-card p-6 border-l-4 border-l-[#194B95]">
            <p class="text-xs font-bold text-slate-500 uppercase mb-1 tracking-wider">Ingresos Totales</p>
            <h3 class="text-3xl font-black text-[#0f172a]">S/ 42,850</h3>
            <p class="text-xs text-emerald-600 mt-2 flex items-center gap-1 font-bold bg-emerald-50 px-2 py-1 rounded w-fit">
                <i data-lucide="trending-up" class="w-3 h-3"></i> +12% vs mes anterior
            </p>
        </div>
        
        <div class="kpi-card p-6 border-l-4 border-l-[#E21C21]">
            <p class="text-xs font-bold text-slate-500 uppercase mb-1 tracking-wider">Gastos Operativos</p>
            <h3 class="text-3xl font-black text-[#0f172a]">S/ 15,200</h3>
            <p class="text-xs text-slate-400 mt-2">Nómina, Insumos, Servicios</p>
        </div>

        <div class="kpi-card p-6 border-l-4 border-l-emerald-500 bg-gradient-to-br from-emerald-50/50 to-transparent">
            <p class="text-xs font-bold text-emerald-600 uppercase mb-1 tracking-wider">Utilidad Neta</p>
            <h3 class="text-3xl font-black text-emerald-600">S/ 27,650</h3>
            <p class="text-xs text-emerald-700 mt-2 font-bold">Margen: 64.5%</p>
        </div>

        <div class="kpi-card p-6 border-l-4 border-l-amber-500">
            <p class="text-xs font-bold text-slate-500 uppercase mb-1 tracking-wider">Ticket Promedio</p>
            <h3 class="text-3xl font-black text-[#0f172a]">S/ 210.50</h3>
            <p class="text-xs text-slate-400 mt-2">Base: 203 Transacciones</p>
        </div>
    </div>

    {{-- Gráficos --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6 fade-in" style="animation-delay: 300ms;">
        
        {{-- Chart Financiero --}}
        <div class="lg:col-span-2 kpi-card p-6">
            <div class="flex justify-between items-center mb-6">
                <h3 class="font-bold text-[#0f172a] text-lg flex items-center gap-2">
                    <div class="p-1.5 bg-blue-50 rounded-lg"><i data-lucide="bar-chart-2" class="w-5 h-5 text-[#194B95]"></i></div>
                    Balance Financiero
                </h3>
                <button class="text-xs text-[#194B95] font-bold hover:underline bg-blue-50 px-3 py-1.5 rounded-lg transition-colors">Ver Detalle</button>
            </div>
            <div class="relative h-80 w-full">
                <canvas id="chartFinance"></canvas>
            </div>
        </div>

        {{-- Chart Métodos Pago --}}
        <div class="lg:col-span-1 kpi-card p-6 flex flex-col">
            <h3 class="font-bold text-[#0f172a] text-lg mb-4 flex items-center gap-2">
                <div class="p-1.5 bg-fuchsia-50 rounded-lg"><i data-lucide="pie-chart" class="w-5 h-5 text-fuchsia-600"></i></div>
                Métodos de Pago
            </h3>
            <div class="flex-1 flex items-center justify-center relative">
                <canvas id="chartMetodos"></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-6 space-y-3">
                <div class="flex justify-between text-sm border-b border-slate-50 pb-2">
                    <span class="text-slate-500 font-medium flex items-center gap-2"><div class="w-3 h-3 bg-[#194B95] rounded-full"></div> Tarjetas</span>
                    <span class="text-[#0f172a] font-bold">65%</span>
                </div>
                <div class="flex justify-between text-sm border-b border-slate-50 pb-2">
                    <span class="text-slate-500 font-medium flex items-center gap-2"><div class="w-3 h-3 bg-emerald-500 rounded-full"></div> Efectivo</span>
                    <span class="text-[#0f172a] font-bold">25%</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-slate-500 font-medium flex items-center gap-2"><div class="w-3 h-3 bg-fuchsia-500 rounded-full"></div> Digital</span>
                    <span class="text-[#0f172a] font-bold">10%</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabla Rentabilidad --}}
    <div class="kpi-card p-0 overflow-hidden mt-6 fade-in" style="animation-delay: 400ms;">
        <div class="p-6 border-b border-slate-100 bg-slate-50/50 flex flex-col md:flex-row justify-between items-center gap-4">
            <div>
                <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> Rentabilidad por Producto
                </h3>
                <p class="text-sm text-slate-500 mt-1">Top 5 productos con mayor margen de ganancia.</p>
            </div>
            <div class="flex gap-3">
                <button class="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 text-slate-600 rounded-lg text-xs font-bold hover:border-emerald-500 hover:text-emerald-600 transition-colors shadow-sm">
                    <i data-lucide="file-spreadsheet" class="w-4 h-4"></i> Excel
                </button>
                <button class="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 text-slate-600 rounded-lg text-xs font-bold hover:border-[#E21C21] hover:text-[#E21C21] transition-colors shadow-sm">
                    <i data-lucide="file-text" class="w-4 h-4"></i> PDF
                </button>
            </div>
        </div>
        
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm border-collapse">
                <thead class="bg-white text-slate-500 uppercase text-[10px] font-bold border-b border-slate-200 tracking-wider">
                    <tr>
                        <th class="px-6 py-4 pl-8">Producto</th>
                        <th class="px-6 py-4 text-center">Categoría</th>
                        <th class="px-6 py-4 text-center">Vendidos</th>
                        <th class="px-6 py-4 text-right">Costo Unit.</th>
                        <th class="px-6 py-4 text-right">Precio Venta</th>
                        <th class="px-6 py-4 text-right">Ganancia Total</th>
                        <th class="px-6 py-4 text-right text-emerald-600 pr-8">Margen %</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-slate-700">
                    <tr class="hover:bg-slate-50 transition-colors group">
                        <td class="px-6 py-4 pl-8 font-bold text-[#0f172a] group-hover:text-[#194B95]">JW Black Label</td>
                        <td class="px-6 py-4 text-center"><span class="px-2 py-1 rounded bg-amber-50 text-amber-600 text-[10px] font-bold border border-amber-100">WHISKY</span></td>
                        <td class="px-6 py-4 text-center text-slate-500 font-medium">45 Bot.</td>
                        <td class="px-6 py-4 text-right text-slate-500 font-mono">S/ 90.00</td>
                        <td class="px-6 py-4 text-right text-slate-800 font-bold font-mono">S/ 320.00</td>
                        <td class="px-6 py-4 text-right text-emerald-600 font-black font-mono">S/ 10,350</td>
                        <td class="px-6 py-4 text-right text-emerald-600 font-bold pr-8">71%</td>
                    </tr>
                    <tr class="hover:bg-slate-50 transition-colors group">
                        <td class="px-6 py-4 pl-8 font-bold text-[#0f172a] group-hover:text-[#194B95]">Red Bull</td>
                        <td class="px-6 py-4 text-center"><span class="px-2 py-1 rounded bg-blue-50 text-blue-600 text-[10px] font-bold border border-blue-100">MIXER</span></td>
                        <td class="px-6 py-4 text-center text-slate-500 font-medium">120 Un.</td>
                        <td class="px-6 py-4 text-right text-slate-500 font-mono">S/ 5.50</td>
                        <td class="px-6 py-4 text-right text-slate-800 font-bold font-mono">S/ 15.00</td>
                        <td class="px-6 py-4 text-right text-emerald-600 font-black font-mono">S/ 1,140</td>
                        <td class="px-6 py-4 text-right text-emerald-600 font-bold pr-8">63%</td>
                    </tr>
                    <tr class="hover:bg-slate-50 transition-colors group">
                        <td class="px-6 py-4 pl-8 font-bold text-[#0f172a] group-hover:text-[#194B95]">Grey Goose</td>
                        <td class="px-6 py-4 text-center"><span class="px-2 py-1 rounded bg-slate-100 text-slate-500 text-[10px] font-bold border border-slate-200">VODKA</span></td>
                        <td class="px-6 py-4 text-center text-slate-500 font-medium">12 Bot.</td>
                        <td class="px-6 py-4 text-right text-slate-500 font-mono">S/ 140.00</td>
                        <td class="px-6 py-4 text-right text-slate-800 font-bold font-mono">S/ 450.00</td>
                        <td class="px-6 py-4 text-right text-emerald-600 font-black font-mono">S/ 3,720</td>
                        <td class="px-6 py-4 text-right text-emerald-600 font-bold pr-8">68%</td>
                    </tr>
                </tbody>
            </table>
        </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 = 'rgba(0, 0, 0, 0.03)';

    document.addEventListener('DOMContentLoaded', function() {
        
        // 1. Chart Financiero (Multi-eje)
        const ctxFinance = document.getElementById('chartFinance').getContext('2d');
        new Chart(ctxFinance, {
            type: 'bar',
            data: {
                labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4'],
                datasets: [
                    {
                        label: 'Ingresos',
                        data: [12000, 15000, 18000, 14000],
                        backgroundColor: '#194B95',
                        borderRadius: 6,
                        order: 2
                    },
                    {
                        label: 'Gastos',
                        data: [5000, 6000, 5500, 4800],
                        backgroundColor: '#E21C21',
                        borderRadius: 6,
                        order: 3
                    },
                    {
                        type: 'line',
                        label: 'Utilidad',
                        data: [7000, 9000, 12500, 9200],
                        borderColor: '#10b981',
                        borderWidth: 3,
                        tension: 0.4,
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#10b981',
                        pointBorderWidth: 2,
                        order: 1
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { position: 'top', align: 'end', labels: { usePointStyle: true, boxWidth: 8 } } },
                scales: {
                    y: { beginAtZero: true, border: { display: false } },
                    x: { grid: { display: false }, border: { display: false } }
                }
            }
        });

        // 2. Chart Métodos
        const ctxMethods = document.getElementById('chartMetodos').getContext('2d');
        new Chart(ctxMethods, {
            type: 'doughnut',
            data: {
                labels: ['Tarjetas', 'Efectivo', 'Digital'],
                datasets: [{
                    data: [65, 25, 10],
                    backgroundColor: ['#194B95', '#10b981', '#d946ef'],
                    borderColor: '#ffffff',
                    borderWidth: 4,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '75%',
                plugins: { legend: { display: false } }
            }
        });
    });

    function switchTab(tabId) {
        document.querySelectorAll('.tab-report').forEach(t => t.classList.remove('active'));
        event.target.classList.add('active');
    }

    function generarReporte(btn) {
        const originalHtml = btn.innerHTML;
        btn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Cargando...`;
        lucide.createIcons();
        setTimeout(() => {
            btn.innerHTML = originalHtml;
            lucide.createIcons();
        }, 800);
    }
</script>
@endpush