<div class="container-fluid py-4">
    <div class="card border-0 shadow-sm mb-4 bg-white">
        <div class="card-body p-4">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h4 class="fw-bold m-0 text-danger">
                        <i class="fas fa-hourglass-end me-2"></i>Control de Caducidad
                    </h4>
                    <p class="text-muted small m-0 mt-1">Monitorea los medicamentos próximos a vencer y evita pérdidas en tu inventario.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body bg-light rounded">
            <div class="row g-3 align-items-end">
                <div class="col-md-6">
                    <label class="form-label small fw-bold text-muted">Filtrar Rango de Tiempo</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0"><i class="fas fa-filter text-muted"></i></span>
                        <select id="filtro-meses" class="form-select border-start-0 fw-bold text-secondary">
                            <option value="3">Próximos 3 Meses</option>
                            <option value="6" selected>Próximos 6 Meses</option>
                            <option value="12">Próximos 12 Meses (1 Año)</option>
                            <option value="24">Próximos 24 Meses (2 Años)</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <button class="btn btn-primary w-100 fw-bold shadow-sm py-2" onclick="cargarVencimientos()">
                        <i class="fas fa-search me-2"></i>BUSCAR PRODUCTOS
                    </button>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-success w-100 fw-bold shadow-sm py-2" onclick="exportarVencimientosExcel()">
                        <i class="fas fa-file-excel me-2"></i>EXCEL
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
                <table class="table table-hover align-middle m-0" id="tabla-vencimientos">
                    <thead class="table-dark" style="position: sticky; top: 0; z-index: 10;">
                        <tr>
                            <th class="ps-4">Cód. Producto</th>
                            <th>Medicamento / Producto</th>
                            <th class="text-center">Stock Actual</th>
                            <th>Fecha de Caducidad</th>
                            <th class="text-center">Días Restantes</th>
                            <th class="text-center pe-4">Estado de Alerta</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-vencimientos">
                        <tr>
                            <td colspan="6" class="text-center py-5">
                                <i class="fas fa-pills fa-3x text-muted mb-3 d-block"></i>
                                <span class="text-muted fw-bold">Presiona "Buscar Productos" para cargar el inventario...</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
// Cargar al iniciar la vista
document.addEventListener('DOMContentLoaded', () => {
    cargarVencimientos();
});

function cargarVencimientos() {
    const meses = document.getElementById('filtro-meses').value;
    const tbody = document.getElementById('tbody-vencimientos');

    // Mensaje de carga visual
    tbody.innerHTML = '<tr><td colspan="6" class="text-center py-5"><div class="spinner-border text-danger"></div><br><span class="mt-2 d-inline-block fw-bold text-muted">Revisando fechas de lote...</span></td></tr>';

    // BLINDAJE ANTI-CACHÉ (Fundamental para tu hosting)
    const antiCache = new Date().getTime();
    const url = `api.php?task=full_vencimientos&meses=${meses}&nocache=${antiCache}`;

    fetch(url, { cache: 'no-store', headers: { 'Pragma': 'no-cache', 'Cache-Control': 'no-cache' } })
    .then(r => r.json())
    .then(data => {
        
        if (data.error) {
            tbody.innerHTML = `<tr><td colspan="6" class="text-center py-4 text-danger fw-bold"><i class="fas fa-exclamation-triangle me-2"></i>${data.error}</td></tr>`;
            return;
        }

        let html = '';
        if (!data || data.length === 0) {
            html = `<tr><td colspan="6" class="text-center py-5 text-success fw-bold"><i class="fas fa-check-circle fa-2x mb-2 d-block"></i>¡Excelente! No hay productos por vencer en los próximos ${meses} meses.</td></tr>`;
        } else {
            data.forEach(p => {
                // Lógica de semáforo
                let badgeClass = 'bg-success';
                let rowClass = '';
                let textoEstado = 'SEGURO';
                
                if (p.dias <= 0) {
                    badgeClass = 'bg-dark';
                    rowClass = 'table-secondary text-muted text-decoration-line-through';
                    textoEstado = 'CADUCADO';
                } else if (p.dias <= 30) {
                    badgeClass = 'bg-danger';
                    rowClass = 'table-danger';
                    textoEstado = 'CRÍTICO';
                } else if (p.dias <= 90) {
                    badgeClass = 'bg-warning text-dark';
                    rowClass = 'table-warning';
                    textoEstado = 'PRECAUCIÓN';
                }

                html += `
                <tr class="${rowClass}">
                    <td class="ps-4 text-secondary fw-bold">PROD-${p.id_producto}</td>
                    <td><div class="fw-bold text-uppercase text-dark">${p.nombre}</div></td>
                    <td class="text-center"><span class="badge bg-light text-dark border fs-6">${parseFloat(p.stock).toFixed(2)}</span></td>
                    <td class="fw-bold"><i class="far fa-calendar-alt text-muted me-2"></i>${p.fecha_caducidad}</td>
                    <td class="text-center fw-bold fs-6 ${p.dias <= 30 ? 'text-danger' : 'text-secondary'}">${p.dias} días</td>
                    <td class="text-center pe-4">
                        <span class="badge ${badgeClass} px-3 py-2 rounded-pill shadow-sm">${textoEstado}</span>
                    </td>
                </tr>`;
            });
        }
        tbody.innerHTML = html;
    })
    .catch(err => {
        console.error("Error en módulo vencimientos:", err);
        tbody.innerHTML = '<tr><td colspan="6" class="text-center py-5 text-danger fw-bold"><i class="fas fa-wifi me-2"></i>Error de conexión con el servidor.</td></tr>';
    });
}

function exportarVencimientosExcel() {
    let tabla = document.getElementById("tabla-vencimientos");
    let html = tabla.outerHTML;
    
    // Compatibilidad UTF-8 para Excel
    let blob = new Blob(['\uFEFF' + html], { type: 'application/vnd.ms-excel;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let a = document.createElement("a");
    a.href = url;
    
    let meses = document.getElementById('filtro-meses').value;
    a.download = `Reporte_Caducidad_${meses}_Meses.xls`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}
</script>