@extends('layouts.panel')

@section('title', 'Análisis de Negocio - Piter Professional')

@section('content')

    {{-- Header de la Sección --}}
    <div class="flex flex-col md:flex-row justify-between items-end mb-8 gap-6 border-b border-slate-200 pb-6 fade-in">
        <div class="flex items-center gap-4">
            <div class="w-14 h-14 bg-white border border-slate-200 rounded-2xl flex items-center justify-center text-[#194B95] shadow-sm">
                <i data-lucide="bar-chart-2" class="w-7 h-7"></i>
            </div>
            <div>
                <h1 class="text-3xl font-black text-[#0f172a] tracking-tight leading-none">ANÁLISIS DE NEGOCIO</h1>
                <p class="text-slate-500 text-sm font-medium mt-1">Resumen Financiero y Operativo en Tiempo Real</p>
            </div>
        </div>
        
        <div class="flex items-center gap-4">
            <div class="text-right hidden md:block">
                <p class="text-[10px] text-slate-400 uppercase font-bold tracking-wider">Última Actualización</p>
                <p class="text-sm font-bold text-[#0f172a] bg-white px-3 py-1 rounded-lg border border-slate-200 shadow-sm">
                    {{ date('h:i A') }}
                </p>
            </div>
            <button class="p-3 bg-white hover:bg-slate-50 text-slate-600 rounded-xl border border-slate-200 shadow-sm transition-colors group">
                <i data-lucide="download" class="w-5 h-5 group-hover:text-[#194B95]"></i>
            </button>
        </div>
    </div>

    <div class="space-y-8 fade-in" style="animation-delay: 100ms;">

        {{-- SECCIÓN 1: KPIs Principales --}}
        <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            
            {{-- KPI: Ingresos --}}
            <div class="kpi-card relative overflow-hidden group border-l-4 border-l-[#194B95]">
                <div class="flex justify-between items-start mb-2">
                    <div class="p-2 bg-blue-50 rounded-lg text-[#194B95]"><i data-lucide="dollar-sign" 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.5%
                    </span>
                </div>
                <div>
                    <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Ingresos (Hoy)</p>
                    <h2 class="text-3xl font-black text-[#0f172a]">S/ 45,890</h2>
                    <div class="mt-4">
                        <div class="flex justify-between text-[10px] font-bold text-slate-400 mb-1">
                            <span>Progreso Meta</span>
                            <span>91%</span>
                        </div>
                        <div class="progress-track">
                            <div class="progress-fill bg-[#194B95]" style="width: 91%"></div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- KPI: Ticket Promedio --}}
            <div class="kpi-card">
                 <div class="flex justify-between items-start mb-4">
                    <div class="p-2 bg-slate-50 rounded-lg text-slate-600"><i data-lucide="receipt" class="w-6 h-6"></i></div>
                 </div>
                 <div>
                     <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Ticket Promedio</p>
                     <h2 class="text-3xl font-black text-[#0f172a]">S/ 185.50</h2>
                     <p class="text-xs text-slate-400 mt-1 font-medium">Por transacción</p>
                 </div>
            </div>

            {{-- KPI: Reservas --}}
            <div class="kpi-card">
                 <div class="flex justify-between items-start mb-4">
                    <div class="p-2 bg-amber-50 rounded-lg text-amber-600"><i data-lucide="crown" class="w-6 h-6"></i></div>
                 </div>
                 <div>
                     <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Reservas VIP</p>
                     <div class="flex items-baseline gap-2">
                         <h2 class="text-3xl font-black text-[#0f172a]">18</h2>
                         <span class="text-sm text-slate-400 font-bold">/ 20</span>
                     </div>
                     <p class="text-xs text-emerald-600 mt-1 font-bold">90% Confirmadas</p>
                 </div>
            </div>

            {{-- KPI: Producto Estrella (Azul) --}}
             <div class="kpi-card bg-gradient-to-br from-[#194B95] to-[#1e3a8a] text-white border-none shadow-lg shadow-blue-200">
                 <div class="flex justify-between items-start mb-4">
                    <div class="p-2 bg-white/10 rounded-lg text-white"><i data-lucide="award" class="w-6 h-6"></i></div>
                    <span class="text-[10px] font-bold bg-white/20 px-2 py-1 rounded text-white">#1 VENTA</span>
                 </div>
                 <div>
                     <p class="text-white/60 text-xs font-bold uppercase tracking-wider mb-1">Producto Estrella</p>
                     <p class="text-xl font-black text-white truncate leading-tight">J.W. Black Label</p>
                     <p class="text-sm text-white/80 mt-1 font-medium">42 Unidades vendidas</p>
                 </div>
            </div>

        </section>

        {{-- SECCIÓN 2: Sedes y Botellas --}}
        <section class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            {{-- Rendimiento por Sede --}}
            <div class="bg-white border border-slate-200 rounded-2xl p-6 lg:col-span-2 shadow-sm flex flex-col">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="font-bold text-[#0f172a] flex items-center gap-2">
                        <i data-lucide="building-2" class="w-5 h-5 text-slate-400"></i> Rendimiento por Sede
                    </h3>
                    <span class="px-2 py-1 rounded bg-slate-100 text-xs text-slate-500 font-bold border border-slate-200">Tiempo Real</span>
                </div>

                <div class="space-y-6 flex-1">
                    {{-- Sede 1 --}}
                    <div>
                        <div class="flex justify-between items-end mb-2">
                            <div>
                                <h4 class="font-bold text-[#0f172a] text-sm">Sede Miraflores (Main)</h4>
                                <div class="flex items-center gap-2 mt-1">
                                    <span class="text-[10px] uppercase font-bold text-slate-400">Capacidad:</span>
                                    <span class="text-[10px] font-bold text-red-500 bg-red-50 px-1.5 rounded">95%</span>
                                </div>
                            </div>
                            <div class="text-right">
                                <span class="block text-lg font-black text-[#194B95]">S/ 28,500</span>
                            </div>
                        </div>
                        <div class="progress-track">
                            <div class="progress-fill bg-[#194B95]" style="width: 85%"></div>
                        </div>
                    </div>

                    {{-- Sede 2 --}}
                    <div>
                        <div class="flex justify-between items-end mb-2">
                            <div>
                                <h4 class="font-bold text-[#0f172a] text-sm">Sede Barranco (Rooftop)</h4>
                                <div class="flex items-center gap-2 mt-1">
                                    <span class="text-[10px] uppercase font-bold text-slate-400">Capacidad:</span>
                                    <span class="text-[10px] font-bold text-red-500 bg-red-50 px-1.5 rounded">100%</span>
                                </div>
                            </div>
                            <div class="text-right">
                                <span class="block text-lg font-black text-[#194B95]">S/ 12,400</span>
                            </div>
                        </div>
                        <div class="progress-track">
                            <div class="progress-fill bg-indigo-500" style="width: 60%"></div>
                        </div>
                    </div>

                    {{-- Sede 3 --}}
                    <div>
                        <div class="flex justify-between items-end mb-2">
                            <div>
                                <h4 class="font-bold text-[#0f172a] text-sm">Sede Surco (Lounge)</h4>
                                <div class="flex items-center gap-2 mt-1">
                                    <span class="text-[10px] uppercase font-bold text-slate-400">Capacidad:</span>
                                    <span class="text-[10px] font-bold text-emerald-600 bg-emerald-50 px-1.5 rounded">60%</span>
                                </div>
                            </div>
                            <div class="text-right">
                                <span class="block text-lg font-black text-[#194B95]">S/ 4,990</span>
                            </div>
                        </div>
                        <div class="progress-track">
                            <div class="progress-fill bg-slate-400" style="width: 25%"></div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Top Botellas --}}
            <div class="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm flex flex-col h-full">
                 <h3 class="font-bold text-[#0f172a] flex items-center gap-2 mb-6">
                    <i data-lucide="wine" class="w-5 h-5 text-slate-400"></i> Botellas Top
                </h3>
                
                <div class="space-y-4 flex-1">
                    {{-- Botella 1 --}}
                    <div class="flex items-center gap-4 p-3 rounded-xl border border-slate-100 bg-slate-50/50 hover:bg-white hover:shadow-md transition-all group">
                        <div class="font-black text-slate-300 text-lg w-4">1</div>
                        <img src="https://images.unsplash.com/photo-1566633806327-68e690b5e5a6?q=80&w=100" class="w-10 h-10 rounded-lg object-cover border border-slate-200">
                        <div class="flex-1 min-w-0">
                            <h4 class="text-sm font-bold text-slate-700 truncate">J.W. Black Label</h4>
                            <p class="text-[10px] text-slate-400 font-medium">42 Unidades</p>
                        </div>
                        <div class="text-right">
                            <p class="text-xs font-bold text-[#0f172a]">S/ 12.6k</p>
                            <p class="text-[10px] text-emerald-600 font-bold">+5%</p>
                        </div>
                    </div>

                    {{-- Botella 2 --}}
                    <div class="flex items-center gap-4 p-3 rounded-xl border border-slate-100 bg-slate-50/50 hover:bg-white hover:shadow-md transition-all group">
                        <div class="font-black text-slate-300 text-lg w-4">2</div>
                        <img src="https://images.unsplash.com/photo-1599309852026-b84ae4734656?q=80&w=100" class="w-10 h-10 rounded-lg object-cover border border-slate-200">
                        <div class="flex-1 min-w-0">
                            <h4 class="text-sm font-bold text-slate-700 truncate">Gin Tanqueray</h4>
                            <p class="text-[10px] text-slate-400 font-medium">28 Unidades</p>
                        </div>
                        <div class="text-right">
                            <p class="text-xs font-bold text-[#0f172a]">S/ 8.4k</p>
                            <p class="text-[10px] text-emerald-600 font-bold">+2%</p>
                        </div>
                    </div>

                    {{-- Botella 3 --}}
                    <div class="flex items-center gap-4 p-3 rounded-xl border border-slate-100 bg-slate-50/50 hover:bg-white hover:shadow-md transition-all group">
                        <div class="font-black text-slate-300 text-lg w-4">3</div>
                        <img src="https://images.unsplash.com/photo-1594916895315-776735e26920?q=80&w=100" class="w-10 h-10 rounded-lg object-cover border border-slate-200">
                        <div class="flex-1 min-w-0">
                            <h4 class="text-sm font-bold text-slate-700 truncate">Grey Goose Vodka</h4>
                            <p class="text-[10px] text-slate-400 font-medium">15 Unidades</p>
                        </div>
                        <div class="text-right">
                            <p class="text-xs font-bold text-[#0f172a]">S/ 6.7k</p>
                            <p class="text-[10px] text-rose-500 font-bold">-3%</p>
                        </div>
                    </div>
                </div>
            </div>

        </section>

        {{-- SECCIÓN 3: Tabla de Alertas --}}
        <section class="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
            <div class="p-4 border-b border-slate-100 bg-red-50/50 flex justify-between items-center">
                <h3 class="font-bold text-[#E21C21] flex items-center gap-2 text-sm">
                    <i data-lucide="alert-octagon" class="w-4 h-4"></i> Alertas de Pérdidas de Stock
                </h3>
                <span class="px-2 py-1 bg-red-100 text-[#E21C21] text-[10px] font-bold rounded uppercase">Acción Requerida</span>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead class="bg-slate-50 text-[10px] uppercase text-slate-500 font-bold tracking-wider">
                        <tr>
                            <th class="p-4">Tipo Incidencia</th>
                            <th class="p-4">Producto / Detalle</th>
                            <th class="p-4">Hora</th>
                            <th class="p-4">Responsable</th>
                            <th class="p-4 text-right">Costo Est.</th>
                            <th class="p-4 text-right">Acción</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm divide-y divide-slate-100">
                        <tr class="hover:bg-red-50/30 transition-colors">
                            <td class="p-4">
                                <span class="px-2 py-1 rounded text-[10px] font-bold uppercase bg-orange-100 text-orange-600 border border-orange-200">Rotura</span>
                            </td>
                            <td class="p-4 font-bold text-slate-700">1x J.W. Red Label</td>
                            <td class="p-4 text-slate-500 font-mono text-xs">23:15</td>
                            <td class="p-4 text-slate-600 font-medium">Jorge T.</td>
                            <td class="p-4 text-right font-mono text-red-600 font-bold">- S/ 120.00</td>
                            <td class="p-4 text-right">
                                <button class="text-xs font-bold text-[#194B95] hover:underline">Justificar</button>
                            </td>
                        </tr>
                        <tr class="hover:bg-red-50/30 transition-colors">
                            <td class="p-4">
                                <span class="px-2 py-1 rounded text-[10px] font-bold uppercase bg-blue-100 text-blue-600 border border-blue-200">Consumo</span>
                            </td>
                            <td class="p-4 font-bold text-slate-700">2x Red Bull (Staff)</td>
                            <td class="p-4 text-slate-500 font-mono text-xs">21:30</td>
                            <td class="p-4 text-slate-600 font-medium">Admin</td>
                            <td class="p-4 text-right font-mono text-red-600 font-bold">- S/ 24.00</td>
                            <td class="p-4 text-right">
                                <button class="text-xs font-bold text-[#194B95] hover:underline">Justificar</button>
                            </td>
                        </tr>
                        <tr class="hover:bg-red-50/30 transition-colors">
                            <td class="p-4">
                                <span class="px-2 py-1 rounded text-[10px] font-bold uppercase bg-red-100 text-red-600 border border-red-200">Faltante</span>
                            </td>
                            <td class="p-4 font-bold text-slate-700">Hielo (3kg)</td>
                            <td class="p-4 text-slate-500 font-mono text-xs">02:00</td>
                            <td class="p-4 text-slate-600 font-medium">Barra 2</td>
                            <td class="p-4 text-right font-mono text-red-600 font-bold">- S/ 15.00</td>
                            <td class="p-4 text-right">
                                <button class="text-xs font-bold text-[#194B95] hover:underline">Investigar</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

    </div>

@endsection

@push('scripts')
<script>
    // Animación de barras de progreso al cargar
    document.addEventListener("DOMContentLoaded", () => {
        const bars = document.querySelectorAll('.progress-fill');
        bars.forEach(bar => {
            const width = bar.style.width; // Obtiene el valor inline (ej. 91%)
            bar.style.width = '0'; // Lo pone a 0
            setTimeout(() => {
                bar.style.width = width; // Lo anima hasta el valor real
            }, 300);
        });
    });
</script>
@endpush