<?php
// vista/rubricas/gestionar.php
require_once "controlador/RubricaController.php";

$rubricaCtrl = new RubricaController();
$mensaje = "";

// --- PROCESAMIENTO DE ACCIONES FORMULARIO (POST) ---
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['accion'])) {
    switch ($_POST['accion']) {
        // --- GESTIÓN DE NIVELES ---
        case 'add_level':
            $res = $rubricaCtrl->agregarNivel($_POST['niv_nombre'], $_POST['niv_estado']);
            $mensaje = $res ? "<div class='alert alert-success'>Nivel agregado con éxito.</div>" : "<div class='alert alert-danger'>Error al agregar el nivel.</div>";
            break;
        case 'edit_level':
            $res = $rubricaCtrl->editarNivel($_POST['niv_id'], $_POST['niv_nombre'], $_POST['niv_estado']);
            $mensaje = $res ? "<div class='alert alert-success'>Nivel actualizado con éxito.</div>" : "<div class='alert alert-danger'>Error al actualizar el nivel.</div>";
            break;
        case 'delete_level':
            $res = $rubricaCtrl->eliminarNivel($_POST['niv_id']);
            $mensaje = $res ? "<div class='alert alert-success'>Nivel eliminado correctamente.</div>" : "<div class='alert alert-danger'>Error al eliminar el nivel.</div>";
            break;

        // --- GESTIÓN DE COMPONENTES ---
        case 'add_componente':
            $res = $rubricaCtrl->agregarComponente($_POST['niv_id'], $_POST['tip_id'], $_POST['com_nombre'], $_POST['com_puntaje_max'], $_POST['com_estado']);
            $mensaje = $res ? "<div class='alert alert-success'>Componente guardado exitosamente.</div>" : "<div class='alert alert-danger'>Error al guardar el componente.</div>";
            break;
            
        case 'edit_componente':
            $res = $rubricaCtrl->editarComponente($_POST['com_id'], $_POST['tip_id'], $_POST['com_nombre'], $_POST['com_puntaje_max'], $_POST['com_estado']);
            $mensaje = $res ? "<div class='alert alert-success'>Componente actualizado con éxito.</div>" : "<div class='alert alert-danger'>Error al actualizar componente.</div>";
            break;

        case 'delete_componente':
            $res = $rubricaCtrl->eliminarComponente($_POST['com_id']);
            $mensaje = $res ? "<div class='alert alert-success'>Componente y sus ítems eliminados correctamente.</div>" : "<div class='alert alert-danger'>Error al eliminar el componente.</div>";
            break;

        // --- GESTIÓN DE ÍTEMS ---
        case 'add_item':
            $res = $rubricaCtrl->agregarItem($_POST['com_id'], $_POST['itm_descripcion'], $_POST['itm_estado']);
            $mensaje = $res ? "<div class='alert alert-success'>Ítem agregado con éxito.</div>" : "<div class='alert alert-danger'>Error al agregar el ítem.</div>";
            break;

        case 'edit_item':
            $res = $rubricaCtrl->editarItem($_POST['itm_id'], $_POST['itm_descripcion'], $_POST['itm_estado']);
            $mensaje = $res ? "<div class='alert alert-success'>Ítem modificado correctamente.</div>" : "<div class='alert alert-danger'>Error al modificar el ítem.</div>";
            break;

        case 'delete_item':
            $res = $rubricaCtrl->eliminarItem($_POST['itm_id']);
            $mensaje = $res ? "<div class='alert alert-success'>Ítem removido con éxito.</div>" : "<div class='alert alert-danger'>Error al eliminar el ítem.</div>";
            break;
    }
}

// Carga inicial de catálogos
$niveles = $rubricaCtrl->obtenerNiveles();
$tiposJuzgamiento = $rubricaCtrl->obtenerTiposJuzgamiento();
?>

<div class="row mb-4">
    <div class="col-12">
        <div class="card border-0 shadow-sm rounded-3">
            <div class="card-body bg-white p-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h4 class="fw-bold mb-1 text-dark"><i class="fas fa-clipboard-list text-pink me-2"></i>Matriz de Rúbricas Técnicas</h4>
                        <span class="text-muted small">Configuración estructural de criterios de evaluación, puntajes máximos y sub-ítems desglosados por nivel de competencia.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?= $mensaje ?>

