{% 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 #} -->


<!-- <link rel="stylesheet" href="{{ url_for('static', filename='f_contact/form.css') }}"> -->




{% endblock css %}

{% block body %}


<style>
  /* Smartphones (hasta 767px) */
@media (max-width: 767px) {
  /* main{ background-color: black;  } */
  main { min-height: 80dvh; }
}

/* Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* main{ background-color: pink;  } */
  main { min-height: 80dvh; }
}

/* Laptops (1024px - 1439px) monitores resulición baja */
@media (min-width: 1024px) and (max-width: 1439px) {
  /* main{ background-color: purple;  } */
  main { min-height: 80dvh; }
}

/* PCs de escritorio (1440px - 1919px) macbook */
@media (min-width: 1440px) and (max-width: 1919px) {
  /* main{ background-color: greenyellow;  } */
  main { min-height: 80dvh; }
}

/* Pantallas Ultrawide (1920px en adelante) */
@media (min-width: 1920px) {
  /* main{ background-color: red;  } */
  main { min-height: 80dvh; }
}

  #dt-length-0 {
    width: 6em;
  }
</style>



<style>
/* Estilos generales de la tabla (Bootstrap ya maneja gran parte de esto) */
#tblUsers {
    /* Asegúrate de que no haya un min-width fijo que rompa la responsividad */
    width: 100% !important; /* !important para asegurar que sobreescribe estilos de DataTables/Bootstrap si es necesario */
}

/* Ocultar las cabeceras de la tabla en pantallas pequeñas */
@media screen and (max-width: 768px) {
    #tblUsers thead {
        display: none; /* Oculta las cabeceras en móviles */
    }

    #tblUsers,
    #tblUsers tbody,
    #tblUsers tr,
    #tblUsers td {
        display: block; /* Hace que todos los elementos de la tabla se comporten como bloques */
        width: 100%; /* Ocupan todo el ancho disponible */
    }

    #tblUsers tr {
        margin-bottom: 1rem; /* Espacio entre las "tarjetas" (filas) */
        border: 1px solid #dee2e6; /* Borde para simular la tarjeta */
        border-radius: 0.5rem; /* Bordes redondeados */
        background-color: #fff;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Sombra suave */
        padding: 1rem; /* Espacio interno de la tarjeta */
        box-sizing: border-box; /* Incluir padding y borde en el ancho total */
    }

    #tblUsers td {
        border: none; /* Elimina los bordes de las celdas individuales */
        position: relative; /* Necesario para posicionar el data-label */
        padding-left: 50% !important; /* Espacio para el data-label */
        text-align: left !important; /* Asegura que el texto se alinee a la izquierda */
        white-space: normal; /* Permite que el texto se ajuste y no esté en una sola línea */
    }

    #tblUsers td::before {
        /* Muestra el contenido del data-label como pseudo-elemento */
        content: attr(data-label);
        position: absolute;
        left: 0.5rem; /* Posición del label */
        width: 45%; /* Ancho del label */
        padding-right: 1rem;
        white-space: nowrap; /* Evita que el label se rompa */
        font-weight: bold;
        text-align: right; /* Alinea el label a la derecha dentro de su espacio */
        color: #495057; /* Color para el label */
    }


}

</style>

<div>
  <!-- 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>Notificaciones Email</th>
        <th>Acciones</th>
      </tr>
    </thead>
    <tbody>
      {% for ele in data_all_users %}
      <tr data-id="{{ele[0]}}">
        <td data-label="Nombre">{{ ele[1] }}</td>
        <td data-label="Apellidos">{{ ele[2] }}</td>
        <td data-label="Email">{{ ele[3] }}</td>
        <td data-label="Últ. Conexión">{{ ele[4] }}</td>
        <td data-label="Admin">{{ ele[5] }}</td>
        <td data-label="Posts">{{ ele[6] }}</td>
        <td data-label="Notif. Email">{{ ele[7] }}</td>
        <td data-label="Acciones"> {# Mantén data-label para Acciones también #}
          <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="form-container">
          {{ 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>

$(document).ready(function() {
    $('#tblUsers').DataTable({
        // Puedes añadir tus opciones de DataTables aquí
        "language": {
            url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json" // Idioma español
        },
    });
});



</script>

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







{% endblock js %}