{% extends 'shared/base.html' %} {% load custom_filters %} {% load static %} {% block content %}
<script>
  setTimeout(function () {
    $("#messages").fadeOut("fast");
  }, 5000);

  function voltar() {
    window.history.back();
  }
</script>
<style>
  .linha-entrada-zero {
    background-color: #ffcccc;
    /* Cor de fundo vermelho claro (pode ajustar conforme necessário) */
  }
</style>
<script>
  $(document).ready(function () {
    $('#example').DataTable({
    });
  });
</script>

<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|safe }}
  </div>
  {% endfor %}
</div>


<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">Metas</h5>
        </div>
        <div class="col-auto">
          <button class="btn btn-light me-1 mb-1" type="button" data-bs-toggle="modal"
            data-bs-target="#createMetaModal">Criar Nova Meta</button>
        </div>
      </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 class="card py-3">
    <div class="content-fluid table-responsive">
      <div class="container">
        <div class="row">
        </div>
      </div>
      <table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
        <thead class="bg-success bg-gradient text-white">
          <tr>
            <td class="align-middle">Espécie</th>
            <td class="align-middle">Tipo</th>
            <td class="align-middle">Data Inicial</th>
            <td class="align-middle">Data Final</th>
            <td class="align-middle">Meta (Qtde)</th>
            <td class="align-middle">Quantidade Feita</th>
            <td class="align-middle">Status</th>
            <td class="align-middle">% Cumprido</th>
            <th class="text-center tamanho"><i class="fa fa-cog"></i></th>
          </tr>
        </thead>
        <tbody>
          {% for meta in metas_info %}
          <tr>
            <td>{{ meta.especie }}</td>
            <td>{{ meta.tipo_meta }}</td>
            <td>{{ meta.data_inicial|date:"d/m/Y" }}</td>
            <td>{{ meta.data_final|date:"d/m/Y" }}</td>
            <td>{{ meta.quantidade_meta|floatformat:0 }}</td>
            <td>
              {% if meta.tipo_meta == "semeadura" %}
              {{ meta.quantidade_feita|floatformat:3 }}
              {% else %}
              {{ meta.quantidade_feita|floatformat:0 }}
              {% endif %}
            </td>
            <td>
              {% if meta.status == "em_andamento" %}
              <span class="badge bg-primary">Em andamento</span>
              {% elif meta.status == "finalizada_completa" %}
              <span class="badge bg-success">Finalizada completa</span>
              {% elif meta.status == "finalizada_incompleta" %}
              <span class="badge bg-danger">Finalizada incompleta</span>
              {% else %}
              <span class="badge bg-secondary">{{ meta.status|capfirst }}</span>
              {% endif %}
            </td>

            <td>{{ meta.percentual }}%</td>
            <td>
              <button class="btn btn-default" type="button" data-bs-toggle="modal" data-bs-target="#editMetaModal"
                data-url="{% url 'metas_edit' meta.obj.pk %}" title="Editar">
                <i class="fa fa-pencil"></i>
              </button>

              <button class="btn btn-danger btn-sm" type="button" data-bs-toggle="modal"
                data-bs-target="#deleteMetaModal" data-url="{% url 'metas_delete' meta.obj.pk %}" title="Excluir">
                <i class="fa-solid fa-trash"></i>
              </button>

              <button class="btn btn-success btn-sm" type="button" data-bs-toggle="modal"
                data-bs-target="#finalizeMetaModal" data-url="{% url 'metas_finalize' meta.obj.pk %}" title="Finalizar">
                <i class="fa-solid fa-check"></i>
              </button>

            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="modal fade" id="createMetaModal" tabindex="-1" aria-labelledby="createMetaModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- O conteúdo será carregado dinamicamente -->
      </div>
    </div>
  </div>

  <div class="modal fade" id="deleteMetaModal" tabindex="-1" aria-labelledby="deleteMetaModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="deleteMetaModalLabel">Confirmar Exclusão</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>Tem certeza de que deseja excluir esta meta? 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="confirmDeleteButton">Excluir</button>
        </div>
      </div>
    </div>
  </div>


  <!-- Modal de Edição -->
  <div class="modal fade" id="editMetaModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Conteúdo será carregado dinamicamente -->
      </div>
    </div>
  </div>

  <div class="modal fade" id="finalizeMetaModal" tabindex="-1" aria-labelledby="finalizeMetaModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="finalizeMetaModalLabel">Confirmar Finalização</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>Tem certeza de que deseja finalizar esta meta? Após finalizada, ela não poderá ser editada.</p>
        </div>
        <div class="modal-footer">
          <form method="post" id="finalizeMetaForm">
            {% csrf_token %}
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
            <button type="submit" class="btn btn-success">Finalizar</button>
          </form>
        </div>
      </div>
    </div>
  </div>


  <script>
    $(document).on("click", "button[data-bs-target='#editMetaModal']", function () {
      var url = $(this).data("url");

      $.ajax({
        url: url,
        success: function (data) {
          $("#editMetaModal .modal-content").html(data.html_form);
        }
      });
    });

    // Submeter o formulário via AJAX
    $("#editMetaModal").on("submit", "form", function (event) {
      event.preventDefault();
      var form = $(this);

      $.ajax({
        url: form.attr("action"),
        type: form.attr("method"),
        data: form.serialize(),
        success: function (data) {
          if (data.success) {
            location.reload();  // Recarregar a página
          } else {
            $("#editMetaModal .modal-content").html(data.html_form);
          }
        }
      });
    });
  </script>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      let deleteUrl = "";

      // Captura a URL ao abrir o modal
      document.querySelectorAll("button[data-bs-target='#deleteMetaModal']").forEach(button => {
        button.addEventListener("click", function () {
          deleteUrl = this.getAttribute("data-url");
        });
      });

      // Lida com a exclusão ao clicar em "Excluir"
      document.getElementById("confirmDeleteButton").addEventListener("click", function () {
        if (deleteUrl) {
          fetch(deleteUrl, {
            method: "POST",
            headers: {
              "X-CSRFToken": "{{ csrf_token }}",
            },
          })
            .then(response => response.json())
            .then(data => {
              if (data.success) {
                location.reload(); // Recarrega a página após exclusão bem-sucedida
              } else {
                alert("Erro ao excluir a meta.");
              }
            })
            .catch(error => {
              console.error("Erro:", error);
              alert("Erro ao excluir a meta.");
            });
        }
      });
    });
  </script>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      let finalizeUrl = "";

      // Captura a URL ao abrir o modal
      document.querySelectorAll("button[data-bs-target='#finalizeMetaModal']").forEach(button => {
        button.addEventListener("click", function () {
          finalizeUrl = this.getAttribute("data-url");
          const form = document.getElementById("finalizeMetaForm");
          form.setAttribute("action", finalizeUrl);
        });
      });
    });
  </script>

  <script>
    $(document).ready(function () {
      // Abrir modal de criação e carregar o formulário
      $('#createMetaModal').on('show.bs.modal', function () {
        $.ajax({
          url: "{% url 'metas_create' %}",
          success: function (data) {
            $('#createMetaModal .modal-content').html(data.html_form);
          }
        });
      });

      // Submeter o formulário de criação via AJAX
      $('#createMetaModal').on('submit', '#createMetaForm', function (e) {
        e.preventDefault();
        const form = $(this);

        $.ajax({
          url: "{% url 'metas_create' %}",
          type: "POST",
          data: form.serialize(),
          success: function (data) {
            if (data.success) {
              location.reload(); // Recarrega a página ao salvar
            } else {
              $('#createMetaModal .modal-content').html(data.html_form);
              alert("Erro ao criar a meta.");
            }
          }
        });
      });
    });
  </script>
  {% endblock %}