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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Formulario de Registro</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
    <div class="container mt-5">
        <h2 class="mb-4">Alumnos Suspendidos</h2>
        <form action="" method="POST">
            <div class="form-group">
                <label for="carnet">Ingrese Carnet:</label>
                <input type="text" class="form-control" name="carnet" id="carnet" required placeholder="Ingrese el carnet">
            </div>
            <div class="form-group">
                <label for="nombre">Nombre:</label>
                <input type="text" class="form-control" name="nombre" id="nombre" placeholder="Escribe el nombre" readonly>
            </div>
            <div class="form-group">
                <label for="apellido">Apellido:</label>
                <input type="text" class="form-control" name="apellido" id="apellido" placeholder="Escribe el apellido" readonly>
            </div>
            <div class="form-group">
                <label for="grado">Grado:</label>
                <input type="text" class="form-control" name="grado" id="grado" placeholder="Escribe el grado" readonly>
            </div>
            <div class="form-group">
                <label for="seccion">Sección:</label>
                <input type="text" class="form-control" name="seccion" id="seccion" placeholder="Escribe la sección" readonly>
            </div>
            <div class="form-group">
                <label for="carrera">Carrera:</label>
                <input type="text" class="form-control" name="carrera" id="carrera" placeholder="Escribe la carrera" readonly>
            </div>
            <div class="form-group">
                <label for="estado">Estado:</label>
                <select class="form-control" name="estado" id="estado" required>
                    <option value="">Seleccione un estado</option>
                    <option value="activo">Activo</option>
                    <option value="inactivo">Inactivo</option>
                </select>
            </div>
            <div class="form-group">
                <label for="comentario">Comentario:</label>
                <textarea class="form-control" name="comentario" id="comentario" rows="4" placeholder="Escribe un comentario" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Enviar</button>
        </form>
    </div>

    <script>
        $(document).ready(function() {
            $('#carnet').on('input', function() {
                var carnet = $(this).val();
                if (carnet.length > 0) {
                    $.ajax({
                        url: 'buscar3_alumno.php', // Cambia esto a tu archivo PHP que procesará la búsqueda
                        type: 'POST',
                        data: {
                            carnet: carnet
                        },
                        success: function(data) {
                            console.log(data); // Para depurar la respuesta
                            try {
                                var resultado = JSON.parse(data);
                                if (resultado.success) {
                                    $('#nombre').val(resultado.nombre);
                                    $('#apellido').val(resultado.apellido);
                                    $('#grado').val(resultado.grado);
                                    $('#seccion').val(resultado.seccion);
                                    $('#carrera').val(resultado.carrera);
                                } else {
                                    // Limpiar campos si no se encuentra el alumno
                                    $('#nombre').val('');
                                    $('#apellido').val('');
                                    $('#grado').val('');
                                    $('#seccion').val('');
                                    $('#carrera').val('');
                                    alert('Alumno no encontrado');
                                }
                            } catch (e) {
                                alert('Error al procesar los datos del servidor.');
                                console.error(e);
                            }
                        },
                        error: function() {
                            alert('Error al buscar el alumno.');
                        }
                    });
                } else {
                    // Limpiar campos si el campo de carnet está vacío
                    $('#nombre').val('');
                    $('#apellido').val('');
                    $('#grado').val('');
                    $('#seccion').val('');
                    $('#carrera').val('');
                }
            });
        });
    </script>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>