<?php
$page_title = 'Atención Psicológica';
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;">Atención Psicológica</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 -->
            <div class="mb-4" id="tablaAlumnosCurso"></div>
            <div class="mb-2" id="etiqueta_alumno_seleccionado" style="display:none; background: linear-gradient(90deg,#e3f2fd 60%,#bbdefb 100%); border-left: 6px solid #1976d2; font-size:1.15em; font-weight:600; color:#1a237e; padding:12px 18px; box-shadow:0 2px 8px rgba(25,118,210,0.08); border-radius:6px; letter-spacing:0.5px;"></div>
            <div class="mb-3" id="nuevaAtencionBtnWrapper" style="display:none;">
                <button type="button" id="btnNuevaAtencion" class="btn btn-success btn-sm"><i class="bi bi-plus-circle me-2"></i>Nueva Atención</button>
            </div>
            <div class="mb-4" id="tablaAtencionesAlumno" style="display:none;"></div>
            <div id="formularioAtencion" style="display:none;">
                <div class="card mb-4">
                    <div class="card-body">
                        <form id="formAtencion">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="fecha_atencion" class="form-label">Fecha y hora</label>
                                    <input type="datetime-local" class="form-control" id="fecha_atencion" name="fecha_atencion" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="motivo_atencion" class="form-label">Motivo de Atención</label>
                                    <input type="text" class="form-control" id="motivo_atencion" name="motivo_atencion" required>
                                </div>
                            </div>

                            <div class="row g-3 mt-2">
                                <div class="col-md-6">
                                    <label for="antecedentes" class="form-label">Antecedentes</label>
                                    <textarea class="form-control" id="antecedentes" name="antecedentes" rows="3"></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Riesgo Suicida</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="ideacion" name="ideacion">
                                        <label class="form-check-label" for="ideacion">Ideación</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="planificacion" name="planificacion">
                                        <label class="form-check-label" for="planificacion">Planificación</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="intentos" name="intentos">
                                        <label class="form-check-label" for="intentos">Intentos Anteriores</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row g-3 mt-2">
                                <div class="col-md-6">
                                    <label for="medidas_acuerdos" class="form-label">Medidas y Acuerdos</label>
                                    <textarea class="form-control" id="medidas_acuerdos" name="medidas_acuerdos" rows="3"></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label for="notas" class="form-label">Notas Adicionales</label>
                                    <textarea class="form-control" id="notas" name="notas" rows="3"></textarea>
                                </div>
                            </div>
                            <div class="row g-3 mt-2">
                                <div class="col-md-6">
                                    <label for="cierre" class="form-label">Cierre</label>
                                    <textarea class="form-control" id="cierre" name="cierre" 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="btnCancelarAtencion" class="btn btn-secondary">Cancelar</button>
                                    <button type="submit" class="btn btn-primary">Guardar Atención</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- Modal para detalle de atención -->
            <div class="modal fade" id="modalDetalleAtencion" 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 Atención Psicológica</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'; ?>