<?php
if (session_status() === PHP_SESSION_NONE) { session_start(); }
require_once "modelo/Db.php";

$bd = new clsbdd();

if (isset($_GET['del'])) {
    $id_del = intval($_GET['del']);
    $bd->ejecutar("UPDATE sba_profesores SET pro_estado=0 WHERE pro_codigo=$id_del");
    echo "<script>window.location='index.php?page=beneficiarios';</script>";
}

$beneficiarios = $bd->ejecutar_array("SELECT * FROM sba_profesores WHERE pro_estado=1 ORDER BY pro_nombre ASC");
?>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>
    .ben-container { background: #f8f9fa; padding: 20px; border-radius: 10px; border: 1px solid #ddd; font-family: 'Segoe UI', sans-serif; }
    .card-header-custom { background: white; border-bottom: 2px solid #eee; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-radius: 10px 10px 0 0; }
    .table-beneficiarios { background: white; border-radius: 0 0 10px 10px; border: 1px solid #dee2e6; border-top: none; overflow-x: auto; }
    .search-box { padding: 8px 15px; border: 1px solid #ddd; border-radius: 20px; width: 300px; outline: none; }
    .badge-tipo { padding: 5px 12px; border-radius: 15px; font-size: 11px; font-weight: bold; text-transform: uppercase; }
    .btn-nuevo { background: #1cc88a; color: white; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: bold; transition: 0.3s; border: none; cursor: pointer; }
    .btn-nuevo:hover { background: #17a673; color: white; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
    
    /* ESTILOS DE LA BARRA DE PROGRESO */
    .progress-container { width: 100%; background-color: #eaecf4; border-radius: 5px; height: 8px; margin: 5px 0; overflow: hidden; }
    .progress-bar { height: 100%; border-radius: 5px; transition: width 0.4s ease; }
    .info-saldo { font-size: 11px; color: #858796; font-weight: bold; display: block; margin-top: 2px; }
</style>

<div class="ben-container">
    <div class="header-caja" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <div>
            <h2 style="margin:0; color:#4e73df;"><i class="fa fa-address-book"></i> Gestión de Beneficiarios</h2>
            <small class="text-muted">Administración de créditos para Docentes y Estudiantes</small>
        </div>
        <div>
            <a href="exportar_beneficiarios.php" class="btn-nuevo" style="background: #2e7d32; margin-right: 10px;">
                <i class="fa fa-file-excel"></i> EXPORTAR EXCEL
            </a>
            <button class="btn-nuevo" onclick="abrirModal()">
                <i class="fa fa-plus"></i> NUEVO BENEFICIARIO
            </button>
        </div>
    </div>

    <div class="card-header-custom">
        <input type="text" id="busqueda" class="search-box" placeholder="Buscar por nombre..." onkeyup="filtrarTabla()">
        <div class="text-muted small">Total registrados: <b><?= count($beneficiarios ?: []) ?></b></div>
    </div>

    <div class="table-beneficiarios">
        <table style="width:100%; border-collapse:collapse; font-size:14px;" id="tablaBeneficiarios">
            <thead>
                <tr style="background:#f8f9fa; text-align:left; border-bottom:2px solid #eee;">
                    <th style="padding:15px;">Nombre Completo</th>
                    <th style="padding:15px;">Tipo</th>
                    <th style="padding:15px;">Límite Crédito</th>
                    <th style="padding:15px; width: 250px;">Estado de Cuenta</th>
                    <th style="padding:15px; text-align:center;">Acciones</th>
                </tr>
            </thead>
            <tbody>
                <?php if($beneficiarios): foreach($beneficiarios as $b): 
                    $saldo = floatval($b['pro_saldo_actual'] ?? 0);
                    $limite = floatval($b['pro_limite_credito'] ?? 0);
                    $tipo = $b['pro_tipo'] ?? 'PROFESOR';
                    
                    // Cálculo de porcentaje y disponible
                    $disponible = $limite - $saldo;
                    $porcentaje = ($limite > 0) ? ($saldo / $limite) * 100 : 0;
                    if($porcentaje > 100) $porcentaje = 100;

                    // Color de la barra
                    $color_bar = "#1cc88a"; // Verde
                    if($porcentaje > 70) $color_bar = "#f6c23e"; // Amarillo
                    if($porcentaje > 90) $color_bar = "#e74a3b"; // Rojo
                ?>
                <tr style="border-bottom:1px solid #eee;" class="fila-ben">
                    <td style="padding:12px 15px;">
                        <div style="font-weight:bold; color:#2e59d9;"><?= htmlspecialchars($b['pro_nombre']) ?></div>
                    </td>
                    <td style="padding:12px 15px;">
                        <span class="badge-tipo" style="<?= $tipo == 'ESTUDIANTE' ? 'background:#e1f5fe; color:#01579b;' : 'background:#f3e5f5; color:#7b1fa2;' ?>">
                            <?= $tipo ?>
                        </span>
                    </td>
                    <td style="padding:12px 15px; color:#5a5c69;">$<?= number_format($limite, 2) ?></td>
                    <td style="padding:12px 15px;">
                        <div style="display:flex; justify-content: space-between; align-items: center;">
                            <span style="font-weight:bold; color:<?= $saldo > 0 ? '#e74a3b' : '#1cc88a' ?>;">Consumido: $<?= number_format($saldo, 2) ?></span>
                        </div>
                        
                        <div class="progress-container">
                            <div class="progress-bar" style="width: <?= $porcentaje ?>%; background-color: <?= $color_bar ?>;"></div>
                        </div>
                        
                        <span class="info-saldo">
                            Disponible: <span style="color: <?= $disponible <= 0 ? '#e74a3b' : '#1cc88a' ?>;">$<?= number_format($disponible, 2) ?></span>
                        </span>
                    </td>
                    <td style="padding:12px 15px; text-align:center;">
                        <div style="display: flex; justify-content: center; gap: 8px;">
                            <button class="btn" style="color:#4e73df; border:none; background:none; cursor:pointer;" onclick="verHistorial(<?= $b['pro_codigo'] ?>, '<?= addslashes($b['pro_nombre']) ?>')" title="Ver Historial">
                                <i class="fa fa-history" style="font-size:16px;"></i>
                            </button>
                            <button class="btn" style="color:#1cc88a; border:none; background:none; cursor:pointer;" onclick="recargarSaldo(<?= htmlspecialchars(json_encode($b)) ?>)" title="Recargar">
                                <i class="fa fa-money-bill-wave" style="font-size:16px;"></i>
                            </button>
                            <button class="btn" style="color:#f6c23e; border:none; background:none; cursor:pointer;" onclick="editarBen(<?= htmlspecialchars(json_encode($b)) ?>)" title="Editar">
                                <i class="fa fa-edit" style="font-size:16px;"></i>
                            </button>
                            <a href="javascript:void(0)" onclick="confirmarEliminar(<?= $b['pro_codigo'] ?>)" style="color:#e74a3b; text-decoration:none;" title="Eliminar">
                                <i class="fa fa-trash" style="font-size:16px;"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                <?php endforeach; else: ?>
                    <tr><td colspan="5" style="padding:30px; text-align:center; color:#999;">No hay beneficiarios registrados.</td></tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<script>
function filtrarTabla() {
    let input = document.getElementById("busqueda").value.toLowerCase();
    let filas = document.getElementsByClassName("fila-ben");
    for (let i = 0; i < filas.length; i++) {
        let nombre = filas[i].getElementsByTagName("td")[0].innerText.toLowerCase();
        filas[i].style.display = nombre.includes(input) ? "" : "none";
    }
}

function verHistorial(codigo, nombre) {
    Swal.fire({
        title: 'Historial de Abonos',
        html: `<div style='text-align:left; margin-bottom:15px;'><b>Beneficiario:</b> ${nombre}</div>
               <div id="historial-tabla" style="max-height:300px; overflow-y:auto;">Cargando...</div>`,
        width: '600px',
        confirmButtonText: 'Cerrar',
        confirmButtonColor: '#858796',
        didOpen: () => {
            $.post('c_beneficiarios.php', { accion: 'ver_historial', codigo: codigo }, function(res) {
                $('#historial-tabla').html(res);
            });
        }
    });
}

function recargarSaldo(datos) {
    const hoy = new Date().toISOString().split('T')[0];
    Swal.fire({
        title: 'Nueva Recarga / Abono',
        html: `
            <div style="text-align:left; margin-bottom:10px;"><b>Beneficiario:</b> ${datos.pro_nombre}<br><small>Consumido actual: $${datos.pro_saldo_actual}</small></div>
            <div style="text-align:left; margin-bottom:5px;"><small>Fecha:</small></div>
            <input id="swal-fecha" type="date" class="swal2-input" value="${hoy}">
            <div style="text-align:left; margin-bottom:5px;"><small>Monto ($):</small></div>
            <input id="swal-monto" type="number" step="0.01" class="swal2-input" placeholder="0.00">
            <div style="text-align:left; margin-bottom:5px;"><small>Nota:</small></div>
            <input id="swal-obs" type="text" class="swal2-input" placeholder="Opcional">
        `,
        showCancelButton: true,
        confirmButtonText: 'Guardar Recarga',
        confirmButtonColor: '#1cc88a',
        cancelButtonText: 'Cancelar',
        preConfirm: () => {
            const monto = document.getElementById('swal-monto').value;
            if (!monto || monto <= 0) { Swal.showValidationMessage('Monto inválido'); }
            return { accion: 'recargar', codigo: datos.pro_codigo, fecha: document.getElementById('swal-fecha').value, monto: monto, observacion: document.getElementById('swal-obs').value }
        }
    }).then((result) => { if (result.isConfirmed) { enviarDatos(result.value); } });
}

function abrirModal(datos = null) {
    const esEdicion = datos !== null;
    Swal.fire({
        title: esEdicion ? 'Editar' : 'Nuevo',
        html: `
            <input id="swal-codigo" type="hidden" value="${esEdicion ? datos.pro_codigo : 0}">
            <input id="swal-nombre" class="swal2-input" placeholder="Nombre" value="${esEdicion ? datos.pro_nombre : ''}">
            <select id="swal-tipo" class="swal2-input">
                <option value="PROFESOR" ${esEdicion && datos.pro_tipo == 'PROFESOR' ? 'selected' : ''}>PROFESOR</option>
                <option value="ESTUDIANTE" ${esEdicion && datos.pro_tipo == 'ESTUDIANTE' ? 'selected' : ''}>ESTUDIANTE</option>
            </select>
            <input id="swal-limite" type="number" step="0.01" class="swal2-input" value="${esEdicion ? datos.pro_limite_credito : '50.00'}">
        `,
        showCancelButton: true,
        confirmButtonText: 'Guardar',
        preConfirm: () => {
            const nombre = document.getElementById('swal-nombre').value;
            if (!nombre) { Swal.showValidationMessage('Nombre requerido'); }
            return { accion: 'guardar', codigo: document.getElementById('swal-codigo').value, nombre: nombre, tipo: document.getElementById('swal-tipo').value, limite: document.getElementById('swal-limite').value }
        }
    }).then((result) => { if (result.isConfirmed) { enviarDatos(result.value); } });
}

function enviarDatos(datos) {
    $.ajax({
        url: 'c_beneficiarios.php', 
        type: 'POST',
        data: datos,
        success: function(res) {
            if (res.trim() === "ok") {
                Swal.fire({ icon: 'success', title: 'Éxito', timer: 1000, showConfirmButton: false }).then(() => location.reload());
            } else { Swal.fire('Error', res, 'error'); }
        }
    });
}

function editarBen(objeto) { abrirModal(objeto); }

function confirmarEliminar(id) {
    Swal.fire({
        title: '¿Eliminar?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Sí'
    }).then((result) => { if (result.isConfirmed) { window.location.href = `index.php?page=beneficiarios&del=${id}`; } });
}
</script>