<!-- BARRA DE NAVEGACIÓN Y BOTÓN NUEVO NIVEL -->
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <ul class="nav nav-pills bg-white p-2 rounded-3 shadow-sm mb-0 flex-grow-1" id="pills-tab" role="tablist">
        <?php foreach ($niveles as $index => $niv): ?>
            <li class="nav-item" role="presentation">
                <button class="nav-link <?= $index === 0 ? 'active bg-dark' : 'text-dark' ?> fw-bold px-4 py-2 me-2 text-uppercase" 
                        id="pill-<?= $niv['niv_id'] ?>-tab" data-bs-toggle="pill" data-bs-target="#pill-<?= $niv['niv_id'] ?>" 
                        type="button" role="tab"><?= htmlspecialchars($niv['niv_nombre']) ?></button>
            </li>
        <?php endforeach; ?>
    </ul>
    <button class="btn text-white px-3 py-2 fw-bold shadow-sm" style="background-color: #2c3e50;" data-bs-toggle="modal" data-bs-target="#modalAddNivel">
        <i class="fas fa-plus-circle me-1"></i> Nuevo Nivel
    </button>
</div>

<div class="tab-content" id="pills-tabContent">
    <?php foreach ($niveles as $index => $niv): ?>
        <div class="tab-pane fade <?= $index === 0 ? 'show active' : '' ?>" id="pill-<?= $niv['niv_id'] ?>" role="tabpanel">
            
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="d-flex align-items-center">
                    <h5 class="fw-bold text-secondary mb-0 me-2">Componentes de Nivel: <?= htmlspecialchars($niv['niv_nombre']) ?></h5>
                    <button class="btn btn-xs btn-outline-primary border-0" title="Editar Nivel" onclick="openEditNivel(<?= $niv['niv_id'] ?>, '<?= htmlspecialchars($niv['niv_nombre']) ?>', <?= $niv['niv_estado'] ?>)">
                        <i class="fas fa-pen fa-xs"></i>
                    </button>
                    <button class="btn btn-xs btn-outline-danger border-0 ms-1" title="Eliminar Nivel" onclick="openDeleteNivel(<?= $niv['niv_id'] ?>, '<?= htmlspecialchars($niv['niv_nombre']) ?>')">
                        <i class="fas fa-trash fa-xs"></i>
                    </button>
                </div>
                <button class="btn btn-sm text-white px-3" style="background-color: #f26a8d;" data-bs-toggle="modal" data-bs-target="#modalAddComponente" onclick="document.getElementById('add_com_niv_id').value = '<?= $niv['niv_id'] ?>'">
                    <i class="fas fa-plus me-1"></i> Nuevo Componente
                </button>
            </div>

            <!-- ACORDEÓN DE COMPONENTES -->
            <div class="accordion shadow-sm" id="acc-nivel-<?= $niv['niv_id'] ?>">
                <?php 
                $componentes = $rubricaCtrl->obtenerComponentesPorNivel($niv['niv_id']);
                if (empty($componentes)): 
                ?>
                    <div class="alert alert-light border border-dashed text-center p-4 m-0">No existen componentes configurados para este nivel.</div>
                <?php 
                else:
                    foreach ($componentes as $cIndex => $com): 
                ?>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="heading-com-<?= $com['com_id'] ?>">
                            <div class="accordion-button collapsed bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-com-<?= $com['com_id'] ?>">
                                <div class="w-100 d-flex justify-content-between align-items-center pe-3">
                                    <div>
                                        <span class="badge bg-secondary me-2"><?= htmlspecialchars($com['tip_nombre'] ?? 'Sin Tipo') ?></span>
                                        <strong class="text-dark"><?= htmlspecialchars($com['com_nombre']) ?></strong>
                                        <?= $com['com_estado'] == 0 ? '<span class="badge bg-danger ms-2">Inactivo</span>' : '<span class="badge bg-success ms-2">Activo</span>' ?>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <span class="badge bg-dark px-3 py-2 me-3 fs-6">Máx: <?= number_format($com['com_puntaje_max'], 2) ?> pts</span>
                                        <button class="btn btn-xs btn-outline-primary me-1" onclick="event.stopPropagation(); openEditComponente(<?= htmlspecialchars(json_encode($com)) ?>);">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-xs btn-outline-danger" onclick="event.stopPropagation(); openDeleteComponente(<?= $com['com_id'] ?>, '<?= htmlspecialchars($com['com_nombre']) ?>');">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </h2>
                        <div id="collapse-com-<?= $com['com_id'] ?>" class="accordion-collapse collapse" data-bs-parent="#acc-nivel-<?= $niv['niv_id'] ?>">
                            <div class="accordion-body bg-light">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h6 class="fw-bold mb-0 text-muted"><i class="fas fa-stream me-2"></i>Ítems Evaluativos</h6>
                                    <button class="btn btn-xs btn-dark py-1" onclick="document.getElementById('add_itm_com_id').value = '<?= $com['com_id'] ?>'" data-bs-toggle="modal" data-bs-target="#modalAddItem">
                                        <i class="fas fa-plus fa-xs me-1"></i> Agregar Ítem
                                    </button>
                                </div>

                                <!-- TABLA DE ÍTEMS -->
                                <div class="table-responsive bg-white rounded shadow-sm border">
                                    <table class="table table-hover align-middle mb-0 small">
                                        <thead class="table-light text-secondary">
                                            <tr>
                                                <th style="width: 80px;">ID</th>
                                                <th>Descripción del Criterio / Indicador Técnico</th>
                                                <th style="width: 100px;">Estado</th>
                                                <th style="width: 120px;" class="text-end">Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php 
                                            $items = $rubricaCtrl->obtenerItemsPorComponente($com['com_id']);
                                            if (empty($items)):
                                            ?>
                                                <tr><td colspan="4" class="text-center text-muted p-3">No hay ítems configurados en este componente.</td></tr>
                                            <?php 
                                            else:
                                                foreach ($items as $itm): 
                                            ?>
                                                <tr>
                                                    <td class="text-muted fw-bold">#<?= $itm['itm_id'] ?></td>
                                                    <td><?= htmlspecialchars($itm['itm_descripcion']) ?></td>
                                                    <td>
                                                        <?= $itm['itm_estado'] == 1 ? '<span class="badge bg-light-success text-success border border-success px-2">Activo</span>' : '<span class="badge bg-light-danger text-danger border border-danger px-2">Inactivo</span>' ?>
                                                    </td>
                                                    <td class="text-end">
                                                        <button class="btn btn-xs btn-light text-primary border border-secondary-subtle" onclick="openEditItem(<?= htmlspecialchars(json_encode($itm)) ?>);"><i class="fas fa-pen"></i></button>
                                                        <button class="btn btn-xs btn-light text-danger border border-secondary-subtle" onclick="openDeleteItem(<?= $itm['itm_id'] ?>, '<?= htmlspecialchars($itm['itm_descripcion']) ?>');"><i class="fas fa-trash-alt"></i></button>
                                                    </td>
                                                </tr>
                                            <?php 
                                                endforeach;
                                            endif; 
                                            ?>
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                    </div>
                <?php 
                    endforeach;
                endif; 
                ?>
            </div>

        </div>
    <?php endforeach; ?>
