<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Estudiantes</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    </head>
    <body>
        <h1 style="text-align:center">Estudiantes</h1>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <button id="btn_nuevo" type="button" class="btn btn_success" style="background-color: blueviolet;" data-toggle="modalcrud" data-target="#modalcrud">Nuevo</button>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="table-responsive">
                        <table id="estudiantes" class="table table-striped table-borderred table-condensed" style="width: 100%">
                            <thead class="text-center">
                                <tr>
                                    <th>id_estudiante</th>
                                    <th>carne</th>
                                    <th>nombres</th>
                                    <th>apellidos</th>
                                    <th>direccion</th>
                                    <th>telefono</th>
                                    <th>correo electronico</th>
                                    <th>tipo de sangre</th>
                                    <th>fecha de nacimiento</th> 
                                </tr>
                            </thead>
                            <tbody>
                                <% resultado.forEach((estudiantes) => { %>
                                <tr>
                                    <td><%= estudiantes.id_estudiante %></td>
                                    <td><%= estudiantes.carne %></td>
                                    <td><%= estudiantes.nombres %></td>
                                    <td><%= estudiantes.apellidos %></td>
                                    <td><%= estudiantes.direccion %></td>
                                    <td><%= estudiantes.telefono %></td>
                                    <td><%= estudiantes.correo_electronico %></td>
                                    <td><%= estudiantes.id_tipo_sangre %></td>
                                    <td><%= estudiantes.fecha_nacimiento %></td>
                                </tr>
                                <% }); %>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
            <div class="modal" id="modalcrud" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h1 class="modal-title"></h1>
                        </div>
                    <form id="formEstudiantes" action="/crud_c" method="post">
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="id" class="col-form-label">id_estudiante</label>
                                <input type="text" id="txt_id" name="txt_id" placeholder="id_estudiante">
                            </div>
                            <div class="form-group">
                                <label for="carne" class="col-form-label">carne</label>
                                <input type="text" id="txt_carne" name="txt_carne" placeholder="carne">
                            </div>
                            <div class="form-group">
                                <label for="nombres" class="col-form-label">nombres</label>
                                <input type="text" id="txt_nombres" name="txt_nombres" placeholder="nombres">
                            </div>
                            <div class="form-group">
                                <label for="apellidos" class="col-form-label">apellidos</label>
                                <input type="text" id="txt_apellidos" name="txt_apellidos" placeholder="apellidos">
                            </div>
                            <div class="form-group">
                                <label for="direccion" class="col-form-label">direccion</label>
                                <input type="text" id="txt_direccion" name="txt_direccion" placeholder="direccion">
                            </div>
                            <div class="form-group">
                                <label for="telefono" class="col-form-label">telefono</label>
                                <input type="text" id="txt_telefono" name="txt_telefono" placeholder="telefono">
                            </div>
                            <div class="form-group">
                                <label for="correo_electronico" class="col-form-label">correo_electronico</label>
                                <input type="text" id="txt_correo_electronico" name="txt_correo_electronico" placeholder="correo_electronico">
                            </div>
                            <div class="form-group">
                                <label for="id_tipo_sangre" class="col-form-label">id_tipo_sangre</label>
                                <input type="text" id="txt_id_tipo_sangre" name="txt_id_tipo_sangre" placeholder="id_tipo_sangre">
                            </div>
                            <div class="form-group">
                                <label for="date" class="col-form-label">fecha_nacimiento</label>
                                <input type="date" id="txt_fn" name="txt_fn" placeholder="yyyy-mm-dd">
                            </div>
                            <div class="form-group">
                                <button type="submit" id="btn_agregar" name="btn_agregar" value="agregar">Agregar</button>
                            </div>
                            <div class="form-group">
                                <button type="submit" id="btn_actualizar" name="btn_actualizar" value="actualizar">Actualizar</button>
                            </div>
                            <div class="form-group">
                                <button type="submit" id="btn_borrar" name="btn_borrar" value="borrar">Borrar</button>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                            </div>
                    </form>
                 </div>
            </div>
        </div>    
    </body>
</html>