<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Registro de Citas</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Incluyendo jQuery -->
</head>

<body>
    <?php include 'menuform.php'; ?>
    <div class="container mt-5">
        <h2>Registro de Citas</h2>
        <form id="alumnoForm" action="../crud/guardarcita.php" method="POST">

            <div class="form-group">
                <label for="fecha">Fecha para atender cita</label>
                <input type="datetime-local" name="fecha" id="fecha" class="form-control" required>
            </div>

            <div class="form-group">
                <label for="usuario">Usuario que atenderá cita</label>
                <select name="usuario" id="usuario" class="form-control" required>
                    <option value="" disabled selected>--- Seleccione un usuario ---</option>
                    <?php
                    include("../config/conexion.php");

                    // Consulta para obtener solo los usuarios con rol_id = 3 (Coordinador)
                    $sql = "SELECT nombre FROM usuarios WHERE estado = 'Activado' AND rol_id = 3";  // Aquí cambiamos rol por rol_id
                    $resultado = $conexion->query($sql);

                    if ($resultado->num_rows > 0) {
                        while ($fila = $resultado->fetch_assoc()) {
                            $nombreUsuario = htmlspecialchars($fila['nombre'], ENT_QUOTES);
                            echo "<option value='$nombreUsuario'>$nombreUsuario</option>";
                        }
                    } else {
                        echo "<option disabled>No hay usuarios coordinadores disponibles</option>";
                    }
                    ?>
                </select>
            </div>

            <div class="form-group">
                <label for="atendido">Estado de la cita</label>
                <select name="atendido" id="atendido" class="form-control" required>
                    <option value="" disabled selected>--- Seleccione una opción ---</option>
                    <option value="Atendida">Atendida</option>
                    <option value="No atendida">No atendida</option>
                </select>
            </div>

            <div class="form-group">
                <label for="carnet">Digite carnet</label>
                <input type="text" name="carnet" id="carnet" class="form-control" placeholder="Ingrese el carnet"
                    required>
            </div>

            <!-- Resultado que se llena automáticamente con los datos del alumno -->
            <div id="resultado" class="mt-4">
                <!-- Aquí se mostrarán los datos del alumno, cargados a través de AJAX -->
            </div>

            <input type="hidden" name="nombres" id="nombresHidden">
            <input type="hidden" name="carrera" id="carreraHidden">
            <input type="hidden" name="grado" id="gradoHidden">
            <input type="hidden" name="seccion" id="seccionHidden">
            <input type="hidden" name="plan" id="planHidden">

            <!-- Campo de comentario -->
            <div class="form-group">
                <label for="comentario">Comentario</label>
                <textarea name="comentario" id="comentario" class="form-control" rows="3"
                    placeholder="Ingrese un comentario adicional (opcional)"></textarea>
            </div>

            <button type="submit" class="btn btn-success">Guardar Cita</button>
        </form>
    </div>

    <script>
        $(document).ready(function() {
            $('#carnet').on('input', function() {
                const carnet = $(this).val();
                if (carnet.length > 0) {
                    // Enviar solicitud AJAX al servidor
                    $.ajax({
                        url: 'buscar_alumno.php', // El archivo PHP que procesará la solicitud
                        method: 'POST',
                        data: {
                            carnet: carnet
                        },
                        success: function(response) {
                            // Cuando el servidor responde, insertamos el HTML recibido en el div #resultado
                            if (response) {
                                $('#resultado').html(response);
                            } else {
                                // Limpiar el contenido si no se encuentra al alumno
                                $('#resultado').html('');
                            }
                        },
                        error: function() {
                            alert('Error al obtener los datos del alumno.');
                        }
                    });
                } else {
                    // Limpiar el contenido si el carnet está vacío
                    $('#resultado').html('');
                }
            });
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>