<?php  
    //include("datos_sistema.php");
    include("datos_sistema.php");
    if ($iduser == "") {
        header("Location:https://tendenciadigital.cl/colegio/");
    }
    $sql_usuario = "SELECT * FROM alumnos WHERE estado = 'Activo'";
    $query_usuario = mysqli_query($con, $sql_usuario);

    //NIVELES
    $sql_niveles3 = "SELECT * FROM niveles WHERE estado = 'Activo'";
    $queryniveles3 = mysqli_query($con, $sql_niveles3);

    $sql_apoderadoslist3 = "SELECT * FROM apoderados WHERE estado = 'Activo'";
    $queryapoderadoslist3 = mysqli_query($con, $sql_apoderadoslist3);
    
?>
<!doctype html>
<html lang="es">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- loader-->
	  <link href="assets/css/pace.min.css" rel="stylesheet" />
	  <script src="assets/js/pace.min.js"></script>

    <!--plugins-->
    <link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" />
    <link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet" />
    <link href="assets/plugins/metismenu/css/metisMenu.min.css" rel="stylesheet" />
    <link href="assets/plugins/datatable/css/dataTables.bootstrap5.min.css" rel="stylesheet" />

    <!-- CSS Files -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/bootstrap-extended.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <!--Theme Styles-->
    <link href="assets/css/dark-theme.css" rel="stylesheet" />
    <link href="assets/css/semi-dark.css" rel="stylesheet" />
    <link href="assets/css/header-colors.css" rel="stylesheet" />
    <!-- CSS de SweetAlert2 PARA LA ALERTA ANIMADA CADA VEZ QUE SE REALIZA EDITAR, ELIMINAR ETC. -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
    <!-- JS de SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <title><?php echo $titulo_menu;  ?></title>
    
    <script>