</div>

<!-- ==========================================
     MODALES PARA ACCIONES (CRUD NIVELES)
     ========================================== -->
<!-- Modal: Agregar Nivel -->
<div class="modal fade" id="modalAddNivel" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" class="modal-content">
            <input type="hidden" name="accion" value="add_level">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title fw-bold"><i class="fas fa-layer-group me-2"></i>Nuevo Nivel de Rúbrica</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body row g-3">
                <div class="col-12">
                    <label class="form-label fw-bold small">Nombre del Nivel</label>
                    <input type="text" name="niv_nombre" class="form-control" placeholder="Ej. MASTER / ELITE" required>
                </div>
                <div class="col-12">
                    <label class="form-label fw-bold small">Estado Inicial</label>
                    <select name="niv_estado" class="form-select">
                        <option value="1">Activo</option>
                        <option value="0">Inactivo</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer border-top-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn text-white px-4" style="background-color: #2c3e50;">Guardar Nivel</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal: Editar Nivel -->
<div class="modal fade" id="modalEditNivel" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" class="modal-content">
            <input type="hidden" name="accion" value="edit_level">
            <input type="hidden" name="niv_id" id="edit_niv_id">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title fw-bold"><i class="fas fa-pen me-2"></i>Editar Nivel</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body row g-3">
                <div class="col-12">
                    <label class="form-label fw-bold small">Nombre del Nivel</label>
                    <input type="text" name="niv_nombre" id="edit_niv_nombre" class="form-control" required>
                </div>
                <div class="col-12">
                    <label class="form-label fw-bold small">Estado</label>
                    <select name="niv_estado" id="edit_niv_estado" class="form-select">
                        <option value="1">Activo</option>
                        <option value="0">Inactivo</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer border-top-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-primary px-4">Actualizar Nivel</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal: Eliminar Nivel -->
