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

<style>
    @media print { .no-print { display: none !important; } }
    .print-only { display: none; }
    @media print { .print-only { display: block !important; } }
</style>

<div class="flex items-center justify-between mb-6 no-print">
    <h2 class="text-2xl font-bold text-gray-900"><i class="bi bi-bar-chart-line-fill"></i> Reportes</h2>
</div>

<div class="bg-slate-100 rounded-xl shadow-sm border border-gray-200 mb-6 no-print">
    <div class="p-5">
        <form method="post" action="<?= site_url('reports/generate') ?>">
            <?= csrf_field() ?>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div>
                    <label for="start_date" class="block text-sm font-medium text-gray-500 mb-1">Fecha Inicio</label>
                    <input type="date" name="start_date" id="start_date" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500" value="<?= $startDate ?? date('Y-m-01') ?>">
                </div>
                <div>
                    <label for="end_date" class="block text-sm font-medium text-gray-500 mb-1">Fecha Fin</label>
                    <input type="date" name="end_date" id="end_date" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500" value="<?= $endDate ?? date('Y-m-d') ?>">
                </div>
                <div>
                    <label for="id_categoria" class="block text-sm font-medium text-gray-500 mb-1">Categoria</label>
                    <select name="id_categoria" id="id_categoria" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                        <option value="">Todas</option>
                        <?php foreach ($categories as $cat): ?>
                        <option value="<?= $cat['id_categoria'] ?>"><?= esc($cat['nombre']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div>
                    <label for="id_producto" class="block text-sm font-medium text-gray-500 mb-1">Producto</label>
                    <select name="id_producto" id="id_producto" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                        <option value="">Todos</option>
                        <?php foreach ($products as $prod): ?>
                        <option value="<?= $prod['id_producto'] ?>"><?= esc($prod['codigo_unico']) ?> - <?= esc($prod['nombre']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="flex justify-end gap-2 mt-4">
                <button type="submit" formaction="<?= site_url('reports/download') ?>" class="bg-teal-100 border border-gray-200 rounded-lg px-4 py-2 text-sm transition hover:bg-gray-50 font-medium inline-flex items-center gap-2 cursor-pointer">
                    <i class="bi bi-download"></i> Descargar
                </button>
                <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg text-sm font-medium inline-flex items-center gap-2 border-0 cursor-pointer shadow-sm transition">
                    <i class="bi bi-search"></i> Generar Reporte
                </button>
                <button onclick="window.print()" class="bg-teal-100 border border-gray-200 rounded-lg px-4 py-2 text-sm transition hover:bg-gray-50 font-medium inline-flex items-center gap-2 cursor-pointer">
                    <i class="bi bi-printer"></i> Imprimir
                </button>
            </div>
        </form>
    </div>
</div>

<?php if (isset($sales) && !empty($sales)): ?>
<div class="print-only mb-4 p-3 bg-gray-50 border border-gray-200 rounded-xl text-sm">
    <strong>Filtros:</strong>
    Fecha Inicio: <?= date('d/m/Y', strtotime($startDate)) ?> |
    Fecha Fin: <?= date('d/m/Y', strtotime($endDate)) ?>
    <?php if (!empty($categoryId)): ?>
        <?php foreach ($categories as $cat): if ($cat['id_categoria'] == $categoryId): ?> | Categoria: <?= esc($cat['nombre']) ?><?php endif; endforeach; ?>
    <?php endif; ?>
    <?php if (!empty($productId)): ?>
        <?php foreach ($products as $prod): if ($prod['id_producto'] == $productId): ?> | Producto: <?= esc($prod['nombre']) ?><?php endif; endforeach; ?>
    <?php endif; ?>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
    <div class="bg-emerald-400 rounded-xl shadow-sm border-l-4 border-emerald-700 p-4">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-gray-500 text-xs font-semibold uppercase tracking-wide mb-1">Total Ingresos</p>
                <h3 class="text-2xl font-extrabold text-gray-900 tracking-tight">S/ <?= number_format($totalSales, 2) ?></h3>
            </div>
            <div class="w-10 h-10 bg-emerald-500 rounded-lg flex items-center justify-center">
                <i class="bi bi-bank text-lg text-white"></i>
            </div>
        </div>
    </div>
    <div class="bg-violet-400 rounded-xl shadow-sm border-l-4 border-violet-700 p-4">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-gray-500 text-xs font-semibold uppercase tracking-wide mb-1">Total IGV (18%)</p>
                <h3 class="text-2xl font-extrabold text-gray-900 tracking-tight">S/ <?= number_format($totalSales * 0.18 / 1.18, 2) ?></h3>
            </div>
            <div class="w-10 h-10 bg-violet-500 rounded-lg flex items-center justify-center">
                <i class="bi bi-receipt text-lg text-white"></i>
            </div>
        </div>
    </div>
    <div class="bg-rose-300 rounded-xl shadow-sm border-l-4 border-rose-600 p-4">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-gray-500 text-xs font-semibold uppercase tracking-wide mb-1">Total Ganancias</p>
                <h3 class="text-2xl font-extrabold text-gray-900 tracking-tight">S/ <?= number_format($totalProfits, 2) ?></h3>
            </div>
            <div class="w-10 h-10 bg-rose-400 rounded-lg flex items-center justify-center">
                <i class="bi bi-graph-up-arrow text-lg text-white"></i>
            </div>
        </div>
    </div>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
    <div class="flex items-center justify-between px-5 py-3 border-b border-gray-200">
        <h5 class="font-semibold text-gray-900 flex items-center gap-2"><i class="bi bi-table text-gray-400"></i> Detalle de Ventas</h5>
        <form method="post" action="<?= site_url('reports/download') ?>">
            <?= csrf_field() ?>
            <input type="hidden" name="start_date" value="<?= $startDate ?>">
            <input type="hidden" name="end_date" value="<?= $endDate ?>">
            <input type="hidden" name="id_categoria" value="<?= $categoryId ?? '' ?>">
            <input type="hidden" name="id_producto" value="<?= $productId ?? '' ?>">
            <button type="submit" class="bg-teal-100 border border-gray-200 rounded-lg px-3 py-1.5 text-xs font-medium inline-flex items-center gap-1.5 transition hover:bg-gray-50 cursor-pointer">
                <i class="bi bi-download"></i> Descargar
            </button>
        </form>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="text-gray-500 text-xs uppercase tracking-wider font-semibold">
                <tr>
                    <th class="text-left px-4 py-3">Fecha</th>
                    <th class="text-left px-4 py-3">Venta #</th>
                    <th class="text-left px-4 py-3">Producto</th>
                    <th class="text-left px-4 py-3">Codigo</th>
                    <th class="text-left px-4 py-3">Categoria</th>
                    <th class="text-left px-4 py-3">Cant.</th>
                    <th class="text-right px-4 py-3">P. Unit.</th>
                    <th class="text-right px-4 py-3">IGV</th>
                    <th class="text-right px-4 py-3">Subtotal</th>
                    <th class="text-left px-4 py-3">Vendedor</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <?php $totalIgv = 0; ?>
                <?php foreach ($sales as $row): ?>
                <?php $igv = $row['subtotal'] * 0.18 / 1.18; $totalIgv += $igv; ?>
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 text-gray-600"><?= date('d/m/Y', strtotime($row['fecha'])) ?></td>
                    <td class="px-4 py-3"><span class="bg-emerald-100 text-emerald-700 text-xs font-semibold px-2 py-0.5 rounded-lg">#<?= $row['id_venta'] ?></span></td>
                    <td class="px-4 py-3 text-gray-600"><?= esc($row['producto_nombre']) ?></td>
                    <td class="px-4 py-3 text-gray-600"><?= esc($row['codigo_unico']) ?></td>
                    <td class="px-4 py-3 text-gray-600"><?= esc($row['categoria_nombre']) ?></td>
                    <td class="px-4 py-3 text-gray-600"><?= $row['cantidad'] ?></td>
                    <td class="px-4 py-3 text-right text-gray-600">S/ <?= number_format($row['precio_unitario'], 2) ?></td>
                    <td class="px-4 py-3 text-right text-violet-700">S/ <?= number_format($igv, 2) ?></td>
                    <td class="px-4 py-3 text-right font-black text-gray-900">S/ <?= number_format($row['subtotal'], 2) ?></td>
                    <td class="px-4 py-3 text-gray-600"><?= $row['username'] ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
            <tfoot class="bg-gray-50">
                <tr>
                    <th colspan="7" class="text-right px-4 py-3 font-medium text-gray-500">Totales</th>
                    <th class="text-right px-4 py-3 font-black text-violet-700">S/ <?= number_format($totalIgv, 2) ?></th>
                    <th class="text-right px-4 py-3 font-black text-emerald-600">S/ <?= number_format($totalSales, 2) ?></th>
                    <th></th>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
    <div class="flex items-center justify-between px-5 py-3 border-b border-gray-200">
        <h5 class="font-semibold text-gray-900 flex items-center gap-2"><i class="bi bi-graph-up-arrow text-emerald-600"></i> Ganancias por Venta</h5>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="text-gray-500 text-xs uppercase tracking-wider font-semibold">
                <tr>
                    <th class="text-left px-4 py-3">Venta #</th>
                    <th class="text-left px-4 py-3">Fecha</th>
                    <th class="text-right px-4 py-3">Ganancia</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <?php foreach ($profits as $row): ?>
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3"><span class="bg-emerald-100 text-emerald-700 text-xs font-semibold px-2 py-0.5 rounded-lg">#<?= $row['id_venta'] ?></span></td>
                    <td class="px-4 py-3 text-gray-600"><?= date('d/m/Y', strtotime($row['fecha'])) ?></td>
                    <td class="px-4 py-3 text-right font-black text-emerald-600">S/ <?= number_format($row['ganancia'], 2) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
            <tfoot class="bg-gray-50">
                <tr>
                    <th colspan="2" class="text-right px-4 py-3 font-medium text-gray-500">Total Ganancias</th>
                    <th class="text-right px-4 py-3 font-black text-emerald-600">S/ <?= number_format($totalProfits, 2) ?></th>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
<?php endif; ?>

<?php if (isset($sales) && empty($sales)): ?>
<div class="bg-rose-50 border border-rose-200 text-rose-800 p-4 rounded-xl flex items-center gap-2">
    <i class="bi bi-info-circle"></i> No se encontraron ventas para los filtros seleccionados.
</div>
<?php endif; ?>

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