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


    
?>
<!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>
    

 <!--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">Perfil</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">Perfil de Usuario</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>
    <script type="text/javascript">
        function confirmaregistro(){
            var respuesta = confirm("¿Confirma eliminar el registro?");
            if (respuesta == true) {
                return true;
                toastr.success("Registro eliminado");
            }else{
                return false;
                
            }
        }
        function mostrar_edicion(){
            var editar = document.getElementById("editar");
            var guardar = document.getElementById("guardar");
            // Obtener todos los inputs del formulario
            var inputs = document.querySelectorAll('#clienteform input');

            // Habilitar los campos, excepto el del RUT
            inputs.forEach(function(input) {
                if (input.id !== 'rut_usuario') { // Asegúrate de tener un id en el campo RUT si aún no lo tienes
                    input.disabled = false;
                }
            });

            // Ocultar botón de editar y mostrar botón de guardar
            editar.style.display = 'none';
            guardar.style.display = 'inline-block';
            guardar.hidden = false;

        }
        //ESCRIPT DE RIAL EL UNICO QUE FUNCIONÓ SIN PROBLEMAS.
        function confirmarlo(event) {  
            event.preventDefault();      
              const letrasRegex = /^[a-zA-Z\s]+$/;
              const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
              var nombre_usuario = document.getElementById("nombre_usuario").value;
              var contrasena = document.getElementById("contrasena").value;
              var nombres = document.getElementById("nombres").value;

              if (nombre_usuario == "") {
                Swal.fire({
                  title: "Error",
                  text: "Por favor complete el campo Nombre de Usuario",
                  icon: "warning",
                  confirmButtonColor: "#2a3042",
                  confirmButtonText: "Aceptar"

                });
                return false;
              }
              if (contrasena == "") {
                Swal.fire({
                  title: "Error",
                  text: "Por favor complete el campo Contraseña",
                  icon: "warning",
                  confirmButtonColor: "#2a3042",
                  confirmButtonText: "Aceptar"
                  
                });
                return false;
              }
              if (nombres == "") {
                Swal.fire({
                  title: "Error",
                  text: "Por favor complete el campo Nombres",
                  icon: "warning",
                  confirmButtonColor: "#2a3042",
                  confirmButtonText: "Aceptar"
                  
                });
                return false;
              }
            Swal.fire({
                title: 'Confirmar Edicíón',   
                text: "¿Estás seguro guardar los cambios de su usuario?",             
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: "#2a3042",
                cancelButtonColor: '931A00',
                confirmButtonText: 'Sí, Actualizar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                document.clienteform.submit();
                }
            })
        }
    </script>
				<h6 class="mb-0 text-uppercase">Perfil de Usuario</h6>
				<hr/>
				<div class="row">
                    <div class="col-lg-8 mx-auto">
                      <div class="card radius-10">
                        <div class="card-body">
                          <form class="user" id="clienteform" name="clienteform" action="registro_usuarioedit.php" method="POST" enctype="multipart/form-data">
                          <h5 class="mb-3">Perfil de Usuario</h5>
                          <div class="mb-4 d-flex flex-column gap-3 align-items-center justify-content-center">
                            <div class="user-change-photo shadow">
                              <img src="assets/images/avatars/06.png" alt="...">
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm radius-30 px-4"><ion-icon name="image-sharp"></ion-icon>Cambiar Foto</button>
                          </div>
                          <h5 class="mb-0 mt-4">Información de Usuario</h5>
                          <hr>
                          <div class="row g-3">
                            <div class="col-6">
                               <label class="form-label">Usuario</label>
                               <input type="text" name="nombre_usuario" id="nombre_usuario" disabled class="form-control" value="<?php echo $usuario_usuario; ?>">
                            </div>
                            <div class="col-6">
                               <label class="form-label">Contraseña</label>
                               <input type="text" name="contrasena" id="contrasena" disabled class="form-control" value="<?php echo $contrasena_usuario; ?>">
                            </div>
                            <div class="col-6">
                               <label class="form-label">R.U.T.</label>
                               <input type="text" class="form-control" id="rut_usuario" disabled value="<?php echo $rut_usuario; ?>">
                            </div>
                            <div class="col-6">
                             <label class="form-label">Email</label>
                             <input type="text" name="mail" id="mail" disabled class="form-control" value="<?php echo $mail_usuario; ?>">
                            </div>
                             <div class="col-6">
                               <label class="form-label">Nombres</label>
                               <input type="text" name="nombres" id="nombres" disabled class="form-control" value="<?php echo $nombre_usuario; ?>">
                            </div>
                            <div class="col-6">
                               <label class="form-label">Apellidos</label>
                               <input type="text" name="apellidos" id="apellidos" disabled class="form-control" value="<?php echo $apellido_usuario; ?>">
                            </div>
                         </div>
            
                         <h5 class="mb-0 mt-4">Información de contacto</h5>
                         <hr>
                         <div class="row g-3">
                           <div class="col-12">
                            <label class="form-label">Dirección</label>
                            <input type="text" name="direccion" id="direccion" disabled class="form-control" value="<?php echo $direccion_usuario; ?>">
                           </div>
                           <div class="col-6">
                              <label class="form-label">Teléfono</label>
                              <input type="text" name="telefono" id="telefono" disabled class="form-control" value="<?php echo $telefono_usuario; ?>">
                           </div>
                          <!--<div class="col-6">
                              <label class="form-label">Last Name</label>
                              <input type="text" class="form-control" value="Deo">
                          </div>
                          <div class="col-12">
                            <label class="form-label">About Me</label>
                            <textarea class="form-control" rows="4" cols="4" placeholder="Describe yourself..."></textarea>
                           </div>-->
                         </div>
                          <div class="text-start mt-3">
                            <button onclick="confirmarlo(event);" hidden type="button" id="guardar" name="submit2" class="btn btn-primary px-4">Guardar Información</button>
                            <button type="button" onclick="mostrar_edicion()" id="editar" class="btn btn-primary px-4">Editar Información</button>
                          </div>
                        </div>
                       </form>
                      </div>
                    </div>
                </div><!--end row-->
             

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

