{% extends 'shared/base.html' %} {% load static %} {% block content %}
{% include 'funcionarios/partials/user_options_modal.html' %}
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.4.0/css/fixedHeader.bootstrap4.min.css">
<script src="https://cdn.datatables.net/fixedheader/3.4.0/js/dataTables.fixedHeader.min.js"></script>
<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>

<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 Funcionários</h5>
        </div>
        <div class="col-auto">
          <a href="{% url 'create_funcionario' %}">
            <button class="btn btn-light me-1 mb-1" type="button">Adicionar Funcioná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>Cargo</th>
              <!-- <th>Status</th> -->
              <th class="text-center"><i class="fa fa-cog"></i></th>
            </tr>
          </thead>
          <tbody>
            {% for item in funcionarios_status %}
              <tr>
                <td>{{ item.funcionario.nome_completo }}</td>
                <td>
                  {% if item.funcionario.usuariofuncionario %}
                    {{ item.funcionario.usuariofuncionario.usuario.username }}
                  {% else %}
                    N/A
                  {% endif %}
                </td>
                <td>{{ item.funcionario.email }}</td>
                <td>
                  {% for cargo in item.funcionario.cargo.all %}
                    <div>{{ cargo.nome }}</div>
                  {% empty %}
                    <div><em>Sem cargo</em></div>
                  {% endfor %}
                </td>
                <!-- <td>
                  Exibe o status de online ou offline
                  {% if item.online_status %}
                    <span class="badge bg-success">Online</span>
                  {% else %}
                    <span class="badge bg-secondary">Offline</span>
                  {% endif %}
                </td> -->
                <td class="text-center">
                  <!-- Botão para editar o funcionário -->
                  <a href="{% url 'edit_funcionario' item.funcionario.id %}" class="btn btn-default tooltip-custom">
                    <i class="fa-solid fa-pencil"></i>
                    <span class="tooltip-text">Editar Funcionário</span>
                  </a>
          
                  <!-- Botão para deletar o funcionário -->
                  <a href="#" class="btn btn-danger tooltip-custom delete-funcionario" data-bs-toggle="modal" data-bs-target="#deleteModal"
                     data-funcionario-id="{{ item.funcionario.id }}" data-funcionario-name="{{ item.funcionario.nome_completo }}">
                    <i class="fa fa-trash"></i>
                    <span class="tooltip-text">Deletar Funcionário</span>
                  </a>
          
                  <!-- Botão para ver detalhes -->
                  <a class="btn btn-success tooltip-custom show-details"
   data-bs-toggle="modal" data-bs-target="#exampleModal"
   data-nome="{{ item.funcionario.nome_completo }}"
   data-email="{{ item.funcionario.email }}"
   data-cpf="{{ item.funcionario.cpf }}"
   data-data_nascimento="{{ item.funcionario.data_nascimento }}"
   data-endereco="{{ item.funcionario.endereco }}"
   data-celular="{{ item.funcionario.celular }}"
   data-telefone="{{ item.funcionario.telefone }}"
   data-cargo="{% for c in item.funcionario.cargo.all %}{{ c.nome }}{% if not forloop.last %}||{% endif %}{% endfor %}"
   data-departamento="{{ item.funcionario.departamento }}">
   <i class="fa-solid fa-magnifying-glass"></i>
   <span class="tooltip-text">Ver Detalhes</span>
</a>
          
                  <!-- Botão para gerenciamento de usuário -->
                  {% if item.funcionario.usuariofuncionario %}
                    <!-- Botão tipo hambúrguer para opções de usuário -->
                    <a href="#" class="btn btn-primary tooltip-custom" data-bs-toggle="modal" data-bs-target="#userOptionsModal"
                       data-user-id="{{ item.funcionario.usuariofuncionario.usuario.id }}">
                      <i class="fa-solid fa-bars"></i>
                      <span class="tooltip-text">Opções de Usuário</span>
                    </a>
                  {% else %}
                    <!-- Botão para criar usuário -->
                    <a href="#" class="btn btn-success tooltip-custom" data-bs-toggle="modal" data-bs-target="#createUserModal"
                    data-funcionario-id="{{ item.funcionario.id }}">
                   <i class="fa-solid fa-user-plus"></i>
                   <span class="tooltip-text">Criar Usuário</span>
                 </a>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
          
        </table>        
      </div>
    </div>
  </div>
