<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-primary">
                        <i class="fas fa-boxes me-2"></i>Kardex / Auditoría de Inventario
                    </h4>
                    <p class="text-muted small m-0 mt-1">Rastrea cada entrada y salida de medicamentos. Control total de tu stock.</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-3">
                    <label class="form-label small fw-bold text-muted">Fecha de Inicio</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0"><i class="fas fa-calendar-alt text-muted"></i></span>
                        <input type="date" id="kar-ini" class="form-control border-start-0" value="<?php echo date('Y-m-01'); ?>">
                    </div>
                </div>
                <div class="col-md-3">
                    <label class="form-label small fw-bold text-muted">Fecha de Fin</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0"><i class="fas fa-calendar-alt text-muted"></i></span>
                        <input type="date" id="kar-fin" class="form-control border-start-0" value="<?php echo date('Y-m-d'); ?>">
                    </div>
                </div>
                <div class="col-md-4">
                    <button class="btn btn-primary w-100 fw-bold shadow-sm" onclick="cargarKardex()">
                        <i class="fas fa-search me-2"></i>BUSCAR MOVIMIENTOS
                    </button>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-success w-100 fw-bold shadow-sm" onclick="exportarKardexExcel()">
                        <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-kardex">
                    <thead class="table-dark" style="position: sticky; top: 0; z-index: 10;">
                        <tr>
                            <th class="ps-4">ID Mov.</th>
                            <th>Fecha y Hora</th>
                            <th>Producto / Medicamento</th>
                            <th class="text-center">Tipo</th>
                            <th class="text-center">Cantidad</th>
                            <th>Motivo / Referencia</th>
                            <th class="pe-4">Responsable</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-kardex">
                        <tr>
                            <td colspan="7" class="text-center py-5">
                                <i class="fas fa-dolly fa-3x text-muted mb-3 d-block"></i>
                                <span class="text-muted">Presiona "Buscar Movimientos" para cargar el historial...</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
// Cargar los datos automáticamente al abrir la vista
document.addEventListener('DOMContentLoaded', () => {
    cargarKardex();
});

function cargarKardex() {
    const ini = document.getElementById('kar-ini').value;
    const fin = document.getElementById('kar-fin').value;
    const tbody = document.getElementById('tbody-kardex');

    // Estado de carga visual
    tbody.innerHTML = `<tr><td colspan="7" class="text-center py-5">
        <div class="spinner-border text-primary" role="status"></div>
        <div class="mt-2 text-muted fw-bold">Consultando registros de auditoría...</div>
    </td></tr>`;

    // Llamada a la API (Sincronizado con api_logic/ventas.php -> task=get_kardex)
    fetch(`api.php?task=get_kardex&ini=${ini}&fin=${fin}`)
    .then(r => r.json())
    .then(data => {
        
        // Manejo de errores si el servidor devuelve un objeto con error
        if (data.error) {
            Swal.fire('Error', data.error, 'error');
            tbody.innerHTML = '<tr><td colspan="7" class="text-center py-4 text-danger">Error al consultar datos.</td></tr>';
            return;
        }

        let html = '';
        if (!data || data.length === 0) {
            html = '<tr><td colspan="7" class="text-center py-5 text-muted fw-bold">No hay movimientos registrados en este rango de fechas.</td></tr>';
        } else {
            // Recorremos el array de resultados
            data.forEach(k => {
                // Colores dinámicos: Verde para Entradas (Compras), Rojo para Salidas (Ventas)
                let badgeTipo = k.tipo === 'ENTRADA' ? 'bg-success' : 'bg-danger';
                let iconTipo = k.tipo === 'ENTRADA' ? 'fa-arrow-down' : 'fa-arrow-up';
                let colorCant = k.tipo === 'ENTRADA' ? 'text-success' : 'text-danger';
                let signo = k.tipo === 'ENTRADA' ? '+' : '-';

                html += `
                <tr>
                    <td class="ps-4 text-muted small fw-bold">#${k.id_kardex}</td>
                    <td><div class="small">${k.fecha}</div></td>
                    <td class="fw-bold text-dark">${k.producto || 'Producto Eliminado'}</td>
                    <td class="text-center">
                        <span class="badge ${badgeTipo} px-3 py-2 rounded-pill shadow-sm">
                            <i class="fas ${iconTipo} me-1"></i>${k.tipo}
                        </span>
                    </td>
                    <td class="text-center fw-bold ${colorCant} fs-6">
                        ${signo} ${parseFloat(k.cantidad).toFixed(2)}
                    </td>
                    <td><span class="small text-secondary fw-bold">${k.motivo || 'No especificado'}</span></td>
                    <td class="pe-4"><span class="small border bg-light px-2 py-1 rounded text-dark"><i class="fas fa-user-circle me-1"></i>${k.responsable}</span></td>
                </tr>`;
            });
        }
        tbody.innerHTML = html;
    })
    .catch(err => {
        console.error("Error crítico en la petición Kardex:", err);
        tbody.innerHTML = '<tr><td colspan="7" class="text-center py-5 text-danger fw-bold"><i class="fas fa-exclamation-triangle me-2"></i>Error de conexión con la base de datos.</td></tr>';
    });
}

// Función para exportar la tabla a Excel de forma nativa
function exportarKardexExcel() {
    let tabla = document.getElementById("tabla-kardex");
    let html = tabla.outerHTML;
    
    // Compatibilidad UTF-8 (Para tildes y caracteres especiales)
    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;
    a.download = `Kardex_Inventario_${document.getElementById('kar-ini').value}_al_${document.getElementById('kar-fin').value}.xls`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}
</script>