<?php
// Evitar acceso directo si no está definido en el index
if (!isset($_SESSION['usu_id'])) {
    header("Location: login.php");
    exit();
}

$bd = new clsbdd();
?>

<!-- Hojas de estilo y Script de Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

<div class="row mb-4 align-items-center">
    <div class="col">
        <h2 class="h3 text-dark fw-bold mb-0">
            <i class="fas fa-users text-primary me-2"></i>Nómina de Bastoneras
        </h2>
        <p class="text-muted small mb-0">Gestión de fichas de inscripción, categorías, niveles técnicos y estado de las alumnas.</p>
    </div>
    <div class="col-auto">
        <button class="btn btn-primary rounded-pill shadow-sm fw-bold" data-bs-toggle="modal" data-bs-target="#modalBastonera" id="btnNuevaBastonera">
            <i class="fas fa-plus me-2"></i>Nueva Bastonera
        </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="tablaBastoneras">
                <thead class="table-light text-muted small fw-bold text-uppercase">
                    <tr>
                        <th style="width: 12%">Cédula</th>
                        <th>Apellidos y Nombres</th>
                        <th style="width: 20%">Categoría / Nivel</th>
                        <th style="width: 15%">Representante</th>
                        <th style="width: 12%">Fecha Ingreso</th>
                        <th style="width: 10%">Estado</th>
                        <th class="text-center" style="width: 15%">Acciones</th>
                    </tr>
                </thead>
                <tbody class="small">
                    <?php
                    // Query con LEFT JOIN para obtener la categoría y nivel configurados
                    $sql = "SELECT b.*, c.cla_categoria, c.cla_nivel, FLOOR(DATEDIFF(CURDATE(), b.bas_fecha_nacimiento) / 365.25) as edad 
                            FROM bas_bastoneras b
                            LEFT JOIN bas_clasificaciones c ON b.cla_id = c.cla_id
                            ORDER BY b.bas_apellidos ASC";
                    $res = $bd->ejecutar($sql);

                    if ($res && $res->num_rows > 0) {
                        while ($row = $res->fetch_assoc()) {
                            $es_activa = ($row['bas_estado'] == 1);
                            
                            $badge_estado = $es_activa 
                                ? '<span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-1">Activa</span>' 
                                : '<span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3 py-1">Inactiva</span>';
                            
                            $categoria_nivel = (!empty($row['cla_categoria'])) 
                                ? '<span class="badge bg-light text-primary border rounded-pill px-2 py-1"><i class="fas fa-star text-warning me-1"></i>' . htmlspecialchars($row['cla_categoria'] . " - " . $row['cla_nivel'], ENT_QUOTES, 'UTF-8') . '</span>'
                                : '<span class="text-muted italic small">Sin asignar</span>';
                            
                            $cla_id_actual = !empty($row['cla_id']) ? $row['cla_id'] : '';
                            
                            $btn_estado_rapido = $es_activa
                                ? "<button class='btn btn-sm btn-outline-danger rounded-pill btn-estado-bastonera' data-id='".$row['bas_id']."' data-nuevo-estado='0' data-cla-id='".$cla_id_actual."' title='Desactivar Bastonera'><i class='fas fa-user-slash'></i></button>"
                                : "<button class='btn btn-sm btn-outline-success rounded-pill btn-estado-bastonera' data-id='".$row['bas_id']."' data-nuevo-estado='1' data-cla-id='".$cla_id_actual."' title='Activar Bastonera'><i class='fas fa-user-check'></i></button>";

                            echo "<tr>";
                            echo "<td class='fw-bold text-muted'>" . htmlspecialchars($row['bas_cedula'], ENT_QUOTES, 'UTF-8') . "</td>";
                            echo "<td>";
                            echo "<div class='fw-bold text-dark'>" . htmlspecialchars($row['bas_apellidos'] . " " . $row['bas_nombres'], ENT_QUOTES, 'UTF-8') . "</div>";
                            echo "<div class='text-muted' style='font-size:0.75rem;'> " . $row['edad'] . " años • Tel: " . htmlspecialchars($row['bas_telefono'] ?? '-', ENT_QUOTES, 'UTF-8') . "</div>";
                            echo "</td>";
                            echo "<td id='categoria-col-".$row['bas_id']."'>" . $categoria_nivel . "</td>";
                            echo "<td>" . htmlspecialchars($row['bas_rep_nombre'] ?? '-', ENT_QUOTES, 'UTF-8') . "</td>";
                            echo "<td>" . date('d/m/Y', strtotime($row['bas_fecha_ingreso'])) . "</td>";
                            echo "<td id='estado-badge-".$row['bas_id']."'>" . $badge_estado . "</td>";
                            echo "<td class='text-center'>
                                    <div class='btn-group gap-1'>
                                        <button class='btn btn-sm btn-outline-info rounded-pill btn-ver-bastonera' data-id='".$row['bas_id']."' title='Ver Ficha Completa'>
                                            <i class='fas fa-eye'></i>
                                        </button>
                                        <button class='btn btn-sm btn-outline-secondary rounded-pill btn-editar-bastonera' 
                                                data-id='".$row['bas_id']."' 
                                                data-cedula='".htmlspecialchars($row['bas_cedula'], ENT_QUOTES, 'UTF-8')."'
                                                data-nombres='".htmlspecialchars($row['bas_nombres'], ENT_QUOTES, 'UTF-8')."'
                                                data-apellidos='".htmlspecialchars($row['bas_apellidos'], ENT_QUOTES, 'UTF-8')."'
                                                data-nacimiento='".$row['bas_fecha_nacimiento']."'
                                                data-telefono='".htmlspecialchars($row['bas_telefono'] ?? '', ENT_QUOTES, 'UTF-8')."'
                                                data-correo='".htmlspecialchars($row['bas_correo'] ?? '', ENT_QUOTES, 'UTF-8')."'
                                                data-ingreso='".$row['bas_fecha_ingreso']."'
                                                data-estado='".$row['bas_estado']."'
                                                data-cla_id='".htmlspecialchars($row['cla_id'] ?? '', ENT_QUOTES, 'UTF-8')."'
                                                data-rep_nombre='".htmlspecialchars($row['bas_rep_nombre'] ?? '', ENT_QUOTES, 'UTF-8')."'
                                                data-rep_cedula='".htmlspecialchars($row['bas_rep_cedula'] ?? '', ENT_QUOTES, 'UTF-8')."'
                                                data-rep_telefono='".htmlspecialchars($row['bas_rep_telefono'] ?? '', ENT_QUOTES, 'UTF-8')."'
                                                data-tipo_sangre='".htmlspecialchars($row['bas_tipo_sangre'] ?? '', ENT_QUOTES, 'UTF-8')."'
                                                data-estatura='".htmlspecialchars($row['bas_estatura_cm'] ?? '', ENT_QUOTES, 'UTF-8')."'
                                                data-peso='".htmlspecialchars($row['bas_peso_kg'] ?? '', ENT_QUOTES, 'UTF-8')."'
                                                data-alergias='".htmlspecialchars($row['bas_alergias_lesiones'] ?? '', ENT_QUOTES, 'UTF-8')."'
                                                data-foto='".htmlspecialchars($row['bas_foto'] ?? '', ENT_QUOTES, 'UTF-8')."'
                                                data-direccion='".htmlspecialchars($row['bas_direccion'] ?? '', ENT_QUOTES, 'UTF-8')."'
                                                data-latitud='".htmlspecialchars($row['bas_latitud'] ?? '', ENT_QUOTES, 'UTF-8')."'
                                                data-longitud='".htmlspecialchars($row['bas_longitud'] ?? '', ENT_QUOTES, 'UTF-8')."'
                                                title='Editar Datos'>
                                            <i class='fas fa-edit'></i>
                                        </button>
                                        <span id='btn-rapido-container-".$row['bas_id']."'>
                                            ".$btn_estado_rapido."
                                        </span>
                                    </div>
                                  </td>";
                            echo "</tr>";
                        }
                    } else {
                        echo "<tr><td colspan='7' class='text-center text-muted py-4'>No hay alumnas registradas en la academia.</td></tr>";
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Principal Ficha de Inscripción -->
<div class="modal fade" id="modalBastonera" data-bs-backdrop="static" tabindex="-1" aria-labelledby="modalBastoneraLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header bg-dark text-white border-0 py-3 rounded-top-4">
                <h5 class="modal-title fw-bold small text-uppercase" id="modalBastoneraLabel">
                    <i class="fas fa-id-card me-2 text-primary"></i>Ficha Integral de la Bastonera
                </h5>
                <button type="button" class="btn-close btn-close-white small" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <ul class="nav nav-tabs bg-light px-4 pt-2 border-bottom-0" id="bastoneraTabs" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active small small fw-bold text-uppercase py-2" id="generales-tab" data-bs-toggle="tab" data-bs-target="#generales" type="button" role="tab">1. Generales</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link small small fw-bold text-uppercase py-2" id="representante-tab" data-bs-toggle="tab" data-bs-target="#representante" type="button" role="tab">2. Representante</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link small small fw-bold text-uppercase py-2" id="tecnica-tab" data-bs-toggle="tab" data-bs-target="#tecnica" type="button" role="tab">3. Ficha Técnica</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link small small fw-bold text-uppercase py-2" id="medica-tab" data-bs-toggle="tab" data-bs-target="#medica" type="button" role="tab">4. Ficha Médica</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link small small fw-bold text-uppercase py-2" id="domicilio-tab" data-bs-toggle="tab" data-bs-target="#domicilio" type="button" role="tab">5. Domicilio</button>
                </li>
            </ul>

            <form id="formBastonera" method="POST" action="controlador/BastoneraController.php?action=guardar" enctype="multipart/form-data">
                <div class="modal-body p-4 pt-3 tab-content">
                    <input type="hidden" name="bas_id" id="bas_id">
                    
                    <!-- TAB 1: GENERALES -->
                    <div class="tab-pane fade show active" id="generales" role="tabpanel">
                        <div class="row g-3">
                            <!-- Columna Foto de Perfil -->
                            <div class="col-md-4 text-center border-end pe-md-4 d-flex flex-column align-items-center justify-content-center">
                                <label class="form-label text-muted small fw-bold d-block mb-3">Foto de la Alumna</label>
                                <div class="position-relative d-inline-block mb-3">
                                    <img id="previewFoto" src="assets/img/default-avatar.png" class="img-thumbnail rounded-circle shadow-sm" style="width: 140px; height: 140px; object-fit: cover; border: 3px solid #6c757d;">
                                </div>
                                <div class="w-100 px-2">
                                    <input type="file" class="form-control form-control-sm bg-light" name="bas_foto" id="bas_foto" accept="image/*">
                                    <small class="text-muted d-block mt-1" style="font-size:0.7rem;">Formatos: JPG, PNG. Máx 2MB.</small>
                                </div>
                            </div>
                            
                            <!-- Columna Datos Generales -->
                            <div class="col-md-8 ps-md-4">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="bas_cedula" class="form-label text-muted small fw-bold">Cédula de Identidad *</label>
                                        <input type="text" class="form-control bg-light" name="bas_cedula" id="bas_cedula" maxlength="10" required pattern="[0-9]{10}">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="bas_fecha_nacimiento" class="form-label text-muted small fw-bold">Fecha de Nacimiento *</label>
                                        <input type="date" class="form-control bg-light" name="bas_fecha_nacimiento" id="bas_fecha_nacimiento" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="bas_nombres" class="form-label text-muted small fw-bold">Nombres *</label>
                                        <input type="text" class="form-control bg-light text-uppercase" name="bas_nombres" id="bas_nombres" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="bas_apellidos" class="form-label text-muted small fw-bold">Apellidos *</label>
                                        <input type="text" class="form-control bg-light text-uppercase" name="bas_apellidos" id="bas_apellidos" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="bas_telefono" class="form-label text-muted small fw-bold">Teléfono de Contacto</label>
                                        <input type="text" class="form-control bg-light" name="bas_telefono" id="bas_telefono" placeholder="Ej: 099XXXXXXX">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="bas_correo" class="form-label text-muted small fw-bold">Correo Electrónico</label>
                                        <input type="email" class="form-control bg-light" name="bas_correo" id="bas_correo" placeholder="nombre@ejemplo.com">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- TAB 2: REPRESENTANTE -->
                    <div class="tab-pane fade" id="representante" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-12">
                                <label for="bas_rep_nombre" class="form-label text-muted small fw-bold">Nombre del Representante / Tutor</label>
                                <input type="text" class="form-control bg-light text-uppercase" name="bas_rep_nombre" id="bas_rep_nombre" placeholder="Ej: MARÍA BENÍTEZ (MAMÁ)">
                            </div>
                            <div class="col-md-6">
                                <label for="bas_rep_cedula" class="form-label text-muted small fw-bold">Cédula del Representante</label>
                                <input type="text" class="form-control bg-light" name="bas_rep_cedula" id="bas_rep_cedula" maxlength="10">
                            </div>
                            <div class="col-md-6">
                                <label for="bas_rep_telefono" class="form-label text-muted small fw-bold">Teléfono del Representante</label>
                                <input type="text" class="form-control bg-light" name="bas_rep_telefono" id="bas_rep_telefono" placeholder="Ej: 098XXXXXXX">
                            </div>
                        </div>
                    </div>

                    <!-- TAB 3: FICHA TÉCNICA -->
                    <div class="tab-pane fade" id="tecnica" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="bas_fecha_ingreso" class="form-label text-muted small fw-bold">Fecha de Ingreso *</label>
                                <input type="date" class="form-control bg-light" name="bas_fecha_ingreso" id="bas_fecha_ingreso" value="<?php echo date('Y-m-d'); ?>" required>
                            </div>
                            <div class="col-md-6">
                                <label for="bas_estado" class="form-label text-muted small fw-bold">Estado del Registro</label>
                                <select class="form-select bg-light fw-bold" name="bas_estado" id="bas_estado">
                                    <option value="1">ACTIVA</option>
                                    <option value="0">INACTIVA</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label for="cla_id_select" class="form-label text-muted small fw-bold">Categoría y Nivel Técnico Asignado *</label>
                                <select class="form-select bg-light fw-bold text-primary" name="cla_id" id="cla_id_select" required>
                                    <option value="">Seleccione una combinación (Categoría - Nivel)...</option>
                                    <?php
                                    $sql_c = "SELECT * FROM bas_clasificaciones WHERE cla_estado = 1 ORDER BY cla_categoria ASC, cla_nivel ASC";
                                    $res_c = $bd->ejecutar($sql_c);
                                    if ($res_c && $res_c->num_rows > 0) {
                                        while ($c = $res_c->fetch_assoc()) {
                                            echo "<option value='" . $c['cla_id'] . "'>" . htmlspecialchars($c['cla_categoria'] . " — " . $c['cla_nivel'], ENT_QUOTES, 'UTF-8') . "</option>";
                                        }
                                    }
                                    ?>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- TAB 4: FICHA MÉDICA -->
                    <div class="tab-pane fade" id="medica" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="bas_tipo_sangre" class="form-label text-muted small fw-bold">Tipo de Sangre</label>
                                <select class="form-select bg-light" name="bas_tipo_sangre" id="bas_tipo_sangre">
                                    <option value="">Seleccione--</option>
                                    <option value="O+">O+</option>
                                    <option value="O-">O-</option>
                                    <option value="A+">A+</option>
                                    <option value="A-">A-</option>
                                    <option value="B+">B+</option>
                                    <option value="AB+">AB+</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="bas_estatura_cm" class="form-label text-muted small fw-bold">Estatura (cm)</label>
                                <input type="number" class="form-control bg-light" name="bas_estatura_cm" id="bas_estatura_cm" placeholder="Ej: 160">
                            </div>
                            <div class="col-md-4">
                                <label for="bas_peso_kg" class="form-label text-muted small fw-bold">Peso (kg)</label>
                                <input type="number" step="0.1" class="form-control bg-light" name="bas_peso_kg" id="bas_peso_kg" placeholder="Ej: 50.5">
                            </div>
                            <div class="col-12">
                                <label for="bas_alergias_lesiones" class="form-label text-muted small fw-bold">Alergias, Condiciones Médicas o Lesiones Históricas</label>
                                <textarea class="form-control bg-light" name="bas_alergias_lesiones" id="bas_alergias_lesiones" rows="3" placeholder="Indicar si padece asma, lesiones previas en tobillos/rodillas, alergias médicas, etc."></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- TAB 5: DOMICILIO (MAPA REAL INTEGRADO) -->
                    <div class="tab-pane fade" id="domicilio" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-12">
                                <label for="bas_direccion" class="form-label text-muted small fw-bold">Dirección del Domicilio *</label>
                                <textarea class="form-control bg-light text-uppercase" name="bas_direccion" id="bas_direccion" rows="3" placeholder="Ej: Calle Principal S/N e Intersección, Conjunto Residencial, Sector..." required></textarea>
                            </div>
                            <div class="col-md-6">
                                <label for="bas_latitud" class="form-label text-muted small fw-bold font-monospace" style="font-size: 0.75rem;">Latitud</label>
                                <input type="text" class="form-control bg-light font-monospace" name="bas_latitud" id="bas_latitud" placeholder="Fijar en el mapa..." readonly>
                            </div>
                            <div class="col-md-6">
                                <label for="bas_longitud" class="form-label text-muted small fw-bold font-monospace" style="font-size: 0.75rem;">Longitud</label>
                                <input type="text" class="form-control bg-light font-monospace" name="bas_longitud" id="bas_longitud" placeholder="Fijar en el mapa..." readonly>
                            </div>
                            <div class="col-12 mt-2">
                                <!-- Contenedor físico interactivo del mapa -->
                                <div id="mapa_domicilio" class="border rounded shadow-sm" style="height: 250px; width: 100%; min-height: 200px; background: #eef0f2; z-index: 1;"></div>
                                <span class="text-muted d-block mt-2" style="font-size: 0.7rem;"><i class="fas fa-info-circle text-primary me-1"></i> Arrastre el marcador azul o haga clic en el mapa para ajustar la ubicación exacta.</span>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4 btn-sm fw-bold text-muted" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4 btn-sm fw-bold text-white">Guardar Cambios</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Activación Rápida -->
<div class="modal fade" id="modalActivacionRapida" data-bs-backdrop="static" tabindex="-1" aria-labelledby="modalActivacionRapidaLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header bg-success text-white border-0 py-3 rounded-top-4">
                <h5 class="modal-title fw-bold small text-uppercase" id="modalActivacionRapidaLabel">
                    <i class="fas fa-user-check me-2"></i>Activar Alumna e Inscribir Nivel
                </h5>
                <button type="button" class="btn-close btn-close-white small" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formActivacionRapida">
                <div class="modal-body p-4">
                    <input type="hidden" id="act_bas_id">
                    <p class="text-secondary small">Para cambiar el estado de la alumna a <strong>ACTIVA</strong>, el sistema de control requiere que selecciones obligatoriamente su categoría y nivel actual:</p>
                    <div class="mb-3">
                        <label for="act_cla_id" class="form-label text-muted small fw-bold">Clasificación Técnica Obligatoria *</label>
                        <select class="form-select bg-light fw-bold text-primary" id="act_cla_id" required>
                            <option value="">Seleccione Categoría y Nivel...</option>
                            <?php
                            // Re-utilización de clasificaciones activas
                            $res_c_mini = $bd->ejecutar($sql_c);
                            if ($res_c_mini && $res_c_mini->num_rows > 0) {
                                while ($c = $res_c_mini->fetch_assoc()) {
                                    echo "<option value='" . $c['cla_id'] . "'>" . htmlspecialchars($c['cla_categoria'] . " — " . $c['cla_nivel'], ENT_QUOTES, 'UTF-8') . "</option>";
                                }
                            }
                            ?>
                        </select>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-3 btn-sm fw-bold text-muted" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success rounded-pill px-4 btn-sm fw-bold text-white">Confirmar Activación</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Consulta Ficha Detallada -->
<div class="modal fade" id="modalFichaBastonera" tabindex="-1" aria-labelledby="modalFichaBastoneraLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header bg-dark text-white border-0 py-3 rounded-top-4">
                <h5 class="modal-title fw-bold small text-uppercase" id="modalFichaBastoneraLabel">
                    <i class="fas fa-eye me-2 text-info"></i>Consulta Institucional
                </h5>
                <button type="button" class="btn-close btn-close-white small" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4" id="contenido-ficha-bastonera">
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="text-muted small mt-2">Consultando registros del servidor...</p>
                </div>
            </div>
            <div class="modal-footer border-0 p-4 pt-0">
                <button type="button" class="btn btn-light rounded-pill px-4 btn-sm fw-bold text-muted" data-bs-dismiss="modal">Cerrar Ventana</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabla = document.getElementById('tablaBastoneras');
    
    // Instancia global del Modal de Activación Rápida
    const miniModalEl = document.getElementById('modalActivacionRapida');
    const miniModal = new bootstrap.Modal(miniModalEl);
    
    // Control de vista previa de imagen local (cargador físico)
    const basFotoInput = document.getElementById('bas_foto');
    if (basFotoInput) {
        basFotoInput.addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('previewFoto').setAttribute('src', e.target.result);
                }
                reader.readAsDataURL(file);
            }
        });
    }

    // ==========================================
    // SECCIÓN MAPAS: INICIALIZACIÓN LEAFLET
    // ==========================================
    let mapaBastonera = null;
    let marcadorBastonera = null;

    // Escucha el evento en el cual las pestañas cambian para renderizar/actualizar el mapa
    const tabDomicilio = document.getElementById('domicilio-tab');
    if (tabDomicilio) {
        tabDomicilio.addEventListener('shown.bs.tab', function () {
            // Coordenadas iniciales (por defecto Quito si están vacíos los campos)
            let latInicial = parseFloat(document.getElementById('bas_latitud').value) || -0.180653;
            let lonInicial = parseFloat(document.getElementById('bas_longitud').value) || -78.467834;

            if (!mapaBastonera) {
                // Instancia inicial del mapa
                mapaBastonera = L.map('mapa_domicilio').setView([latInicial, lonInicial], 15);

                // Capa base OpenStreetMap
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 19,
                    attribution: '© OpenStreetMap contributors'
                }).addTo(mapaBastonera);

                // Crear marcador interactivo arrastrable
                marcadorBastonera = L.marker([latInicial, lonInicial], { draggable: true }).addTo(mapaBastonera);

                // Evento al terminar de arrastrar el marcador manualmente
                marcadorBastonera.on('dragend', function (event) {
                    const posicion = event.target.getLatLng();
                    document.getElementById('bas_latitud').value = posicion.lat.toFixed(6);
                    document.getElementById('bas_longitud').value = posicion.lng.toFixed(6);
                });

                // Evento al hacer clic directo sobre cualquier punto del mapa
                mapaBastonera.on('click', function (event) {
                    const coordenadas = event.latlng;
                    marcadorBastonera.setLatLng(coordenadas);
                    document.getElementById('bas_latitud').value = coordenadas.lat.toFixed(6);
                    document.getElementById('bas_longitud').value = coordenadas.lng.toFixed(6);
                });

            } else {
                // Ajustar visualización si ya existe el contenedor creado
                mapaBastonera.invalidateSize();
                const nuevaPos = [latInicial, lonInicial];
                mapaBastonera.setView(nuevaPos, 15);
                marcadorBastonera.setLatLng(nuevaPos);
            }
        });
    }

    // Limpieza/Destrucción de instancias del mapa
    function destruirMapa() {
        if (mapaBastonera) {
            mapaBastonera.remove();
            mapaBastonera = null;
            marcadorBastonera = null;
        }
    }

    // Escuchar el cierre del modal principal para limpiar el mapa
    const elModalPrincipal = document.getElementById('modalBastonera');
    if (elModalPrincipal) {
        elModalPrincipal.addEventListener('hidden.bs.modal', function () {
            destruirMapa();
        });
    }

    if (tabla) {
        tabla.addEventListener('click', function(e) {
            
            // ACCIÓN: ACTIVACIÓN / DESACTIVACIÓN RÁPIDA DESDE LA TABLA
            const btnEstado = e.target.closest('.btn-estado-bastonera');
            if (btnEstado) {
                e.preventDefault();
                const bas_id = btnEstado.getAttribute('data-id');
                const nuevo_estado = btnEstado.getAttribute('data-nuevo-estado');
                const cla_id = btnEstado.getAttribute('data-cla-id');
                
                if (nuevo_estado == '1' && (cla_id === '' || cla_id === null)) {
                    document.getElementById('act_bas_id').value = bas_id;
                    document.getElementById('act_cla_id').value = '';
                    miniModal.show();
                } else {
                    ejecutarCambioEstadoAsincrono(bas_id, nuevo_estado, cla_id);
                }
                return;
            }

            // ACCIÓN: EDICIÓN (CARGA LOCAL POR DATAS)
            const btnEditar = e.target.closest('.btn-editar-bastonera');
            if (btnEditar) {
                e.preventDefault();
                
                // Limpiar mapa anterior si existía
                destruirMapa();

                // Mostrar la primera pestaña al abrir el modal
                const firstTab = new bootstrap.Tab(document.getElementById('generales-tab'));
                firstTab.show();

                document.getElementById('bas_id').value = btnEditar.getAttribute('data-id');
                document.getElementById('bas_cedula').value = btnEditar.getAttribute('data-cedula');
                document.getElementById('bas_fecha_ingreso').value = btnEditar.getAttribute('data-ingreso');
                document.getElementById('bas_nombres').value = btnEditar.getAttribute('data-nombres');
                document.getElementById('bas_apellidos').value = btnEditar.getAttribute('data-apellidos');
                document.getElementById('bas_fecha_nacimiento').value = btnEditar.getAttribute('data-nacimiento');
                document.getElementById('bas_telefono').value = btnEditar.getAttribute('data-telefono');
                document.getElementById('bas_correo').value = btnEditar.getAttribute('data-correo');
                document.getElementById('bas_estado').value = btnEditar.getAttribute('data-estado');
                
                document.getElementById('cla_id_select').value = btnEditar.getAttribute('data-cla_id');
                document.getElementById('bas_rep_nombre').value = btnEditar.getAttribute('data-rep_nombre');
                document.getElementById('bas_rep_cedula').value = btnEditar.getAttribute('data-rep_cedula');
                document.getElementById('bas_rep_telefono').value = btnEditar.getAttribute('data-rep_telefono');
                
                document.getElementById('bas_tipo_sangre').value = btnEditar.getAttribute('data-tipo_sangre');
                document.getElementById('bas_estatura_cm').value = btnEditar.getAttribute('data-estatura');
                document.getElementById('bas_peso_kg').value = btnEditar.getAttribute('data-peso');
                document.getElementById('bas_alergias_lesiones').value = btnEditar.getAttribute('data-alergias');

                // Campos de Domicilio
                document.getElementById('bas_direccion').value = btnEditar.getAttribute('data-direccion');
                document.getElementById('bas_latitud').value = btnEditar.getAttribute('data-latitud');
                document.getElementById('bas_longitud').value = btnEditar.getAttribute('data-longitud');

                // Ajustar ruta de almacenamiento para fotos
                const fotoRuta = btnEditar.getAttribute('data-foto');
                if (fotoRuta && fotoRuta !== '') {
                    document.getElementById('previewFoto').setAttribute('src', `assets/img/fotosbastoneras/${fotoRuta}`);
                } else {
                    document.getElementById('previewFoto').setAttribute('src', 'assets/img/default-avatar.png');
                }

                const elModal = document.getElementById('modalBastonera');
                const m = bootstrap.Modal.getInstance(elModal) || new bootstrap.Modal(elModal);
                m.show();
                return;
            }

            // ACCIÓN: VER FICHA INTERNA DETALLADA (CORREGIDA CON LOS NUEVOS CAMPOS)
            const btnVer = e.target.closest('.btn-ver-bastonera');
            if (btnVer) {
                e.preventDefault();
                const bas_id = btnVer.getAttribute('data-id');
                
                document.getElementById('contenido-ficha-bastonera').innerHTML = `
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status"></div>
                        <p class="text-muted small mt-2">Consultando registros estructurales...</p>
                    </div>`;
                
                const modalFicha = new bootstrap.Modal(document.getElementById('modalFichaBastonera'));
                modalFicha.show();

                fetch(`controlador/BastoneraController.php?action=consultar&bas_id=${bas_id}`)
                .then(response => {
                    if (!response.ok) throw new Error("Respuesta de red no válida.");
                    return response.text();
                })
                .then(texto => {
                    try {
                        const res = JSON.parse(texto);
                        if (res.status === 'success') {
                            const b = res.data;
                            
                            const srcFoto = (b.bas_foto && b.bas_foto !== '') 
                                ? `assets/img/fotosbastoneras/${b.bas_foto}` 
                                : 'assets/img/default-avatar.png';
                            
                            const estadoTxt = (b.bas_estado == 1) 
                                ? '<span class="badge bg-success-subtle text-success border border-success rounded-pill px-3 py-1">ACTIVA</span>' 
                                : '<span class="badge bg-danger-subtle text-danger border border-danger rounded-pill px-3 py-1">INACTIVA</span>';
                            
                            const clasificacion = (b.cla_categoria) 
                                ? `${b.cla_categoria} — ${b.cla_nivel}` 
                                : "Sin clasificación técnica asignada";

                            // 1. Calculamos la edad exacta antes del renderizado
                            let edadDetallada = '-- años';
                            if (b.bas_fecha_nacimiento) {
                                const nacimiento = new Date(b.bas_fecha_nacimiento + "T00:00:00");
                                const hoy = new Date();
                                
                                let anos = hoy.getFullYear() - nacimiento.getFullYear();
                                let meses = hoy.getMonth() - nacimiento.getMonth();
                                let dias = hoy.getDate() - nacimiento.getDate();
                                
                                if (dias < 0) {
                                    meses--;
                                    const ultimoDiaMesAnterior = new Date(hoy.getFullYear(), hoy.getMonth(), 0).getDate();
                                    dias += ultimoDiaMesAnterior;
                                }
                                
                                if (meses < 0) {
                                    anos--;
                                    meses += 12;
                                }
                                
                                edadDetallada = `${anos} años-${meses} meses-${dias} días`;
                            } else if (b.edad) {
                                // Por si no existiera la fecha, dejamos los años que ya tenías como respaldo
                                edadDetallada = `${b.edad} años`;
                            }
                            
                            // 2. Renderizado optimizado con los nuevos campos
                            document.getElementById('contenido-ficha-bastonera').innerHTML = `
                                <div class="text-center mb-4 pb-3 border-bottom">
                                    <div class="position-relative d-inline-block mb-3">
                                        <img src="${srcFoto}" class="rounded-circle img-thumbnail shadow-sm" style="width: 120px; height: 120px; object-fit: cover; border: 3px solid #f8f9fa;">
                                    </div>
                                    <h4 class="fw-bold text-dark mb-1 text-uppercase">${b.bas_apellidos} ${b.bas_nombres}</h4>
                                    <p class="text-muted small mb-2">C.I: ${b.bas_cedula} • <span class="fw-bold text-dark">${edadDetallada}</span></p>
                                    <div>${estadoTxt}</div>
                                </div>

                                <div class="row g-3 small">
                                    <!-- 1. ESTATUS TÉCNICO -->
                                    <div class="col-12">
                                        <div class="p-3 bg-light rounded-3 border-start border-primary border-4 mb-2">
                                            <h6 class="fw-bold text-primary mb-2"><i class="fas fa-star me-2"></i>Estatus Técnico Institucional</h6>
                                            <div class="row g-2">
                                                <div class="col-md-7">
                                                    <span class="text-muted d-block" style="font-size: 0.75rem;">Categoría y Nivel Asignado:</span>
                                                    <strong class="text-dark">${clasificacion}</strong>
                                                </div>
                                                <div class="col-md-5">
                                                    <span class="text-muted d-block" style="font-size: 0.75rem;">Fecha de Ingreso:</span>
                                                    <strong class="text-dark">${b.bas_fecha_ingreso}</strong>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 2. CONTACTO ALUMNA -->
                                    <div class="col-md-6">
                                        <div class="p-3 border rounded-3 h-100 bg-white">
                                            <h6 class="fw-bold text-dark mb-3"><i class="fas fa-address-book me-2 text-muted"></i>Contacto Alumna</h6>
                                            <p class="mb-2">
                                                <span class="text-muted">Teléfono:</span><br>
                                                <strong class="text-secondary">${b.bas_telefono ? b.bas_telefono : 'No registrado'}</strong>
                                            </p>
                                            <p class="mb-2">
                                                <span class="text-muted">Correo:</span><br>
                                                <strong class="text-secondary text-lowercase">${b.bas_correo ? b.bas_correo : 'No registrado'}</strong>
                                            </p>
                                            <p class="mb-0">
                                                <span class="text-muted">TikTok:</span><br>
                                                <strong class="text-secondary">${b.bas_tiktok ? `<i class="fab fa-tiktok text-dark me-1"></i>${b.bas_tiktok}` : 'No registrado'}</strong>
                                            </p>
                                        </div>
                                    </div>

                                    <!-- 3. REPRESENTANTE LEGAL -->
                                    <div class="col-md-6">
                                        <div class="p-3 border rounded-3 h-100 bg-white">
                                            <h6 class="fw-bold text-dark mb-3"><i class="fas fa-user-shield me-2 text-muted"></i>Representante Legal</h6>
                                            
                                            <p class="mb-2">
                                                <strong class="text-dark text-uppercase">${b.bas_rep_nombre ? b.bas_rep_nombre : 'Sin Asignar'}</strong>
                                            </p>
                                            
                                            <p class="mb-2">
                                                <span class="text-muted">Cédula:</span><br>
                                                <strong class="text-secondary">${b.bas_rep_cedula ? b.bas_rep_cedula : 'No registrado'}</strong>
                                            </p>
                                            
                                            <p class="mb-2">
                                                <span class="text-muted">Teléfono:</span><br>
                                                <strong class="text-secondary">${b.bas_rep_telefono ? b.bas_rep_telefono : 'No registrado'}</strong>
                                            </p>
                                            
                                            <p class="mb-2">
                                                <span class="text-muted">Profesión:</span><br>
                                                <strong class="text-secondary">${b.bas_rep_profesion ? b.bas_rep_profesion : 'No registrado'}</strong>
                                            </p>
                                            
                                            <p class="mb-2">
                                                <span class="text-muted">Ocupación:</span><br>
                                                <strong class="text-secondary">${b.bas_rep_ocupacion ? b.bas_rep_ocupacion : 'No registrado'}</strong>
                                            </p>
                                            
                                            <p class="mb-0">
                                                <span class="text-muted">Estado Civil:</span><br>
                                                <strong class="text-secondary">${b.bas_rep_estado_civil ? b.bas_rep_estado_civil : 'No registrado'}</strong>
                                            </p>
                                        </div>
                                    </div>

                                    <!-- 4. EXPEDIENTE MÉDICO -->
                                    <div class="col-12">
                                        <div class="p-3 border rounded-3 bg-white">
                                            <h6 class="fw-bold text-danger mb-3"><i class="fas fa-heartbeat me-2"></i>Ficha de Salud y Biometría</h6>
                                            <div class="row text-center g-2 mb-3">
                                                <div class="col-4 border-end">
                                                    <span class="text-muted d-block small" style="font-size: 0.7rem;">Tipo Sangre</span>
                                                    <span class="badge bg-danger px-2 py-1 fw-bold">${b.bas_tipo_sangre ? b.bas_tipo_sangre : 'N/A'}</span>
                                                </div>
                                                <div class="col-4 border-end">
                                                    <span class="text-muted d-block small" style="font-size: 0.7rem;">Estatura</span>
                                                    <strong class="text-dark">${b.bas_estatura_cm ? b.bas_estatura_cm + ' cm' : '-'}</strong>
                                                </div>
                                                <div class="col-4">
                                                    <span class="text-muted d-block small" style="font-size: 0.7rem;">Peso</span>
                                                    <strong class="text-dark">${b.bas_peso_kg ? b.bas_peso_kg + ' kg' : '-'}</strong>
                                                </div>
                                            </div>
                                            <div class="bg-light p-2 rounded">
                                                <span class="text-muted d-block mb-1" style="font-size: 0.75rem;">Alergias o Lesiones Históricas:</span>
                                                <p class="mb-0 fst-italic text-secondary" style="font-size: 0.8rem;">
                                                    ${b.bas_alergias_lesiones ? b.bas_alergias_lesiones : 'Ninguna declarada por el representante.'}
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 5. DIRECCIÓN Y MAPA -->
                                    <div class="col-12">
                                        <div class="p-3 border rounded-3 bg-white">
                                            <h6 class="fw-bold text-dark mb-2"><i class="fas fa-map-marker-alt text-success me-2"></i>Domicilio Declarado</h6>
                                            <p class="text-muted text-uppercase mb-2" style="font-size: 0.8rem; line-height: 1.3;">
                                                ${b.bas_direccion ? b.bas_direccion : 'No especificada.'}
                                            </p>
                                            
                                            ${b.bas_latitud && b.bas_longitud ? `
                                                <div class="text-end">
                                                    <a href="https://www.google.com/maps/search/?api=1&query=${b.bas_latitud},${b.bas_longitud}" 
                                                       target="_blank" 
                                                       class="btn btn-xs btn-outline-dark rounded-pill px-3 font-monospace" 
                                                       style="font-size: 0.7rem;">
                                                        <i class="fas fa-external-link-alt me-1 text-success"></i> Ver en Google Maps (${b.bas_latitud}, ${b.bas_longitud})
                                                    </a>
                                                </div>
                                            ` : `
                                                <span class="text-muted fst-italic d-block" style="font-size: 0.7rem;"><i class="fas fa-exclamation-triangle text-warning me-1"></i> Ubicación geográfica no marcada en el mapa.</span>
                                            `}
                                        </div>
                                    </div>
                                </div>`;
                        } else {
                            document.getElementById('contenido-ficha-bastonera').innerHTML = `<div class="alert alert-warning small m-0">${res.message}</div>`;
                        }
                    } catch (err) {
                        console.error(err);
                        document.getElementById('contenido-ficha-bastonera').innerHTML = `<div class="alert alert-danger small m-0">Error de análisis de datos.</div>`;
                    }
                })
                .catch(error => {
                    console.error(error);
                    document.getElementById('contenido-ficha-bastonera').innerHTML = `<div class="alert alert-danger small m-0">Error de conexión al servidor.</div>`;
                });
            }
        });
    }

    // ENVÍO DEL MINI-MODAL DE ACTIVACIÓN RÁPIDA
    const formActivacion = document.getElementById('formActivacionRapida');
    if (formActivacion) {
        formActivacion.addEventListener('submit', function(e) {
            e.preventDefault();
            const bas_id = document.getElementById('act_bas_id').value;
            const cla_id = document.getElementById('act_cla_id').value;
            
            miniModal.hide();
            ejecutarCambioEstadoAsincrono(bas_id, '1', cla_id);
        });
    }

    // ACCIÓN NUEVA BASTONERA: Resetea el formulario principal
    const btnNueva = document.getElementById('btnNuevaBastonera');
    if (btnNueva) {
        btnNueva.addEventListener('click', function() {
            destruirMapa();
            
            document.getElementById('formBastonera').reset();
            document.getElementById('bas_id').value = '';
            
            document.getElementById('previewFoto').setAttribute('src', 'assets/img/default-avatar.png');
            
            const hoy = new Date().toISOString().split('T')[0];
            document.getElementById('bas_fecha_ingreso').value = hoy;
            document.getElementById('bas_estado').value = '1';
            
            const firstTab = new bootstrap.Tab(document.getElementById('generales-tab'));
            firstTab.show();
        });
    }

    // FUNCIÓN CENTRAL PARA CAMBIO DE ESTADO ASÍNCRONO (FETCH)
   
