<?php
require_once __DIR__ . '/../../includes/layout.php';
renderHeader('Catálogo de Productos', 'inventario');
?>
<link rel="stylesheet" href="css/catalogo.css?v=<?= $assetVersion ?>">

<div class="catalogo-page">
    <div class="header-section">
        <div>
            <h1><i class="fas fa-boxes" style="color:var(--primary-light);margin-right:0.5rem;"></i>Catálogo de Productos</h1>
            <p>Gestión de inventario, costos y precios por presentación</p>
        </div>
        <button class="btn btn-primary" id="btnAddProduct">
            <i class="fas fa-plus"></i> Ingresar Producto Nuevo
        </button>
    </div>

    <div class="toolbar">
        <div class="search-wrapper">
            <i class="fas fa-search"></i>
            <input type="text" class="input-text" id="searchQuery" placeholder="Buscar por código, nombre, genérico o laboratorio..." autocomplete="off">
        </div>

        <span class="toolbar-label"><i class="fas fa-store"></i> Lugar</span>
        <select class="input-select" id="filterLugarCompra" style="min-width:140px;">
            <option value="">Todos los lugares</option>
        </select>

        <span class="toolbar-label"><i class="fas fa-calendar-alt"></i> Fecha</span>
        <input type="date" class="input-text" id="filterFechaCompra" style="min-width:130px;">

        <div style="margin-left:auto;display:flex;align-items:center;gap:0.5rem;">
            <span class="counter-badge" id="stats"><i class="fas fa-cube"></i> <span id="statsCount">0</span> prod.</span>
        </div>
    </div>

    <div class="table-container">
        <table class="catalog-table" id="catalogTable">
            <thead>
                <tr>
                    <th style="width:90px">Códigos</th>
                    <th style="min-width:160px">Producto</th>
                    <th style="min-width:110px">Presentación</th>
                    <th style="min-width:130px">Precios</th>
                    <th style="min-width:100px">Fechas</th>
                    <th style="width:55px;text-align:center">Exento</th>
                    <th style="width:55px;text-align:center">Acción</th>
                </tr>
            </thead>
            <tbody id="catalogBody">
                <tr>
                    <td colspan="7">
                        <div class="loading-state">
                            <i class="fas fa-spinner fa-pulse"></i>
                            <p>Cargando productos...</p>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="pagination" id="pagination"></div>
</div>

<div class="toast-container" id="toastContainer"></div>

<script src="js/inventario/catalogo.js?v=<?= $assetVersion ?>"></script>
<?php renderFooter(); ?>