<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 idUsuario = $(this).data('id');
            // Realiza una petición Ajax para obtener los detalles del pedido y cargarlos en el modal
            $.ajax({
                url: 'obtener_datos_usuario.php',
                type: 'GET',
                data: { id_usuario: idUsuario },
                success: function(response) {
                    var data = JSON.parse(response);
                    $('#id_usuario').val(idUsuario);
                    $('#nombre_edit').val(data.nombre);
                    $('#apellido_edit').val(data.apellido);
                    $('#rut_edit').val(data.rut);
                    $('#telefono_edit').val(data.telefono);
                    $('#mail_edit').val(data.correo);
                    $('#direccion_edit').val(data.direccion);
                    $('#rol_edit').val(data.rol);
                    $('#comision_edit').val(data.comision);
                    $('#contrasena_edit').val(data.contrasena);
                },
                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_usuario = $('#id_usuario').val();
        var nombre_edit = $('#nombre_edit').val();
        var apellido_edit = $('#apellido_edit').val();
        var rut_edit = $('#rut_edit').val();
        var telefono_edit = $('#telefono_edit').val();
        var mail_edit = $('#mail_edit').val();
        var direccion_edit = $('#direccion_edit').val();
        var rol_edit = $('#rol_edit').val();
        var comision_edit = $('#comision_edit').val();
        var contrasena_edit = $('#contrasena_edit').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_act_usuario.php',
            type: 'POST',
            data: {
                id_usuario: id_usuario,
                nombre: nombre_edit,
                apellido: apellido_edit,
                rut: rut_edit,
                telefono: telefono_edit,
                correo: mail_edit,
                direccion: direccion_edit,
                rol: rol_edit,
                comision: comision_edit,
                contrasena: contrasena_edit
            },
            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>


  


    <!-- 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>