{% extends 'shared/base.html' %}
{% load static %}
{% block content %}
<style>
  .highlight-delete {
    background-color: #f8d7da !important;
  }
</style>
<style>
  .has-error {
    background-color: #f8d7da;
  }
</style>
<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="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">Editar Lista de Mudas do Protocolo</h5>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="content">
        <div class="canvas-wrapper">
            <div class="row g-3 mb-4">
                <form method="post" id="protocol-form">
                    {% csrf_token %}
                    {{ formset.management_form }}
                    <div class="col">
                        <div class="card full-card">
                            <h5 class="container-form-title fw-400">Editar</h5>
                            <div class="card-body">
                                <div class="row">
                                    <table id="protocol-table" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                                        <thead class="bg-success bg-gradient text-white">
                                            <tr>
                                                <th class="d-none">ID</th>
                                                <th>Nº Lote</th>
                                                <th>Espécie</th>
                                                <th>Categoria</th>
                                                <th>Quantidade de Mudas</th>
                                                <th>Selecionar Quantidade</th>
                                                <th>Valor Unitário</th>
                                                <th>Valor Total</th>
                                                <th>Excluir</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for form in formset %}
                                            <tr data-semeadura-id="{{ form.instance.id }}">
                                                <td class="d-none">{{ form.id }}</td>
                                                <td class="align-middle">
                                                    <label for="{{ form.semeadura.id_for_label }}" class="form-label d-none">Número de Muda</label>
                                                    {{ form.instance.semeadura.numero_muda }}
                                                </td>
                                                <td class="align-middle">
                                                    <label for="{{ form.categoria.id_for_label }}" class="form-label d-none">Categoria</label>
                                                    {{ form.instance.semeadura.lote.especie.nome_popular }} + {{ form.instance.semeadura.lote.especie.especies }}
                                                </td>
                                                <td class="align-middle">
                                                    <label for="{{ form.categoria.id_for_label }}" class="form-label d-none">Categoria</label>
                                                    {{ form.categoria }}
                                                </td>
                                                <td class="align-middle">
                                                  <label for="{{ form.categoria.id_for_label }}" class="form-label d-none">Categoria</label>
                                                  {{ form.diferenca_qtd }}
                                              </td>
                                                <td class="align-middle">
                                                    <div class="input-group {% if form.qtd_especie.errors %} has-error {% endif %}">
                                                        <label for="{{ form.qtd_especie.id_for_label }}" class="form-label d-none">Quantidade de Espécie</label>
                                                        {{ form.qtd_especie }}
                                                        <span class="input-group-text">Unidades</span>
                                                        {% for error in form.qtd_especie.errors %}
                                                            <div class="invalid-feedback d-block">{{ error }}</div>
                                                        {% endfor %}
                                                    </div>
                                                </td>
                                                <td class="align-middle">
                                                    <label for="{{ form.valor_unit.id_for_label }}" class="form-label d-none">Valor Unitário</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text">R$</span>
                                                        {{ form.valor_unit }}
                                                    </div>
                                                </td>
                                                <td class="align-middle">
                                                    <label for="{{ form.valor_total.id_for_label }}" class="form-label d-none">Valor Total</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text">R$</span>
                                                        <input type="text" name="{{ form.valor_total.name }}" id="{{ form.valor_total.id }}" value="{{ form.valor_total.value }}" class="form-control" readonly />
                                                    </div>
                                                </td>
                                                <td class="align-middle text-center">
                                                    <label for="{{ form.DELETE.id_for_label }}" class="form-label d-none">Excluir</label>
                                                    {{ form.DELETE }}
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                        <tfoot>
                                          <tr>
                                              <td colspan="4" class="text-end fw-bold">Total de Quantidades de Espécie</td>
                                              <td>
                                                  <div class="input-group">
                                                      <input type="text" id="total_qtd_especie" class="form-control" readonly />
                                                      <span class="input-group-text">Unidades</span>
                                                  </div>
                                              </td>
                                              <td class="text-end fw-bold">Total</td>
                                              <td>
                                                  <div class="input-group">
                                                      <span class="input-group-text">R$</span>
                                                      <input type="text" id="total_sum" class="form-control" readonly />
                                                  </div>
                                              </td>
                                              <td></td>
                                          </tr>
                                      </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end">
                      <button type="submit" class="btn btn-success mt-3 mx-3 w-25" id="submitProtocolButton">
                          <span id="submitProtocolButtonText">Salvar</span>
                          <div id="loadingSpinnerProtocol" class="spinner-border spinner-border-sm d-none" role="status">
                              <span class="visually-hidden">Enviando...</span>
                          </div>
                      </button>
                  </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
      const rows = document.querySelectorAll('tr[data-semeadura-id]');
      const totalSumInput = document.getElementById('total_sum');
      const totalQtdEspecieInput = document.getElementById('total_qtd_especie');
  
      function formatCurrency(value) {
          return value.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
      }
  
      function updateTotalSum() {
          let totalSum = 0;
          rows.forEach(row => {
              const deleteCheckbox = row.querySelector('input[name$="-DELETE"]');
              if (deleteCheckbox && deleteCheckbox.checked) {
                  // Ignora esta linha
                  return;
              }
              const valorTotalInput = row.querySelector('input[name$="-valor_total"]');
              const valorTotal = parseFloat(valorTotalInput.dataset.value) || 0;
              totalSum += valorTotal;
          });
          totalSumInput.value = formatCurrency(totalSum);
      }
  
      function updateTotalQtdEspecie() {
          let totalQtdEspecie = 0;
          rows.forEach(row => {
              const deleteCheckbox = row.querySelector('input[name$="-DELETE"]');
              if (deleteCheckbox && deleteCheckbox.checked) {
                  // Ignora esta linha
                  return;
              }
              const qtdInput = row.querySelector('input[name$="-qtd_especie"]');
              const qtd = parseInt(qtdInput.value) || 0; // garante que seja um inteiro
              totalQtdEspecie += qtd;
          });
          totalQtdEspecieInput.value = totalQtdEspecie;
      }
  
      rows.forEach(row => {
          const qtdInput = row.querySelector('input[name$="-qtd_especie"]');
          const valorUnitInput = row.querySelector('input[name$="-valor_unit"]');
          const valorTotalInput = row.querySelector('input[name$="-valor_total"]');
          const deleteCheckbox = row.querySelector('input[name$="-DELETE"]');
  
          function updateValorTotal() {
              const qtd = parseInt(qtdInput.value) || 0;
              const valorUnit = parseFloat(valorUnitInput.value) || 0;
              const valorTotal = qtd * valorUnit;
              valorTotalInput.dataset.value = valorTotal; // armazena o valor bruto
              valorTotalInput.value = formatCurrency(valorTotal); // define o valor formatado
              updateTotalSum();
              updateTotalQtdEspecie();
          }
  
          qtdInput.addEventListener('input', updateValorTotal);
          valorUnitInput.addEventListener('input', updateValorTotal);
  
          // Atualiza os totais quando a checkbox DELETE é alterada
          deleteCheckbox.addEventListener('change', function () {
              if (this.checked) {
                  row.classList.add('highlight-delete');
              } else {
                  row.classList.remove('highlight-delete');
              }
              updateTotalSum();
              updateTotalQtdEspecie();
          });
  
          // Inicializa os valores com os dados presentes
          updateValorTotal();
      });
  
      updateTotalSum(); // Cálculo inicial
      updateTotalQtdEspecie(); // Cálculo inicial
  });
  </script>
  
