<?php $__env->startSection('title', 'Dashboard'); ?>
<?php $__env->startSection('header', 'Panel de Control'); ?>

<?php $__env->startSection('content'); ?>
<?php $moneda = $empresaGlobal->moneda ?? 'S/'; ?>

<!-- Saludo -->
<div class="mb-5 sm:mb-6">
    <h1 class="text-xl sm:text-2xl font-bold text-slate-800">¡Hola, <?php echo e(explode(' ', auth()->user()->name)[0]); ?>! 👋</h1>
    <p class="text-sm sm:text-base text-slate-500">Resumen de tu negocio - <?php echo e(now()->translatedFormat('l, d \d\e F')); ?></p>
</div>

<!-- Tarjetas de estadísticas -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-5 mb-5 sm:mb-6">
    <div class="gradient-card-1 rounded-2xl p-4 sm:p-5 text-white shadow-lg hover:shadow-xl transition transform hover:-translate-y-1">
        <div class="flex justify-between items-start mb-2 sm:mb-3">
            <div class="bg-white/20 rounded-xl w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center">
                <i class="fas fa-coins text-lg sm:text-2xl"></i>
            </div>
            <span class="text-[10px] sm:text-xs bg-white/20 px-2 py-1 rounded-full">HOY</span>
        </div>
        <p class="text-white/80 text-xs sm:text-sm">Ventas del día</p>
        <h3 class="text-xl sm:text-3xl font-bold mt-1 break-all"><?php echo e($moneda); ?> <?php echo e(number_format($stats['ventas_hoy'], 2)); ?></h3>
        <p class="text-white/70 text-[10px] sm:text-xs mt-2"><i class="fas fa-receipt mr-1"></i><?php echo e($stats['cantidad_ventas_hoy']); ?> tickets</p>
    </div>

    <div class="gradient-card-2 rounded-2xl p-4 sm:p-5 text-white shadow-lg hover:shadow-xl transition transform hover:-translate-y-1">
        <div class="flex justify-between items-start mb-2 sm:mb-3">
            <div class="bg-white/20 rounded-xl w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center">
                <i class="fas fa-chart-line text-lg sm:text-2xl"></i>
            </div>
            <span class="text-[10px] sm:text-xs bg-white/20 px-2 py-1 rounded-full">MES</span>
        </div>
        <p class="text-white/80 text-xs sm:text-sm">Ventas del mes</p>
        <h3 class="text-xl sm:text-3xl font-bold mt-1 break-all"><?php echo e($moneda); ?> <?php echo e(number_format($stats['ventas_mes'], 2)); ?></h3>
        <p class="text-white/70 text-[10px] sm:text-xs mt-2"><i class="fas fa-receipt mr-1"></i><?php echo e($stats['cantidad_ventas_mes']); ?> tickets</p>
    </div>

    <div class="gradient-card-3 rounded-2xl p-4 sm:p-5 text-white shadow-lg hover:shadow-xl transition transform hover:-translate-y-1">
        <div class="flex justify-between items-start mb-2 sm:mb-3">
            <div class="bg-white/20 rounded-xl w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center">
                <i class="fas fa-box text-lg sm:text-2xl"></i>
            </div>
            <span class="text-[10px] sm:text-xs bg-white/20 px-2 py-1 rounded-full">STOCK</span>
        </div>
        <p class="text-white/80 text-xs sm:text-sm">Productos</p>
        <h3 class="text-xl sm:text-3xl font-bold mt-1"><?php echo e($stats['productos_total']); ?></h3>
        <p class="text-white/70 text-[10px] sm:text-xs mt-2">
            <i class="fas fa-exclamation-triangle mr-1"></i><?php echo e($stats['productos_stock_bajo']); ?> con stock bajo
        </p>
    </div>

    <div class="gradient-card-4 rounded-2xl p-4 sm:p-5 text-white shadow-lg hover:shadow-xl transition transform hover:-translate-y-1">
        <div class="flex justify-between items-start mb-2 sm:mb-3">
            <div class="bg-white/20 rounded-xl w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center">
                <i class="fas fa-users text-lg sm:text-2xl"></i>
            </div>
            <span class="text-[10px] sm:text-xs bg-white/20 px-2 py-1 rounded-full">ACTIVOS</span>
        </div>
        <p class="text-white/80 text-xs sm:text-sm">Clientes</p>
        <h3 class="text-xl sm:text-3xl font-bold mt-1"><?php echo e($stats['clientes_total']); ?></h3>
        <p class="text-white/70 text-[10px] sm:text-xs mt-2"><i class="fas fa-clock mr-1"></i><?php echo e($stats['productos_vencer']); ?> por vencer</p>
    </div>
