{% extends 'h_tmp_usr/z_tmp.html' %}

{% block css %}
<!-- {# datatables #} -->
<link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.bootstrap5.css">

<!-- {# i jconfirm #} -->
<link rel="stylesheet" href="https://htmlguyllc.github.io/jConfirm/jConfirm.min.css">
<!-- {# f jconfirm #} -->

{% endblock css %}

{% block body %}


<div>
  <h1>Administrar Perfiles</h1>
  <!-- Botón para abrir el modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalFormAddUsr">
    <i class="bi bi-person-fill-add"></i> Añadir Usuario
  </button>

  <table id="tblUsers" class="table table-striped" style="width:100%" data-aos="fade-up" data-aos-delay="0"
    data-aos-duration="800">
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Apellidos</th>
        <th>Email</th>
        <th>Última Conexión</th>
        <th>Admin</th>
        <th>Posts</th>
        <th>Notificiones Contactos</th>
        <th>Acciones</th>
      </tr>
    </thead>
    <tbody>
      {% for ele in data_all_users %}
      <tr data-id="{{ele[0]}}">
        <td>{{ ele[1] }}</td>
        <td>{{ ele[2] }}</td>
        <td>{{ ele[3] }}</td>
        <td>{{ ele[4] }}</td>
        <td>{{ ele[5] }}</td>
        <td>{{ ele[6] }}</td>
        <td>{{ ele[7] }}</td>
        <td>
          <a href="" class="btn btn-primary" data-bs-toggle="modal" data-id="{{ele[0]}}"
            data-bs-target="#modalFormAddUsr">
            <i class="bi bi-pencil-square"></i>
          </a>

          {% if id_usr != ele[0] %}
          <a href="" class="btn btn-danger delete-btn" data-id="{{ele[0]}}">
            <i class="bi bi-trash"></i>
          </a>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>

  </table>
</div>


<!-- Modal Bootstrap 5 -->
<div class="modal fade" id="modalFormAddUsr" tabindex="-1" aria-labelledby="modalFormAddUsrLabel" aria-hidden="true" >
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalFormAddUsrLabel"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- {# i form add user #} -->
        <form method="POST" action="{{ url_for('manage_profiles') }}" class="login-form">
          {{ form.hidden_tag() }}
          {{ form.id }}
          
          <!-- {# nombre #} -->
          <div class="form-row">
            {{ form.nombre.label() }}
            {{ form.nombre(class="form-control", placeholder="Nombre del usuario", type="text", id="fe_nombre") }}
          </div>
        
          <!-- {# apellido #} -->
          <div class="form-row">
            {{ form.apellido.label() }}
            {{ form.apellido(class="form-control", placeholder="Apellidos del usuario", type="text", id="fe_apellido") }}
          </div>
        
          <!-- {# género #} -->
          <div class="form-row">
            {{ form.genero.label(class_="form-label") }}
            {{ form.genero(class_="form-select", maxlength="35", id="fe_genero") }}
          </div>
        
          <!-- {# email #} -->
          <div class="form-row">
            {{ form.email.label(class_="form-label") }}
            {{ form.email(placeholder="ejemplo@email.com", class_="form-control", maxlength="35", type="email", id="fe_email") }}
          </div>
        
            <!-- {# isAdmin #} -->
            <div class="form-row">
              {{ form.isAdmin.label(class_="form-label") }}
              {{ form.isAdmin(class_="form-select", maxlength="35", id="fe_isadmin") }}
            </div>

            <!-- {# recibe notificaciones de nuevos contactos #} -->
             <div>
              {{ form.isContactNoti.label(class_='form-label') }}
              {{ form.isContactNoti(class_="form-select", maxlength="35", id="isContactNoti") }}
             </div>
        
            <button type="submit" class="btn btn-primary" id="btnSubmit"></button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>        
        </form>
        <!-- {# f form add user #} -->
      </div>
      <!-- <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> </div> -->
    </div>
  </div>
</div>


{% endblock body %}

{% block js %}

<!-- {# aos script #} -->
{% include 'z_comps/aos_script.html' %}


<script>
  let btnAddUsr = document.querySelector('button[data-bs-target="#modalFormAddUsr"]');
  btnAddUsr.addEventListener('click', function() {
    console.log("click en el botón de añadir usuario");
    let fe_nombre = document.getElementById('fe_nombre');
    let fe_apellido = document.getElementById('fe_apellido');
    let fe_genero = document.getElementById('fe_genero');
    let fe_email = document.getElementById('fe_email');
    let fe_isadmin = document.getElementById('fe_isadmin');
    let fe_isContactNoti = document.getElementById("isContactNoti");
    let form_id = document.querySelector('input[name="id"]');
    let titleForm = document.getElementById("modalFormAddUsrLabel");
    let btnSubmit = document.getElementById("btnSubmit");
    btnSubmit.innerText = "Añadir Usuario";
    titleForm.innerText = "Formulario: Añadir Usuario";
    fe_nombre.value = '';
    fe_apellido.value = '';
    fe_genero.value = '';
    fe_email.value = '';
    fe_isadmin.value = '';
    form_id.value = '';
    fe_isContactNoti.value = '';
  });
  
</script>

<script>

async function get_user_data(btn) {
    
    try {
        let id = btn.dataset.id;
        
        let response = await fetch('/user/manage-profiles/get-user', {
            method: 'POST',  // Cambiado a POST
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id }),
            credentials: 'include'
        });

        let { data } = await response.json();
        let form_id = document.querySelector('input[name="id"]');
        let fe_nombre = document.getElementById('fe_nombre');
        let fe_apellido = document.getElementById('fe_apellido');
        let fe_genero = document.getElementById('fe_genero');
        let fe_email = document.getElementById('fe_email');
        let fe_isadmin = document.getElementById('fe_isadmin');
        let fe_isContactNoti = document.getElementById("isContactNoti");
        let btn_submit = document.querySelector('#formEditUser button[type="submit"]');
        let titleForm = document.getElementById("modalFormAddUsrLabel");
        let btnSubmit = document.getElementById("btnSubmit");

        titleForm.innerText = "Formulario: Editar Usuario";
        btnSubmit.innerText = "Actualizar Usuario";
        // btn_submit.dataset.id = data[0]; // Asignar el ID al botón de envío
        fe_nombre.value = data[1];
        fe_apellido.value = data[2];
        fe_genero.value = data[3];
        fe_email.value = data[4];
        fe_isadmin.value = data[5];
        fe_isContactNoti.value = data[6];
        form_id.value = data[0];  // Asignamos el ID recibido

        console.log(data)
        
        
        
    } catch (error) {
        console.error('Error al obtener datos:', error);
    }
}


document.getElementById('tblUsers').addEventListener('click', (event) => {
    const button = event.target.closest('a.btn-primary[data-id]');
    if (button) {
      get_user_data(button);
    }
});
</script>


<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> -->
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.bootstrap5.js"></script>

<!-- jQuery y jConfirm -->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<script src="https://htmlguyllc.github.io/jConfirm/jConfirm.min.js"></script>


<script>
    function delete_user(e){
      let btn = $(this); // `this` es el botón que lanzó el jConfirm
      let postId = btn.data('id'); // lee el data-id
      let data = { 'id': postId };

      fetch('/user/manage-profiles/delete-usr', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data),
        credentials: 'include'
      })
        .then(response => {
          if (!response.ok) {
            throw new Error('Error en la respuesta del servidor');
          }
          return response.json();
        })
        .then(data => {
          if (data.ok) {
            // Aquí puedes agregar código para eliminar el post del DOM
            // console.log("eliminado");
            btn.closest('tr').remove();
          } else {
            // Manejar el error

            console.error('Error al eliminar el post:', data.error);
          }
        })
        .catch(error => {
          console.error('Error en la solicitud:', error);
        });

    }

    // https://htmlguyllc.github.io/jConfirm/
    $(function(){
        $('.delete-btn').jConfirm({
            //false|array: if provided, this will override the default confirm/deny buttons (see below for an example)
            btns: false,
            //string: question displayed to the user
            question: '¿Deseas continuar con la eliminación?',
            //string: confirm button text
            confirm_text: 'Sí',
            //string: deny button text
            deny_text: 'No',
            //boolean: if true, when the confirm button is clicked the user will be redirected to the button's href location
            // follow_href: true,
            //boolean: if true and follow_href is true, the href will be opened in a new window
            open_new_tab: false,
            //boolean: if true, the tooltip will be hidden if you click outside of it
            hide_on_click: true,
            //string ('auto','top','bottom','left','right'): preferred location of the tooltip (defaults to auto if no space)
            position: 'auto',
            //boolean: if true, the deny button will be shown
            show_deny_btn: true,
            //string ('black', 'white', 'bootstrap-4', 'bootstrap-4-white')
            theme: 'bootstrap-4',
            //string ('tiny', 'small', 'medium', 'large')
            size: 'medium',
            //boolean: show the tooltip immediately on instantiation
            show_now: false,
            //string: class(es) to add to the tooltip
            'class': ''
        }).on('confirm', delete_user)
        .on('deny', function(e){
            var btn = $(this);
            //do something on deny
        }).on('jc-show', function(e, tooltip){
            // console.log("el tooltip es visible");
            //do something when tooltip is shown
            //tooltip dom element is passed as the second parameter
        }).on('jc-hide', function(e){
            //do something when tooltip is hidden
        });

    });
</script>

<script>
  // new DataTable('#tblUsers');

  new DataTable('#tblUsers', {
        initComplete: function() {
            // Agrega campos de filtro para cada columna
            this.api().columns().every(function() {
                let column = this;
                let header = $(column.header());
                let title = header.text().trim();

                // Excluir la columna "Estatus" del filtro
                if (title !== 'Acciones') {
                    // Crea input de filtro
                    header.append('<div class="filter"><input type="text" class="form-control" placeholder="'+title+'" /></div>');
                    
                    // Aplica el filtro al escribir
                    $('input', header)
                        .on('keyup change', function() {
                            if (column.search() !== this.value) {
                                column.search(this.value).draw();
                            }
                        });
                }
            });
        }
    });


</script>

<!-- {# if flash #} -->
{% include 'z_comps/if_flash.html' %}


<script>

</script>




{% endblock js %}