<script>
  document.getElementById('protocol-form').addEventListener('submit', function(event) {
      var submitButton = document.getElementById('submitProtocolButton');
      var submitButtonText = document.getElementById('submitProtocolButtonText');
      var loadingSpinner = document.getElementById('loadingSpinnerProtocol');

      // Desativar o botão de submit
      submitButton.disabled = true;

      // Substituir o texto pelo spinner
      submitButtonText.classList.add('d-none');
      loadingSpinner.classList.remove('d-none');
  });
</script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const rows = document.querySelectorAll('tr[data-semeadura-id]');
      const totalSumInput = document.getElementById('total_sum');
      const totalQtdEspecieInput = document.getElementById('total_qtd_especie');
    
      function formatCurrency(value) {
        return value.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
      }
    
      function updateTotalSum() {
        let totalSum = 0;
        rows.forEach(row => {
          const valorTotalInput = row.querySelector('input[name$="valor_total"]');
          const valorTotal = parseFloat(valorTotalInput.dataset.value) || 0;
          totalSum += valorTotal;
        });
        totalSumInput.value = formatCurrency(totalSum);
      }
    
      function updateTotalQtdEspecie() {
        let totalQtdEspecie = 0;
        rows.forEach(row => {
          const qtdInput = row.querySelector('input[name$="qtd_especie"]');
          const qtd = parseInt(qtdInput.value) || 0; // ensure it's an integer
          totalQtdEspecie += qtd;
        });
        totalQtdEspecieInput.value = totalQtdEspecie;
      }
    
      rows.forEach(row => {
        const qtdInput = row.querySelector('input[name$="qtd_especie"]');
        const valorUnitInput = row.querySelector('input[name$="valor_unit"]');
        const valorTotalInput = row.querySelector('input[name$="valor_total"]');
        const deleteCheckbox = row.querySelector('input[name$="DELETE"]');
    
        function updateValorTotal() {
          const qtd = parseInt(qtdInput.value) || 0; // ensure it's an integer
          const valorUnit = parseFloat(valorUnitInput.value) || 0;
          const valorTotal = qtd * valorUnit;
          valorTotalInput.dataset.value = valorTotal; // store the raw value
          valorTotalInput.value = formatCurrency(valorTotal); // set the formatted value
          updateTotalSum();
          updateTotalQtdEspecie();
        }
    
        qtdInput.addEventListener('input', updateValorTotal);
        valorUnitInput.addEventListener('input', updateValorTotal);
    
        // Adiciona/remova a classe highlight-delete quando a checkbox DELETE é alterada
        deleteCheckbox.addEventListener('change', function () {
          if (this.checked) {
            row.classList.add('highlight-delete');
          } else {
            row.classList.remove('highlight-delete');
          }
          updateTotalSum();
          updateTotalQtdEspecie();
        });
    
        // Inicializa os valores com os dados presentes
        updateValorTotal();
      });
    
      updateTotalSum(); // Initial calculation
      updateTotalQtdEspecie(); // Initial calculation
    });
    </script>
  <script>
    $(document).ready(function () {
      var table = $('#protocol-table').DataTable({
        responsive: true,
        "scrollX": $(window).width() < 768,
        "paging": false,
        "searching": false,
        "info": false,
        "language": {
          "emptyTable": "No data available in table"
        }
      });
    });
  </script>
</div>
{% endblock %}