<?php
$page_title = 'Citación a Apoderado';
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;">Citación a Apoderado</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">
                    <!-- Aquí se mostrarán los resultados de búsqueda de alumnos -->
                </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>
    <!-- Etiqueta movida arriba -->
    <div class="mb-3" id="nuevaCitacionBtnWrapper" style="display:none;">
        <button type="button" id="btnNuevaCitacion" class="btn btn-success btn-sm"><i class="bi bi-plus-circle me-2"></i>Nueva Citación</button>
    </div>

    <!-- Filtros para la tabla de citaciones -->
    <div class="card mb-3" id="filtrosCitacionesWrapper" style="display:none;">
        <div class="card-body py-2 bg-light">
            <div class="row g-2 align-items-end">
                <div class="col-md-3">
                    <label class="form-label small mb-1">Desde</label>
                    <input type="date" id="filtro_fecha_inicio" class="form-control form-control-sm">
                </div>
                <div class="col-md-3">
                    <label class="form-label small mb-1">Hasta</label>
                    <input type="date" id="filtro_fecha_fin" class="form-control form-control-sm">
                </div>
                <div class="col-md-4">
                    <label class="form-label small mb-1">Apoderado</label>
                    <select id="filtro_familiar" class="form-select form-select-sm">
                        <option value="">Todos los apoderados</option>
                    </select>
                </div>
                <div class="col-md-2 d-flex gap-1">
                    <button type="button" id="btnLimpiarFiltros" class="btn btn-outline-secondary btn-sm w-100" title="Limpiar Filtros">
                        <i class="bi bi-eraser"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="mb-4" id="tablaCitacionsAlumno" style="display:none;"></div>
    <div id="formularioCitacion" style="display:none;">
        <div class="card mb-4">
            <div class="card-body">
                <form id="formCitacion">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="familiar_citacion" class="form-label">Apoderado a citar</label>
                            <select class="form-select" id="familiar_citacion" name="familiar_citacion" required>
                                <option value="">Seleccione un familiar...</option>
                                <!-- Opciones dinámicas -->
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="fecha_citacion" class="form-label">Fecha de Citación</label>
                            <input type="date" class="form-control" id="fecha_citacion" name="fecha_citacion" required>
                        </div>
                        <div class="col-md-3">
                            <label for="hora_citacion" class="form-label">Hora</label>
                            <input type="time" class="form-control" id="hora_citacion" name="hora_citacion" required>
                        </div>
                    </div>
                    <div class="row g-3 mt-3">
                        <div class="col-md-4">
                            <label for="motivo_citacion" class="form-label">Motivo de citación</label>
                            <input type="text" class="form-control" id="motivo_citacion" name="motivo_citacion" maxlength="100" required>
                        </div>
                        <div class="col-md-8">
                            <label for="comunicacion" class="form-label">Comunicación a Enviar</label>
                            <textarea class="form-control bg-light border border-primary shadow-sm" id="comunicacion" name="comunicacion" rows="7" style="resize:vertical; min-height:120px; font-size:1.1em;" required placeholder="Escriba aquí el texto detallado que se enviará al apoderado..."></textarea>
                        </div>
                    </div>
                    <div class="row g-3 mt-3">
                        <div class="col-md-6">
                            <label class="form-label d-block">Opciones de Envío</label>
                            <div class="form-check form-check-inline mt-2">
                                <input class="form-check-input" type="checkbox" id="enviar_email" name="enviar_email" value="1" checked>
                                <label class="form-check-label" for="enviar_email">Enviar por Email</label>
                            </div>
                            <div class="form-check form-check-inline mt-2">
                                <input class="form-check-input" type="checkbox" id="enviar_whatsapp" name="enviar_whatsapp" value="1">
                                <label class="form-check-label" for="enviar_whatsapp">Abrir WhatsApp Web</label>
                            </div>
                            <small class="d-block text-muted mt-2">
                                <i class="bi bi-info-circle"></i> Al seleccionar WhatsApp Web, luego de guardar se abrirá una nueva ventana con el borrador hacia el teléfono del apoderado.
                            </small>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-12 d-flex justify-content-end gap-2">
                            <button type="button" id="btnCancelarCitacion" class="btn btn-secondary">Cancelar</button>
                            <button type="submit" class="btn btn-primary d-flex align-items-center gap-2">
                                <i class="bi bi-send"></i> Registrar y Enviar Citación
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<?php include __DIR__ . '/footer.php'; ?>