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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Registro</title>
    <!-- Enlace a Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <?php
    include 'menuform.php';
    ?>

    <div class="container mt-5">
        <h2>Registro de Faltas</h2>
        <form id="registroFaltaForm" action="../crud/insertar_falta.php" method="POST">
            <div class="form-group">
                <label for="carnet">Ingrese Carnet:</label>
                <input type="text" class="form-control" name="carnet" id="carnet" required oninput="buscarAlumno()"
                    placeholder="Ingrese el carnet">
            </div>

            <div id="resultadoAlumno" class="mt-3">
                <!-- Aquí se mostrarán los detalles del alumno -->
            </div>

            <div class="form-group">
                <label for="falta">Seleccione falta:</label>
                <select class="form-control" name="falta" id="falta" required>
                    <option value="" selected disabled>---Seleccione falta---</option>
                    <?php
                    include("../config/conexion.php");
                    if ($conexion->connect_error) {
                        die("Conexión fallida: " . $conexion->connect_error);
                    }
                    $sql = $conexion->query("SELECT falta FROM falta");
                    if ($sql) {
                        if ($sql->num_rows > 0) {
                            while ($resultado = $sql->fetch_assoc()) {
                                $falta = htmlspecialchars($resultado['falta'], ENT_QUOTES);
                                echo "<option value='$falta'>$falta</option>";
                            }
                        } else {
                            echo "<option disabled>No se encontraron faltas</option>";
                        }
                    } else {
                        die("Error en la consulta: " . $conexion->error);
                    }
                    ?>
                </select>
            </div>

            <div class="form-group">
                <label for="bimestre">Bimestre</label>
                <select name="bimestre" id="bimestre" class="form-control" required>
                    <option value="" selected disabled>---Seleccione Bimestre---</option>
                    <option value="1">Bimestre I</option>
                    <option value="2">Bimestre II</option>
                    <option value="3">Bimestre III</option>
                    <option value="4">Bimestre IV</option>
                </select>
            </div>

            <div class="form-group">
                <label for="maestro">Seleccione maestro:</label>
                <select class="form-control" name="maestro" id="maestro" required>
                    <option value="" selected disabled>---Seleccione maestro---</option>
                    <?php
                    include("../config/conexion.php");

                    if ($conexion->connect_error) {
                        die("Conexión fallida: " . $conexion->connect_error);
                    }

                    $sql = $conexion->query("SELECT nombre FROM maestro");

                    if ($sql) {
                        if ($sql->num_rows > 0) {
                            while ($resultado = $sql->fetch_assoc()) {
                                $nombre_maestro = htmlspecialchars($resultado['nombre'], ENT_QUOTES);
                                echo "<option value='$nombre_maestro'>$nombre_maestro</option>";
                            }
                        } else {
                            echo "<option disabled>No se encontraron maestros</option>";
                        }
                    } else {
                        die("Error en la consulta: " . $conexion->error);
                    }
                    ?>
                </select>
            </div>

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

            <div class="form-group">
                <label for="observaciones">Observaciones:</label>
                <textarea name="observaciones" class="form-control" rows="3" required></textarea>
            </div>

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

    <!-- Enlace a Bootstrap JS y dependencias -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

    <script>
        function buscarAlumno() {
            const carnet = document.getElementById('carnet').value.trim();

            if (carnet.length > 0) {
                fetch('buscarr_alumno.php', {
                        method: 'POST',
                        body: new URLSearchParams({
                            carnet: carnet
                        }),
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                    })
                    .then(response => response.text())
                    .then(data => {
                        document.getElementById('resultadoAlumno').innerHTML = data;
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        document.getElementById('resultadoAlumno').innerHTML = '';
                    });
            } else {
                document.getElementById('resultadoAlumno').innerHTML = '';
            }
        }
    </script>
</body>

</html>