<?php
// vista/usuarios/reporte_pagos.php
$db = new clsbdd();
$db->ejecutar("SET NAMES 'utf8'");

// Pre-configuración de fechas por defecto (Mes actual)
$fecha_ini_default = date('Y-m-01');
$fecha_fin_default = date('Y-m-d');
?>

<div class="row g-4 mb-4 d-print-none">
    <div class="col-12">
        <div class="card shadow border-0" style="border-radius: 15px;">
            <div class="card-header py-3 bg-dark text-white" style="border-radius: 15px 15px 0 0;">
                <h6 class="m-0 font-weight-bold"><i class="fas fa-filter me-2"></i> Filtros del Reporte de Nómina</h6>
            </div>
            <div class="card-body p-4">
                <form id="form-filtro-reporte" class="row align-items-end">
                    <div class="col-md-3 mb-3 mb-md-0">
                        <label class="form-label fw-bold">Fecha Desde</label>
                        <input type="date" id="filtro_fecha_inicio" class="form-control" value="<?= $fecha_ini_default ?>">
                    </div>
                    <div class="col-md-3 mb-3 mb-md-0">
                        <label class="form-label fw-bold">Fecha Hasta</label>
                        <input type="date" id="filtro_fecha_fin" class="form-control" value="<?= $fecha_fin_default ?>">
                    </div>
                    <div class="col-md-4 mb-3 mb-md-0">
                        <label class="form-label fw-bold">Operador / Empleado</label>
                        <select id="filtro_ope_id" class="form-select fw-bold">
                            <option value="0">-- Todos los Operarios --</option>
                            <?php 
                            $sql_ope = "SELECT ope_id, ope_nombre FROM car_operarios WHERE ope_estado = 1 ORDER BY ope_nombre ASC";
                            $res_ope = $db->ejecutar($sql_ope);
                            if ($res_ope) {
                                while($ope = $res_ope->fetch_assoc()) {
                                    echo '<option value="'.$ope['ope_id'].'">'.htmlspecialchars($ope['ope_nombre']).'</option>';
                                }
                            }
                            ?>
                        </select>
                    </div>
                    <div class="col-md-2 text-end">
                        <button type="button" class="btn btn-primary w-100 fw-bold" onclick="cargarDataReporte()">
                            <i class="fas fa-search me-1"></i> CONSULTAR
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="card border-0 shadow-sm border-start border-warning border-4 p-3">
            <span class="text-muted small text-uppercase fw-bold">Total Adelantos Entregados</span>
            <h3 class="fw-bold text-warning mb-0" id="card-total-adelantos">$0.00</h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card border-0 shadow-sm border-start border-success border-4 p-3">
            <span class="text-muted small text-uppercase fw-bold">Total Liquidaciones Netas</span>
            <h3 class="fw-bold text-success mb-0" id="card-total-liquidaciones">$0.00</h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card border-0 shadow-sm border-start border-primary border-4 p-3">
            <span class="text-muted small text-uppercase fw-bold">Salida Total de Caja (Flujo)</span>
            <h3 class="fw-bold text-primary mb-0" id="card-total-flujo">$0.00</h3>
        </div>
    </div>
</div>

<div class="card shadow border-0" style="border-radius: 15px;">
    <div class="card-header py-3 bg-white border-0 d-flex justify-content-between align-items-center">
        <h6 class="m-0 font-weight-bold text-dark"><i class="fas fa-file-invoice-dollar me-2"></i> Detalle Analítico de Movimientos</h6>
        <button class="btn btn-sm btn-danger fw-bold shadow-sm" onclick="exportarReportePDF()">
            <i class="fas fa-file-pdf me-1"></i> Exportar PDF
        </button>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0" id="tabla-reporte-pagos">
            <thead class="bg-light text-secondary">
                <tr style="font-size: 0.75rem; text-transform: uppercase;">
                    <th class="ps-3">Fecha / Hora</th>
                    <th>Operario</th>
                    <th>Tipo de Registro</th>
                    <th>Monto</th>
                    <th>Método</th>
                    <th>Estado de Cruce</th>
                    <th class="pe-3">Observación Registrada</th>
                </tr>
            </thead>
            <tbody id="tbody-reporte">
                <tr>
                    <td colspan="7" class="text-center py-4 text-muted">Seleccione los filtros y presione consultar.</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script>