<div class="modal fade" id="modalDeleteNivel" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" class="modal-content">
            <input type="hidden" name="accion" value="delete_level">
            <input type="hidden" name="niv_id" id="delete_niv_id">
            <div class="modal-body text-center py-4">
                <i class="fas fa-exclamation-triangle text-danger fs-1 mb-3"></i>
                <h5 class="fw-bold text-dark">¿Eliminar este nivel completo?</h5>
                <p class="text-muted small px-3">Estás a punto de eliminar el nivel <b id="delete_niv_label"></b>. Se eliminarán en cascada todos sus componentes e ítems asociados.</p>
                <div class="d-flex justify-content-center gap-2 mt-4">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-danger px-4">Sí, eliminar</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- ==========================================
     MODALES PARA ACCIONES (CRUD COMPONENTES)
     ========================================== -->
<!-- Modal: Agregar Componente -->
<div class="modal fade" id="modalAddComponente" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" class="modal-content">
            <input type="hidden" name="accion" value="add_componente">
            <input type="hidden" name="niv_id" id="add_com_niv_id">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title fw-bold"><i class="fas fa-plus me-2"></i>Nuevo Componente</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body row g-3">
                <div class="col-12">
                    <label class="form-label fw-bold small">Nombre del Componente</label>
                    <input type="text" name="com_nombre" class="form-control" placeholder="Ej. COORDINACIÓN / ACROBACIA" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold small">Tipo Juzgamiento</label>
                    <select name="tip_id" class="form-select" required>
                        <?php foreach($tiposJuzgamiento as $tp): ?>
                            <option value="<?= $tp['tip_id'] ?>"><?= htmlspecialchars($tp['tip_nombre']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold small">Puntaje Máximo</label>
                    <input type="number" step="0.01" name="com_puntaje_max" class="form-control" value="0.00" required>
                </div>
                <div class="col-12">
                    <label class="form-label fw-bold small">Estado Inicial</label>
                    <select name="com_estado" class="form-select">
                        <option value="1">Activo</option>
                        <option value="0">Inactivo</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer border-top-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn text-white px-4" style="background-color: #f26a8d;">Guardar</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal: Editar Componente -->
<div class="modal fade" id="modalEditComponente" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" class="modal-content">
            <input type="hidden" name="accion" value="edit_componente">
            <input type="hidden" name="com_id" id="edit_com_id">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title fw-bold"><i class="fas fa-edit me-2"></i>Editar Componente</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body row g-3">
                <div class="col-12">
                    <label class="form-label fw-bold small">Nombre del Componente</label>
                    <input type="text" name="com_nombre" id="edit_com_nombre" class="form-control" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold small">Tipo Juzgamiento</label>
                    <select name="tip_id" id="edit_com_tip_id" class="form-select" required>
                        <?php foreach($tiposJuzgamiento as $tp): ?>
                            <option value="<?= $tp['tip_id'] ?>"><?= htmlspecialchars($tp['tip_nombre']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold small">Puntaje Máximo</label>
                    <input type="number" step="0.01" name="com_puntaje_max" id="edit_com_puntaje_max" class="form-control" required>
                </div>
                <div class="col-12">
                    <label class="form-label fw-bold small">Estado</label>
                    <select name="com_estado" id="edit_com_estado" class="form-select">
                        <option value="1">Activo</option>
                        <option value="0">Inactivo</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer border-top-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-primary px-4">Actualizar</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal: Eliminar Componente -->
<div class="modal fade" id="modalDeleteComponente" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" class="modal-content">
            <input type="hidden" name="accion" value="delete_componente">
            <input type="hidden" name="com_id" id="delete_com_id">
            <div class="modal-body text-center py-4">
                <i class="fas fa-exclamation-triangle text-danger fs-1 mb-3"></i>
                <h5 class="fw-bold text-dark">¿Estás absolutamente seguro?</h5>
                <p class="text-muted small px-3">Estás a punto de eliminar el componente <b id="delete_com_label"></b>. Al hacerlo, todos sus criterios asociados (Ítems) se borrarán de forma automática.</p>
                <div class="d-flex justify-content-center gap-2 mt-4">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">No, cancelar</button>
                    <button type="submit" class="btn btn-danger px-4">Sí, eliminar</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- ==========================================
     MODALES PARA ACCIONES (CRUD ÍTEMS)
     ========================================== -->
<!-- Modal: Agregar Ítem -->
<div class="modal fade" id="modalAddItem" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" class="modal-content">
            <input type="hidden" name="accion" value="add_item">
            <input type="hidden" name="com_id" id="add_itm_com_id">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title fw-bold"><i class="fas fa-plus me-2"></i>Agregar Ítem Evaluativo</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body row g-3">
                <div class="col-12">
                    <label class="form-label fw-bold small">Descripción del Criterio</label>
                    <textarea name="itm_descripcion" rows="3" class="form-control" placeholder="Escribe los aspectos específicos que el Juez debe observar..." required></textarea>
                </div>
                <div class="col-12">
                    <label class="form-label fw-bold small">Estado</label>
                    <select name="itm_estado" class="form-select">
                        <option value="1">Activo</option>
                        <option value="0">Inactivo</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer border-top-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-dark px-4">Añadir Criterio</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal: Editar Ítem -->
<div class="modal fade" id="modalEditItem" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" class="modal-content">
            <input type="hidden" name="accion" value="edit_item">
            <input type="hidden" name="itm_id" id="edit_itm_id">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title fw-bold"><i class="fas fa-pen me-2"></i>Modificar Ítem</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body row g-3">
                <div class="col-12">
                    <label class="form-label fw-bold small">Descripción del Criterio</label>
                    <textarea name="itm_descripcion" id="edit_itm_descripcion" rows="3" class="form-control" required></textarea>
                </div>
                <div class="col-12">
                    <label class="form-label fw-bold small">Estado</label>
                    <select name="itm_estado" id="edit_itm_estado" class="form-select">
                        <option value="1">Activo</option>
                        <option value="0">Inactivo</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer border-top-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-primary px-4">Actualizar Ítem</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal: Eliminar Ítem -->
<div class="modal fade" id="modalDeleteItem" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" class="modal-content">
            <input type="hidden" name="accion" value="delete_item">
            <input type="hidden" name="itm_id" id="delete_itm_id">
            <div class="modal-body text-center py-4">
                <i class="fas fa-trash text-danger fs-1 mb-3"></i>
                <h5 class="fw-bold text-dark">¿Eliminar este criterio?</h5>
                <p class="text-muted small px-3">Estás a punto de borrar de la rúbrica el ítem: <br><b id="delete_itm_label" class="text-dark"></b>.</p>
                <div class="d-flex justify-content-center gap-2 mt-4">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-danger px-4">Eliminar</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- JavaScript Interactivo de Apertura de Ventanas Modales -->
<script>
// Funciones para Niveles
function openEditNivel(id, nombre, estado) {
    document.getElementById('edit_niv_id').value = id;
    document.getElementById('edit_niv_nombre').value = nombre;
    document.getElementById('edit_niv_estado').value = estado;
    new bootstrap.Modal(document.getElementById('modalEditNivel')).show();
}

function openDeleteNivel(id, nombre) {
    document.getElementById('delete_niv_id').value = id;
    document.getElementById('delete_niv_label').innerText = nombre;
    new bootstrap.Modal(document.getElementById('modalDeleteNivel')).show();
}

// Funciones para Componentes
function openEditComponente(data) {
    document.getElementById('edit_com_id').value = data.com_id;
    document.getElementById('edit_com_nombre').value = data.com_nombre;
    document.getElementById('edit_com_tip_id').value = data.tip_id;
    document.getElementById('edit_com_puntaje_max').value = data.com_puntaje_max;
    document.getElementById('edit_com_estado').value = data.com_estado;
    new bootstrap.Modal(document.getElementById('modalEditComponente')).show();
}

function openDeleteComponente(id, nombre) {
    document.getElementById('delete_com_id').value = id;
    document.getElementById('delete_com_label').innerText = nombre;
    new bootstrap.Modal(document.getElementById('modalDeleteComponente')).show();
}

// Funciones para Ítems
function openEditItem(data) {
    document.getElementById('edit_itm_id').value = data.itm_id;
    document.getElementById('edit_itm_descripcion').value = data.itm_descripcion;
    document.getElementById('edit_itm_estado').value = data.itm_estado;
    new bootstrap.Modal(document.getElementById('modalEditItem')).show();
}

function openDeleteItem(id, descripcion) {
    document.getElementById('delete_itm_id').value = id;
    document.getElementById('delete_itm_label').innerText = descripcion;
    new bootstrap.Modal(document.getElementById('modalDeleteItem')).show();
}
</script>