{% extends 'shared/base.html' %} {% load custom_filters %} {% load static %} {% block content %}

<style>
  /* Estilos para a tabela */
  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }

  th,
  td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  th {
    background-color: #f2f2f2;
  }

  /* Estilos para os botões de remoção */
  .remove-button {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 2px;
    cursor: pointer;
  }

  .remove-button:hover {
    background-color: #d32f2f;
  }

  /* Estilos para os totais no rodapé da tabela */
  .totals-row {
    font-weight: bold;
  }

  /* Estilos para o botão de envio */
  #submit-button {
    display: none;
    background-color: #4caf50;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 10px 0;
    cursor: pointer;
  }

  #submit-button:hover {
    background-color: #45a049;
  }
</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">Ficha de Protocolo</h5>
        </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">
    <div class="content">
      <div class="canvas-wrapper">
        <div class="row g-3 mb-4">


          <style>
            .numero-botao {
              font-size: 1.5rem;
              /* ou qualquer tamanho que desejar */
              font-weight: bold;

            }

            .colorbg {
              background-color: #dfe0e4;
            }
          </style>

          <div class="row my-3">
            <div class="container-fluid p-2 align-items-center w-50">
              <div class="d-flex justify-content-around">
                <div class="text-center">

                  <a class="btn bg-success text-white btn-sm rounded-pill d-flex justify-content-center align-items-center"
                    style="width: 4rem; height: 4rem">
                    <span class="numero-botao">1</span>
                  </a>

                </div>

                <span
                  class="bg-success w-100 rounded d-flex justify-content-center align-items-center mx-auto my-auto me-2 ms-2"
                  style="height: 0.5rem">
                </span>

                <div class="text-center">

                  <a class="btn bg-success text-white btn-sm rounded-pill d-flex justify-content-center align-items-center"
                    style="width: 4rem; height: 4rem">
                    <span class="numero-botao">2</span>

                  </a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-xl">
            <form class="card full-card needs-validation" novalidate action="" method="POST"
              enctype="multipart/form-data">
              {% csrf_token %}
              <h5 class="container-form-title fw-400">PROTOCOLO DE SAÍDA E VENDA DE MUDAS</h5>
              <div class="card-body">
                <div class="row">

                  <button id="addRow" class="btn btn-success col-2 py-2 mx-3"
                    data-especie="{{ saida.especies }}">Adicionar
                    Item</button>

                  <table id="myTable" class="display table table-striped table-bordered dt-responsive nowrap">
                    <thead class="bg-success bg-gradient text-white">
                      <tr>
                        <th>N°</th>
                        <th>Nome Vulgar</th>
                        <th>Nome Científico</th>
                        <th>N° Lote</th>
                        <th>Categoria</th>
                        <th>Quant. p/ Espécie</th>
                        <th>Valor Uni.</th>
                        <th>Total</th>
                        <th>Remover</th>
                      </tr>
                    </thead>
                    <tfoot class="bg-light bg-gradient text-dark">
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th>Quantidade: <span id="totalQuantidade"></span></th>
                      <th></th>
                      <th>R$ <span id="somaTotal"></span></th>
                      <th></th>
                    </tfoot>
                  </table>
                </div>
              </div>
              <div class="col-sm-4 offset-lg-8 pb-3 pe-3">
                <button id="salvarDados" class="w-100 btn btn-sm btn-success btn-lg" type="submit">
                  <i data-feather="check-circle" class="data-feather mr-1"></i>
                  Enviar dados
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Renderiza as opções do select no template -->
<select id="especiesOptions" style="display: none;">
  {% for saida in saidas %}
  <option value="{{ saida.nome_popular }}" data-especies="{{ saida.especies }}"
    data-numero-muda="{{ saida.numero_muda }}" data-total-mudas="{{ saida.total_mudas }}"
    data-nome-vulgar="{{ saida.nome_popular }}" data-mudas-selecionadas="{{ saida.diferenca_qtd }}"
    data-semeadura-id="{{ saida.semeadura_id }}" data-categoria="{{ saida.categoria }}">
    {{ saida.nome_popular }}
  </option>
  {% endfor %}
</select>