</div>

<!-- Gráficos principales -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5 mb-6">
    <div class="lg:col-span-2 bg-white rounded-2xl shadow-md p-6">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="font-bold text-slate-800">Ventas - Últimos 7 días</h3>
                <p class="text-sm text-slate-500">Evolución de las ventas diarias</p>
            </div>
            <div class="bg-emerald-50 text-emerald-700 px-3 py-1 rounded-full text-xs font-semibold w-fit">
                <i class="fas fa-arrow-up mr-1"></i>En tiempo real
            </div>
        </div>
        <div class="relative" style="height: 280px;">
            <canvas id="ventasChart"></canvas>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-md p-5 sm:p-6">
        <h3 class="font-bold text-slate-800 mb-4">Ventas por Categoría</h3>
        <div class="relative" style="height: 200px;">
            <canvas id="categoriasChart"></canvas>
        </div>
        <div class="mt-4 space-y-2 max-h-32 overflow-y-auto">
            <?php $__currentLoopData = $ventasCategoria; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="flex items-center justify-between text-sm">
                    <div class="flex items-center gap-2">
                        <span class="w-3 h-3 rounded-full" style="background: <?php echo e($cat->color); ?>"></span>
                        <span class="text-slate-700"><?php echo e($cat->nombre); ?></span>
                    </div>
                    <span class="font-semibold text-slate-800"><?php echo e($moneda); ?><?php echo e(number_format($cat->total, 2)); ?></span>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</div>

<!-- ====== NUEVOS GRÁFICOS ESTADÍSTICOS ====== -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5 mb-6">
    <!-- Gráfico: Ventas por Día de la Semana -->
    <div class="lg:col-span-2 bg-white rounded-2xl shadow-md p-5 sm:p-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-2">
            <div>
                <h3 class="font-bold text-slate-800 flex items-center gap-2">
                    <span class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center">
                        <i class="fas fa-calendar-week text-purple-600 text-sm"></i>
                    </span>
                    Ventas por Día de la Semana
                </h3>
                <p class="text-xs sm:text-sm text-slate-500 ml-10">Últimos 30 días - identifica tus días más fuertes</p>
            </div>
            <div class="bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-xs font-semibold w-fit">
                <i class="fas fa-chart-bar mr-1"></i>30 días
            </div>
        </div>
        <div class="relative" style="min-height:240px;">
            <canvas id="diaSemanaChart"></canvas>
        </div>
    </div>

    <!-- Gráfico: Distribución por Forma de Pago -->
    <div class="bg-white rounded-2xl shadow-md p-5 sm:p-6">
        <div class="mb-4">
            <h3 class="font-bold text-slate-800 flex items-center gap-2">
                <span class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
                    <i class="fas fa-credit-card text-blue-600 text-sm"></i>
                </span>
                Forma de Pago
            </h3>
            <p class="text-xs text-slate-500 ml-10">Mes actual</p>
        </div>
        <div class="relative" style="min-height:180px;">
            <canvas id="formaPagoChart"></canvas>
        </div>
        <div class="mt-4 space-y-2">
            <?php $__currentLoopData = $formasPago; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $fp): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php
                    $iconos = ['efectivo' => ['fa-money-bill-wave', '#10b981'], 'tarjeta' => ['fa-credit-card', '#3b82f6'], 'transferencia' => ['fa-mobile-alt', '#a855f7'], 'credito' => ['fa-handshake', '#f59e0b'], 'mixto' => ['fa-coins', '#ec4899']];
                    $info = $iconos[$fp->forma_pago] ?? ['fa-coins', '#64748b'];
                ?>
                <div class="flex items-center justify-between text-sm">
                    <div class="flex items-center gap-2">
                        <span class="w-7 h-7 rounded-lg flex items-center justify-center" style="background:<?php echo e($info[1]); ?>20">
                            <i class="fas <?php echo e($info[0]); ?> text-xs" style="color:<?php echo e($info[1]); ?>"></i>
                        </span>
                        <span class="text-slate-700 capitalize"><?php echo e($fp->forma_pago); ?></span>
                    </div>
                    <div class="text-right">
                        <p class="font-bold text-slate-800 text-sm"><?php echo e($moneda); ?><?php echo e(number_format($fp->total, 2)); ?></p>
                        <p class="text-[10px] text-slate-400"><?php echo e($fp->cantidad); ?> tickets</p>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php if($formasPago->isEmpty()): ?>
                <p class="text-center text-slate-400 text-sm py-3">Sin datos del mes</p>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- Top Clientes -->
