<?= $this->extend('layouts/main_layout') ?>
<?= $this->section('content') ?>

<div class="flex justify-between items-center mb-7">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>
        <p class="text-sm text-gray-500 mt-0.5">Panel de control - Vendedor</p>
    </div>
    <a href="<?= site_url('sales/create') ?>" class="bg-emerald-600 hover:bg-emerald-700 text-white px-5 py-2.5 rounded-lg no-underline inline-flex items-center gap-2.5 text-sm font-semibold shadow-sm transition">
        <i class="bi bi-cart-plus"></i> Nueva Venta
    </a>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-7">
    <a href="<?= site_url('sales') ?>" class="bg-emerald-300 rounded-xl shadow-sm border-l-4 border-emerald-500 p-5 no-underline block card-hover">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-gray-500 text-xs font-semibold uppercase tracking-wide">Mis Ventas Hoy</p>
                <div class="flex items-baseline gap-2 mt-1.5">
                    <p class="text-3xl font-extrabold text-gray-900"><?= $mySalesToday['count'] ?></p>
                    <span class="text-gray-400 text-sm">ventas</span>
                </div>
                <span class="text-gray-500 text-xs font-medium mt-3 block">S/ <?= number_format($mySalesToday['total'], 2) ?></span>
            </div>
            <div class="w-12 h-12 bg-emerald-400 rounded-xl flex items-center justify-center">
                <i class="bi bi-cart-check text-xl text-emerald-700"></i>
            </div>
        </div>
    </a>
    <a href="<?= site_url('products') ?>" class="bg-red-300 rounded-xl shadow-sm border-l-4 border-red-500 p-5 no-underline block card-hover">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-gray-500 text-xs font-semibold uppercase tracking-wide">Stock Bajo</p>
                <p class="text-3xl font-extrabold text-gray-900 mt-1.5"><?= $lowStockCount ?></p>
            </div>
            <div class="w-12 h-12 bg-red-400 rounded-xl flex items-center justify-center">
                <i class="bi bi-exclamation-triangle text-xl text-red-700"></i>
            </div>
        </div>
    </a>
</div>

<?php if ($lowStockCount > 0): ?>
<div class="bg-red-100 border border-red-200 rounded-xl p-4 mb-7 flex items-center gap-3">
    <span class="w-9 h-9 rounded-lg bg-rose-100 flex items-center justify-center text-red-700"><i class="bi bi-exclamation-circle text-lg"></i></span>
    <span class="text-sm font-medium text-red-800"><strong>Alerta!</strong> Hay <?= $lowStockCount ?> producto(s) con stock bajo.</span>
</div>
<?php endif; ?>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-5 mb-6">
    <div class="lg:col-span-2 bg-[#EBDF00] rounded-xl shadow-sm p-6">
        <div class="flex items-center gap-2.5 mb-5">
            <div class="w-9 h-9 bg-[#D4C800] rounded-lg flex items-center justify-center text-gray-900"><i class="bi bi-bar-chart-line text-lg"></i></div>
            <h3 class="font-semibold text-gray-900">Mis Ventas Ultimos 7 Dias</h3>
        </div>
        <canvas id="mySalesWeekChart" height="120"></canvas>
    </div>
    <div class="bg-slate-100 rounded-xl shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100">
            <h5 class="font-semibold text-gray-900 flex items-center gap-2">
                <div class="w-9 h-9 bg-[#EBDF00]/20 rounded-lg flex items-center justify-center text-[#EBDF00]"><i class="bi bi-clock-history text-lg"></i></div>
                Mis Ventas Recientes
            </h5>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-100">
                        <th class="text-left px-6 py-3.5 font-semibold text-gray-500 text-xs uppercase tracking-wider">#</th>
                        <th class="text-right px-6 py-3.5 font-semibold text-gray-500 text-xs uppercase tracking-wider">Total</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    <?php if (empty($myRecentSales)): ?>
                    <tr>
                        <td colspan="2" class="text-center text-gray-400 py-10">
                            <i class="bi bi-inbox text-3xl block mb-2 opacity-40"></i>
                            <span class="text-sm">No has realizado ventas aun</span>
                        </td>
                    </tr>
                    <?php else: ?>
                    <?php foreach ($myRecentSales as $sale): ?>
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-3"><span class="bg-emerald-100 text-emerald-700 text-xs font-semibold px-2.5 py-1 rounded-lg">#<?= $sale['id_venta'] ?></span></td>
                        <td class="px-6 py-3 text-right font-extrabold text-gray-900">S/ <?= number_format($sale['total'], 2) ?></td>
                    </tr>
                    <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
<?php
$weekLabels = json_encode($chartMySalesWeek['labels']);
$weekData = json_encode($chartMySalesWeek['data']);
?>

Chart.defaults.locale = 'es';
Chart.defaults.font.family = "'Inter', sans-serif";

new Chart(document.getElementById('mySalesWeekChart'), {
    type: 'line',
    data: {
        labels: <?= $weekLabels ?>,
        datasets: [{
            label: 'Mis Ventas (S/)',
            data: <?= $weekData ?>,
            borderColor: '#033A40',
            backgroundColor: function(ctx) {
                const g = ctx.chart.ctx.createLinearGradient(0, 0, 0, ctx.chart.height);
                g.addColorStop(0, 'rgba(3,58,64,0.2)');
                g.addColorStop(1, 'rgba(3,58,64,0.02)');
                return g;
            },
            fill: true, tension: 0.4,
            pointBackgroundColor: '#033A40', pointBorderColor: '#fff', pointBorderWidth: 3, pointRadius: 5, pointHoverRadius: 7,
            borderWidth: 3,
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: false },
            tooltip: { backgroundColor: '#1e293b', titleColor: '#fff', bodyColor: '#fff', padding: 12, cornerRadius: 12, callbacks: { label: function(ctx) { return 'S/ ' + ctx.parsed.y.toFixed(2); } } }
        },
        scales: {
            y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.04)', drawBorder: false }, ticks: { color: '#6b7280' } },
            x: { grid: { display: false }, ticks: { color: '#6b7280' } }
        }
    }
});
</script>

<?= $this->endSection() ?>
