<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// Eliminamos la validación redundante de sesión aquí, ya que index.php la controla por ti antes de incluir este archivo.
$bd = new clsbdd();
?>

<div class="row mb-4 align-items-center">
    <div class="col">
        <h2 class="h3 text-dark fw-bold mb-0">
            <i class="fas fa-layer-group text-primary me-2"></i>Configuración de Categorías y Rangos
        </h2>
        <p class="text-muted small mb-0">Administra los niveles, clasificaciones por edades (Baby, Infantil, Juvenil) y sus rangos de ejecución técnica.</p>
    </div>
    <div class="col-auto">
        <button class="btn btn-primary rounded-pill shadow-sm fw-bold" data-bs-toggle="modal" data-bs-target="#modalNivel" id="btnNuevoNivel">
            <i class="fas fa-plus me-2"></i>Agregar Nivel
        </button>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-4">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" id="tablaNivelesConfig">
                <thead class="table-light text-muted small fw-bold text-uppercase">
                    <tr>
                        <th>Categoría / Grupo</th>
                        <th>Rango Técnico</th>
                        <th>Estado</th>
                        <th class="text-center">Acción</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $sql = "SELECT * FROM bas_niveles_config ORDER BY nvc_categoria ASC, nvc_rango ASC";
                    $res = $bd->ejecutar($sql);
                    if ($res && $res->num_rows > 0) {
                        while ($r = $res->fetch_assoc()) {
                            $badgeColor = ($r['nvc_estado'] == 'ACTIVO') ? 'bg-success' : 'bg-secondary';
                            echo "<tr>";
                            echo "<td><strong class='text-dark'>" . htmlspecialchars($r['nvc_categoria']) . "</strong></td>";
                            echo "<td><span class='text-muted'>" . htmlspecialchars($r['nvc_rango']) . "</span></td>";
                            echo "<td><span class='badge {$badgeColor} rounded-pill px-2 py-1'>" . $r['nvc_estado'] . "</span></td>";
                            echo "<td class='text-center'>
                                    <button type='button' class='btn btn-xs btn-warning py-0 px-2 btn-editar-nivel' 
                                            data-id='{$r['nvc_id']}' 
                                            data-categoria='{$r['nvc_categoria']}' 
                                            data-rango='{$r['nvc_rango']}' 
                                            data-estado='{$r['nvc_estado']}'>
                                        <i class='fas fa-edit me-1'></i> Editar
                                    </button>
                                  </td>";
                            echo "</tr>";
                        }
                    } else {
                        echo "<tr><td colspan='4' class='text-muted text-center py-3'>No hay categorías o rangos configurados.</td></tr>";
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="modalNivel" tabindex="-1" aria-labelledby="modalNivelLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header bg-light border-0 py-3">
                <h5 class="modal-title fw-bold text-dark" id="modalNivelLabel">
                    <i class="fas fa-layer-group text-primary me-2"></i>Gestionar Nivel
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <form id="formNivelConfig" action="controlador/ConfigNivelesController.php?action=guardar_nivel" method="POST">
                <div class="modal-body p-4">
                    <input type="hidden" name="nvc_id" id="nvc_id">
                    
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label small fw-bold text-muted text-uppercase mb-1">Categoría / Grupo de Edad</label>
                            <input type="text" class="form-control text-uppercase" name="nvc_categoria" id="nvc_categoria" placeholder="Ej: BABY, INFANTIL, JUVENIL, MASTER" required>
                        </div>
                        
                        <div class="col-12">
                            <label class="form-label small fw-bold text-muted text-uppercase mb-1">Rango / Nivel Técnico</label>
                            <input type="text" class="form-control text-uppercase" name="nvc_rango" id="nvc_rango" placeholder="Ej: BÁSICO, INTERMEDIO, AVANZADO, ELITE" required>
                        </div>
                        
                        <div class="col-12">
                            <label class="form-label small fw-bold text-muted text-uppercase mb-1">Estado</label>
                            <select class="form-select" name="nvc_estado" id="nvc_estado">
                                <option value="ACTIVO">ACTIVO</option>
                                <option value="INACTIVO">INACTIVO</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="modal-footer bg-light border-0 p-3">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4 shadow-sm fw-bold">Guardar Cambios</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Escuchar clicks para abrir el modal en modo EDICIÓN
    const tabla = document.getElementById('tablaNivelesConfig');
    if (tabla) {
        tabla.addEventListener('click', function(e) {
            const btn = e.target.closest('.btn-editar-nivel');
            if (btn) {
                document.getElementById('modalNivelLabel').innerHTML = '<i class="fas fa-edit text-warning me-2"></i>Modificar Categoría / Rango';
                
                // Mapear los datos del row al formulario
                document.getElementById('nvc_id').value = btn.getAttribute('data-id');
                document.getElementById('nvc_categoria').value = btn.getAttribute('data-categoria');
                document.getElementById('nvc_rango').value = btn.getAttribute('data-rango');
                document.getElementById('nvc_estado').value = btn.getAttribute('data-estado');
                
                // Mostrar el modal usando la instancia de Bootstrap 5 nativa de tu layout
                new bootstrap.Modal(document.getElementById('modalNivel')).show();
            }
        });
    }

    // Escuchar el botón para CREAR NUEVO (Limpia campos de control)
    document.getElementById('btnNuevoNivel').addEventListener('click', function() {
        document.getElementById('formNivelConfig').reset();
        document.getElementById('modalNivelLabel').innerHTML = '<i class="fas fa-layer-group text-primary me-2"></i>Agregar Categoría / Rango';
        document.getElementById('nvc_id').value = '';
        document.getElementById('nvc_estado').value = 'ACTIVO';
    });
});
</script>