<?php
$page_title = 'Entrevista con Alumno';
include __DIR__ . '/header.php';

// Proteger la página para que solo los roles autorizados puedan acceder
require_role(['administrador', 'convivencia']);

include __DIR__ . '/navbar.php';
?>
<!-- T�tulo visual justo despu�s del navbar -->
<div class="container pt-3">
    <div class="card mb-4 mt-5">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="mb-0" style="color:#484A67; font-weight:700; letter-spacing:0.5px;">Entrevista con Alumno</h2>
                <a href="convivencia_educativa.php" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> Volver
                </a>
            </div>
            <!-- Filtros y buscador agrupados -->
            <div class="mb-4">
                <div class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label for="tipo_ensenanza" class="form-label">Tipo de ense&ntilde;anza</label>
                        <select class="form-select" id="tipo_ensenanza" name="tipo_ensenanza">
                            <option value="">Selecciona...</option>
                            <option value="1">Educaci&oacute;n Parvularia</option>
                            <option value="2">Educaci&oacute;n B&aacute;sica</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="grado" class="form-label">Grado</label>
                        <select class="form-select" id="grado" name="grado_id" disabled>
                            <option value="">Selecciona tipo de ense&ntilde;anza primero</option>
                        </select>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-md-8">
                        <label for="buscadorAlumno" class="form-label">Buscar alumno</label>
                        <input type="text" class="form-control" id="buscadorAlumno" name="buscadorAlumno" placeholder="Nombre, apellido, RUN... (m&iacute;nimo 2 caracteres)">
                        <small class="text-muted">Puedes buscar libremente por texto o usar los filtros de arriba para refinar la b&uacute;squeda</small>
                    </div>
                </div>
                <div class="row mt-3" id="resultadosBusqueda" style="display:none;">
                    <div class="col-12">
                        <!-- Aqu� se mostrar�n los resultados de b�squeda de alumnos -->
                    </div>
                </div>
            </div>
            <!-- Tablas principales fuera de filas/columnas restrictivas -->
            <style>
                .alumno-item.active { background-color: #e3f2fd !important; transition: all 0.2s; }
                .cursor-pointer { cursor: pointer; }
                .btn-quitar-alumno:hover { color: #ff5252; }
            </style>
            <div class="mb-4" id="tablaAlumnosCurso"></div>
            <div class="mb-3" id="etiqueta_alumno_seleccionado" style="display:none; border-left: 6px solid #1976d2; padding:15px; background: white; border-radius: 8px; box-shadow: var(--shadow-sm);"></div>
            <div class="mb-3" id="nuevaEntrevistaBtnWrapper" style="display:none;">
                <button type="button" id="btnNuevaEntrevista" class="btn btn-success btn-sm"><i class="bi bi-plus-circle me-2"></i>Nueva Entrevista</button>
            </div>
            <div class="mb-4" id="tablaEntrevistasAlumno" style="display:none;"></div>
            <div id="formularioEntrevista" style="display:none;">
                <div class="card mb-4">
                    <div class="card-body">
                        <form id="formEntrevista">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="fecha_entrevista" class="form-label">Fecha y hora</label>
                                    <input type="datetime-local" class="form-control" id="fecha_entrevista" name="fecha_entrevista" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="motivo_entrevista" class="form-label">Motivo</label>
                                    <input type="text" class="form-control" id="motivo_entrevista" name="motivo_entrevista" required>
                                </div>
                            </div>
                            <div class="row g-3 mt-2">
                                <div class="col-md-6">
                                    <label for="observaciones_entrevista" class="form-label">Registro y observaciones</label>
                                    <textarea class="form-control" id="observaciones_entrevista" name="observaciones_entrevista" rows="3"></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label for="acuerdos_entrevista" class="form-label">Acuerdos y compromisos</label>
                                    <textarea class="form-control" id="acuerdos_entrevista" name="acuerdos_entrevista" rows="3"></textarea>
                                </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col-12 d-flex justify-content-end gap-2">
                                    <button type="button" id="btnCancelarEntrevista" class="btn btn-secondary">Cancelar</button>
                                    <button type="submit" class="btn btn-primary">Guardar entrevista</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- Modal para detalle de entrevista -->
            <div class="modal fade" id="modalDetalleEntrevista" tabindex="-1" aria-labelledby="modalDetalleLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalDetalleLabel">Detalle de Entrevista</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                        </div>
                        <div class="modal-body" id="modalDetalleBody">
                            <!-- Detalle se carga por JS -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php include __DIR__ . '/footer.php'; ?>