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

<style>

  .linha-entrada-zero {
        background-color: #ffcccc;  /* Cor de fundo vermelho claro (pode ajustar conforme necessário) */
    }
</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">Lista completa de Aclimatação</h5>
        </div>
        <div class="col-auto">
          <a href="{% url 'lista_aclimatacao' %}">
            <button class="btn btn-light me-1 mb-1" type="button">Voltar <span class="fas fa-arrow-left me-1"
                data-fa-transform="shrink-3"></span></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">
        <div class="row">
          <div class="col-md-6 offset-md-4"> <!-- Ajuste o tamanho da coluna conforme necessário -->
            <form method="get" action="{% url 'lista_aclimatacao_completa' %}" class="d-flex">
              <div class="me-2 ">
                <select class="form-select filter-custom" name="ano" id="ano">
                  <option value="" selected>Todos os Anos</option>
                  {% for ano in anos_disponiveis %}
                    <option value="{{ ano|date:'Y' }}">{{ ano|date:'Y' }}</option>
                  {% endfor %}
                </select>
              </div>
              <button class="btn btn-sm btn-success btn-lg" type="submit">Filtrar</button>
            </form>
          </div>
        </div>
      <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 {% if aclimatacao.finalizado.0 %}class="linha-entrada-zero"{% endif %}>
            <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">
             
              {% if aclimatacao.finalizado.0 %}
              Aclimatação Finalizado
              {% else %}
               Em Aclimatação
              {% endif %}
                <!-- Botão para abrir o modal de aclimatacao 
                <button class="btn btn-aclimatacao btn-primary" data-bs-toggle="modal" data-bs-target="#aclimatacaoModal" data-semeadura-id="{{ aclimatacao.semeadura_id }}">Aclimatação</button>-->
                <!-- Botão para abrir o modal de aclimatacao -->
               <!--<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 }}">Aclimatação</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}}">
                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>

<!-- Modal de aclimatacao -->
<div class="modal fade" id="aclimatacaoModal" tabindex="-1" aria-labelledby="aclimatacaoModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-confirm">
    <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 Aclimatação</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:</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</label>
            <input type="number" class="form-control" id="quantidade_mortalidade" name="quantidade_mortalidade" required>
         </div>
          <!-- Adicione mais campos conforme necessário -->

          <!-- 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 confirmação (fora da tabela) -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-confirm">
    <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="material-icons fa-solid fa-xmark"></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="loteInfo" class="text-start"></p>
      <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">Finalizar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal de exibição de dados --><!-- Adicione o modal ao seu template -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-confirm">
    <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 da Aclimatação</h4>
      </div>
      <div class="modal-body text-start">
        <p>Número do Lote: <span id="modal-numeroLote"></span></p>
        <div id="modal-dataaclimatacao"></div>
        <div id="modal-qtdaclimatacao"></div>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function () {
    $(document).ready(function () {
    $("#example").DataTable();
  });

    // Oculte as mensagens após 5 segundos
    setTimeout(function () {
      $("#messages").fadeOut("fast");
    }, 5000);

    
  });
</script>



