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

<head>
    <meta charset="UTF-8">
    <title>Buscar Alumno por Carnet</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <?php
    include '../menu.php';
    ?>

    <div class="container mt-5">
        <h2>Registro de Suspensiones</h2>
        <form id="alumnoForm" action="../crud/insertarsuspension.php" method="POST">

            <div class="form-group">
                <label for="plan">Comentario</label>
                <input type="text" name="comentario" id="comentario" class="form-control">
            </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>

            <div id="resultado" class="mt-4">
                <!-- Aquí se mostrará la respuesta del servidor (nombres, apellidos, etc.) -->
            </div>

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

            <!-- Campos ocultos -->
            <input type="hidden" name="nombres" id="nombresHidden">
            <input type="hidden" name="apellidos" id="apellidosHidden">
            <input type="hidden" name="carrera" id="carreraHidden">
            <input type="hidden" name="grado" id="gradoHidden">
            <input type="hidden" name="seccion" id="seccionHidden">

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

    <script>
    $(document).ready(function() {
        $('#carnet').on('input', function() {
            const carnet = $(this).val();
            if (carnet.length > 0) {
                $.ajax({
                    url: 'buscarrr_alumno.php',
                    method: 'POST',
                    data: {
                        carnet: carnet
                    },
                    success: function(response) {
                        if (response !== "error") {
                            // Actualizar los campos con los datos recibidos
                            $('#resultado').html(response);

                            // También llenar los campos ocultos si es necesario
                            $('#nombresHidden').val($('#nombres').val());
                            $('#apellidosHidden').val($('#apellidos').val());
                            $('#carreraHidden').val($('#carrera').val());
                            $('#gradoHidden').val($('#grado').val());
                            $('#seccionHidden').val($('#seccion').val());
                        } else {
                            // Limpiar los campos si no se encuentra el alumno
                            $('#resultado').html(
                                '<div class="alert alert-danger" role="alert">Alumno no encontrado.</div>'
                            );
                        }
                    },
                    error: function() {
                        $('#resultado').html(
                            '<div class="alert alert-danger" role="alert">Error en la conexión.</div>'
                        );
                    }
                });
            } else {
                // Limpiar los campos si no hay carnet ingresado
                $('#resultado').html('');
            }
        });
    });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</body>

</html>