<?php
$page_title = 'Registro de Llamadas Telefónicas';
include __DIR__ . '/header.php';

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

include __DIR__ . '/navbar.php';
?>
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="mb-0" style="color:#484A67;">Registro de Llamadas Telefónicas</h2>
        <a href="convivencia_educativa.php" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Volver
        </a>
    </div>
    <div class="card mb-4">
        <div class="card-body">
            <div class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label for="tipo_ensenanza" class="form-label">Tipo de enseñanza</label>
                    <select class="form-select" id="tipo_ensenanza" name="tipo_ensenanza">
                        <option value="">Selecciona...</option>
                        <option value="1">Educación Parvularia</option>
                        <option value="2">Educación Bá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ñ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ínimo 2 caracteres)">
                    <small class="text-muted">Puedes buscar libremente por texto o usar los filtros de arriba para refinar la búsqueda</small>
                </div>
            </div>
            <div class="row mt-3" id="resultadosBusqueda" style="display:none;">
                <div class="col-12">
                </div>
            </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>
    </div>

    <div class="mb-3" id="nuevaLlamadaBtnWrapper" style="display:none;">
        <button type="button" id="btnNuevaLlamada" class="btn btn-success btn-sm"><i class="bi bi-plus-circle me-2"></i>Registrar Llamada</button>
    </div>
    <div class="mb-4" id="tablaLlamadasAlumno" style="display:none;"></div>

    <div id="formularioLlamada" style="display:none;">
        <div class="card mb-4 border-primary shadow-sm">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0" id="formLlamadaTitle">Nueva Llamada</h5>
            </div>
            <div class="card-body">
                <form id="formLlamada">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="familiar_llamada" class="form-label">Familiar / Apoderado</label>
                            <select class="form-select" id="familiar_llamada" name="familiar_llamada" required>
                                <option value="">Seleccione un familiar...</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="fecha_llamada" class="form-label">Fecha</label>
                            <input type="date" class="form-control" id="fecha_llamada" name="fecha_llamada" required>
                        </div>
                        <div class="col-md-3">
                            <label for="hora_llamada" class="form-label">Hora</label>
                            <input type="time" class="form-control" id="hora_llamada" name="hora_llamada" required>
                        </div>
                    </div>
                    <div class="row g-3 mt-3">
                        <div class="col-12">
                            <label for="motivo_llamada" class="form-label">Motivo o detalle de la llamada</label>
                            <textarea class="form-control bg-light border-primary shadow-sm" id="motivo_llamada" name="motivo_llamada" rows="6" style="resize:vertical; min-height:120px; font-size:1.1em;" placeholder="Escriba aquí el motivo de la llamada o si el apoderado no contestó..." required></textarea>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-12 d-flex justify-content-end gap-2">
                            <button type="button" id="btnCancelarLlamada" class="btn btn-secondary">Cancelar</button>
                            <button type="submit" class="btn btn-primary" id="btnGuardarLlamada">Guardar registro</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="<?php echo asset('registro_llamadas.js', true); ?>"></script>
<?php include __DIR__ . '/footer.php'; ?>