<?php
/**
 * modules/registro_exams/views/lista.php
 * Vista principal: listado de órdenes del día con filtros y acciones.
 * Accesible en /erp.php?m=registro_exams&v=lista
 */

require_once APP_ROOT . '/config/config.php';

Layout::open('Órdenes de Exámenes', 'fas fa-vials');
?>
<div class="container-fluid py-3">

    <!-- Encabezado + botón nueva orden -->
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
        <div>
            <h4 class="mb-0"><i class="fas fa-vials me-2 text-primary"></i>Órdenes de Exámenes</h4>
            <small class="text-muted">Registro y seguimiento de exámenes de laboratorio</small>
        </div>
        <a href="<?= BASE_URL ?>/erp.php?m=registro_exams&v=nueva_orden" class="btn btn-primary">
            <i class="fas fa-plus me-1"></i> Nueva orden
        </a>
    </div>

    <!-- Filtros -->
    <div class="card shadow-sm mb-3">
        <div class="card-body py-2">
            <form id="filtroForm" class="row g-2 align-items-end">
                <div class="col-sm-3 col-md-2">
                    <label class="form-label mb-1 small fw-semibold">Fecha</label>
                    <input type="date" id="filtroFecha" name="fecha" class="form-control form-control-sm"
                           value="<?= date('Y-m-d') ?>">
                </div>
                <div class="col-sm-3 col-md-2">
                    <label class="form-label mb-1 small fw-semibold">Estado</label>
                    <select id="filtroEstado" name="estado" class="form-select form-select-sm">
                        <option value="">Todos</option>
                        <option value="pendiente">Pendiente</option>
                        <option value="en_proceso">En proceso</option>
                        <option value="completa">Completa</option>
                        <option value="entregada">Entregada</option>
                        <option value="cancelada">Cancelada</option>
                    </select>
                </div>
                <div class="col-sm-4 col-md-3">
                    <label class="form-label mb-1 small fw-semibold">Buscar</label>
                    <input type="search" id="filtroBusqueda" name="busqueda" class="form-control form-control-sm"
                           placeholder="Nombre, documento o código…">
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-search me-1"></i>Filtrar
                    </button>
                    <button type="button" id="btnHoy" class="btn btn-sm btn-outline-secondary ms-1">
                        Hoy
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- KPIs rápidos del día -->
    <div class="row g-2 mb-3" id="kpis">
        <div class="col-6 col-md-3">
            <div class="card border-0 bg-light text-center py-2">
                <div class="fs-4 fw-bold text-primary" id="kpiTotal">—</div>
                <div class="small text-muted">Total día</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 bg-light text-center py-2">
                <div class="fs-4 fw-bold text-warning" id="kpiPendientes">—</div>
                <div class="small text-muted">Pendientes</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 bg-light text-center py-2">
                <div class="fs-4 fw-bold text-info" id="kpiEnProceso">—</div>
                <div class="small text-muted">En proceso</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 bg-light text-center py-2">
                <div class="fs-4 fw-bold text-success" id="kpiCompletas">—</div>
                <div class="small text-muted">Completas</div>
            </div>
        </div>
    </div>

    <!-- Tabla de órdenes -->
    <div class="card shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-sm align-middle mb-0" id="tablaOrdenes">
                    <thead class="table-light">
                        <tr>
                            <th style="width:110px">Código</th>
                            <th>Paciente</th>
                            <th style="width:80px" class="text-center">Edad</th>
                            <th style="width:90px">Prioridad</th>
                            <th style="width:110px">Estado</th>
                            <th style="width:90px" class="text-center">Ítems</th>
                            <th style="width:80px" class="text-center">Muestras</th>
                            <th style="width:110px">Hora</th>
                            <th style="width:90px" class="text-end">Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyOrdenes">
                        <tr><td colspan="9" class="text-center text-muted py-4">
                            <i class="fas fa-spinner fa-spin me-2"></i>Cargando…
                        </td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-between align-items-center py-2" id="paginacion">
            <span class="small text-muted" id="paginaInfo"></span>
            <div id="paginaBtns" class="btn-group btn-group-sm"></div>
        </div>
    </div>
</div>