</div>

<!-- Modal para criação de usuário -->
<div class="modal fade" id="createUserModal" tabindex="-1" aria-labelledby="createUserModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="createUserModalLabel">Criar Usuário</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="createUserForm" method="post">
          {% csrf_token %}
          <div class="mb-3">
            <label for="id_username" class="form-label">Nome de usuário</label>
            <input type="text" name="username" class="form-control" id="id_username" required>
          </div>
          <div class="mb-3">
            <label for="id_password" class="form-label">Senha</label>
            <input type="password" name="password" class="form-control" id="id_password" required>
          </div>
          <div class="mb-3">
            <label for="id_password_confirm" class="form-label">Confirme a senha</label>
            <input type="password" name="password_confirm" class="form-control" id="id_password_confirm" required>
          </div>
          
          <!-- Checkbox para selecionar Admin -->
          <div class="form-check mb-3">
            <input type="checkbox" name="is_admin" class="form-check-input" id="id_is_admin">
            <label class="form-check-label" for="id_is_admin">Administrador (acesso total)</label>
          </div>
          
          <!-- Seleção múltipla de permissões de menu -->
          <div class="mb-3" id="menuPermissionsContainer">
            <label for="id_menu_permissions" class="form-label">Permissões de Menu</label>
            <select name="menu_permissions" id="id_menu_permissions" class="form-control" multiple>
              <option value="dashboard">Dashboard</option>
              <option value="calendario">Calendário</option>
              <option value="especies">Espécies</option>
              <option value="sementes">Sementes</option>
              <option value="repique">Repique</option>
              <option value="estufa">Estufa</option>
              <option value="aclimatacao">Aclimatação</option>
              <option value="protocolos">Protocolos</option>
              <option value="clientes">Clientes</option>
              <option value="fornecedores">Fornecedores</option>
              <option value="estoque">Estoque</option>
              <option value="relatorios">Relatórios</option>
              <option value="funcionarios">Funcionários</option>
            </select>
          </div>
          
          <div id="createUserError" class="text-danger"></div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary" id="submitCreateUser">Criar Usuário</button>
      </div>
    </div>
  </div>
</div>

<style>
  /* Ajuste de z-index para resolver o problema de sobreposição */
  .modal {
    z-index: 1070;
  }

  .select2-container--open {
    z-index: 1060 !important; /* Garante que o dropdown do Select2 esteja acima do modal */
  }

  .select2-dropdown {
    z-index: 1060 !important; /* Dá prioridade ao dropdown do Select2 */
  }
</style>
<script>
  $(document).ready(function () {
    // Inicializa Select2 no campo de permissões com dropdown no body
    $('#id_menu_permissions').select2({
      dropdownParent: $('#createUserModal'),
      closeOnSelect: false,
      placeholder: "Selecione as permissões"
    });

    // Alterna a visibilidade do seletor de permissões com base no checkbox de admin
    $('#id_is_admin').change(function () {
      if ($(this).is(':checked')) {
        $('#menuPermissionsContainer').hide();
        $('#id_menu_permissions').val(null).trigger('change');
      } else {
        $('#menuPermissionsContainer').show();
      }
    });

    // Variável global para armazenar o ID do funcionário
    let usuarioId;

    // Configuração de criação de usuário
    $('#createUserModal').on('show.bs.modal', function (event) {
      const button = $(event.relatedTarget);
      usuarioId = button.data('funcionario-id');
      console.log("Abrindo modal de criação de usuário para funcionario-id:", usuarioId);
      $('#createUserError').text('');
      $('#createUserForm')[0].reset();

      // Inicializa o estado do seletor de permissões
      if ($('#id_is_admin').is(':checked')) {
        $('#menuPermissionsContainer').hide();
      } else {
        $('#menuPermissionsContainer').show();
      }
    });

    // Evento de clique para criar usuário - unificado
    $('#submitCreateUser').on('click', function () {
      if (!usuarioId) {
        $('#createUserError').text('Erro: Funcionário não encontrado.');
        return;
      }

      const menuPermissions = $('#id_menu_permissions').val();
      const formData = $('#createUserForm').serializeArray();
      formData.push({ name: 'menu_permissions', value: menuPermissions });

      $.ajax({
        type: 'POST',
        url: `/funcionarios/${usuarioId}/create_user/`,  // URL correto
        data: $.param(formData),
        success: function (response) {
          if (response.success) {
            alert(response.message);
            $('#createUserModal').modal('hide');
            location.reload();
          } else {
            $('#createUserError').text(response.error);
          }
        },
        error: function () {
          $('#createUserError').text('Erro ao criar usuário. Tente novamente.');
        }
      });
    });

    // Função para ocultar/exibir o campo de permissões de menu com base no checkbox de admin
    function toggleMenuPermissions() {
      if ($('#id_is_admin').is(':checked')) {
        $('#menuPermissionsContainer').hide();
        $('#id_menu_permissions').val(null).trigger('change');
      } else {
        $('#menuPermissionsContainer').show();
      }
    }

    // Adiciona o evento para quando o checkbox for clicado
    $('#id_is_admin').change(toggleMenuPermissions);

    // Inicializa o estado ao carregar a página
    toggleMenuPermissions();
  });
