<x-app-layout>
    {{-- DASHBOARD V5: RESCATE PREMIM & ESTABILIDAD TOTAL --}}
    
    <x-slot name="header">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 py-4">
            <div class="flex items-center gap-6">
                <div class="p-4 bg-indigo-600 rounded-2xl shadow-xl shadow-indigo-100 dark:shadow-none">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"/></svg>
                </div>
                <div>
                    <h2 class="font-black text-3xl text-slate-900 dark:text-white leading-tight tracking-tight uppercase">Panel de Control Inteligente</h2>
                    <p class="text-[12px] text-slate-400 dark:text-slate-500 font-bold uppercase tracking-[0.4em] mt-1 pl-1">Estadísticas Operativas v5.0</p>
                </div>
            </div>
            
            <div class="flex items-center gap-4" x-data x-cloak>
                <div class="flex items-center gap-3 px-6 py-2.5 bg-emerald-50 dark:bg-emerald-900/30 rounded-full border border-emerald-100 dark:border-emerald-800 shadow-sm transition-all duration-500">
                    <span class="relative flex h-3 w-3">
                      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                      <span class="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
                    </span>
                    <span class="text-[12px] font-black text-emerald-700 dark:text-emerald-400 uppercase tracking-widest leading-none">Sistema en Línea</span>
                </div>
                <button @click="$store.dash.refreshStats()" class="p-3 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-md hover:bg-slate-50 dark:hover:bg-slate-700 transition-all active:scale-95 group">
                    <svg class="w-6 h-6 text-slate-500 dark:text-slate-400 group-hover:rotate-180 transition-transform duration-700" :class="{'animate-spin': $store.dash.loading}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                </button>
            </div>
        </div>
    </x-slot>

    <div class="py-12" x-data x-cloak>
        <div class="max-w-[98%] mx-auto px-6 lg:px-16 space-y-24">

            {{-- ════════════════════════════════════════════════════════════
                 SECCIÓN 1: KPIs (ESTRUCTURA REFORZADA)
                 ════════════════════════════════════════════════════════════ --}}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
                
                <!-- KPI: Ventas Brutas -->
                <div class="bg-white dark:bg-slate-800 rounded-3xl p-10 shadow-2xl shadow-slate-200/60 dark:shadow-none border border-slate-100 dark:border-slate-700 transition-all hover:translate-y-[-8px]">
                    <div class="flex flex-col gap-8 h-full justify-between">
                        <div class="flex items-center justify-between">
                            <div class="p-4 bg-indigo-50 dark:bg-indigo-900/40 rounded-2xl text-indigo-600 dark:text-indigo-400 shadow-inner">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                            <div :class="$store.dash.stats.growthPercentage >= 0 ? 'text-emerald-500' : 'text-red-500'" class="text-[14px] font-black bg-slate-50 dark:bg-slate-900 px-4 py-2 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800">
                                <span x-text="($store.dash.stats.growthPercentage >= 0 ? '↑ ' : '↓ ') + Math.abs($store.dash.stats.growthPercentage).toFixed(1) + '%'"></span>
                            </div>
                        </div>
                        <div>
                            <h3 class="text-[12px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.3em] mb-2 leading-none">Ventas Brutas</h3>
                            <div class="flex flex-col">
                                <span class="text-4xl font-black text-slate-900 dark:text-white tracking-tighter" x-text="'S/' + $store.dash.formatNumber($store.dash.stats.dailySalesTotal)">S/0.00</span>
                                <span class="mt-3 text-[11px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest pl-1" x-text="$store.dash.stats.dailySalesCount + ' transacciones registradas hoy'"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- KPI: Ganancia Neta -->
                <div class="bg-white dark:bg-slate-800 rounded-3xl p-10 shadow-2xl shadow-slate-200/60 dark:shadow-none border border-slate-100 dark:border-slate-700 transition-all hover:translate-y-[-8px]">
                    <div class="flex flex-col gap-8 h-full justify-between">
                        <div class="flex items-center justify-between">
                            <div class="p-4 bg-emerald-50 dark:bg-emerald-900/40 rounded-2xl text-emerald-600 dark:text-emerald-400 shadow-inner">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                            </div>
                            <div class="text-[11px] font-black text-emerald-600 bg-emerald-50 dark:bg-emerald-900/30 px-5 py-2 rounded-full uppercase tracking-widest border border-emerald-100 dark:border-emerald-800/40 shadow-sm">
                                {{ $isInvestor ? 'Mi Recuperación' : 'Utilidad Neta' }}
                            </div>
                        </div>
                        <div>
                            <h3 class="text-[12px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.3em] mb-2 leading-none">
                                {{ $isInvestor ? 'Retorno' : 'Ganancia' }}
                            </h3>
                            <div class="flex flex-col">
                                <span class="text-4xl font-black text-emerald-600 dark:text-emerald-400 tracking-tighter" x-text="'S/' + $store.dash.formatNumber($store.dash.stats.dailyProfit)">S/0.00</span>
                                <div class="flex items-center gap-4 mt-6">
                                     <div class="flex-1 h-2.5 bg-slate-100 dark:bg-slate-700/50 rounded-full overflow-hidden">
                                        <div class="bg-emerald-500 h-full rounded-full transition-all duration-1000" :style="`width: ${$store.dash.stats.dailySalesTotal > 0 ? ($store.dash.stats.dailyProfit/$store.dash.stats.dailySalesTotal*100) : 0}%` "></div>
                                     </div>
                                     <span class="text-[12px] font-black text-emerald-500" x-text="($store.dash.stats.dailySalesTotal > 0 ? ($store.dash.stats.dailyProfit/$store.dash.stats.dailySalesTotal*100).toFixed(1) + '%' : '0%')"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if(!$isInvestor)
                <!-- KPI: Egresos Hoy -->
                <div class="bg-white dark:bg-slate-800 rounded-3xl p-10 shadow-2xl shadow-slate-200/60 dark:shadow-none border border-slate-100 dark:border-slate-700 transition-all hover:translate-y-[-8px] group overflow-hidden relative">
                    <div class="flex flex-col gap-8 h-full justify-between relative z-10">
                        <div class="flex items-center justify-between">
                            <div class="p-4 bg-red-50 dark:bg-red-900/40 rounded-2xl text-red-600 dark:text-red-400 shadow-inner">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                            <a href="{{ route('expenses.create') }}" class="p-3 bg-red-600 text-white rounded-xl shadow-lg opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all active:scale-90">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
                            </a>
                        </div>
                        <div>
                            <h3 class="text-[12px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.3em] mb-2 leading-none">Egresos Hoy</h3>
                            <div class="flex flex-col">
                                <span class="text-4xl font-black text-red-600 dark:text-red-500 tracking-tighter" x-text="'S/' + $store.dash.formatNumber($store.dash.stats.dailyExpenses)">S/0.00</span>
                                <span class="mt-3 text-[11px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest pl-1">Salidas de Efectivo</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- KPI: Monto en Calle (ESTILO ROBUSTO) -->
                <div @click="window.location='{{ route('credits.index') }}'" 
                    class="cursor-pointer group rounded-3xl p-10 shadow-2xl transition-all hover:scale-[1.02] active:scale-95 relative flex flex-col justify-between overflow-hidden shadow-indigo-300/30 dark:shadow-none"
                    style="background: linear-gradient(135deg, #3730a3 0%, #1e1b4b 100%) !important;">
                    
                    <div class="flex flex-col gap-8 h-full justify-between relative z-10">
                        <div class="flex items-center justify-between">
                            <div class="p-4 bg-white/10 rounded-2xl border border-white/20 shadow-inner">
                                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                            </div>
                            <span class="text-[10px] font-black bg-emerald-500 text-white px-3 py-1.5 rounded-lg uppercase tracking-widest" x-text="$store.dash.stats.pendingCreditsCount + ' Clientes'"></span>
                        </div>
                        <div>
                            <h3 class="text-[12px] font-black text-white/60 uppercase tracking-[0.4em] mb-2 leading-none pl-1">Monto en Calle</h3>
                            <div class="flex flex-col">
                                <span class="text-4xl font-black text-white tracking-tighter" x-text="'S/' + $store.dash.formatNumber($store.dash.stats.totalPendingCredits)">S/0.00</span>
                                <div class="flex items-center justify-between mt-8 pt-6 border-t border-white/10 text-[11px] font-black text-white/50 uppercase tracking-widest leading-none">
                                    <span class="flex items-center gap-2">
                                        <div class="w-2.5 h-2.5 bg-emerald-400 rounded-full animate-pulse shadow-glow"></div>
                                        Estado: Crítico
                                    </span>
                                    <svg class="w-5 h-5 group-hover:translate-x-2 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                @if($isInvestor)
                <!-- KPI: Inversión en Productos (Solo Inversor) -->
                <div @click="window.location='{{ route('products.index') }}'" 
                    class="cursor-pointer group bg-white dark:bg-slate-800 rounded-3xl p-10 shadow-2xl shadow-slate-200/60 dark:shadow-none border border-slate-100 dark:border-slate-700 transition-all hover:translate-y-[-8px]">
                    <div class="flex flex-col gap-8 h-full justify-between">
                        <div class="flex items-center justify-between">
                            <div class="p-4 bg-indigo-50 dark:bg-indigo-900/40 rounded-2xl text-indigo-600 dark:text-indigo-400 shadow-inner">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                            </div>
                            <div class="text-[11px] font-black text-indigo-600 bg-indigo-50 dark:bg-indigo-900/30 px-5 py-2 rounded-full uppercase tracking-widest border border-indigo-100 dark:border-indigo-800/40 shadow-sm">Mi Inventario</div>
                        </div>
                        <div>
                            <h3 class="text-[12px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.3em] mb-2 leading-none">Stock en Tienda</h3>
                            <div class="flex flex-col text-right">
                                <span class="text-3xl font-black text-slate-900 dark:text-white tracking-tighter">Ver Detalles</span>
                                <svg class="w-6 h-6 mt-4 ml-auto text-indigo-500 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- KPI: Ir a mis Reportes (Solo Inversor) -->
                <div @click="window.location='{{ route('investors.dashboard') }}'" 
                    class="cursor-pointer group rounded-3xl p-10 shadow-2xl transition-all hover:scale-[1.02] active:scale-95 relative flex flex-col justify-between overflow-hidden shadow-indigo-300/30 dark:shadow-none"
                    style="background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%) !important;">
                    <div class="flex flex-col gap-8 h-full justify-between relative z-10 text-white">
                        <div class="flex justify-between items-center">
                            <div class="p-4 bg-white/10 rounded-2xl border border-white/20">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                            </div>
                            <span class="text-[10px] font-black bg-white/20 px-3 py-1.5 rounded-lg uppercase tracking-widest">Historial Detallado</span>
                        </div>
                        <div>
                             <h3 class="text-[12px] font-black text-white/60 uppercase tracking-[0.4em] mb-2 leading-none pl-1">Mis Historiales</h3>
                             <p class="text-xl font-black">Pagos y Capital</p>
                             <div class="mt-8 pt-6 border-t border-white/10 flex justify-between items-center text-[11px] font-black text-white/50 uppercase tracking-widest uppercase tracking-[0.2em]">
                                 <span>Entrar a Reportes</span>
                                 <svg class="w-5 h-5 group-hover:translate-x-2 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                             </div>
                        </div>
                    </div>
                </div>
                @endif

            </div>

            {{-- ════════════════════════════════════════════════════════════
                 SECCIÓN 2: TENDENCIA SEMANAL (CON ESPACIADO FORZADO)
                 ════════════════════════════════════════════════════════════ --}}
            <div class="mt-20 bg-white dark:bg-slate-800 rounded-3xl shadow-2xl shadow-slate-200/70 dark:shadow-none border border-slate-100 dark:border-slate-700 p-16">
                <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 mb-16 px-2">
                    <div>
                        <h3 class="text-3xl font-black text-slate-900 dark:text-white tracking-tighter uppercase leading-none">
                            {{ $isInvestor ? 'Mi Recuperación Semanal' : 'Tendencia Semanal' }}
                        </h3>
                        <p class="text-[13px] text-slate-400 dark:text-slate-500 font-bold uppercase tracking-[0.4em] mt-3">
                            {{ $isInvestor ? 'Historial de ventas y retorno de productos' : 'Comparativa de flujo operativo de ingresos' }}
                        </p>
                    </div>
                    <div class="px-8 py-3.5 bg-slate-50 dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-inner flex items-center gap-4">
                        <div class="w-4 h-4 rounded-full bg-indigo-600 shadow-lg shadow-indigo-500/40"></div>
                        <span class="text-[13px] font-black text-slate-800 dark:text-slate-300 uppercase tracking-widest leading-none">Caudal de Ventas S/</span>
                    </div>
                </div>
                
                <div class="relative w-full overflow-hidden" style="height: 520px;">
                    <canvas id="salesChart"></canvas>
                </div>
            </div>

            @if(!$isInvestor)
            {{-- ════════════════════════════════════════════════════════════
                 SECCIÓN 3: ALERTAS (DOS COLUMNAS AMPLIAS)
                 ════════════════════════════════════════════════════════════ --}}
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 pt-8 pb-20">
                
                <!-- CXP -->
                <div class="bg-white dark:bg-slate-800 rounded-3xl shadow-2xl shadow-slate-200/60 dark:shadow-none border border-slate-100 dark:border-slate-700 overflow-hidden flex flex-col h-full ring-1 ring-slate-100 dark:ring-slate-800">
                    <div class="p-10 pb-6 border-b border-slate-50 dark:border-slate-800 flex justify-between items-center bg-slate-50/30 dark:bg-slate-900/20">
                        <h3 class="text-[14px] font-black text-red-700 dark:text-red-400 uppercase tracking-[0.25em] flex items-center gap-4">
                            <div class="w-3.5 h-3.5 bg-red-600 rounded-full animate-pulse shadow-glow-red"></div>
                            Egresos Próximos (CXP)
                        </h3>
                        <a href="{{ route('debts.index') }}" class="text-[11px] font-black text-red-600 bg-red-50 dark:bg-red-900/30 px-6 py-3 rounded-xl border border-red-100 dark:border-red-900/30 uppercase tracking-widest hover:bg-red-600 hover:text-white transition-all shadow-sm">Gestión</a>
                    </div>
                    <div class="p-10 pt-6 flex-1 overflow-y-auto custom-scrollbar min-h-[380px]">
                        <template x-if="$store.dash.stats.upcomingInstallments && $store.dash.stats.upcomingInstallments.length > 0">
                            <div class="space-y-6">
                                <template x-for="inst in $store.dash.stats.upcomingInstallments" :key="inst.id">
                                    <div class="flex items-center justify-between p-8 bg-slate-50/50 dark:bg-slate-900/40 rounded-2xl border border-slate-100 dark:border-slate-800 hover:border-red-400 dark:hover:border-red-600 hover:shadow-xl hover:translate-x-1 transition-all group">
                                        <div class="flex items-center gap-6">
                                            <div class="w-16 h-16 bg-white dark:bg-slate-800 rounded-2xl flex flex-col items-center justify-center border border-slate-200 dark:border-slate-700 shadow-sm transition-transform group-hover:scale-110">
                                                <span class="text-[11px] font-black text-slate-400 uppercase leading-none">C-</span>
                                                <span class="text-2xl font-black text-red-700 dark:text-red-400 leading-none mt-1" x-text="inst.installment_number"></span>
                                            </div>
                                            <div>
                                                <p class="text-base font-black text-slate-800 dark:text-white uppercase truncate max-w-[200px]" x-text="inst.business_debt.provider_name"></p>
                                                <p class="text-[11px] text-red-500 font-bold uppercase mt-1 tracking-[0.2em]" x-text="'Vencimiento: ' + $store.dash.formatDate(inst.due_date)"></p>
                                            </div>
                                        </div>
                                        <div class="text-right">
                                            <p class="text-xl font-black text-red-700 dark:text-red-500" x-text="'S/' + $store.dash.formatNumber(inst.amount)"></p>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
                </div>

                <!-- CXC -->
                <div class="bg-white dark:bg-slate-800 rounded-3xl shadow-2xl shadow-slate-200/60 dark:shadow-none border border-slate-100 dark:border-slate-700 overflow-hidden flex flex-col h-full ring-1 ring-slate-100 dark:ring-slate-800">
                    <div class="p-10 pb-6 border-b border-slate-50 dark:border-slate-800 flex justify-between items-center bg-slate-50/30 dark:bg-slate-900/20">
                        <h3 class="text-[14px] font-black text-indigo-700 dark:text-indigo-400 uppercase tracking-[0.25em] flex items-center gap-4">
                            <div class="w-3.5 h-3.5 bg-indigo-600 rounded-full shadow-glow-indigo"></div>
                            Recordatorios de Cobro (CXC)
                        </h3>
                        <a href="{{ route('credits.index') }}" class="text-[11px] font-black text-indigo-600 bg-indigo-50 dark:bg-indigo-900/30 px-6 py-3 rounded-xl border border-indigo-100 dark:border-indigo-900/30 uppercase tracking-widest hover:bg-indigo-600 hover:text-white transition-all shadow-sm">Cobranzas</a>
                    </div>
                    <div class="p-10 pt-6 flex-1 overflow-y-auto custom-scrollbar min-h-[380px]">
                        <template x-if="$store.dash.stats.clientReminders && $store.dash.stats.clientReminders.length > 0">
                            <div class="space-y-6">
                                <template x-for="client in $store.dash.stats.clientReminders" :key="client.id">
                                    <div class="flex items-center justify-between p-8 bg-slate-50/50 dark:bg-slate-900/40 rounded-2xl border border-slate-100 dark:border-slate-800 hover:border-indigo-400 dark:hover:border-indigo-600 hover:shadow-xl hover:translate-x-1 transition-all group">
                                        <div class="flex items-center gap-6">
                                            <div class="w-16 h-16 bg-indigo-600 rounded-2xl flex items-center justify-center font-black text-white shadow-lg transition-transform group-hover:scale-110">
                                                <span class="text-2xl" x-text="client.name.charAt(0)"></span>
                                            </div>
                                            <div>
                                                <p class="text-base font-black text-slate-800 dark:text-white uppercase truncate max-w-[200px]" x-text="client.name"></p>
                                                <p class="text-[11px] text-indigo-500 font-bold uppercase mt-1 tracking-[0.2em]" x-text="'Cobro el: ' + $store.dash.formatDate(client.next_due_date)"></p>
                                            </div>
                                        </div>
                                        <div class="text-right">
                                            <p class="text-xl font-black text-indigo-600 dark:text-indigo-400" x-text="'S/' + $store.dash.formatNumber(client.credit_balance)"></p>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
                </div>

            </div>
            @endif

            {{-- Footer info v5.0 --}}
            <div class="flex flex-col sm:flex-row justify-between items-center py-20 border-t border-slate-100 dark:border-slate-800 gap-10">
                <p class="text-[12px] font-black text-slate-300 dark:text-slate-600 uppercase tracking-[0.6em] flex items-center gap-4">
                    <span class="w-3 h-3 rounded-full bg-emerald-500 shadow-glow"></span>
                    Smart Terminal POS Sincronizado v5.0
                </p>
                <div class="px-8 py-3.5 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-200 dark:border-slate-700 text-[12px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-[0.3em] flex items-center gap-4 shadow-inner transition-colors">
                    <span>Sinc:</span>
                    <span class="text-indigo-600 dark:text-indigo-400 font-black" x-text="$store.dash.stats.lastUpdate">00:00:00</span>
                </div>
            </div>

        </div>
    </div>

    <!-- Global Styles Reforzados -->
    <style>
        [x-cloak] { display: none !important; }
        .custom-scrollbar::-webkit-scrollbar { width: 5px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 20px; }
        .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }
        .shadow-glow { box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }
        .shadow-glow-red { box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); }
        .shadow-glow-indigo { box-shadow: 0 0 20px rgba(79, 70, 229, 0.3); }
        body { transition: background-color 0.5s ease; }
    </style>

    {{-- Bundle independiente de Chart.js (sin Alpine para evitar recursión) --}}
    @vite(['resources/js/charts.js'])

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.store('dash', {
                loading: false,
                chart: null,
                isDarkMode: document.documentElement.classList.contains('dark'),
                
                // DATA ORIGINAL DE PHP
                originalStats: {
                    dailySalesTotal: {{ (float)$dailySalesTotal }},
                    dailySalesCount: {{ (int)$dailySalesCount }},
                    weeklySalesTotal: {{ (float)$weeklySalesTotal }},
                    dailyProfit: {{ (float)$dailyProfit }},
                    dailyExpenses: {{ (float)$dailyExpenses }},
                    growthPercentage: {{ (float)$growthPercentage }},
                    labels: @json($labels),
                    values: @json($values),
                    upcomingInstallments: @json($upcomingInstallments),
                    clientReminders: @json($clientReminders),
                    pendingCreditsCount: {{ (int)$pendingCreditsCount }},
                    totalPendingCredits: {{ (float)$totalPendingCredits }},
                    lastUpdate: '{{ $lastUpdate ?? now()->format("H:i:s") }}'
                },

                // Proxy para Alpine
                get stats() {
                    return this.originalStats;
                },
                set stats(val) {
                    this.originalStats = val;
                },

                async refreshStats() {
                    if (this.loading) return;
                    this.loading = true;
                    try {
                        const response = await fetch('{{ route('dashboard.stats') }}');
                        const data = await response.json();
                        
                        // DEEP CLONE PARA ROMPER REACTIVIDAD
                        this.stats = JSON.parse(JSON.stringify(data));
                        
                        this.updateChart(
                            JSON.parse(JSON.stringify(data.labels)), 
                            JSON.parse(JSON.stringify(data.values))
                        );
                    } catch (e) {
                        console.error('Core Logic Fault:', e);
                    } finally {
                        this.loading = false;
                    }
                },

                initChart() {
                    const ctx = document.getElementById('salesChart');
                    if (!ctx) return;

                    // DESTROY PREVIO
                    if (this.chart) {
                        this.chart.destroy();
                        this.chart = null;
                    }

                    const accentColor = '#4f46e5';
                    const darkModeActive = document.documentElement.classList.contains('dark');
                    const textColor = darkModeActive ? '#94a3b8' : '#64748b';
                    const gridColor = darkModeActive ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.03)';

                    const gr = ctx.getContext('2d').createLinearGradient(0, 0, 0, 480);
                    gr.addColorStop(0, 'rgba(79, 70, 229, 0.45)');
                    gr.addColorStop(0.7, 'rgba(79, 70, 229, 0.05)');
                    gr.addColorStop(1, 'rgba(79, 70, 229, 0)');

                    // USAMOS DATA CLONADA PARA EL GRÁFICO
                    const chartData = JSON.parse(JSON.stringify(this.stats));

                    this.chart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: chartData.labels,
                            datasets: [{
                                label: 'Ingresos Brutos',
                                data: chartData.values,
                                borderColor: accentColor,
                                backgroundColor: gr,
                                borderWidth: 8,
                                tension: 0.45,
                                fill: true,
                                pointBackgroundColor: '#fff',
                                pointBorderWidth: 4,
                                pointRadius: 6,
                                pointHoverRadius: 12,
                                pointHoverBorderWidth: 6
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { display: false },
                                tooltip: {
                                    backgroundColor: '#0f172a',
                                    padding: 24,
                                    cornerRadius: 24,
                                    titleFont: { size: 14, weight: '900' },
                                    bodyFont: { size: 18, weight: '900' },
                                    callbacks: { label: (c) => ` S/ ${this.formatNumber(c.parsed.y)}` }
                                }
                            },
                            scales: {
                                y: { 
                                    beginAtZero: true, 
                                    grid: { color: gridColor }, 
                                    ticks: { color: textColor, font: { weight: '900', size: 13 }, padding: 20 } 
                                },
                                x: { 
                                    grid: { display: false }, 
                                    ticks: { color: textColor, font: { weight: '900', size: 13 }, padding: 20 } 
                                }
                            },
                            interaction: { intersect: false, mode: 'index' }
                        }
                    });
                },

                updateChart(labels, values) {
                    if (this.chart) {
                        this.chart.data.labels = labels;
                        this.chart.data.datasets[0].data = values;
                        this.chart.update('none');
                    }
                },

                formatNumber(val) {
                    return parseFloat(val || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                },

                formatDate(dateStr) {
                    if (!dateStr) return '';
                    const d = new Date(dateStr);
                    return d.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: '2-digit' });
                }
            });

            // Delay estratégico para asegurar que el DOM y el Store estén listos
            setTimeout(() => {
                const store = Alpine.store('dash');
                if (store) {
                    store.initChart();
                    if (window.dashboardTimer) clearInterval(window.dashboardTimer);
                    window.dashboardTimer = setInterval(() => store.refreshStats(), 60000);
                }
            }, 500);
        });
    </script>
</x-app-layout>