function ejecutarCambioEstadoAsincrono(bas_id, nuevo_estado, cla_id) {
    // 1. Apuntamos al archivo real: bastoneras_controller.php
    // 2. Cambiamos action=cambiarEstado por action=cambiar_estado
    const url = `controlador/BastoneraController.php?action=cambiar_estado&bas_id=${bas_id}&bas_estado=${nuevo_estado}&cla_id=${cla_id}`;
    
    fetch(url)
    .then(response => {
        if (!response.ok) throw new Error("Fallo en la respuesta del servidor (Código " + response.status + ")");
        return response.json();
    })
    .then(res => {
        if (res.status === 'success') {
            const celdaEstado = document.getElementById(`estado-badge-${bas_id}`);
            if (celdaEstado) {
                celdaEstado.innerHTML = nuevo_estado === '1'
                    ? '<span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-1">Activa</span>'
                    : '<span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3 py-1">Inactiva</span>';
            }

            if (nuevo_estado === '1' && res.categoria_texto) {
                const celdaCat = document.getElementById(`categoria-col-${bas_id}`);
                if (celdaCat) {
                    celdaCat.innerHTML = `<span class="badge bg-light text-primary border rounded-pill px-2 py-1"><i class="fas fa-star text-warning me-1"></i>${res.categoria_texto}</span>`;
                }
            }

            const contenedorBtn = document.getElementById(`btn-rapido-container-${bas_id}`);
            if (contenedorBtn) {
                contenedorBtn.innerHTML = nuevo_estado === '1'
                    ? `<button class='btn btn-sm btn-outline-danger rounded-pill btn-estado-bastonera' data-id='${bas_id}' data-nuevo-estado='0' data-cla-id='${cla_id}' title='Desactivar Bastonera'><i class='fas fa-user-slash'></i></button>`
                    : `<button class='btn btn-sm btn-outline-success rounded-pill btn-estado-bastonera' data-id='${bas_id}' data-nuevo-estado='1' data-cla-id='${cla_id}' title='Activar Bastonera'><i class='fas fa-user-check'></i></button>`;
            }

            const btnEditar = document.querySelector(`.btn-editar-bastonera[data-id='${bas_id}']`);
            if (btnEditar) {
                btnEditar.setAttribute('data-estado', nuevo_estado);
                btnEditar.setAttribute('data-cla_id', cla_id);
            }
        } else {
            alert("Error al actualizar: " + res.message);
        }
    })
    .catch(err => {
        console.error(err);
        alert("No se pudo conectar con el servidor para actualizar el estado.\nDetalles: " + err.message);
    });
}
});
</script>