{% extends 'shared/base.html' %} {% load custom_filters %} {% 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">Aclimatação (Transferência P/ Pleno Sol)</h5>
        </div>
        <div class="col-auto">
          <a href="{% url 'lista_aclimatacao_completa' %}">
            <button class="btn btn-light me-1 mb-1" type="button">Lista Completa </button>
          </a>
          <button class="btn btn-danger me-1 mb-1" type="button">Gerar PDF <span class="fas fa-plus me-1"
              data-fa-transform="shrink-3"></span></button>
          </a>
        </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 id="example" class="table table-striped table-bordered dt-responsive nowrap " cellspacing="0" width="100%">
        <thead class="bg-success bg-gradient text-white">
          <tr>
            <th>N° Lote </th>
            <th>Data do aclimatacao</th>
            <th>Espécie (Nome vulgar + Nome científico)</th>
            <th>Data P/ Praça Aclimatação </th>
            <th>Mortalidades </th>
           
            <th class="text-center tamanho"><i class="fa fa-cog"></i></th>
          </tr>
        </thead>
        <tbody>
          {% for aclimatacao in aclimatacoes %}
          <tr>
            <td class="align-middle">{{ aclimatacao.numero_muda }}</td>
            <td class="align-middle">{{ aclimatacao.data_semeia|date:"d/m/Y" }}</td>
            <td class="align-middle truncate-text custom-paragraph">{{ aclimatacao.nome_popular }} + {{ aclimatacao.especies }}</td>
            <td class="align-middle">{{ aclimatacao.ultima_data_aclimatacao|date:"d/m/Y"|default:"N/A" }}  </td>
            <td class="align-middle">{{ aclimatacao.total_aclimatacao|default:0 }}</td>
            <td class="text-center">
             
                <button class="btn btn-aclimatacao {% if aclimatacao.finalizado.0 %}btn-secondary disabled{% else %}btn-primary{% endif %}" 
                data-bs-toggle="modal" 
                data-bs-target="#aclimatacaoModal" 
                data-semeadura-id="{{ aclimatacao.semeadura_id }}"
                data-estimativa-minima="{{ aclimatacao.estimativa_minima }}"
                data-estimativa-maxima="{{ aclimatacao.estimativa_maxima }}"
                data-estimativa-media="{{ aclimatacao.estimativa_media }}"
                data-qtd-sementes-utilizada="{{ aclimatacao.qtd_sementes_utilizada }}"
                data-qtd-total-repique="{{ aclimatacao.total_repique }}"
                data-qtd-total-estufa="{{ aclimatacao.total_mortalidade_estufa }}"
                data-qtd-total-aclimatacao="{{ aclimatacao.total_aclimatacao |default:0 }}"
                
                >Mortalidade</button>

                <a href="{% url 'finalizar_aclimatacao' aclimatacao.semeadura_id %}" class="btn btn-danger delete-lt" data-bs-toggle="modal"
                data-bs-target="#deleteModal" data-lt-id="{{ aclimatacao.semeadura_id }}" data-lotename="{{ aclimatacao.numero_muda}}" data-numerolote="{{ aclimatacao.numero_muda}}" data-especie="{{ aclimatacao.especies}}"
                data-nomepopular="{{ aclimatacao.nome_popular}}">
                Finalizar</a>

                               
                <a class="btn btn-success show-details" 
                data-bs-toggle="modal" 
                data-bs-target="#exampleModal" 
                data-semeadura-id="{{ aclimatacao.semeadura_id }}"
                data-aclimatacao-ids="{{ aclimatacao.aclimatacao_ids }}"
                data-numero-lote="{{ aclimatacao.numero_muda }}"
                data-aclimatacao-dates="{{ aclimatacao.aclimatacao_dates|join:',' }}"
                data-aclimatacao-quantities="{{ aclimatacao.aclimatacao_quantities|join:',' }}"
             >
                 <i class="fa-solid fa-magnifying-glass" id="staticBackdrop"></i>
             </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
<style>
      /* Adicionando um tom mais escuro às bordas da tabela */
    .table-dark-bordered, .table-dark-bordered th, .table-dark-bordered td {
    border-color: #555; /* Troque pela cor desejada */
  }
</style>

<!-- Modal de aclimatacao -->
<div class="modal fade" id="aclimatacaoModal" tabindex="-1" aria-labelledby="aclimatacaoModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-delete">
    <div class="modal-content">
      <div class="modal-header flex-column">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <h4 class="modal-title">Registrar Mortalidades</h4>
      </div>
      <div class="modal-body">
        <form method="post" action="" id="aclimatacao-form">
          {% csrf_token %}
          <!-- Campos do formulário -->
          <!-- Adicione o campo oculto para semeadura_id -->
          <input type="hidden" name="semeadura_id" id="semeadura_id" value="">
          <div class="mb-3 text-start">
            <label for="data_aclimatacao" class="form-label">Data Seleção p/ Praça Aclimatação <span class="text-danger">*</span></label>
            <input type="date" class="form-control" id="data_aclimatacao" name="data_aclimatacao" required>
         </div>
         <div class="mb-3 text-start">
            <label for="quantidade_mortalidade" class="form-label">Mortalidade Parcial Diária <span class="text-danger">*</span></label>
            <input type="number" class="form-control" id="quantidade_mortalidade" name="quantidade_mortalidade" required>
         </div>
          <!-- Adicione mais campos conforme necessário -->

          <table class="table table-hover table-bordered text-start table-dark-bordered">
            <thead class="text-center bg-success bg-gradient text-white">
              <th scope="row" colspan="2">Registro de produção</th>
            </thead>
            <tbody>
              <tr>
                <th scope="row">Qts semenentes utilizada:</th>
                <td><div id="qtd-sementes-utilizada"></div>   </td>
              </tr>
              <tr>
                <th scope="row">Total de repiques:</th>
                <td><div id="qtd-total-repique"></div></td>
              </tr>
              <tr>
                <th scope="row">Total de Mortalidades:</th>
                <td><div id="qtd-total-aclimatacao"></div></td>
              </tr>
              <tr>
                <th scope="row">Total de Mudas:</th>
                <td><div id="qtd-total-muda"></div></td>
              </tr>
            </tbody>
          </table>

          <!-- Botões do formulário -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
            <button type="submit" class="btn btn-primary">Salvar</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Modal de Finalizar -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-finaly">
    <div class="modal-content">
      <div class="modal-header flex-column">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="icon-box">
          <i class="fa-solid fa-exclamation"></i>
        </div>
        <h4 class="modal-title w-100">Tem certeza?</h4>
      </div>
      <div class="modal-body">
        <p>Você realmente deseja Finalizar essa aclimatação? Este processo não pode ser desfeito.</p>
      </div>
      <p id="numeroLote" class="text-start"></p>
      <p id="nomeespecie" class="text-start"></p>
      <p id="nomepopular" class="text-start"></p>
      <div class="div2 py-2">
        <form class="px-2 px-md-3 py-2" id="finalizarAclimatacaoForm">
          {% csrf_token %}
          <div class="mb-3">
            <label for="motivo_exclusao" class="form-label"><strong>Motivo da Finalização <span class="text-danger">*</span></strong></label>
            <select class="form-select" id="motivo_exclusao" name="motivo_exclusao" required>
              <option value="Mudança de Status">Mudança de Status</option>
              <option value="Erro no Cadastro">Erro no Cadastro</option>
              <option value="Duplicidade de Registros">Duplicidade de Registros</option>
              <option value="Descontinuidade do Monitoramento">Descontinuidade do Monitoramento</option>
              <option value="Outros">Outros</option>
              <!-- Adicione outras opções conforme necessário -->
            </select>
          </div>
          <!-- Campo de input para "Outros" -->
          <div class="mb-3" id="outroMotivoContainer" style="display: none;">
            <label for="motivo_exclusao_outros" class="form-label"><strong>Outro motivo:</strong></label>
            <textarea type="text" class="form-control" id="motivo_exclusao_outros"
              name="motivo_exclusao_outros"></textarea>
          </div>

        </form>
      </div>
      <div class="modal-footer justify-content-center">
        <button type="button" class="btn btn-secondary" id="cancelDelete">Cancelar</button>
        <button type="button" class="btn btn-danger" id="confirmDelete" data-form-id="#finalizarAclimatacaoForm"
          data-url-estufa="{% url 'finalizar_aclimatacao' 0 %}">Confirmar</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-finaly modal-lg">
    <div class="modal-content">
      <div class="modal-header flex-column">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <h4 class="modal-title">Detalhes de Aclimatação</h4>
      </div>
      <div class="modal-body">
        <div class="content-fluid" id="modal-example">
          <div class="table-responsive">
            <table class="table table-striped table-bordered" cellspacing="0" width="100%" id="dataTable">
              <thead class="bg-success bg-gradient text-white">
                <tr>
                  <th>N° Lote</th>
                  <th>Data de Repique</th>
                  <th>Qtd (Mortalidade)</th>
                  <th class="text-center tamanho"><i class="fa fa-cog"></i></th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function() {
    $('#dataTable').DataTable({
      "paging": false, // Desativa a paginação
      "info": false, // Remove o controle de quantidade de itens
      "searching": false // Remove a caixa de pesquisa
    });
  });
</script>

<div class="modal fade modal-delconf" id="confirmacaoModal" tabindex="-1" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content bg-light">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fas fa-trash-alt"></i> Confirmaçã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 permanentemente essa aclimatação? 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="confirmarExclusao"><i class="fas fa-check"></i> Confirmar</button>
      </div>
      
    </div>
  </div>
</div>

<div id="mensagemSucessoExcluir" class="alert alert-success" role="alert" style="display: none;">
  <i class="fa-solid fa-circle-check"></i>
  <strong class="mx-1">Sucesso!</strong> Aclimatação excluída com êxito.
</div>
<div id="mensagemErroExcluir" class="alert alert-danger" role="alert" style="display: none;">
  <i class="fa-solid fa-circle-exclamation"></i>
  <strong class="mx-1">Erro!</strong> Ocorreu um problema ao tentar excluir a aclimatação.
</div>

<script src="{% static 'assets/js/aclimatacaoList.js' %}"></script>
<script>
  var listaAclimatacaoUrl = "{% url 'lista_aclimatacao' %}";
</script>
{% endblock %}