<?php
if (!isset($_SESSION['usu_id'])) {
    header("Location: login.php");
    exit();
}
$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-school text-primary me-2"></i>Control de Academias Invitadas
        </h2>
        <p class="text-muted small mb-0">Directorio oficial de academias externas registradas para asignación en festivales y escaletas.</p>
    </div>
    <div class="col-auto">
        <button class="btn btn-primary rounded-pill shadow-sm fw-bold px-4" data-bs-toggle="modal" data-bs-target="#modalAcademia" id="btnNuevaAcademia">
            <i class="fas fa-plus me-2"></i>Registrar Academia
        </button>
    </div>
</div>

<!-- TABLA DE ACADEMIAS INVITADAS -->
<div class="card border-0 shadow-sm rounded-4">
    <div class="card-body p-4">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" id="tablaAcademiasInvitadas">
                <thead class="table-light text-muted small fw-bold text-uppercase">
                    <tr>
                        <th>ID</th>
                        <th>Nombre de la Academia</th>
                        <th>Director / Responsable</th>
                        <th>Teléfono de Contacto</th>
                        <th>Ciudad Sede</th>
                        <th class="text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody class="small">
                    <?php
                    $sql = "SELECT * FROM bas_academias_invitadas ORDER BY aca_nombre ASC";
                    $res = $bd->ejecutar($sql);

                    if ($res && $res->num_rows > 0) {
                        while ($row = $res->fetch_assoc()) {
                            echo "<tr>";
                            echo "<td class='text-muted'>" . $row['aca_id'] . "</td>";
                            echo "<td><span class='fw-bold text-dark'>" . htmlspecialchars($row['aca_nombre']) . "</span></td>";
                            echo "<td>" . htmlspecialchars($row['aca_director'] ?? 'No asignado') . "</td>";
                            echo "<td>" . htmlspecialchars($row['aca_telefono'] ?? 'N/D') . "</td>";
                            echo "<td><span class='badge bg-light text-dark border'>" . htmlspecialchars($row['aca_ciudad'] ?? 'N/D') . "</span></td>";
                            echo "<td class='text-center'>
                                    <button class='btn btn-sm btn-outline-secondary rounded-pill btn-editar-aca' 
                                            data-id='".$row['aca_id']."' 
                                            data-nombre='".htmlspecialchars($row['aca_nombre'], ENT_QUOTES)."'
                                            data-director='".htmlspecialchars($row['aca_director'] ?? '', ENT_QUOTES)."'
                                            data-telefono='".htmlspecialchars($row['aca_telefono'] ?? '', ENT_QUOTES)."'
                                            data-ciudad='".htmlspecialchars($row['aca_ciudad'] ?? '', ENT_QUOTES)."'>
                                        <i class='fas fa-edit me-1'></i> Editar
                                    </button>
                                  </td>";
                            echo "</tr>";
                        }
                    } else {
                        echo "<tr><td colspan='6' class='text-center text-muted py-4'>No hay academias invitadas registradas en la base.</td></tr>";
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- MODAL: REGISTRO / EDICIÓN DE ACADEMIA -->
<div class="modal fade" id="modalAcademia" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog 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="modalTitulo">
                    <i class="fas fa-plus text-warning me-2"></i> Registrar Nueva Academia
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <form id="formAcademia" method="POST" action="controlador/AcademiaController.php?action=guardar">
                <div class="modal-body p-4">
                    <input type="hidden" name="aca_id" id="aca_id">

                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label text-muted small fw-bold">Nombre Oficial de la Academia *</label>
                            <input type="text" class="form-control bg-light text-uppercase" name="aca_nombre" id="aca_nombre" placeholder="Ej: Ritmo y Pasión del Ballet" required>
                        </div>
                        
                        <div class="col-12">
                            <label class="form-label text-muted small fw-bold">Nombre del Director / Representante</label>
                            <input type="text" class="form-control bg-light text-uppercase" name="aca_director" id="aca_director" placeholder="Ej: Lcda. María Augusta Guerrero">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold">Teléfono de Contacto</label>
                            <input type="text" class="form-control bg-light" name="aca_telefono" id="aca_telefono" placeholder="Ej: 0998887777">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold">Ciudad Sede</label>
                            <input type="text" class="form-control bg-light text-uppercase" name="aca_ciudad" id="aca_ciudad" placeholder="Ej: Quito">
                        </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" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4 btn-sm fw-bold text-white">Guardar Ficha</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabla = document.getElementById('tablaAcademiasInvitadas');
    if (tabla) {
        tabla.addEventListener('click', function(e) {
            const boton = e.target.closest('.btn-editar-aca');
            if (!boton) return;
            e.preventDefault();
            
            document.getElementById('modalTitulo').innerHTML = '<i class="fas fa-edit text-warning me-2"></i> Modificar Academia';
            
            document.getElementById('aca_id').value = boton.getAttribute('data-id');
            document.getElementById('aca_nombre').value = boton.getAttribute('data-nombre');
            document.getElementById('aca_director').value = boton.getAttribute('data-director');
            document.getElementById('aca_telefono').value = boton.getAttribute('data-telefono');
            document.getElementById('aca_ciudad').value = boton.getAttribute('data-ciudad');

            new bootstrap.Modal(document.getElementById('modalAcademia')).show();
        });
    }

    document.getElementById('btnNuevaAcademia').addEventListener('click', function() {
        document.getElementById('formAcademia').reset();
        document.getElementById('aca_id').value = '';
        document.getElementById('modalTitulo').innerHTML = '<i class="fas fa-plus text-warning me-2"></i> Registrar Nueva Academia';
    });
});
</script>