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

{% block content %}
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.4.0/css/fixedHeader.bootstrap4.min.css">
<script src="https://cdn.datatables.net/fixedheader/3.4.0/js/dataTables.fixedHeader.min.js"></script>

<script>
  $(document).ready(function () {
    $('#paperTable').DataTable({
      fixedHeader: true,
      responsive: true,
      autoWidth: false,
      language: {
        url: "//cdn.datatables.net/plug-ins/1.11.5/i18n/Portuguese-Brasil.json"
      }
    });

    const formatar = d => d.toISOString().split('T')[0];
    $('#periodo').on('change', function () {
      const hoje = new Date();
      const diaSemana = hoje.getDay();
      const mes = hoje.getMonth();
      const ano = hoje.getFullYear();

      if (this.value === 'hoje') {
        $('#inicio').val(formatar(hoje));
        $('#fim').val(formatar(hoje));
      } else if (this.value === 'semana') {
        const segunda = new Date(hoje);
        segunda.setDate(hoje.getDate() - ((diaSemana + 6) % 7));
        const domingo = new Date(segunda);
        domingo.setDate(segunda.getDate() + 6);
        $('#inicio').val(formatar(segunda));
        $('#fim').val(formatar(domingo));
      } else if (this.value === 'mes') {
        const primeiroDia = new Date(ano, mes, 1);
        const ultimoDia = new Date(ano, mes + 1, 0);
        $('#inicio').val(formatar(primeiroDia));
        $('#fim').val(formatar(ultimoDia));
      } else if (this.value === 'ano') {
        $('#inicio').val(formatar(new Date(ano, 0, 1)));
        $('#fim').val(formatar(new Date(ano, 11, 31)));
      } else {
        $('#inicio').val('');
        $('#fim').val('');
      }
    });

    $('#btnFiltro').on('click', function () {
      $('#boxFiltro').slideToggle();
    });

    setTimeout(() => $("#messages").fadeOut("fast"), 5000);
  });
</script>