$(document).ready(function() {
    // Destruir instancia DataTable existente
    // Inicializar DataTable con el nuevo idioma y botones
    $('#example2').dataTable( {
        "language": {
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "sZeroRecords":    "No se encontraron resultados",
            "sEmptyTable":     "Ningún dato disponible en esta tabla",
            "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix":    "",
            "sSearch":         "Buscar:",
            "sUrl":            "",
            "sInfoThousands":  ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst":    "Primero",
                "sLast":     "Último",
                "sNext":     "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        },
        paging: true,
        searching: true,
        dom: '<"top"B<"clear"><"spacer"l>f>rt<"bottom"ip><"clear">',  // Configura la estructura del layout de DataTables
        buttons: [
            'copy', 'excel', 'pdf', 'print'
        ]
        
        
    } );
});
</script>
<style>
    .spacer {
        margin-top: 17px;  /* Ajusta el margen superior del selector de registros para crear el salto de línea */

    }
    .dataTables_length {
        margin-bottom: -30px;  /* Ajusta este valor para bajar el "Mostrar registros" */
    }
</style>
  </head>
  <body>
  	<style>
        /* Estilo para el contenedor del label y el input */
        .form-label-inside {
          position: relative;
        }

        /* Estilo para el label */
        .form-label-inside label {
          position: absolute;
          top: 0.3rem; /* Ajusta el espaciado vertical del label */
          left: 1rem; /* Ajusta el espaciado horizontal del label */
          pointer-events: none;
          color: #6c757d; /* Color del texto del label */
          transition: 0.2s; /* Transición para suavizar el efecto al hacer foco en el input */
        }

        /* Estilo para el input */
        .form-label-inside input {
          padding: 1.2rem 1rem 0.3rem; /* Espacio para el label y contenido del input. el 0.3rem es el espacio de abajo a arriba. */
          height: 3.0rem; /* Ajusta la altura del input para lograr el efecto deseado */
          margin-bottom: 0.3rem;
        }
        /* Estilo para el input */
        .form-label-inside select {
           /* Espacio para el label y contenido del input. el 0.3rem es el espacio de abajo a arriba. */
          height: 3.0rem; /* Ajusta la altura del input para lograr el efecto deseado */
          margin-bottom: 0.3rem;
          top: 0.3rem;
          left: 1rem;
          padding: 0.7rem 1rem; /* Ajusta el padding para alinear verticalmente el texto */
        }

        /* Estilo para el input cuando está enfocado o tiene contenido */
        .form-label-inside input:focus + label,
        .form-label-inside input:not(:placeholder-shown) + label {
          top: 0.15rem; /* Ajusta el espaciado vertical del label cuando está enfocado o tiene contenido */
          font-size: 0.90rem; /* Tamaño de fuente reducido para el label cuando está enfocado o tiene contenido */
        }
    </style>
    <style>
        /* Estilo para el contenedor de los divs */
        .div-container {
            margin-bottom: 2px;
        }

        /* Estilo para los divs que contienen los inputs */
        .input-div {
            margin-right: 1;
            margin-left: 1;
            margin-bottom: 2px;
        }
    </style>
    <script type="text/javascript">
        function confirmaregistro(){
            var respuesta = confirm("Seguro que desea eliminar el Alumno?, Como info, la eliminación no afecta los ingresos por matrícula y mensualidades pagadas.");
            if (respuesta == true) {
                return true;
                toastr.success("Registro eliminado");
            }else{
                return false;                
            }
        }
    </script>

 <!--start wrapper-->
    <div class="wrapper">
       <!--start sidebar -->
       <?php include("menu_vector.php");  ?>

        <!-- start page content wrapper-->
        <div class="page-content-wrapper">
          <!-- start page content-->
         <div class="page-content">

          <!--start breadcrumb-->
          <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Alumnos</div>
            <div class="ps-3">
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0 align-items-center">
                  <li class="breadcrumb-item"><a href="dashboard.php"><ion-icon name="home-outline"></ion-icon></a>
                  </li>
                  <li class="breadcrumb-item active" aria-current="page">Registros de Alumnos</li>
                </ol>
              </nav>
            </div>
            <div class="ms-auto">
              <div class="btn-group">
                <button type="button" class="btn btn-outline-primary">Settings</button>
                <button type="button" class="btn btn-outline-primary split-bg-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">	<span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-end">	<a class="dropdown-item" href="javascript:;">Action</a>
                  <a class="dropdown-item" href="javascript:;">Another action</a>
                  <a class="dropdown-item" href="javascript:;">Something else here</a>
                  <div class="dropdown-divider"></div>	<a class="dropdown-item" href="javascript:;">Separated link</a>
                </div>
              </div>
            </div>
          </div>
          <!--end breadcrumb-->
				<script type="text/javascript">
        function formatCliente(cliente)
        {cliente.value=cliente.value.replace(/[.-]/g, '')
        .replace( /^(\d{1,2})(\d{3})(\d{3})(\w{1})$/, '$1.$2.$3-$4')}
    </script>
				<h6 class="mb-0 text-uppercase">Tabla de Registros de Alumnos</h6>
				<hr/>
				<div class="card">
					<div class="card-body">
						<div class="d-flex justify-content-end mb-3">
	            <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#registroAlumno">+ Nuevo Alumno</button>
	        </div>						
						<div class="table-responsive">
							<table id="example2" class="table table-striped table-bordered">
								<thead>
									<tr>										
                                            <th>Alumno</th>
                                            <th>R.U.T.</th>
                                            <th>Nivel</th>
                                            <th>Apoderado</th>
                                            <th>Correo</th>
                                            <th>Teléfono</th>
                                            <th>Dirección</th>                                            
                                            <th>Acciones</th>
									</tr>
								</thead>
								<tbody>
									<?php  
                                            while ($row = mysqli_fetch_assoc($query_usuario)) {
                                        ?>
                                        <tr>                                            
                                            <td><?php echo $row['nombres']." ".$row['apellidos'] ?></td>  
                                            <td><?php echo $row['rut'] ?></td>
                                            <td><?php echo $row['nivel_estudio'] ?></td>
                                            <td><?php echo $row['nombre_apoderado']." ".$row['apellido_apoderado'] ?></td>
                                            <td><?php echo $row['mail'] ?></td>
                                            <td><?php echo $row['telefono'] ?></td>
                                            <td><?php echo $row['direccion'] ?></td>                       
                                            <td>
                                                <div class="form-group row icon-container">
                                                    <a href="#" class="icon-link edit-icon" data-bs-toggle="modal" title="Editar Alumno" data-bs-target="#editModal" data-id="<?php echo $row['id_alumno']; ?>">
                                                        <i class="lni lni-pencil-alt"></i>
                                                    </a>                                                 
                                                    <a href="eliminar_alumno.php?id_alumno=<?php echo $row['id_alumno'];?>" title="Eliminar Alumno" class="icon-link delete-icon" onclick="return confirmaregistro();">
                                                        <i class="lni lni-trash"></i>
                                                    </a>
                                                </div>
                                            </td>                                            
                                        </tr>
                                        <?php  
                                        } mysqli_free_result($query_usuario);
                                        ?>
									
								</tbody>
								
							</table>
						</div>
					</div>
				</div>
             

          </div>
          <!-- end page content-->
         </div>
         <?php include("modal_alumno.php");  ?>
         <!-- Modal EDITAR LAPIZ-->

<datalist name="list_apoderados" id="list_apoderados" class="col-12 bg-white list_apoderados" hidden>
    <?php while ($row_apoderados = mysqli_fetch_assoc($queryapoderadoslist3)) {?>
    <option value="<?php echo $row_apoderados['rut']." | ".$row_apoderados['nombres']." ".$row_apoderados['apellidos'];?>"></option>
    <?php }mysqli_free_result($queryapoderadoslist3); ?>
</datalist>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Editar Alumno</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="user" id="registroFormEdit">
                  <!-- Cliente (datos relevantes) -->
                    <div class="form-group row div-container">                          
                        <input type="text" class="form-control" hidden id="id_alumnoedit" value="" name="id_alumnoedit" placeholder="">
                                                <div class="col-sm-3 form-floating form-label-inside input-div">
                                                    <input type="text" class="form-control" id="nombreedit" name="nombreedit" placeholder=" ">
                                                    <label for="nombreedit" class="col-sm-12"><strong style="color: red;">*</strong> Nombres</label>
                                                </div>
                                                <div class="col-sm-4 form-floating form-label-inside input-div">
                                                    <input type="text" class="form-control" id="apellidoedit" name="apellidoedit" placeholder=" ">
                                                    <label for="apellidoedit" class="col-sm-12">Apellidos</label>
                                                </div>
                                                <div class="col-sm-3 form-floating form-label-inside input-div">
                                                    <input type="text" class="form-control" id="rutedit" oninput="formatCliente(this)" name="rutedit" placeholder="" maxlength="12">
                                                    <label for="rutedit" class="col-sm-12"><strong style="color: red;">*</strong>R.U.T. Alumno</label>
                                                </div>
                                                <div class="col-sm-2 form-floating form-label-inside input-div">  
                                                    <input type="text" class="form-control" id="telefonoedit" name="telefonoedit" placeholder="">
                                                    <label for="telefonoedit" class="col-sm-9">Teléfono</label>
                                                </div>         
                                                <div class="col-sm-5 form-floating form-label-inside input-div">
                                                    <input type="text" class="form-control" id="mailedit" name="mailedit" placeholder="">
                                                    <label for="mailedit" class="col-sm-12">Mail</label>
                                                </div>                                                
                                                <div class="col-sm-7 form-floating form-label-inside input-div">
                                                    <input type="text" class="form-control" id="direccionedit" name="direccionedit" placeholder="">
                                                    <label for="direccionedit" class="col-sm-12">Dirección</label>
                                                </div>
                                                <div class="col-sm-5" >
                                                    <select class="form-control" id="nivel_estudioedit" style="height: 58px;" name="nivel_estudioedit">
                                                        <option value=""><strong style="color: red;">*</strong>Nivel de Estudio</option>
                                                         <?php while ($row_niveles = mysqli_fetch_assoc($queryniveles3)) {
                                                        ?><option value="<?php echo $row_niveles['id_nivel'];?>"><?php echo $row_niveles['nombre_nivel'];?></option>
                                                        <?php }mysqli_free_result($queryniveles3); ?>   
                                                    </select>      
                                                </div>
                                                <div class="col-sm-7 form-floating form-label-inside input-div">
                                                    <input type="text" class="form-control" id="apoderado_alumnoedit" name="apoderado_alumnoedit" placeholder=" " list="list_apoderados">
                                                    <label for="apoderado_alumnoedit" class="col-sm-12"><strong style="color: red;">*</strong>Apoderado del Alumno</label>
                                                </div>
                    </div>
                  <!-- Botones para guardar y cerrar el formulario -->
                  <div class="form-group d-flex justify-content-right align-items-right"><br>
                    <button type="button" class="btn form-control btn-success" style="margin: 5px;" onclick="guardarCambios()">Guardar Cambios</button>
                    <button type="button" class="btn btn-danger form-control" style="margin: 5px;" data-bs-dismiss="modal">Cerrar</button>
                  </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        //RECUERDO: id_usuario captura el id (data-id) del boton para al momento de presionar se mande al php obtener datos finanza para en ese php buscar los datos de finanzas y retornar los datos como data. osea data.fecha, data.monto, etc.
        //IMPORTANTE IMPORTAR SCRIPT DE MYSQL EN EL HEADER 3.6.... **************** PARA EVITAR ERROR Y QUE FUNCIONE.
        $('.edit-icon').on('click', function(){
            var idAlumno = $(this).data('id');
            // Realiza una petición Ajax para obtener los detalles del pedido y cargarlos en el modal
            $.ajax({
                url: 'obtener_datos_alumno.php',
                type: 'GET',
                data: { id_alumno: idAlumno },
                success: function(response) {
                    var data = JSON.parse(response);
                    $('#id_alumnoedit').val(idAlumno);
                    $('#nombreedit').val(data.nombres);
                    $('#apellidoedit').val(data.apellidos);
                    $('#rutedit').val(data.rut);
                    $('#telefonoedit').val(data.telefono);
                    $('#mailedit').val(data.mail);
                    $('#direccionedit').val(data.direccion);
                    $('#nivel_estudioedit').val(data.id_nivel).change();
                    var apoderado = (data.rut_apoderado ? data.rut_apoderado : '') + 
                                    (data.nombre_apoderado ? " | " + data.nombre_apoderado : '') + 
                                    (data.apellido_apoderado ? " " + data.apellido_apoderado : '');
                    $('#apoderado_alumnoedit').val(apoderado);
                },
                error: function(error) {
                    console.error('Error al obtener detalles del Usuario: ', error);
                }
            });
        });
    });    
    function guardarCambios() {
        //RECUERDO: se capturan los datos del modal con ajax y se mandan los datos a registro act finanza, para q en ese php se realice el respectivo update y retornar reponse si es succeess, alertar q fue guardado exitoasemente y tambien realizar una actualizacion de la pagina para mostrar los datos actuales de lo updateado.
        var id_alumnoedit = $('#id_alumnoedit').val();
        var nombreedit = $('#nombreedit').val();
        var apellidoedit = $('#apellidoedit').val();
        var rutedit = $('#rutedit').val();
        var telefonoedit = $('#telefonoedit').val();
        var mailedit = $('#mailedit').val();
        var direccionedit = $('#direccionedit').val();
        var nivel_estudioedit = $('#nivel_estudioedit').val();
        var apoderado_alumnoedit = $('#apoderado_alumnoedit').val();
        // Realiza una petición Ajax para guardar los cambios en el servidor
        //LADO IZQUIERDO LO Q SE MANDA COMO POST, Y LADO DERECHO NOMBRES DE LAS VARIABLES QUE ENVIAS
        $.ajax({
            url: 'registro_alumnoedit.php',
            type: 'POST',
            data: {
                id_alumnoedit: id_alumnoedit,
                nombreedit: nombreedit,
                apellidoedit: apellidoedit,
                rutedit: rutedit,
                telefonoedit: telefonoedit,
                mailedit: mailedit,
                direccionedit: direccionedit,
                nivel_estudioedit: nivel_estudioedit,
                apoderado_alumnoedit: apoderado_alumnoedit
            },
            success: function(response) {
                Swal.fire({
                  title: "Modificación exitosa",
                  text: "La modificación fue realizada correctamente",
                  icon: "success",
                  confirmButtonColor: "#2a3042",
                  confirmButtonText: "Aceptar"
                }).then(() => {
                    location.reload();
                });
            },
            error: function(error) {
                console.error('Error al guardar cambios: ', error);
            }
        });
        //y este return es meramente para evitar error por la consola del navegador , ya que si se elimina muestra un error, por esto es su unica funcion.
        return false; // Agrega esta línea
    }