<script>
(function () {
    const BASE   = '<?= BASE_URL ?>';
    const API    = BASE + '/modules/registro_exams/api/get_ordenes.php';
    let currentPage = 1;

    // ── KPI contadores del día (sin filtro estado) ──
    async function cargarKpis(fecha) {
        try {
            const r = await fetch(`${API}?fecha=${fecha}&limit=200`);
            const j = await r.json();
            if (!j.ok) return;
            const rows = j.data;
            document.getElementById('kpiTotal').textContent      = j.total;
            document.getElementById('kpiPendientes').textContent = rows.filter(x => x.estado === 'pendiente').length;
            document.getElementById('kpiEnProceso').textContent  = rows.filter(x => x.estado === 'en_proceso').length;
            document.getElementById('kpiCompletas').textContent  = rows.filter(x => x.estado === 'completa').length;
        } catch {}
    }

    // ── Construir fila de tabla ──
    function buildRow(o) {
        const hora = o.creado_at ? o.creado_at.substr(11, 5) : '—';
        const edad = o.edad !== null ? o.edad + ' a.' : '—';

        const badgePrio = {
            stat:    '<span class="badge bg-danger">STAT</span>',
            urgente: '<span class="badge bg-warning text-dark">Urgente</span>',
            normal:  '<span class="badge bg-secondary">Normal</span>',
        }[o.prioridad] || '';

        const badgeEst = {
            pendiente:   '<span class="badge bg-light text-dark border">Pendiente</span>',
            en_proceso:  '<span class="badge bg-primary">En proceso</span>',
            completa:    '<span class="badge bg-success">Completa</span>',
            entregada:   '<span class="badge bg-info text-dark">Entregada</span>',
            cancelada:   '<span class="badge bg-dark">Cancelada</span>',
        }[o.estado] || o.estado;

        const itemsInfo = `${o.items_listos}/${o.total_items}`;
        const muestInfo = o.muestras_tomadas > 0
            ? `<span class="text-success fw-semibold">${o.muestras_tomadas}</span>`
            : `<span class="text-muted">0</span>`;

        return `<tr>
            <td><a href="${BASE}/erp.php?m=registro_exams&v=orden&id=${o.id}" class="fw-semibold text-decoration-none">${escHtml(o.codigo)}</a></td>
            <td>
                <div class="fw-semibold lh-sm">${escHtml(o.nombre_completo)}</div>
                <div class="small text-muted">${escHtml(o.tipo_documento)} ${escHtml(o.numero_documento)}</div>
            </td>
            <td class="text-center">${edad}</td>
            <td>${badgePrio}</td>
            <td>${badgeEst}</td>
            <td class="text-center">${itemsInfo}</td>
            <td class="text-center">${muestInfo}</td>
            <td>${hora}</td>
            <td class="text-end">
                <a href="${BASE}/erp.php?m=registro_exams&v=orden&id=${o.id}"
                   class="btn btn-sm btn-outline-primary" title="Ver orden">
                    <i class="fas fa-eye"></i>
                </a>
                <a href="${BASE}/erp.php?m=registro_exams&v=etiqueta&id=${o.id}"
                   target="_blank" class="btn btn-sm btn-outline-secondary ms-1" title="Etiqueta">
                    <i class="fas fa-print"></i>
                </a>
            </td>
        </tr>`;
    }

    function escHtml(s) {
        if (!s) return '';
        return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }

    // ── Cargar tabla ──
    async function cargar(page = 1) {
        currentPage = page;
        const fecha    = document.getElementById('filtroFecha').value;
        const estado   = document.getElementById('filtroEstado').value;
        const busqueda = document.getElementById('filtroBusqueda').value;

        const url = `${API}?fecha=${encodeURIComponent(fecha)}&estado=${encodeURIComponent(estado)}&busqueda=${encodeURIComponent(busqueda)}&page=${page}&limit=25`;

        document.getElementById('tbodyOrdenes').innerHTML =
            '<tr><td colspan="9" class="text-center text-muted py-4"><i class="fas fa-spinner fa-spin me-2"></i>Cargando…</td></tr>';

        try {
            const r = await fetch(url);
            const j = await r.json();
            if (!j.ok) throw new Error(j.error);

            const tbody = document.getElementById('tbodyOrdenes');
            if (!j.data.length) {
                tbody.innerHTML = '<tr><td colspan="9" class="text-center text-muted py-4"><i class="fas fa-inbox me-2"></i>Sin órdenes para los filtros seleccionados.</td></tr>';
            } else {
                tbody.innerHTML = j.data.map(buildRow).join('');
            }

            // Paginación
            document.getElementById('paginaInfo').textContent =
                `${j.total} orden(es) — Página ${j.page} de ${j.pages}`;

            const btns = document.getElementById('paginaBtns');
            btns.innerHTML = '';
            for (let p = 1; p <= j.pages; p++) {
                const btn = document.createElement('button');
                btn.className = 'btn btn-outline-secondary' + (p === j.page ? ' active' : '');
                btn.textContent = p;
                btn.addEventListener('click', () => cargar(p));
                btns.appendChild(btn);
            }

            // KPIs (solo recargar cuando cambia fecha)
            cargarKpis(fecha);
        } catch (e) {
            document.getElementById('tbodyOrdenes').innerHTML =
                `<tr><td colspan="9" class="text-center text-danger py-4"><i class="fas fa-exclamation-circle me-2"></i>${e.message}</td></tr>`;
        }
    }

    // ── Eventos ──
    document.getElementById('filtroForm').addEventListener('submit', e => { e.preventDefault(); cargar(1); });
    document.getElementById('btnHoy').addEventListener('click', () => {
        document.getElementById('filtroFecha').value = new Date().toISOString().slice(0, 10);
        cargar(1);
    });

    // Autorefresh cada 45 s
    setInterval(() => cargar(currentPage), 45000);

    // Carga inicial
    cargar(1);
})();
</script>
<?php Layout::close(); ?>
