<?php
$page_title = 'Convivencia Educativa';
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-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0" style="color:#484A67;">Convivencia Educativa</h2>
    </div>

    <div class="row g-4 justify-content-center">
        <!-- Opción: Entrevista con apoderados -->
        <div class="col-12 col-md-6 col-lg-4">
            <a href="entrevista_apoderado.php" class="card card-menu h-100 shadow-sm border-0 text-center p-4 text-decoration-none">
                <div class="mb-3">
                    <!-- Icono: dos personas + lápiz -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none"
                        stroke="#333366" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mb-2">
                        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                        <circle cx="9" cy="7" r="4" />
                        <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
                        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                    </svg>
                </div>
                <h5 class="mb-2">Entrevista con apoderados</h5>
                <p class="text-muted">Registrar y consultar entrevistas</p>
            </a>
        </div>

        <!-- Opción: Entrevistas con alumnos -->
        <div class="col-12 col-md-6 col-lg-4">
            <a href="entrevista_alumno.php" class="card card-menu h-100 shadow-sm border-0 text-center p-4 text-decoration-none">
                <div class="mb-3">
                    <!-- Icono: persona + lápiz -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none"
                        stroke="#333366" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mb-2">
                        <path d="M18 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                        <circle cx="10" cy="7" r="4" />
                    </svg>
                </div>
                <h5 class="mb-2">Entrevistas con alumnos</h5>
                <p class="text-muted">Seguimiento y apoyo a estudiantes</p>
            </a>
        </div>

        <!-- Opción: Sicóloga -->
        <div class="col-12 col-md-6 col-lg-4">
            <a href="atencion_sicologica.php" class="card card-menu h-100 shadow-sm border-0 text-center p-4 text-decoration-none">
                <div class="mb-3">
                    <!-- Insignia Psi -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none"
                        stroke="#333366" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mb-2">
                        <!-- Círculo exterior -->
                        <circle cx="12" cy="12" r="10" />
                        <!-- Símbolo Psi (Ψ) estilizado -->
                        <path d="M8 6v2a4 4 0 0 0 8 0V6" />
                        <line x1="12" y1="6" x2="12" y2="18" />
                    </svg>
                </div>
                <h5 class="mb-2">Atención Psicológica</h5>
                <p class="text-muted">Registro de sesiones y casos</p>
            </a>
        </div>

        <!-- Opción: Citación a Apoderados -->
        <div class="col-12 col-md-6 col-lg-4">
            <a href="citacion_apoderado.php" class="card card-menu h-100 shadow-sm border-0 text-center p-4 text-decoration-none">
                <div class="mb-3">
                    <!-- Icono: Mensaje/Notificación -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none"
                        stroke="#333366" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mb-2">
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                        <polyline points="22,6 12,13 2,6" />
                        <path d="M22 6l-10 7L2 6" />
                    </svg>
                </div>
                <h5 class="mb-2">Citación a apoderados</h5>
                <p class="text-muted">Enviar citaciones por correo/WhatsApp</p>
            </a>
        </div>

        <!-- Opción: Registro de Llamadas Telefónicas -->
        <div class="col-12 col-md-6 col-lg-4">
            <a href="registro_llamadas.php" class="card card-menu h-100 shadow-sm border-0 text-center p-4 text-decoration-none">
                <div class="mb-3">
                    <!-- Icono: Teléfono -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none"
                        stroke="#333366" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mb-2">
                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l2.27-2.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
                    </svg>
                </div>
                <h5 class="mb-2">Registro de Llamadas</h5>
                <p class="text-muted">Llamadas telefónicas a apoderados</p>
            </a>
        </div>
    </div>
</div>

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