{% extends 'shared/base.html' %} {% load static %} {% block content %}
<style>
  .tooltip-custom {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-custom .tooltip-text {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Posiciona o tooltip acima do elemento */
  left: 50%;
  margin-left: -70px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-custom .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%; /* Bottom do tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip-custom:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
  var tooltips = document.querySelectorAll('.tooltip-custom');
  tooltips.forEach(function(tooltip) {
    tooltip.addEventListener('mouseover', function() {
      var tooltipText = this.querySelector('.tooltip-text');
      tooltipText.style.visibility = 'visible';
      tooltipText.style.opacity = '1';
    });
    tooltip.addEventListener('mouseout', function() {
      var tooltipText = this.querySelector('.tooltip-text');
      tooltipText.style.visibility = 'hidden';
      tooltipText.style.opacity = '0';
    });
  });
});

</script>
<div class="content">
  <div class="card my-2">
    <div class="card-body bg-success bg-gradient text-white rounded-2">
      <div class="row flex-between-center">
        <div class="col-md d-flex align-items-center">
          <h5 class="mb-2 mb-md-0">Lista de Usuários</h5>
        </div>
        <div class="col-auto">
          <a href="{% url 'cadastro_usuario' %}">
            <button class="btn btn-light me-1 mb-1" type="button">Adicionar Usuário <span class="fas fa-plus me-1"
                data-fa-transform="shrink-3"></span></button>
          </a>
        </div>
      </div>
    </div>
    <div id="messages" class="col-md-12">
      {% for message in messages %}
      <div
        class="alert alert-dismissible fade show {% if message.tags == 'success' %}alert-success {% elif message.tags == 'error' %}alert-danger {% endif %}">
        {{ message }}
      </div>
      {% endfor %}
    </div>
  </div>
  <div class="card">
    <div class="content">
      <div class="table-responsive">
        <table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0"
          width="100%">
          <thead class="bg-success bg-gradient text-white">
            <tr>
              <th>Nome</th>
              <th>Nome Usuário</th>
              <th>Email</th>
              <th>Tel. Celular</th>
              <th>Cargo/Função</th>
              <th class="text-center"><i class="fa fa-cog"></i></th>
            </tr>
          </thead>
          <tbody>
            {% for dados in cards %}
            <tr>
              <td>{{ dados.nome }}</td>
              <td>{{ dados.nome_usuario}}</td>
              <td>{{ dados.email }}</td>
              <td>{{ dados.telefone_celular }}</td>
              <td>{{ dados.cargo_funcao }}</td>
              <td class="text-center">
                <a href="{% url 'editar_usuario' dados.user_id %}" class="btn btn-default tooltip-custom">
                  <i class="fa-solid fa-pencil"></i>
                  <span class="tooltip-text">Editar Usuário</span>
                </a>
              
                <a href="{% url 'deletar_usuario' dados.user_id %}" class="btn btn-danger tooltip-custom delete-user"
                  data-bs-toggle="modal" data-bs-target="#deleteModal" data-user-id="{{ dados.user_id }}" data-username="{{ dados.nome }}">
                  <i class="fa fa-trash"></i>
                  <span class="tooltip-text">Deletar Usuário</span>
                </a>
              
                <a class="btn btn-success tooltip-custom show-details" data-bs-toggle="modal" data-bs-target="#exampleModal"
                  data-nome="{{ dados.nome }}" data-nome_usuario="{{ dados.nome_usuario }}" data-cpf="{{ dados.cpf }}"
                  data-data_nascimento="{{ dados.data_nascimento }}" data-endereco="{{ dados.endereco }}"
                  data-telefone_celular="{{ dados.telefone_celular }}" data-telefone_residencial="{{ dados.telefone_residencial }}"
                  data-img="{{ dados.foto }}">
                  <i class="fa-solid fa-magnifying-glass" id="staticBackdrop"></i>
                  <span class="tooltip-text">Ver Detalhes</span>
                </a>
              
                <a href="#" class="btn btn-primary tooltip-custom trocar_senha" data-bs-toggle="modal" data-bs-target="#senhaModal"
                  data-user-id="{{ dados.user_id }}" data-username="{{ dados.nome }}">
                  <i class="fa-solid fa-lock"></i> Trocar Senha
                  <span class="tooltip-text">Trocar Senha</span>
                </a>
              </td>
              
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- MODAL DE VISUALIZAÇÃO DE INFORMAÇÕES -->
<div class="modal fade modal-view" id="exampleModal" tabindex="-1" role="dialog"
  aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-md modal-dialog-centered" role="document">
    <div class="modal-content rounded-0">
      <div class="modal-body py-0" style="max-height: calc(100vh - 50px); overflow-y: auto;">
        <div class="d-flex flex-column flex-md-row main-content align-items-center justify-content-center">
          <div class="content-text p-4 px-5">
            <div class="text-end">
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="text-start" style="width: auto;">
              <p><strong>Nome:</strong> <span id="modal-nome"></span></p>
              <p><strong>Nome de Usuário:</strong> <span id="modal-nome_usuario"></span></p>
              <p><strong>CPF:</strong> <span id="modal-cpf"></span></p>
              <p><strong>Data de Nascimento:</strong> <span id="modal-data_nascimento"></span></p>
              <p><strong>Endereço:</strong> <span id="modal-endereco"></span></p>
              <p><strong>Telefone Celular:</strong> <span id="modal-telefone_celular"></span></p>
              <p><strong>Telefone Residencial:</strong> <span id="modal-telefone_residencial"></span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- END -->

<!-- Modal de exibição de dados -->
<!-- <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4><span id="modalTitle"></span></h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img id="modal-img" src="" alt="Imagem da Espécie" style="max-width: 100%; height: auto;">
        <p><strong>Nome:</strong> <span id="modal-nome"></span></p>
        <p><strong>Nome de Usuário:</strong> <span id="modal-nome_usuario"></span></p>
        <p><strong>CPF:</strong> <span id="modal-cpf"></span></p>
        <p><strong>Data de Nascimento:</strong> <span id="modal-data_nascimento"></span></p>
        <p><strong>Endereço:</strong> <span id="modal-endereco"></span></p>
        <p><strong>Telefone Celular:</strong> <span id="modal-telefone_celular"></span></p>
        <p><strong>Telefone Residencial:</strong> <span id="modal-telefone_residencial"></span></p>
        
         Adicione outros detalhes conforme necessário 
      </div>
    
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Imprimir Crachá</button>
      </div>
    </div>
  </div>
</div> -->


<div class="modal fade" id="senhaModal" tabindex="-1" aria-labelledby="senhaModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-delete">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="senhaModalLabel">Trocar Senha</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="error-messages"></div> <!-- Espaço para mensagens de erro -->

        <!-- Formulário de troca de senha -->
        <form method="post" action="" id="senha-form">
          {% csrf_token %}
          <input type="hidden" id="user-id-input" name="user_id" value="">
                
          <div class="mb-3">
            <label for="nova_senha" class="form-label">Nova Senha</label>
            <input type="password" class="form-control" id="nova_senha" name="senha_1" required>
          </div>
          <div class="mb-3">
            <label for="confirma_senha" class="form-label">Confirme a Nova Senha</label>
            <input type="password" class="form-control" id="confirma_senha" name="senha_2" required>
          </div>

          <!-- Botões do formulário -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
            
            <button type="submit" class="btn btn-primary" id="salvarSenhaBtn" data-user-id="{{ user_id }}">Salvar</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="deleteModal" data-excluir-lote-url="{% url 'excluir_lote' 0 %}" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true" data-lote-id="{{ lote.id }}">
  <div class="modal-dialog modal-dialog-centered modal-delete">
    <div class="modal-content">
      <div class="modal-header flex-column">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="icon-box">
          <i class="material-icons fa-solid fa-xmark"></i>
        </div>
        <h4 class="modal-title w-100">Tem certeza?</h4>
      </div>
      <div class="modal-body">
        <form id="deleteForm" method="post">
            {% csrf_token %}
            <p class="line">Você realmente deseja excluir esses registros? Este processo não pode ser desfeito.</p>
            <p id="userInfo" class="text-start"></p>
        </form>
    </div>
    <div class="modal-footer justify-content-center">
        <button type="button" class="btn btn-secondary" id="cancelDelete" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-danger" id="confirmDelete">Deletar</button>
    </div>
    </div>
  </div>
</div>


<script>
  $(document).ready(function () {
    $("#example").DataTable();
  });

  setTimeout(function () {
    $("#messages").fadeOut("fast");
  }, 5000);

  $(document).on("click", ".delete-user", function () {
    var userId = $(this).data("user-id");
    var userName = $(this).data("username");

    // Exibir informações do usuário no modal
    $("#userInfo").html("<strong>Usuário:</strong> " + userName);
    $("#confirmDelete").attr("data-user-id", userId);
    $("#deleteModal").modal("show");
  });

  $(document).on("click", "#confirmDelete", function () {
    var userId = $(this).data("user-id");
    window.location.href = '{% url "deletar_usuario" 0 %}'.replace("0", userId);
  });

  $(document).on("click", "#cancelDelete, .close-modal", function () {
    $("#deleteModal").modal("hide");
  });
</script>
<script>
  // Função para formatar a lista de estados
  function removerColchetesAspas(inputString) {
    // Remove colchetes
    var stringSemColchetes = inputString.replace(/\[/g, '').replace(/\]/g, '');
    
    // Remove aspas simples e duplas
    var stringSemAspas = stringSemColchetes.replace(/['"]+/g, '');

    return stringSemAspas;
}
$(document).on("click", ".show-details", function (){
        var nome = $(this).data('nome');
        var nome_usuario = $(this).data('nome_usuario');
        var cpf = $(this).data('cpf');
        var data_nascimento = $(this).data('data_nascimento');
        var endereco = $(this).data('endereco');
        var telefone_celular = $(this).data('telefone_celular');
        var telefone_residencial = $(this).data('telefone_residencial');
        var img = $(this).data('img');
        

        $('#modal-nome').text(nome);
        $('#modal-nome_usuario').text(nome_usuario);
        $('#modal-cpf').text(cpf);
        $('#modal-data_nascimento').text(data_nascimento);
        $('#modal-endereco').text(endereco);
        $('#modal-telefone_celular').text(telefone_celular);
        $('#modal-telefone_residencial').text(telefone_residencial);

        // Imprime a URL da imagem no console

       // Defina os valores desejados para largura e altura
        var larguraDesejada = 100; // substitua pelo valor desejado
        var alturaDesejada = 200; // substitua pelo valor desejado
        var paddingBotDesejado = 20; // substitua pelo valor desejado

        // Defina a fonte da imagem
        $('#modal-img').attr('src', img);

        // Aplique estilos usando a propriedade object-fit e padding-bottom
        $('#modal-img').css({
            'width': larguraDesejada + '%',
            'height': alturaDesejada + 'px',
            'object-fit': 'cover',
            'padding-bottom': paddingBotDesejado + 'px'
        });
    });
</script>



<script>
    document.addEventListener('DOMContentLoaded', function () {
    // Event listener para o clique no botão que aciona o modal
    $('.trocar_senha').click(function () {
        var userId = $(this).data('user-id');
        var username = $(this).data('username');

        // Defina os valores nos campos relevantes do modal
        $('#user-id-input').val(userId);
        // Se precisar, você pode fazer algo similar para preencher um campo com o username

        // Abra o modal
        $('#senhaModal').modal('show');
    });

    // Event listener para o envio do formulário no modal
    document.getElementById('senha-form').addEventListener('submit', function (event) {
        event.preventDefault();
        document.getElementById('error-messages').innerHTML = '';

        var novaSenha = document.getElementById('nova_senha').value;
        var confirmaSenha = document.getElementById('confirma_senha').value;
        var userId = document.getElementById('user-id-input').value;

        // Obtenha o token CSRF do cookie
        var csrftoken = getCookie('csrftoken');

        if (!userId) {
            alert('Erro: userId não definido.');
            return;
        }

        if (novaSenha !== confirmaSenha) {
            document.getElementById('error-messages').innerHTML = '<div class="alert alert-danger" role="alert">Senhas não são iguais.</div>';
            return;
        }

        var formData = new FormData();
        formData.append('senha_1', novaSenha);
        formData.append('senha_2', confirmaSenha);

        // Solicitação AJAX com token CSRF no cabeçalho
        $.ajax({
            type: 'POST',
            url: `/trocar_senha/${userId}/`,
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRFToken': csrftoken
            },
            success: function (data) {
                alert('Senha alterada com sucesso!');
                window.location.href = '/tabela_usuarios/';
                // Se desejar, adicione lógica adicional após a alteração da senha
            },
            error: function (data) {
                alert(`Erro ao trocar a senha: ${JSON.stringify(data)}`);
            }
        });
    });

    // Limpa as mensagens de erro quando o modal é fechado
    $('#senhaModal').on('hidden.bs.modal', function () {
        document.getElementById('error-messages').innerHTML = '';
    });

    // Função para obter o valor do cookie pelo nome
    function getCookie(name) {
        var value = "; " + document.cookie;
        var parts = value.split("; " + name + "=");
        if (parts.length === 2) return parts.pop().split(";").shift();
    }
});
</script>
{% endblock %}
</body>

</html>