<!-- Script para adicionar e remover linhas na DataTable -->
<script>
$(document).ready(function () {
    var table = $('#myTable').DataTable({
        responsive: true,
        "scrollX": $(window).width() < 768,
        "ordering": false,
        "paging": false,
        "searching": false,
        "info": false,
        "language": {
            "emptyTable": "No data available in table"
        }
    });

    // Função para adicionar uma nova linha à tabela
    // Função para adicionar uma nova linha à tabela
    function addRow() {
      // Obter o número da próxima linha
      var nextNumber = table.rows().count() + 1;

      // Adicionar nova linha com campos de entrada para "Valor Uni." e "Total"
      var newRow = [
        nextNumber,
        
        '<select class="nome-vulgar form-control" id="select2">' + getEspeciesOptions() + '</select>',
        '<span class="nome-cientifico"></span>', // Elemento para exibir o Nome Vulgar
        '<span class="numero-lote"></span>', // Elemento para exibir o Número do Lote
        '<select class="categoria form-control" id="select2">' + getCategoria() + '</select>',
        '<input type="number" class="quantidade form-control" value="0" min="0">', // Alterado para type="number" e adicionado min="0"
        '<input type="text" class="valor-uni form-control" value="0">', // Campo de entrada para "Valor Uni."
        '<input type="text" class="total form-control" value="0">',    // Campo de entrada para "Total"
        '<button class="btn btn-danger remove-row">Remover</button><input type="hidden" class="semeadura-id form-control">',
        
        
      ];

      // Adicionar a nova linha à tabela
      var addedRow = table.row.add(newRow).draw().node();
      $(addedRow).find('.nome-vulgar').change(function() {
            var selectedOption = $(this).find(':selected');
            var mudasSelecionadas = selectedOption.data('mudas-selecionadas');
            $(addedRow).find('.quantidade').attr('max', mudasSelecionadas);
        });

      // Adiciona eventos de entrada nos campos de quantidade da nova linha
      $(addedRow).find('.quantidade, .valor-uni').on('input', function () {
        updateTotal(addedRow); // Atualiza o total ao digitar
      });
    }

    // Função para obter as opções do select de Nome Científico
    function getEspeciesOptions() {
      var options = '<option value="" disabled selected>Selecione uma espécie...</option>'; // Opção padrão
      $('#especiesOptions option').each(function () {
        var scientificName = $(this).val();
        var vulgarName = $(this).data('nome-vulgar');
        var lotNumber = $(this).data('mudas-selecionadas');
        options += '<option value="' + scientificName + '" data-lote="' + lotNumber + '">' + vulgarName + ' - Mudas ' + lotNumber + '</option>';
      });
      return options;
    }

    // Adiciona evento de clique ao botão de adicionar linha
    $('#addRow').on('click', function (e) {
      e.preventDefault();
      addRow();
    });

    // Adicionar evento de remover para todas as linhas, incluindo as novas
    $('#myTable tbody').on('click', '.remove-row', function () {
      // Remover a linha específica
      var tr = $(this).closest('tr');
      var removedRow = tr.clone(); // Clona a linha antes da remoção para referência
      table.row(tr).remove().draw(false); // O segundo parâmetro indica para não redesenhar a tabela

      // Atualizar os números das linhas restantes
      updateRowNumber(removedRow);
      updateTotalQuantidade(); // Atualiza a soma ao remover uma linha
    });

    // Adiciona evento de mudança ao select de Nome Científico
    $('#myTable tbody').on('change', '.nome-vulgar', function () {
      // Obter o valor selecionado do nome científico
      var selectedScientificName = $(this).val();

      // Encontrar o elemento da linha atual para atualizar o Nome Vulgar, Número do Lote e Quantidade
      var tr = $(this).closest('tr');
      tr.find('.nome-cientifico').text(getNomeCientifico(selectedScientificName));
      tr.find('.numero-lote').text(getNumeroLote(selectedScientificName));
      tr.find('.semeadura-id').text(getSemeaduraId(selectedScientificName));


      // Obter o campo "Quantidade" e definir o valor correspondente à espécie selecionada
      var quantidadeField = tr.find('.quantidade');
      quantidadeField.val(getQuantidadeForEspecie(selectedScientificName));
      updateTotalQuantidade(); // Atualiza a soma ao mudar a espécie
    });

    // Adiciona evento de entrada nos campos de quantidade
    $('#myTable tbody').on('input', '.quantidade', function () {
      updateTotalQuantidade(); // Atualiza a soma ao digitar
    });

    // Função para obter o Nome Vulgar com base no Nome Científico selecionado
    function getNomeCientifico(scientificName) {
      var selectedOption = $('#especiesOptions option[value="' + scientificName + '"]');
      return selectedOption.data('especies') || "";
    }

    // Função para obter o Nome Vulgar com base no Nome Científico selecionado
    function getMudaSelecionadas(scientificName) {
      var selectedOption = $('#especiesOptions option[value="' + scientificName + '"]');
      return selectedOption.data('mudas-selecionadas') || "";
    }

    // Função para obter o Nome Vulgar com base no Nome Científico selecionado
    function getNomeVulgar(scientificName) {
      var selectedOption = $('#especiesOptions option[value="' + scientificName + '"]');
      return selectedOption.data('nome-vulgar') || "";
    }

    // Função para obter o Número do Lote com base no Nome Científico selecionado
    function getNumeroLote(scientificName) {
      var selectedOption = $('#especiesOptions option[value="' + scientificName + '"]');
      return selectedOption.data('numero-muda') || "";
    }

    function getSemeaduraId(scientificName) {
      var selectedOption = $('#especiesOptions option[value="' + scientificName + '"]');
      return selectedOption.data('semeadura-id') || "";
    }

    // Função para obter a quantidade com base na espécie selecionada
    function getQuantidadeForEspecie(scientificName) {
      var selectedOption = $('#especiesOptions option[value="' + scientificName + '"]');
      return selectedOption.data('total-mudas') || "";
    }

        // Função para obter a quantidade com base na espécie selecionada
        function getCategoria() {
  // Definindo as opções de categoria
  var categoriaOptions = [
    { value: 'Identificada', text: 'Identificada' },
    { value: 'Selecionada', text: 'Selecionada' },
    { value: 'Qualificada', text: 'Qualificada' },
    { value: 'Testada', text: 'Testada' }
  ];

  // Iniciando a string de opções com uma opção desabilitada por padrão
  var options = '<option value="" disabled selected>Selecione a categoria...</option>';

  // Iterando sobre as opções de categoria para construir a string de opções
  categoriaOptions.forEach(function(categoria) {
    options += '<option value="' + categoria.value + '">' + categoria.text + '</option>';
  });

  return options;
}


    // Função para atualizar o número da linha após a remoção
    function updateRowNumber(removedRow) {
      var removedNumber = removedRow.find('td:first').text(); // Obtém o número da linha removida

      table.rows().every(function (rowIdx) {
        var currentNumberCell = this.cell(rowIdx, 0);
        var currentNumber = parseInt(currentNumberCell.data());

        if (currentNumber > removedNumber) {
          // Atualiza o número da linha apenas se for maior do que a linha removida
          currentNumberCell.data(currentNumber - 1); // Atualiza apenas a célula do número
        }
      });

      table.draw(false); // Redesenha a tabela sem modificar outros dados
    }

    // Função para atualizar o total de quantidades
    function updateTotalQuantidade() {
      var totalQuantidade = 0;

      // Itera sobre as linhas da tabela
      $('#myTable tbody tr').each(function () {
        var quantidade = parseFloat($(this).find('.quantidade').val().replace(',', '.')) || 0;

        // Soma a quantidade ao total geral
        totalQuantidade += quantidade;
      });

      // Formata o resultado para o padrão brasileiro
      var formattedTotal = totalQuantidade.toLocaleString('pt-BR', { minimumFractionDigits: 0, maximumFractionDigits: 3 });

      // Atualiza o total exibido no elemento HTML
      $('#totalQuantidade').text(formattedTotal);
    }

    // Função para calcular o total e exibi-lo na tela
    function updateTotal(row) {
      var quantidadeField = $(row).find('.quantidade');
      var valorUniField = $(row).find('.valor-uni');
      var totalField = $(row).find('.total');

      // Obter valores
      var quantidade = parseFloat(quantidadeField.val()) || 0;
      var valorUni = parseFloat(valorUniField.val()) || 0;

      // Calcular o total
      var total = quantidade * valorUni;

      // Formatar o total para exibição
      var formattedTotal = total.toLocaleString('pt-BR', { minimumFractionDigits: 0, maximumFractionDigits: 2 });

      // Atualizar o campo "Total"
      totalField.val(formattedTotal);
    }

    // Função para atualizar a soma total
    function updateSomaTotal() {
      var somaTotal = 0;

      // Itera sobre as linhas presentes na tabela
      $('#myTable tbody tr').each(function () {
        var total = parseFloat($(this).find('.total').val().replace(',', '.')) || 0;

        // Soma o total ao valor geral
        somaTotal += total;
      });

      // Formata o resultado para o padrão brasileiro
      var formattedSomaTotal = somaTotal.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

      // Atualiza o total exibido no elemento HTML
      $('#somaTotal').text(formattedSomaTotal);
    }

    // Função para calcular o total e exibi-lo na tela
    function updateTotal(row) {
      var quantidadeField = $(row).find('.quantidade');
      var valorUniField = $(row).find('.valor-uni');
      var totalField = $(row).find('.total');

      // Obter valores
      var quantidade = parseFloat(quantidadeField.val().replace(',', '.')) || 0;
      var valorUni = parseFloat(valorUniField.val().replace(',', '.')) || 0;

      // Calcular o total
      var total = quantidade * valorUni;

      // Atualizar o campo "Total"
      totalField.val(total.toFixed(2)); // Fixar em duas casas decimais

      // Chamar a função para atualizar a soma total
      updateSomaTotal();
    }


    // Adiciona evento de remover para todas as linhas, incluindo as novas
    $('#myTable tbody').on('click', '.remove-row', function () {
      // Remover a linha específica
      var tr = $(this).closest('tr');
      var removedRow = tr.clone(); // Clona a linha antes da remoção para referência
      table.row(tr).remove().draw(false); // O segundo parâmetro indica para não redesenhar a tabela

      // Atualizar os números das linhas restantes
      updateRowNumber(removedRow);

      // Chamar a função para atualizar a soma total após a remoção
      updateSomaTotal();
    });

  });