function exportarReportePDF() {
    const fInicio = document.getElementById('filtro_fecha_inicio').value;
    const fFin = document.getElementById('filtro_fecha_fin').value;
    const operario = document.getElementById('filtro_ope_id').value;
    
    const baseUrl = obtenerRutaRaizReporte();
    // Abrimos el exportador en una nueva pestaña pasando los parámetros seleccionados
    window.open(`${baseUrl}controlador/car_ExportarPdfControlador.php?fecha_inicio=${fInicio}&fecha_fin=${fFin}&ope_id=${operario}`, '_blank');
}
function obtenerRutaRaizReporte() {
    const loc = window.location;
    const path = loc.pathname;
    const baseDir = path.substring(0, path.indexOf('/', 1) + 1);
    return loc.protocol + "//" + loc.host + (baseDir.includes('index.php') ? '/' : baseDir);
}

function cargarDataReporte() {
    const fInicio = document.getElementById('filtro_fecha_inicio').value;
    const fFin = document.getElementById('filtro_fecha_fin').value;
    const operario = document.getElementById('filtro_ope_id').value;
    
    const tbody = document.getElementById('tbody-reporte');
    tbody.innerHTML = `<tr><td colspan='7' class='text-center py-4'><div class='spinner-border text-primary spinner-border-sm'></div> Cargando registros analíticos...</td></tr>`;

    const baseUrl = obtenerRutaRaizReporte();
    const url = `${baseUrl}controlador/car_ReportesPagosControlador.php?accion=generar_reporte&fecha_inicio=${fInicio}&fecha_fin=${fFin}&ope_id=${operario}`;

    fetch(url)
        .then(response => response.json())
        .then(data => {
            // 1. Actualizar Tarjetas Macro
            document.getElementById('card-total-adelantos').innerText = '$' + data.resumen.total_adelantos.toFixed(2);
            document.getElementById('card-total-liquidaciones').innerText = '$' + data.resumen.total_liquidados.toFixed(2);
            document.getElementById('card-total-flujo').innerText = '$' + data.resumen.neto_entregado.toFixed(2);

            // 2. Renderizar la Tabla
            tbody.innerHTML = '';
            if (data.registros.length === 0) {
                tbody.innerHTML = `<tr><td colspan='7' class='text-center py-4 text-muted'>No se encontraron movimientos en el rango de fechas seleccionado.</td></tr>`;
                return;
            }

            data.registros.forEach(r => {
                let badgeTipo = (r.type === 'Adelanto' || r.tipo === 'Adelanto') ? 'bg-warning text-dark' : 'bg-success text-white';
                
                let badgeEstado = '';
                if (r.estado.includes('Pendiente')) {
                    badgeEstado = '<span class="badge bg-light text-danger border border-danger"><i class="fas fa-clock me-1"></i> Pendiente</span>';
                } else if (r.estado.includes('Cruzado')) {
                    badgeEstado = '<span class="badge bg-light text-muted border"><i class="fas fa-check-double text-success me-1"></i> Cruzado</span>';
                } else {
                    badgeEstado = '<span class="badge bg-light text-success border border-success"><i class="fas fa-box me-1"></i> Liquidado</span>';
                }

                let row = `<tr>
                    <td class="ps-3 small">${r.fecha}</td>
                    <td class="fw-bold text-dark">${r.operario}</td>
                    <td><span class="badge ${badgeTipo} rounded-pill px-3">${r.tipo}</span></td>
                    <td class="fw-bold text-dark">$${r.monto.toFixed(2)}</td>
                    <td class="small text-secondary">${r.metodo}</td>
                    <td>${badgeEstado}</td>
                    <td class="small text-muted pe-3">${r.observacion}</td>
                </tr>`;
                tbody.innerHTML += row;
            });
        })
        .catch(err => {
            console.error("Error al obtener reporte:", err);
            tbody.innerHTML = `<tr><td colspan='7' class='text-center py-4 text-danger fw-bold'>Error de comunicación con el servidor de reportes.</td></tr>`;
        });
}

// Carga automática al abrir la pantalla
document.addEventListener("DOMContentLoaded", function() {
    cargarDataReporte();
});
</script>

<style>
@media print {
    body { background: #fff; color: #000; }
    .card { shadow: none !important; border: none !important; }
    .table { width: 100% !important; border-collapse: collapse; }
    th, td { border: 1px solid #dee2e6 !important; padding: 8px !important; }
}
</style>