<div class="bg-white rounded-2xl shadow-md p-5 sm:p-6 mb-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-2">
        <div>
            <h3 class="font-bold text-slate-800 flex items-center gap-2">
                <span class="w-8 h-8 rounded-lg bg-pink-100 flex items-center justify-center">
                    <i class="fas fa-crown text-pink-600 text-sm"></i>
                </span>
                Top 5 Clientes del Mes
            </h3>
            <p class="text-xs sm:text-sm text-slate-500 ml-10">Clientes que más han gastado este mes</p>
        </div>
        <a href="<?php echo e(route('clientes.index')); ?>" class="text-sm text-emerald-600 hover:text-emerald-700 w-fit">Ver todos →</a>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
        <?php $__empty_1 = true; $__currentLoopData = $topClientes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $cl): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <div class="relative bg-gradient-to-br <?php echo e(['from-yellow-50 to-amber-50', 'from-slate-50 to-gray-50', 'from-orange-50 to-red-50', 'from-blue-50 to-indigo-50', 'from-emerald-50 to-teal-50'][$i]); ?> rounded-xl p-4 hover:shadow-md transition">
                <div class="absolute top-2 right-2 w-7 h-7 rounded-full flex items-center justify-center text-white text-xs font-bold
                    <?php echo e(['bg-yellow-500', 'bg-slate-400', 'bg-orange-600', 'bg-blue-500', 'bg-emerald-500'][$i]); ?>">
                    <?php echo e($i + 1); ?>

                </div>
                <div class="w-12 h-12 gradient-primary rounded-full flex items-center justify-center text-white font-bold text-lg mb-2">
                    <?php echo e(strtoupper(substr($cl->nombres, 0, 1))); ?>

                </div>
                <p class="font-semibold text-slate-800 text-sm truncate"><?php echo e($cl->nombres); ?> <?php echo e($cl->apellidos); ?></p>
                <p class="text-xl font-bold text-emerald-600 mt-1"><?php echo e($moneda); ?><?php echo e(number_format($cl->total_gastado, 0)); ?></p>
                <div class="flex items-center justify-between mt-2 text-xs">
                    <span class="text-slate-500"><i class="fas fa-shopping-bag mr-1"></i><?php echo e($cl->cantidad_compras); ?></span>
                    <span class="text-yellow-600"><i class="fas fa-star mr-1"></i><?php echo e($cl->puntos_fidelidad); ?></span>
                </div>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <p class="col-span-full text-center text-slate-400 py-6 text-sm">No hay compras registradas con clientes este mes</p>
        <?php endif; ?>
    </div>
</div>