</script> 

         <!--Start Back To Top Button-->
		     <a href="javaScript:;" class="back-to-top"><ion-icon name="arrow-up-outline"></ion-icon></a>
			 <!--End Back To Top Button-->
	  
			 


         <!--start overlay-->
          <div class="overlay nav-toggle-icon"></div>
         <!--end overlay-->

     </div>
  <!--end wrapper-->
  <style type="text/css">
     .icon-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre los íconos */
}

/* Estilos para los enlaces de los íconos */
.icon-link {
    display: inline-flex; /* Asegura que el enlace no ocupe todo el ancho */
    align-items: center;
    justify-content: center;
    width: 24px; /* Ancho fijo para cada ícono */
    height: 24px; /* Altura fija para cada ícono */
    text-decoration: none; /* Elimina el subrayado del enlace */
    cursor: pointer; /* Muestra la manito solo sobre el ícono */
}

/* Estilo específico para el ícono de lápiz para moverlo a la derecha */
.icon-link.edit-icon {
    margin-left: 10px; /* Agrega espacio a la izquierda del ícono */
}

/* Estilo para los íconos */
.icon-link i {
    font-size: 22px; /* Ajusta el tamaño del ícono */
}
  </style>

<?php  
        //ALERTAS DE REGISTRO EXITOSO O ERROR EN BD.    
        $client="";
        $client=$_GET['client'];
        //$n_fact=$_GET['n_fact'];
        if ($client == "succ") {
            echo '<script>';
            echo 'Swal.fire({';
            echo '  title: "Eliminación exitosa",';
            echo '  text: "Alumno Eliminado correctamente. Como info, el ingreso por pagos de matrícula o mensualidades no son afectados.",';
            echo '  icon: "success",';
            echo '  confirmButtonText: "Aceptar",';
            echo '  confirmButtonColor: "#2a3042",';
            echo '});';
            echo 'history.replaceState({}, document.title, window.location.pathname);';
            echo '</script>';
        }elseif ($client == 'err') {
            echo '<script>';
            echo 'Swal.fire({';
            echo '  title: "Error",';
            echo '  text: "Hubo un error en la base de datos",';
            echo '  icon: "error",';
            echo '  confirmButtonText: "Aceptar",';
            echo '  confirmButtonColor: "#2a3042"';
            echo '});';
            echo 'history.replaceState({}, document.title, window.location.pathname);';
            echo '</script>';  
        } elseif ($client == 'campos_vacios') {
            echo '<script>';
            echo 'Swal.fire({';
            echo '  title: "Información",';
            echo '  text: "Debe completar los campos requeridos por favor",';
            echo '  icon: "warning",';
            echo '  confirmButtonText: "Aceptar",';
            echo '  confirmButtonColor: "#2a3042"';
            echo '});';
            echo 'history.replaceState({}, document.title, window.location.pathname);';
            echo '</script>';  
        }
    ?>
  


    <!-- JS Files-->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/plugins/simplebar/js/simplebar.min.js"></script>
    <script src="assets/plugins/metismenu/js/metisMenu.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <!--plugins-->
    <script src="assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>
    <script src="assets/plugins/datatable/js/jquery.dataTables.min.js"></script>
    <script src="assets/plugins/datatable/js/dataTables.bootstrap5.min.js"></script>
    <!--<script src="assets/js/table-datatable.js"></script>-->

    <!-- Main JS-->
    <script src="assets/js/main.js"></script>


  </body>
</html>