<style>
  .filtro-destaque {
    border: 2px solid #198754;
    background-color: #f0fdf4;
    padding: 20px;
    border-radius: 10px;
  }
  .table-green-striped tbody tr:nth-child(odd) { background-color: #e9f7ef; }
  .table-green-striped tbody tr:nth-child(even) { background-color: #d4f4dc; }
</style>

<div class="card my-2">
  <div class="card-body bg-success bg-gradient text-white rounded-2 d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Registros de Paper Pot</h5>
    <div class="d-flex gap-2">
      <a href="{% url 'criar_registro_paper' %}" class="btn btn-light text-success fw-bold">+ Novo Registro</a>
      <button class="btn btn-outline-light" id="btnFiltro">Filtrar</button>
    </div>
  </div>
</div>

<div class="card py-3">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 p-4">

        <div id="boxFiltro" class="filtro-destaque mb-4" style="display: none;">
          <h5 class="mb-3 text-success">Filtrar por Período</h5>
          <form method="get" class="row g-3">
            <div class="col-md-3">
              <label for="periodo" class="form-label">Período Rápido</label>
              <select name="periodo" id="periodo" class="form-select">
                <option value="">Tudo</option>
                <option value="hoje" {% if request.GET.periodo == 'hoje' %}selected{% endif %}>Hoje</option>
                <option value="semana" {% if request.GET.periodo == 'semana' %}selected{% endif %}>Esta Semana</option>
                <option value="mes" {% if request.GET.periodo == 'mes' %}selected{% endif %}>Este Mês</option>
                <option value="ano" {% if request.GET.periodo == 'ano' %}selected{% endif %}>Este Ano</option>
              </select>
            </div>
            <div class="col-md-3">
              <label for="inicio" class="form-label">Data Início</label>
              <input type="date" id="inicio" name="inicio" class="form-control" value="{{ request.GET.inicio }}">
            </div>
            <div class="col-md-3">
              <label for="fim" class="form-label">Data Fim</label>
              <input type="date" id="fim" name="fim" class="form-control" value="{{ request.GET.fim }}">
            </div>
            <div class="col-md-3 align-self-end d-flex gap-2">
              <button type="submit" class="btn btn-success w-100">Filtrar</button>
              <a href="{% url 'relatorio_geral_estufa_pdf' %}?periodo={{ request.GET.periodo }}&inicio={{ request.GET.inicio }}&fim={{ request.GET.fim }}" class="btn btn-primary w-100" target="_blank">PDF</a>
            </div>
          </form>
        </div>

        {% if registros %}
        <div class="table-responsive">
          <table class="table table-bordered table-green-striped" id="paperTable">
            <thead class="table-success text-center">
              <tr>
                <th>Data</th>
                <th>Paper Cheio</th>
                <th>Produção/Hora</th>
                <th>Paradas</th>
                <th><span title="Tempo total de trabalho calculado">Horas Trabalhadas</span></th>
                <th>Papel Utilizado</th>
                <th>Litros Substrato</th>
                <th>Ações</th>
              </tr>
            </thead>
            <tbody>
              {% for registro in registros %}
              <tr>
                <td>{{ registro.data|date:"d/m/Y" }}</td>
                <td class="text-end">{{ registro.quantidade_paper_cheio|default_if_none:"0" }}</td>
                <td class="text-end">{{ registro.producao_por_hora|default_if_none:"0" }}</td>
                <td class="text-end">{{ registro.quantidade_paradas|default_if_none:"0" }}</td>
                <td class="text-end">{{ registro.horas_trabalhadas|default_if_none:"-" }}</td>
                <td class="text-end">{{ registro.quantidade_papel_utilizado|default_if_none:"0" }}</td>
                <td class="text-end">{{ registro.substrato_litros|default_if_none:"0" }}</td>
                <td class="text-center">
                  <a href="{% url 'editar_registro_paper' registro.pk %}" class="btn btn-sm btn-warning">Editar</a>
                  <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#modalExcluir{{ registro.pk }}">
  Excluir
</button>
                </td>
              </tr>
              <!-- Modal de confirmação -->
<div class="modal fade" id="modalExcluir{{ registro.pk }}" tabindex="-1" aria-labelledby="modalLabel{{ registro.pk }}" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title" id="modalLabel{{ registro.pk }}">Confirmar Exclusão</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fechar"></button>
      </div>
      <div class="modal-body">
        Tem certeza que deseja excluir o registro do dia <strong>{{ registro.data|date:"d/m/Y" }}</strong>?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
        <a href="{% url 'excluir_registro_paper' registro.pk %}" class="btn btn-danger">Sim, Excluir</a>
      </div>
    </div>
  </div>
</div>
              {% endfor %}
            </tbody>
          
          </table>
        </div>

        <div class="mt-4 border-top pt-3">
          <h5 class="text-success mb-3">Totais Gerais</h5>
          <div class="row">
            <div class="col-md-3">
              <div class="border rounded p-3 bg-light">
                <strong>Quantidade Total de Paper Cheio:</strong><br>
                
                {{ registros|sum_field:'quantidade_paper_cheio'|default_if_none:"0" }}
              </div>
            </div>
            <div class="col-md-3">
              <div class="border rounded p-3 bg-light">
                <strong>Produção Média por Hora:</strong><br>
                {{ registros|average:'producao_por_hora'|floatformat:1|default_if_none:"0,0" }}
              </div>
            </div>
            <div class="col-md-3">
              <div class="border rounded p-3 bg-light">
                <strong>Total de Paradas:</strong><br>
                {{ registros|sum_field:'quantidade_paradas'|default_if_none:"0" }}
              </div>
            </div>
            <div class="col-md-3">
              <div class="border rounded p-3 bg-light">
                <strong>Tempo Total Utilizado pela Máquina:</strong><br>
                {{ registros|tempo_total_trabalho }}
              </div>
            </div>
          </div>
        </div>

        {% else %}
        <p class="text-muted mt-3">Nenhum registro encontrado.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}