<!-- Productos top y stock crítico -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-6">
    <div class="bg-white rounded-2xl shadow-md p-5 sm:p-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-slate-800 text-sm sm:text-base"><i class="fas fa-trophy text-yellow-500 mr-2"></i>Más vendidos del mes</h3>
            <a href="<?php echo e(route('reportes.productos')); ?>" class="text-xs sm:text-sm text-emerald-600 hover:text-emerald-700">Ver todos →</a>
        </div>
        <div class="space-y-3">
            <?php $__empty_1 = true; $__currentLoopData = $productosTop; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $p): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div class="flex items-center gap-3 p-3 hover:bg-slate-50 rounded-lg transition">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center text-white font-bold flex-shrink-0
                        <?php echo e($i == 0 ? 'bg-yellow-500' : ($i == 1 ? 'bg-slate-400' : ($i == 2 ? 'bg-orange-600' : 'bg-slate-300'))); ?>">
                        <?php echo e($i + 1); ?>

                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-semibold text-slate-800 truncate"><?php echo e($p->nombre); ?></p>
                        <p class="text-xs text-slate-500"><?php echo e($p->codigo); ?> • <?php echo e(number_format($p->total_vendido, 0)); ?> unidades</p>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <p class="font-bold text-emerald-600"><?php echo e($moneda); ?><?php echo e(number_format($p->total_ingresos, 2)); ?></p>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <p class="text-center text-slate-400 py-8">No hay ventas registradas este mes</p>
            <?php endif; ?>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-md p-5 sm:p-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-slate-800 text-sm sm:text-base"><i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>Stock crítico</h3>
            <a href="<?php echo e(route('productos.index', ['estado' => 'stock_bajo'])); ?>" class="text-xs sm:text-sm text-emerald-600 hover:text-emerald-700">Ver todos →</a>
        </div>
        <div class="space-y-3">
            <?php $__empty_1 = true; $__currentLoopData = $stockCritico; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $p): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div class="flex items-center gap-3 p-3 bg-red-50 rounded-lg">
                    <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-box text-red-500"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-semibold text-slate-800 truncate"><?php echo e($p->nombre); ?></p>
                        <p class="text-xs text-slate-500"><?php echo e($p->codigo); ?> • Mín: <?php echo e(number_format($p->stock_minimo, 2)); ?></p>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <p class="text-2xl font-bold text-red-600"><?php echo e(number_format($p->stock, 2)); ?></p>
                        <p class="text-xs text-slate-500"><?php echo e($p->unidad_medida); ?></p>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="text-center py-8 text-emerald-600">
                    <i class="fas fa-check-circle text-4xl mb-2"></i>
                    <p>¡Todos los productos tienen stock adecuado!</p>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- Últimas ventas -->
<div class="bg-white rounded-2xl shadow-md p-5 sm:p-6">
    <div class="flex justify-between items-center mb-4">
        <h3 class="font-bold text-slate-800 text-sm sm:text-base"><i class="fas fa-history text-blue-500 mr-2"></i>Últimas ventas</h3>
        <a href="<?php echo e(route('ventas.index')); ?>" class="text-xs sm:text-sm text-emerald-600 hover:text-emerald-700">Ver todas →</a>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="text-xs text-slate-500 uppercase border-b border-slate-200">
                <tr>
                    <th class="text-left py-2 px-2">Ticket</th>
                    <th class="text-left py-2 px-2">Cliente</th>
                    <th class="text-left py-2 px-2 hide-mobile">Cajero</th>
                    <th class="text-left py-2 px-2 hide-mobile">Pago</th>
                    <th class="text-right py-2 px-2">Total</th>
                    <th class="text-left py-2 px-2 hide-mobile">Fecha</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <?php $__empty_1 = true; $__currentLoopData = $ultimasVentas; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $v): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <tr class="border-b border-slate-100 hover:bg-slate-50">
                        <td class="py-3 px-2 font-mono text-xs font-semibold text-slate-700"><?php echo e($v->numero_ticket); ?></td>
                        <td class="py-3 px-2"><?php echo e($v->cliente?->nombre_completo ?? 'Cliente Genérico'); ?></td>
                        <td class="py-3 px-2 hide-mobile"><?php echo e($v->user->name); ?></td>
                        <td class="py-3 px-2 hide-mobile">
                            <span class="inline-block px-2 py-1 bg-blue-50 text-blue-700 rounded text-xs"><?php echo e(ucfirst($v->forma_pago)); ?></span>
                        </td>
                        <td class="py-3 px-2 text-right font-semibold text-emerald-600"><?php echo e($moneda); ?> <?php echo e(number_format($v->total, 2)); ?></td>
                        <td class="py-3 px-2 text-xs text-slate-500 hide-mobile"><?php echo e($v->fecha_venta->diffForHumans()); ?></td>
                        <td class="py-3 px-2 text-right">
                            <a href="<?php echo e(route('ventas.show', $v->id)); ?>" class="text-emerald-600 hover:text-emerald-700">
                                <i class="fas fa-eye"></i>
                            </a>
                        </td>
                    </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <tr><td colspan="7" class="text-center py-8 text-slate-400">Sin ventas registradas aún</td></tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
const ventasData = <?php echo json_encode($ventasSemana, 15, 512) ?>;
const labels = ventasData.map(v => {
    const d = new Date(v.fecha);
    return d.toLocaleDateString('es', { day:'numeric', month:'short' });
});
const valores = ventasData.map(v => parseFloat(v.total));