</script>



<script>
  $('#submitCreateUser').on('click', function () {
  const menuPermissions = $('#id_menu_permissions').val(); // Captura as permissões selecionadas

  const formData = $('#createUserForm').serializeArray(); // Serializa os outros campos do formulário
  formData.push({ name: 'menu_permissions', value: menuPermissions }); // Adiciona as permissões ao formulário

  $.ajax({
    type: 'POST',
    url: `/funcionarios/${usuarioId}/create_user/`,  // Atualize com o URL correto para criar o usuário
    data: $.param(formData), // Envia os dados como uma string
    success: function (response) {
      if (response.success) {
        alert(response.message);
        $('#createUserModal').modal('hide');
        location.reload();
      } else {
        $('#createUserError').text(response.error);
      }
    },
    error: function () {
      $('#createUserError').text('Erro ao criar usuário. Tente novamente.');
    }
  });
});

</script>

<!-- 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>Email:</strong> <span id="modal-email"></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>Celular:</strong> <span id="modal-celular"></span></p>
              <p><strong>Telefone:</strong> <span id="modal-telefone"></span></p>
              <p><strong>Cargo(s):</strong>
                <div id="modal-cargo" class="mt-1"></div>
              </p>
              <p><strong>Departamento:</strong> <span id="modal-departamento"></span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- END -->

<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="deleteModalLabel">Tem certeza que deseja deletar?</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              <p>Deseja realmente excluir o funcionário <span id="deleteFuncionarioName"></span>? Esta ação não pode ser desfeita.</p>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" 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 () {
  let funcionarioId;
  
  // Configuração de exclusão de funcionário
  $(".delete-funcionario").on("click", function () {
    funcionarioId = $(this).data("funcionario-id");
    const funcionarioName = $(this).data("funcionario-name");
    if (funcionarioId) {
      console.log("Abrindo modal de exclusão para funcionario-id:", funcionarioId);
      $("#deleteFuncionarioName").text(funcionarioName);
      $("#deleteModal").modal("show");
    } else {
      console.error("Erro: ID do funcionário não encontrado.");
    }
  });

  // Confirmação e envio da exclusão do funcionário
  $("#confirmDelete").on("click", function () {
    if (funcionarioId) {
      console.log("Excluindo funcionário com funcionario-id:", funcionarioId);
      $.ajax({
        url: `/funcionarios/${funcionarioId}/delete/`, // URL de exclusão
        type: "POST",
        data: { 'csrfmiddlewaretoken': '{{ csrf_token }}' },
        success: function () {
          $("#deleteModal").modal("hide");
          location.reload();
        },
        error: function () {
          alert("Erro ao deletar funcionário. Tente novamente.");
        }
      });
    } else {
      console.error("Erro: ID do funcionário não definido.");
    }
  });
});

</script>

