<?= $this->extend('layouts/main_layout') ?>
<?= $this->section('content') ?>
<div class="flex items-center justify-between mb-6">    <h2 class="text-2xl font-bold text-gray-900 flex items-center gap-2">
<i class="bi bi-box-seam text-2xl">
</i> Productos</h2>    <div>        <?php if (session()->get('role') == 'admin'): ?>        <a href="<?= site_url('products/create') ?>" class="bg-[#EBDF00] hover:bg-[#D4C800] text-gray-900 px-4 py-2 rounded-lg no-underline inline-flex items-center gap-2 shadow-sm transition">            <i class="bi bi-plus-lg">
</i> Nuevo Producto        </a>        <?php endif; ?>    </div>
</div>
<div class="bg-slate-100 rounded-xl shadow-sm border border-gray-200 mb-6">
<div class="p-3">
<form method="get" action="<?= site_url('products') ?>"              hx-get="<?= site_url('products') ?>"              hx-target="#productResults"              hx-select="#productResults"              hx-swap="outerHTML"              hx-trigger="submit, keyup changed delay:400ms from:#searchInput"              hx-push-url="true"              class="flex flex-col sm:flex-row gap-2">            <div class="flex-1 flex items-center bg-[#EBDF00]/20 border border-gray-200 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-teal-500 focus-within:border-[#D4C800]">                <span class="px-3 text-gray-400">
<i class="bi bi-search">
</i>
</span>                <input type="text" name="q" id="searchInput" class="w-full bg-transparent py-2.5 pr-3 text-sm focus:outline-none text-gray-600 placeholder:text-gray-400" placeholder="Buscar por nombre, codigo o categoria..." value="<?= esc($search ?? '') ?>">            </div>            <button type="submit" class="bg-[#EBDF00] hover:bg-[#D4C800] text-gray-900 px-4 py-2.5 rounded-lg inline-flex items-center gap-2 text-sm shadow-sm transition">
<i class="bi bi-search">
</i> Buscar</button>            <span class="htmx-indicator self-center text-gray-400 text-sm">
<i class="bi bi-arrow-repeat animate-spin">
</i>
</span>            <?php if ($search): ?>            <a href="<?= site_url('products') ?>" class="bg-[#EBDF00]/20 border border-gray-200 rounded-lg px-4 py-2.5 text-sm transition hover:bg-gray-50 no-underline inline-flex items-center gap-2 text-gray-600"               hx-get="<?= site_url('products') ?>"               hx-target="#productResults"               hx-select="#productResults"               hx-swap="outerHTML"               hx-push-url="true">
<i class="bi bi-x-lg">
</i> Limpiar</a>            <?php endif; ?>        </form>    </div>
</div>
<?php if (!empty($stockBajo)): ?>
<div class="bg-red-100 border border-red-200 text-red-800 p-4 rounded-lg mb-6 flex items-center gap-3">    <i class="bi bi-exclamation-triangle text-lg flex-shrink-0">
</i>    <span class="text-sm text-slate-700">Mostrando solo productos con <strong>stock bajo</strong> (&le; 5 unidades).</span>    <a href="<?= site_url('products') ?>" class="bg-[#EBDF00] hover:bg-[#D4C800] text-gray-900 text-xs font-medium px-3 py-1.5 rounded-lg no-underline ml-auto whitespace-nowrap shadow-sm transition"       hx-get="<?= site_url('products') ?>"       hx-target="#productResults"       hx-select="#productResults"       hx-swap="outerHTML"       hx-push-url="true">Ver todos</a>
</div>
<?php endif; ?>
<div id="productResults">
<?php if (empty($groupedProducts)): ?>
<div class="bg-[#EBDF00]/20 border border-[#EBDF00]/40 text-[#B8A800] p-6 rounded-lg text-center">    <i class="bi bi-box-seam text-4xl block mb-2 mx-auto text-slate-400">
</i>    No se encontraron productos</div>
<?php else: ?>
<?php foreach ($groupedProducts as $category => $items): ?>
<div class="bg-[#EBDF00]/20 rounded-xl shadow-sm border border-gray-100 mb-6 overflow-hidden">    <div class="flex items-center justify-between px-5 py-3 border-b border-gray-100">        <h5 class="font-semibold text-gray-900 flex items-center gap-2 text-sm">            <i class="bi bi-folder2-open text-gray-400">
</i> <?= esc($category) ?>            <span class="bg-[#EBDF00]/40 text-white text-xs px-2 py-0.5 rounded-lg font-semibold">
<?= count($items) ?>
</span>        </h5>    </div>    <div class="p-3">        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-7 gap-2">            <?php foreach ($items as $product): ?>            <div class="bg-[#EBDF00]/20 rounded-xl overflow-hidden border border-gray-100 hover:shadow-md transition card-hover">                <div class="relative aspect-square bg-gray-50">                    <?php if (!empty($product['imagen'])): ?>                    <img src="<?= base_url('uploads/products/' . $product['imagen']) ?>" alt="<?= esc($product['nombre']) ?>" class="w-full h-full object-cover">                    <?php else: ?>                    <div class="flex items-center justify-center h-full text-gray-300">                        <i class="bi bi-box-seam text-3xl">
</i>                    </div>                    <?php endif; ?>                    <span class="absolute top-1 right-1 bg-slate-800/70 text-white text-[.55rem] px-1.5 py-0.5 rounded">
<?= esc($product['codigo_unico']) ?>
</span>                    <span class="absolute top-1 left-1 text-white text-[.55rem] px-1.5 py-0.5 rounded-lg <?= $product['stock_actual'] <= 5 ? 'bg-red-500' : ($product['stock_actual'] <= 10 ? 'bg-yellow-500' : 'bg-[#EBDF00]') ?>">                        <?= $product['stock_actual'] ?>                    </span>                </div>                <div class="p-2">                    <h6 class="font-bold text-xs truncate text-gray-900 mb-0" title="<?= esc($product['nombre']) ?>">
<?= esc($product['nombre']) ?>
</h6>                    <div class="flex justify-between text-xs text-gray-500">                        <span>Compra:</span>                        <span class="font-medium text-slate-700 font-black tracking-tight">S/<?= number_format($product['precio_compra'], 2) ?>
</span>                    </div>                    <div class="flex justify-between text-xs">                        <span class="text-gray-500">Venta:</span>                        <span class="font-medium text-emerald-600 font-black tracking-tight">S/<?= number_format($product['precio_venta'], 2) ?>
</span>                    </div>                </div>                <?php if (session()->get('role') == 'admin'): ?>                <div class="flex justify-center gap-1 pb-2">                    <a href="<?= site_url('products/' . $product['id_producto'] . '/edit') ?>" class="text-gray-400 hover:text-gray-600 text-xs px-1.5 py-0.5 border border-gray-200 rounded-lg hover:bg-gray-50 no-underline" title="Editar">                        <i class="bi bi-pencil">
</i>                    </a>                    <a href="#" onclick="confirmDelete(<?= $product['id_producto'] ?>)" class="text-rose-400 hover:text-red-700 text-xs px-1.5 py-0.5 border border-gray-200 rounded-lg hover:bg-gray-50 no-underline" title="Eliminar">                        <i class="bi bi-trash3">
</i>                    </a>                </div>                <?php endif; ?>            </div>            <?php endforeach; ?>        </div>    </div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<script>async function confirmDelete(id) {    const result = await Swal.fire({ icon: 'question', title: '¿Está seguro?', text: '¿Está seguro de eliminar este producto?', showCancelButton: true, confirmButtonText: 'Sí, eliminar', cancelButtonText: 'Cancelar' });    if (result.isConfirmed) {        var form = document.createElement('form');        form.method = 'POST';        form.action = '<?= site_url('products') ?>/' + id;        var input = document.createElement('input');        input.type = 'hidden';        input.name = '_method';        input.value = 'DELETE';        form.appendChild(input);        document.body.appendChild(form);        form.submit();    }}</script>
<?= $this->endSection() ?>