<div id="loader-overlay">
    <div class="loader-content">
        <img src="../../public/img/loading_moderno.gif" alt="Cargando...">
        <p class="text-muted mt-2">Cargando datos...</p>
    </div>
</div>

<!-- Tarjeta Filtros -->
<div class="card shadow-sm filtro-card">
<div class="card shadow-sm filtro-card">
    <div class="card-body py-3 px-4">
        <div class="row g-2 align-items-end">

            <!-- Tienda -->
            <div class="col-12 col-md-4">
                <label class="filtro-label">Tienda</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 onchange="setNombreTienda(this)">
                        <option value="">Seleccione 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">
                </div>
            </div>

            <!-- Inicio -->
            <div class="col-6 col-md-3">
                <label class="filtro-label">Desde</label>
                <input type="date" id="fechaInicio" class="form-control filtro-input">
            </div>

            <!-- Fin -->
            <div class="col-6 col-md-3">
                <label class="filtro-label">Hasta</label>
                <input type="date" id="fechaFin" class="form-control filtro-input">
            </div>

            <!-- Botón -->
            <div class="col-12 col-md-2">
                <button class="btn btn-primary w-100" id="btnConsultar">Buscar</button>
            </div>

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