{% extends 'shared/base.html' %} {% load static %} {% block content %}
<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 Produção de mudas</h5>
        </div>
        <div class="col-auto">
         
            <button class="btn btn-light me-1 mb-1" type="button" onclick="voltar()">Voltar <span class="fas fa-arrow-left me-1"
                data-fa-transform="shrink-3"></span></button>
          
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="content">
      <div class="canvas-wrapper">
        <div class="row g-3 mb-4">
          <div class="col-xl">
            <form class="card full-card needs-validation" novalidate action="{% url 'editar_prod_mudas' especie.id %}"
              method="POST" enctype="multipart/form-data">
              {% csrf_token %}
              <h5 class="container-form-title fw-400">Bioma</h5>
              <div class="card-body">
                <div class="row pb-3">
                  <div class="col-sm-4">
                    <button type="button" class="btn btn-success" id="adicionar-periodo">Adicionar novo Período</button>
                  </div>
                </div>

                <div class="row g-3" id="periodos-coleta-container">
                  {% for form in periodo_coleta_forms %}
                  <div class="periodo-coleta">
                    <div class="row g-3">
                      <div class="col-sm-3">
                        <label class="visually-hidden" for="autoSizingSelect1">Bioma</label>
                        {{ form.bioma_nome }}
                      </div>
                      <div class="col-sm-3">
                        <label class="visually-hidden" for="autoSizingSelect2">Mês de início</label>
                        {{ form.mes_inicio }}
                      </div>
                      <div class="col-sm-3">
                        <label class="visually-hidden" for="autoSizingSelect3">Mês de fim</label>
                        {{ form.mes_fim }}
                      </div>
                      <div class="col-sm-3">
                        <button type="button" class="btn btn-danger remover-periodo"
                          data-periodo-id="{{ form.instance.id }}">Excluir</button>
                      </div>
                    </div>
                  </div>
                  {% endfor %}
                </div>
              </div>
              <h5 class="container-form-title fw-400">Porcentagem de germinação</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-3">
                    <div class="form-group">
                      <label for="minimo" class="form-label">Valor Mínimo <span class="text-danger">*</span></label>
                      <div class="input-group">
                        {{ porcentagem_coleta_form.valor_minimo }}
                        <div class="input-group-text">%</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-3">
                    <div class="form-group">
                      <label for="porcentagemcoleta" class="form-label">Valor Máximo <span class="text-danger">*</span></label>
                      <div class="input-group">
                        {{ porcentagem_coleta_form.valor_maximo}}
                        <div class="input-group-text">%</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-3">
                    <div class="form-group">
                      <label for="porcentagemcoleta" class="form-label">Referência</label>
                      {{ porcentagem_coleta_form.descricao }}
                    </div>
                  </div>
                </div>
                <div class="row g-3">
                  <div id="periodos-coleta-container">
                    <!-- Aqui serão adicionados os campos de seleção adicionais -->
                  </div>
                </div>
              </div>

              <h5 class="container-form-title fw-400">Produção de Mudas</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="numerodesementes" class="form-label">Número de sementes/kg <span class="text-danger">*</span></label>
                      <div class="input-group">
                        {{ formulario.numero_sementes_por_kg }}
                        <div class="input-group-text">Kg</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="sombreamento" class="form-label">Nível de sombreamento no viveiro</label>
                      <div class="input-group">
                        {{ formulario.nivel_sombreamento_muda_viveiro }}
                        <div class="input-group-text">%</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="" class="form-label">Semeadura</label>
                      {{ formulario.semeadura }}
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="" class="form-label">Armazenamento</label>
                      {{ formulario.armazenamento }}
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="" class="form-label">Desenvolvimento da muda no viveiro</label>
                      {{ formulario.desenvolvimento_muda_viveiro }}
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="" class="form-label">Beneficiamento de sementes</label>
                      {{ formulario.desenvolvimento_muda_viveiro }}
                    </div>
                  </div>
                  <div class="col-lg-12">
                    <div class="form-group">
                      <label for="" class="form-label">Substrato da muda</label>
                      {{ formulario.substrato_muda }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-3 pb-3 ps-3 pe-3 offset-lg-9">
                <button 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>
              <input type="hidden" name="periodo_coleta_existente_para_excluir"
                id="periodo_coleta_existente_para_excluir" value="">
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="{% static 'assets/js/producaoMudasForms.js' %}"></script> 

<script>
  $(document).ready(function () {

    let periodoColetaContainer = $("#periodos-coleta-container");
    let adicionarPeriodoButton = $("#adicionar-periodo");
    let removerPeriodoButton = $(".remover-periodo");
    let periodoExistenteParaExcluirInput = $("#periodo_coleta_existente_para_excluir");

    adicionarPeriodoButton.click(function () {
      let novoCampo = `
        <div class="periodo-coleta">
          <div class="row g-3 mb-3">
            <div class="col-sm-3">
              <label class="visually-hidden" for="autoSizingSelect1">Bioma</label>
              {{ periodo_coleta_form_novo.bioma_nome }}
            </div>
            <div class="col-sm-3">
              <label class="visually-hidden" for="autoSizingSelect2">Mês de início</label>
              {{ periodo_coleta_form_novo.mes_inicio }}
            </div>
            <div class="col-sm-3">
              <label class="visually-hidden" for="autoSizingSelect3">Mês de fim</label>
              {{ periodo_coleta_form_novo.mes_fim }}
            </div>
            <div class="col-sm-3">
              <button type="button" class="btn btn-danger remover-periodo">Excluir</button>
            </div>
          </div>
        </div>
      `;

      periodoColetaContainer.append(novoCampo);
    });

    periodoColetaContainer.on("click", ".remover-periodo", function () {
      let periodoRemovidoId = $(this).data("periodo-id");

      // Atualize o valor do campo remover_periodo_id
      let idsRemovidos = periodoExistenteParaExcluirInput.val().split(",");
      idsRemovidos.push(periodoRemovidoId);
      periodoExistenteParaExcluirInput.val(idsRemovidos.join(","));

      // Remova o elemento do DOM
      $(this).closest(".periodo-coleta").remove();
    });



    // Adiciona um manipulador de evento para o botão de envio do formulário
    $("#enviar-formulario").click(function () {
      // Limpa os campos removidos antes de enviar o formulário
      $(".periodo-coleta-removido").remove();
      // Envie o formulário
      $("form").submit();
    });

    // Adiciona um manipulador de evento para o botão de excluir período
    periodoColetaContainer.on("click", ".remover-periodo", function () {
      let periodoRemovidoId = $(this).data("periodo-id");

      // Guarde uma referência ao elemento atual para uso dentro da chamada AJAX
      let $elementoRemovido = $(this);

      // Faça uma chamada AJAX para excluir o período de coleta
      $.ajax({
        url: `/excluir_periodo_coleta/${periodoRemovidoId}/`,
        type: 'POST',
        headers: { "X-CSRFToken": $("[name=csrfmiddlewaretoken]").val() }, // Adicione o token CSRF ao cabeçalho
        success: function (data) {
          console.log('Resposta da requisição AJAX:', data);

          if (data.success) {
            // Remove o elemento do DOM apenas se a exclusão no servidor for bem-sucedida
            $elementoRemovido.closest(".periodo-coleta").remove();
          } else {
            console.error('Erro durante a exclusão:', data.error);
          }
        },
        error: function (xhr, status, error) {
          console.error('Erro na requisição AJAX:', status, error);
        }
      });
    });
  });
  function voltar() {
    window.history.back();
}
</script>

{% endblock %}