<script>
$(document).ready(function () {
    $(document).on("click", ".show-details", function () {
        var numero_muda = $(this).data('numero-lote');
        var aclimatacaoDates = $(this).data('aclimatacao-dates').split(',');
        var aclimatacaoQuantities = $(this).data('aclimatacao-quantities').split(',');
        var aclimatacaoIds = parseArray($(this).data('aclimatacao-ids'));


        $('#modal-numeroLote').text(numero_muda);
        $('#modal-dataaclimatacao').empty();

        // Verifique se há aclimatacaos
        if (aclimatacaoDates.length > 0) {
            // Adicione os aclimatacaos ao modal
            for (var i = 0; i < aclimatacaoDates.length; i++) {
                var AclimatacaoDate = aclimatacaoDates[i] || '';
                var aclimatacaoQuantity = aclimatacaoQuantities[i] || '';
                var aclimatacaoId = aclimatacaoIds[i];

                // Arredonde o valor de aclimatacaoQuantity para duas casas decimais
                aclimatacaoQuantity = parseFloat(aclimatacaoQuantity).toFixed(2);

// Formate o número com separadores de milhar
aclimatacaoQuantity = parseFloat(aclimatacaoQuantity).toLocaleString('pt-BR');
                // Crie um novo elemento div para cada linha
                var rowDiv = $('<div>');

                // Adicione o texto ao div
                var formattedData = 'Data Seleção p/ Praça Aclimatação: ' + AclimatacaoDate + ' <br> Mortalidade Parcial Diária: ' + aclimatacaoQuantity ;
                rowDiv.append(formattedData);

                var deleteButton = $('<button class="btn btn-danger">Excluir</button>');
deleteButton.data('aclimatacao-id', String(aclimatacaoId));

vincularEventoExcluir(deleteButton);
rowDiv.append(deleteButton);
// Adicione margem ao botão para criar espaço entre o texto e o botão
deleteButton.css('margin-left', '10px'); // Adapte o valor conforme necessário
                // Adicione uma quebra de linha após o texto
                rowDiv.append('<br><br>');

                // Adicione o div ao modal
                $('#modal-dataaclimatacao').append(rowDiv);
            }
        } else {
            // Se não houver aclimatacaos, adicione a mensagem correspondente
            $('#modal-dataaclimatacao').text("Nenhum aclimatacao encontrado.");
        }

        // Abra o modal
        $('#exampleModal').modal('show');
    });

    function parseArray(value) {
        // Verifica se o valor é uma string e tenta fazer o parsing para array
        if (typeof value === 'string') {
            try {
                value = JSON.parse(value);
            } catch (e) {
                console.error('Erro ao fazer o parsing da string para array:', e);
                value = [];
            }
        }

        return Array.isArray(value) ? value : [value];
    }

    $(document).ready(function () {
    vincularEventoExcluir($('.btn-excluir-aclimatacao'));
    
});

function vincularEventoExcluir(button) {
    button.click(function () {
        var aclimatacaoId = $(this).data('aclimatacao-id');
        var numeroLote = $(this).data('numero-lote');
        var aclimatacaoDates = $(this).data('aclimatacao-dates');
        var aclimatacaoQuantities = $(this).data('aclimatacao-quantities');


        excluiraclimatacao(aclimatacaoId, numeroLote, aclimatacaoDates, aclimatacaoQuantities);
    });
}


function excluiraclimatacao(aclimatacaoId, numeroLote, aclimatacaoDates, aclimatacaoQuantities) {
   

    var csrftoken = getCookie('csrftoken');

    $.ajax({
        url: '/excluir_aclimatacao/' + aclimatacaoId + '/',
        type: 'POST',
        dataType: 'json',
        headers: { 'X-CSRFToken': csrftoken },
        success: function (data) {
            console.log(data.message);

            // Remova os dados associados ao aclimatacao excluído do modal
            var aclimatacaoDiv = $('[data-aclimatacao-id="' + aclimatacaoId + '"]').closest('div');
            aclimatacaoDiv.remove();

            // Atualize o modal para refletir a exclusão
            $('#exampleModal').modal('hide');
            $('#exampleModal').modal('show');

            var messageDiv;

            if (data.message === 'Aclimatação excluído com sucesso.') {
                // Redirecionar para a página lista_aclimatacao_estufa
                window.location.href = '/lista_aclimatacao/';
            } else {
                console.error('Erro ao excluir aclimatacao. Mensagem do servidor:', data.message);

                // Se houver um erro, você pode adicionar uma mensagem de erro no modal ou lidar com isso de outra forma
                messageDiv = $('<div class="alert alert-danger" role="alert">Erro ao excluir aclimatacao. Tente novamente.</div>');
                $('#exampleModal .modal-body').prepend(messageDiv);
            }
        },
        error: function (error) {
            console.error('Erro ao excluir aclimatacao:', error);

            // Se houver um erro, você pode adicionar uma mensagem de erro no modal ou lidar com isso de outra forma
            var messageDiv = $('<div class="alert alert-danger" role="alert">Erro ao excluir aclimatacao. Tente novamente.</div>');
            $('#exampleModal .modal-body').prepend(messageDiv);
        }
    });
}
    function formatarQuantidade(quantidade) {
        return parseFloat(quantidade).toFixed(3).replace('.', ',');
    }

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
});
</script>

  


<script>
$(document).ready(function () {
   $('.btn-aclimatacao').click(function () {
      var semeaduraId = $(this).data('semeadura-id');
      console.log('Semeadura ID:', semeaduraId);

      // Atualize o valor do atributo 'action' do formulário com o semeadura_id
      $('#aclimatacao-form').attr('action', "{% url 'aclimatacao' semeadura_id=0 %}".replace('0', semeaduraId));

      $('#semeadura_id').val(semeaduraId);
      $('#aclimatacaoModal').modal('show');
   });
});
</script>


<script>
$(document).on("click", ".delete-lt", function () {
    var ltId = $(this).data("lt-id");
    var loteName = $(this).data("lotename");

    // Exibir informações do usuário no modal
    $("#loteInfo").text("Numero de Lote: " + loteName);
    $("#confirmDelete").attr("data-lt-id", ltId);
    $("#deleteModal").modal("show");
  });

  $(document).on("click", "#confirmDelete", function () {
    var ltId = $(this).data("lt-id");
    window.location.href = '{% url "finalizar_aclimatacao" 0 %}'.replace("0", ltId);
  });

  $(document).on("click", "#cancelDelete, .close-modal", function () {
    $("#deleteModal").modal("hide");
  });
</script>


{% endblock %}