<?php
$title = "almacen";
$MODULO = $title;
require_once "../../config/init.php";

?>
<!DOCTYPE html>
<html lang="es">
<head>
    <?php include("head.php"); ?> 
    <title><?= $title ?></title>
    <?php include("styles.php"); ?> 
</head>

<body>
<?php include("navbar.php"); ?>

<div class="card shadow-sm filtro-card mt-3">
    <div class="card-body py-3 px-4">

        <div class="filtros-linea">

            <!-- TIENDA -->
            <div style="min-width: 260px;">
                <label class="filtro-label mb-1 d-block">📦 Consulta de Productos</label>

                <div class="input-group">
                    <span class="input-group-text">
                        <i class="fa-solid fa-shop"></i>
                    </span>

                        <select name="tienda_ip" class="form-control" required>
                            <option value="">Seleccione su tienda</option>

                            <?php foreach ($tiendas as $t): ?>
                                <option 
                                    value="<?= htmlspecialchars($t['ip_enc'], ENT_QUOTES, 'UTF-8'); ?>"
                                    data-name="<?= htmlspecialchars($t['nombre'], ENT_QUOTES, 'UTF-8'); ?>"
                                    <?= ($ip_enc === $t['ip_enc']) ? 'selected' : '' ?>
                                >
                                    <?= htmlspecialchars($t['nombre'], ENT_QUOTES, 'UTF-8'); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>

                    <input type="hidden" id="tienda_nombre" name="tienda_nombre">
                </div>
            </div>

            <div>
                <button class="btn btn-primary btn-mini" id="btnConsultar" hidden>Buscar</button>
            </div>

        </div>
    </div>
</div>

<!-- BUSCADOR -->
<div class="container mt-4">

    <div class="buscador-container mb-4">

        <div class="input-group input-group-lg shadow-sm" style="max-width:600px;">
            <input type="text" id="busquedaInput" class="form-control" placeholder="Buscar nombre...">
            <button class="btn btn-primary" id="btnBuscarLupa">
                <i class="fa-solid fa-magnifying-glass"></i>
            </button>
        </div>

        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="chkFiltroStock">
            <label id="lblFiltroStock" class="form-check-label stock-label ms-2"></label>
        </div>

        <?php if ($mostrarReporte == 1): ?>
            <button id="btnExportPDF" class="btn btn-danger">
                <i class="fa-solid fa-file-pdf"></i> Exportar PDF
            </button>
        <?php endif; ?>

    </div>

    <!-- TABLA (YA CON ESTILO APLICADO) -->
    <div class="table-responsive compact-table">
        <table class="table table-bordered table-striped align-middle text-center shadow-sm">
            <thead class="table-dark">
                <tr>
                    <th class="sortable" data-col="AR_IdArticulo" data-label="Id" style="width:10%;">Id</th>
                    <th class="sortable text-start" data-col="AR_Descripcion" data-label="Descripción" style="width:50%;">Descripción</th>
                    <th class="sortable" data-col="MA_Descripcion" data-label="Marca" style="width:15%;">Marca</th>
                    <th class="sortable" data-col="UN_Abr" data-label="Unidad" style="width:15%;">Unidad</th>
                    <th class="sortable" data-col="SA_Saldo_Actual" data-label="Stock" style="width:15%;">Stock</th>
                </tr>
            </thead>
            <tbody id="tablaDatos">
                <tr><td colspan="5">Ingrese un criterio de búsqueda...</td></tr>
            </tbody>
        </table>
    </div>

    <div class="d-flex justify-content-center mt-3">
        <nav><ul class="pagination" id="paginacion"></ul></nav>
    </div>

</div>

    <!-- PAGINACIÓN -->
    <div class="d-flex justify-content-center mt-3">
        <nav><ul class="pagination" id="paginacion"></ul></nav>
    </div>

</div>

<!-- MODAL -->
<div class="modal fade"
     id="modalDetalle"
     tabindex="-1"
     aria-labelledby="modalDetalleLabel"
     aria-modal="true"
     role="dialog">

    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <strong>Codigo: </strong> <h6 class="modal-title" id="detalleId">Detalle del Artículo</h6>
                <button type="button"
                        class="btn-close btn-close-white"
                        data-bs-dismiss="modal"
                        aria-label="Cerrar">
                </button>
            </div>

            <div class="modal-body">

                <h5 id="detalleDescripcion" class="text-primary mb-3"></h5>

                <!--<p><strong>ID:</strong> <span id="detalleId"></span></p>-->
                <p><strong>Presentación:</strong> <span id="detallePresentacion"></span></p>
                <p><strong>Marca:</strong> <span id="detalleMarca"></span></p>
                <p><strong>Unidad:</strong> <span id="detalleUnidad"></span></p>

                <hr>

                <div class="row text-center">
                    <div class="col">
                        <h6>Precio1</h6>
                        <p id="detallePrecio1" class="fw-bold"></p>
                    </div>
                    <div class="col">
                        <h6>Precio2</h6>
                        <p id="detallePrecio2" class="fw-bold"></p>
                    </div>
                    <!--<div class="col">
                        <h6>Precio3</h6>
                        <p id="detallePrecio3" class="fw-bold"></p>
                    </div>-->
                </div>

                <hr>

                <p class="text-end">
                    
                    <strong>cantidad anticipo: </strong> <span id="detallependiente"></span><br>
                    <strong>stock actual: </strong> <span id="detalleSaldo"></span>
                </p>
            </div>
        </div>
    </div>
</div>


 
<!-- SCRIPTS -->
<script src="../../public/assets/js/jquery-3.6.0.min.js"></script>
<script src="../../public/assets/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
<script src="scripts/almacen.js?v=<?= time() ?>"></script>

</body>
</html>