new Chart(document.getElementById('ventasChart'), {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: 'Ventas',
            data: valores,
            borderColor: '#10b981',
            backgroundColor: 'rgba(16,185,129,0.1)',
            fill: true,
            tension: 0.4,
            pointBackgroundColor: '#10b981',
            pointBorderColor: '#fff',
            pointBorderWidth: 2,
            pointRadius: 5,
            pointHoverRadius: 7,
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false },
            tooltip: {
                backgroundColor: '#1e293b',
                padding: 12,
                cornerRadius: 8,
                callbacks: {
                    label: ctx => '<?php echo e($moneda); ?> ' + parseFloat(ctx.parsed.y).toFixed(2)
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: { color: '#f1f5f9' },
                ticks: { callback: v => '<?php echo e($moneda); ?>' + v, font: { size: 11 } }
            },
            x: {
                grid: { display: false },
                ticks: { font: { size: 11 } }
            }
        }
    }
});

const categoriasData = <?php echo json_encode($ventasCategoria, 15, 512) ?>;
new Chart(document.getElementById('categoriasChart'), {
    type: 'doughnut',
    data: {
        labels: categoriasData.map(c => c.nombre),
        datasets: [{
            data: categoriasData.map(c => parseFloat(c.total)),
            backgroundColor: categoriasData.map(c => c.color),
            borderWidth: 2,
            borderColor: '#fff',
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        cutout: '65%'
    }
});

// === NUEVO: Gráfico Ventas por Día de la Semana ===
const diaSemanaData = <?php echo json_encode($ventasPorDia, 15, 512) ?>;
const ctxDiaSemana = document.getElementById('diaSemanaChart').getContext('2d');
const gradient1 = ctxDiaSemana.createLinearGradient(0, 0, 0, 250);
gradient1.addColorStop(0, 'rgba(168, 85, 247, 0.85)');
gradient1.addColorStop(1, 'rgba(168, 85, 247, 0.3)');

new Chart(ctxDiaSemana, {
    type: 'bar',
    data: {
        labels: diaSemanaData.map(d => d.dia.substring(0, 3)),
        datasets: [{
            label: 'Ventas (' + '<?php echo e($moneda); ?>' + ')',
            data: diaSemanaData.map(d => parseFloat(d.total)),
            backgroundColor: gradient1,
            borderColor: '#a855f7',
            borderWidth: 0,
            borderRadius: 10,
            borderSkipped: false,
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false },
            tooltip: {
                backgroundColor: '#1e293b',
                padding: 12,
                cornerRadius: 8,
                callbacks: {
                    label: ctx => '<?php echo e($moneda); ?> ' + parseFloat(ctx.parsed.y).toFixed(2) +
                        ' (' + diaSemanaData[ctx.dataIndex].cantidad + ' tickets)'
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: { color: '#f1f5f9' },
                ticks: {
                    callback: v => '<?php echo e($moneda); ?>' + v,
                    font: { size: 11 }
                }
            },
            x: {
                grid: { display: false },
                ticks: { font: { size: 11 } }
            }
        }
    }
});

// === NUEVO: Gráfico Forma de Pago (Donut) ===
const fpData = <?php echo json_encode($formasPago, 15, 512) ?>;
const fpColors = {
    'efectivo': '#10b981',
    'tarjeta': '#3b82f6',
    'transferencia': '#a855f7',
    'credito': '#f59e0b',
    'mixto': '#ec4899'
};

if (fpData.length > 0) {
    new Chart(document.getElementById('formaPagoChart'), {
        type: 'doughnut',
        data: {
            labels: fpData.map(f => f.forma_pago.charAt(0).toUpperCase() + f.forma_pago.slice(1)),
            datasets: [{
                data: fpData.map(f => parseFloat(f.total)),
                backgroundColor: fpData.map(f => fpColors[f.forma_pago] || '#64748b'),
                borderWidth: 3,
                borderColor: '#fff',
                hoverOffset: 8,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: '#1e293b',
                    padding: 12,
                    cornerRadius: 8,
                    callbacks: {
                        label: ctx => ctx.label + ': <?php echo e($moneda); ?> ' + parseFloat(ctx.parsed).toFixed(2)
                    }
                }
            },
            cutout: '70%'
        }
    });
}

// Hacer responsivos los charts también el de la línea de ventas semanales y categorías:
[document.getElementById('ventasChart')?.chart, document.getElementById('categoriasChart')?.chart].forEach(c => {
    if (c && c.options) c.options.maintainAspectRatio = false;
});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\TVP\ec_tvp-minimarket\resources\views/dashboard/index.blade.php ENDPATH**/ ?>