{% 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">Cadastro de 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 'cadastro_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">
                  <div class="col-sm-3">
                    <div class="form-group">
                      <label for="autoSizingSelect1" class="form-label">Bioma</label>
                      {{ periodo_coleta_form.bioma_nome }}
                      <div class="invalid-feedback">
                        Informação errada
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-3">
                    <div class="form-group">
                      <label for="autoSizingSelect2" class="form-label">Mês de início</label>
                      {{ periodo_coleta_form.mes_inicio }}
                      <div class="invalid-feedback">
                        Informação errada
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-3">
                    <div class="form-group">
                      <label for="autoSizingSelect3" class="form-label">Mês de fim</label>
                      {{ periodo_coleta_form.mes_fim }}
                      <div class="invalid-feedback">
                        Informação errada
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-3 d-flex align-items-center text-center mt-3">
                    <button type="button" class="btn btn-success" id="adicionar-periodo">
                      Adicionar Período
                    </button>
                  </div>
                </div>
                <div class="row">
                  <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">Porcentagem de germinação</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-lg-3">
                    <div class="form-group">
                      <label for="" 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 class="invalid-feedback">
                          Informação errada
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-3">
                    <div class="form-group">
                      <label for="" 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 class="invalid-feedback">
                          Informação errada
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-3">
                    <div class="form-group">
                      <label for="" class="form-label">Referência</label>
                      {{ porcentagem_coleta_form.descricao }}
                    </div>
                  </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 class="invalid-feedback">
                          Informação errada
                        </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>
          </div>
          </form>
        </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");

    adicionarPeriodoButton.click(function () {
      let novoCampo = `
        <div class="periodo-coleta">
            <div class="row mt-2">
                <div class="col-sm-3">
                    <label class="visually-hidden" for="autoSizingSelect1">Bioma</label>
                    {{ periodo_coleta_form.bioma_nome }}
                </div>

                <div class="col-sm-3">
                    <label class="visually-hidden" for="autoSizingSelect2">Mês de início</label>
                    {{ periodo_coleta_form.mes_inicio }}
                </div>

                <div class="col-sm-3">
                    <label class="visually-hidden" for "autoSizingSelect3">Mês de fim</label>
                    {{ periodo_coleta_form.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);
    });

    // Função para remover um período de coleta quando o botão "Excluir" for clicado
    periodoColetaContainer.on("click", ".remover-periodo", function () {
      $(this).closest(".periodo-coleta").remove();
    });
  });
  function voltar() {
    window.history.back();
}
</script>
{% endblock %}