<script>
  $(document).ready(function () {
    // Fade out messages
    setTimeout(function () {
      $("#messages").fadeOut("fast");
    }, 5000);

    // Inicializa DataTable
    $(document).ready(function() {
    var dataTable = $('#example').DataTable({
      responsive: true,
      fixedHeader: true,
      columnDefs: [
        { type: 'date-br', targets: 1 }, // Configurando ordenação por data
        { type: 'diacritics-and-ligatures', targets: '_all' } // Aplicando busca sem diacríticos e ligaturas a todas as colunas
      ]
    });

    // Extensão para buscar com acentos
    $.fn.dataTable.ext.type.search.string = function(data) {
      var originalData = data;
      var normalizedData = !data ? '' : data
          .replace(/[áàãâä]/g, 'a')
          .replace(/[éèêë]/g, 'e')
          .replace(/[íìîï]/g, 'i')
          .replace(/[óòõôö]/g, 'o')
          .replace(/[úùûü]/g, 'u')
          .replace(/[ç]/g, 'c')
          .toLowerCase();
      return originalData + ' ' + normalizedData; // Concatenando as versões original e normalizada
    };
  });

    // Fecha o modal de opções de usuário ao abrir outro modal
    $('#editUsernameModal, #editPasswordModal, #deleteUserModal, #deleteFuncionarioModal, #createUserModal, #editPermissionsModal').on('show.bs.modal', function () {
      $('#userOptionsModal').modal('hide');
    });

    // Configura o ID do usuário ao abrir o modal de opções de usuário
    $('#userOptionsModal').on('show.bs.modal', function (event) {
      const userId = $(event.relatedTarget).data('user-id');
      if (userId) {
        console.log("Abrindo modal de opções de usuário para user-id:", userId);
        $(this).find('a[data-user-id]').attr('data-user-id', userId);
      } else {
        console.error("Erro: ID do usuário não definido.");
      }
    });

    // Define o ID do usuário no campo oculto ao abrir o modal de edição de nome de usuário
    $('#editUsernameModal').on('show.bs.modal', function (event) {
      const userId = $(event.relatedTarget).data('user-id');
      if (userId) {
        $('#usernameUserId').val(userId);
        console.log("ID do usuário para alteração de nome:", userId);
      } else {
        console.error("Erro: ID do usuário não definido ao abrir o modal de alteração de nome.");
      }
    });

    // Define o ID do usuário no campo oculto ao abrir o modal de alteração de senha
    $('#editPasswordModal').on('show.bs.modal', function (event) {
      const userId = $(event.relatedTarget).data('user-id');
      if (userId) {
        $('#passwordUserId').val(userId);
        console.log("ID do usuário para alteração de senha:", userId);
      } else {
        console.error("Erro: ID do usuário não definido ao abrir o modal de alteração de senha.");
      }
    });

    // Envio do formulário de alteração de nome de usuário via AJAX
    $('#editUsernameForm').on('submit', function (event) {
      event.preventDefault();
      const userId = $('#usernameUserId').val();
      if (!userId) {
        alert("Erro: ID do usuário não encontrado para alteração de nome.");
        return;
      }
      $.ajax({
        type: 'POST',
        url: "{% url 'update_username' %}",
        data: $(this).serialize(),
        success: function (response) {
          if (response.success) {
            alert(response.message);
            $('#editUsernameModal').modal('hide');
            location.reload();
          } else {
            alert(response.error);
          }
        },
        error: function () {
          alert('Ocorreu um erro. Tente novamente.');
        }
      });
    });

    // Envio do formulário de alteração de senha via AJAX
    $('#editPasswordForm').on('submit', function (event) {
      event.preventDefault();
      const userId = $('#passwordUserId').val();
      if (!userId) {
        alert("Erro: ID do usuário não encontrado para alteração de senha.");
        return;
      }
      $.ajax({
        type: 'POST',
        url: "{% url 'update_password' %}",
        data: $(this).serialize(),
        success: function (response) {
          if (response.success) {
            alert(response.message);
            $('#editPasswordModal').modal('hide');
            location.reload();
          } else {
            alert(response.error);
          }
        },
        error: function () {
          alert('Ocorreu um erro. Tente novamente.');
        }
      });
    });

    // Ação de exclusão de usuário com verificação do ID
    $(".delete-user").on("click", function () {
      const userId = $(this).data("user-id");
      const userName = $(this).data("username");
      if (userId) {
        console.log("Abrindo modal de exclusão para user-id:", userId);
        $("#deleteUserName").text(userName);
        $("#deleteUserModal").modal("show");
        $("#confirmDeleteUser").data("user-id", userId); // Armazena o ID no botão de confirmação
      } else {
        console.error("Erro: ID do usuário não encontrado para exclusão.");
        alert("Erro: ID do usuário não definido.");
      }
    });

    // Confirma a exclusão do usuário e envia via AJAX
    $("#confirmDeleteUser").on("click", function () {
      const userId = $(this).data("user-id");
      if (userId) {
        console.log("Excluindo usuário com user-id:", userId);
        $.ajax({
          url: `/funcionarios/delete_user/`,  // URL sem substituição direta
          type: "POST",
          data: { 
              'user_id': userId,
              'csrfmiddlewaretoken': '{{ csrf_token }}' 
          },
          success: function () {
            $("#deleteUserModal").modal("hide");
            location.reload();
          },
          error: function () {
            alert("Erro ao deletar usuário. Tente novamente.");
          }
        });
      } else {
        console.error("Erro: ID do usuário não definido para exclusão.");
        alert("Erro: ID do usuário não definido para exclusão.");
      }
    });

    // Configuração de criação de usuário
    $('#createUserModal').on('show.bs.modal', function (event) {
      const button = $(event.relatedTarget);
      usuarioId = button.data('funcionario-id');
      console.log("Abrindo modal de criação de usuário para funcionario-id:", usuarioId);
      $('#createUserError').text('');
      $('#createUserForm')[0].reset();
    });

    $('#submitCreateUser').on('click', function () {
  if (!usuarioId) {
    $('#createUserError').text('Erro: Funcionário não encontrado.');
    return;
  }
  console.log("Criando usuário para funcionario-id:", usuarioId);
  $.ajax({
    type: 'POST',
    url: `/funcionarios/${usuarioId}/create_user/`,  // URL correto
    data: $('#createUserForm').serialize(),
    success: function (response) {
      // ...
    },
    error: function () {
      $('#createUserError').text('Erro ao criar usuário. Tente novamente.');
    }
  });
});

    // Configuração de exclusão de funcionário
    let funcionarioId;
    $(".delete-funcionario").on("click", function () {
      funcionarioId = $(this).data("funcionario-id");
      const funcionarioName = $(this).data("funcionario-name");
      if (funcionarioId) {
        console.log("Abrindo modal de exclusão para funcionario-id:", funcionarioId);
        $("#deleteFuncionarioName").text(funcionarioName);
        $("#deleteFuncionarioModal").modal("show");
      } else {
        console.error("Erro: ID do funcionário não encontrado.");
      }
    });

    $("#confirmDeleteFuncionario").on("click", function () {
      if (funcionarioId) {
        console.log("Excluindo funcionário com funcionario-id:", funcionarioId);
        $.ajax({
          url: `/funcionarios/delete_funcionario/${funcionarioId}/`,
          type: "POST",
          data: { 'csrfmiddlewaretoken': '{{ csrf_token }}' },
          success: function () {
            $("#deleteFuncionarioModal").modal("hide");
            location.reload();
          },
          error: function () {
            alert("Erro ao deletar funcionário. Tente novamente.");
          }
        });
      } else {
        console.error("Erro: ID do funcionário não definido.");
      }
    });
  });
    // Exibe informações no modal de detalhes do funcionário
    $(".show-details").on("click", function () {
      $("#modal-nome").text($(this).data("nome"));
      $("#modal-email").text($(this).data("email"));
      $("#modal-cpf").text($(this).data("cpf"));
      $("#modal-data_nascimento").text($(this).data("data_nascimento"));
      $("#modal-endereco").text($(this).data("endereco"));
      $("#modal-celular").text($(this).data("celular"));
      $("#modal-telefone").text($(this).data("telefone"));
      const cargosRaw = $(this).data("cargo") || "";
const cargos = cargosRaw.split("||");

let html = "";
cargos.forEach(c => {
  html += `<div class="badge bg-success mb-1 me-1">${c.trim()}</div>`;
});
$("#modal-cargo").html(html);
$("#modal-cargo").html(html);
      $("#modal-departamento").text($(this).data("departamento"));
    });
  // Feather Icons
  feather.replace();
</script>

{% endblock %}