</script>



<input type="hidden" id="protocolo_id" value="{{ protocolo_id }}">

<script>
  $(document).ready(function() {
    $('#salvarDados').on('click', function(e) {
      e.preventDefault(); // Previne o comportamento padrão do botão de enviar

      var dados = [];
      var protocoloId = $('#protocolo_id').val(); // Obtenha o protocolo_id do input hidden

      $('#myTable tbody tr').each(function() {
    var rowData = {
        numero_lote: $(this).find('.numero-lote').text(),
        semeadura_id: $(this).find('.semeadura-id').text(),
        nome_popular: $(this).find('.nome-vulgar').val(),
        nome_cientifico: $(this).find('.nome-cientifico').text(),
        categoria: $(this).find('.categoria').val(),  // Captura o valor da categoria
        qtd_especie: $(this).find('.quantidade').val(),
        valor_uni: $(this).find('.valor-uni').val(),
        valor_total: $(this).find('.total').val(),
    };
    dados.push(rowData);
});



      var csrfToken = $('[name=csrfmiddlewaretoken]').val();
      $.ajax({
        type: 'POST',
        url: '/salvar_tabela/' + protocoloId + '/', // Inclua o protocolo_id na URL
        headers: { 'X-CSRFToken': csrfToken },
        data: { dados: JSON.stringify(dados) },
        dataType: 'json',
        success: function(response) {
          // Utiliza o URL de redirecionamento fornecido pela resposta do servidor, se disponível
          if (response.redirect_url) {
            window.location.href = response.redirect_url;
          } else {
            // Opcional: trate o caso em que não há URL de redirecionamento (pode exibir uma mensagem, por exemplo)
            console.log('Redirecionamento não fornecido. Verifique a resposta do servidor.');
          }
        },
        error: function(xhr, status, error) {
          console.error("Erro ao salvar: ", xhr.responseText);
          // Opcional: você pode exibir uma mensagem de erro ao usuário aqui
        }
      });
    });
  });
</script>

{% endblock %}