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

{% block content %}
<div class="card my-3">
  
    <div class="card-header bg-success text-white">
      <h5 class="mb-0">Novo Registro - Paper Pot</h5>
    </div>
    <div class="card-body">
      <form method="post">
        {% csrf_token %}
        <div class="row g-3">
          {{ form.non_field_errors }}
          {% for field in form.visible_fields %}
            <div class="col-md-4">
              <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
              {{ field }}
              {% for error in field.errors %}<div class="text-danger small">{{ error }}</div>{% endfor %}
            </div>
          {% endfor %}
        </div>

        <hr class="my-4">
        <h5 class="mb-3">Horários de Início e Parada</h5>
        <div id="formset-horarios">
          {{ formset.management_form }}
          {% for form in formset.forms %}
            <div class="row g-3 mb-2 formset-row">
              <div class="col-md-5">
                {{ form.hora_inicio.label_tag }}
                {{ form.hora_inicio }}
              </div>
              <div class="col-md-5">
                {{ form.hora_parada.label_tag }}
                {{ form.hora_parada }}
              </div>
              <div class="col-md-2 d-flex align-items-end">
                <button type="button" class="btn btn-danger btn-sm remove-form">Remover</button>
              </div>
            </div>
          {% endfor %}
        </div>

        <button type="button" class="btn btn-outline-success btn-sm mt-2" id="add-form">+ Adicionar horário</button>

        <div class="mt-4 d-flex justify-content-between">
          <a href="{% url 'lista_paperpot' %}" class="btn btn-outline-secondary">Cancelar</a>
          <button type="submit" class="btn btn-success">Salvar Registro</button>
        </div>
      </form>
    </div>
  
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const formsetContainer = document.getElementById('formset-horarios');
    const addFormButton = document.getElementById('add-form');
    let totalForms = document.querySelector('[name="form-TOTAL_FORMS"]');

    function calcularCampos() {
      const paper = parseFloat(document.getElementById('id_quantidade_paper_cheio')?.value || 0);
      const baldes = parseFloat(document.getElementById('id_substrato_balde')?.value || 0);
      const litros = baldes * 40;
      document.getElementById('id_substrato_litros').value = litros.toFixed(2);
      document.getElementById('id_producao_por_litro').value = litros ? (paper / litros).toFixed(2) : 0;
      document.getElementById('id_basocote_kg').value = ((litros * 0.18) / 40).toFixed(2);

      let horasTotais = 0;
      let paradas = 0;

      document.querySelectorAll('.formset-row').forEach(row => {
        const h1 = row.querySelector('[name$="hora_inicio"]')?.value;
        const h2 = row.querySelector('[name$="hora_parada"]')?.value;

        if (h1 && h2) {
          const [h1h, h1m] = h1.split(":").map(Number);
          const [h2h, h2m] = h2.split(":").map(Number);
          const inicio = h1h * 60 + h1m;
          const parada = h2h * 60 + h2m;
          const duracao = (parada - inicio) / 60;
          if (duracao > 0) {
            horasTotais += duracao;
            paradas++;
          }
        }
      });

      const horas = Math.floor(horasTotais);
const minutos = Math.round((horasTotais - horas) * 60);
document.getElementById('id_horas_trabalhadas').value = `${horas}:${minutos.toString().padStart(2, '0')}`;

      document.getElementById('id_quantidade_paradas').value = paradas;
      document.getElementById('id_producao_por_hora').value = horasTotais ? (paper / horasTotais).toFixed(2) : 0;
    }

    function registrarListeners() {
      document.querySelectorAll('.formset-row input[type="time"]').forEach(input => {
        input.removeEventListener('input', calcularCampos);
        input.addEventListener('input', calcularCampos);
      });

      document.getElementById('id_quantidade_paper_cheio')?.addEventListener('input', calcularCampos);
      document.getElementById('id_substrato_balde')?.addEventListener('input', calcularCampos);
    }

    registrarListeners();  // aplicar aos campos já renderizados

    addFormButton.addEventListener('click', function () {
      const currentFormCount = parseInt(totalForms.value);
      const newForm = formsetContainer.querySelector('.formset-row').cloneNode(true);

      newForm.querySelectorAll('input').forEach((input) => {
        input.name = input.name.replace(/form-\d+-/, `form-${currentFormCount}-`);
        input.id = input.id.replace(/form-\d+-/, `form-${currentFormCount}-`);
        input.value = '';
      });

      formsetContainer.appendChild(newForm);
      totalForms.value = currentFormCount + 1;

      registrarListeners();  // reatribuir eventos aos novos campos
    });

    formsetContainer.addEventListener('click', function (e) {
      if (e.target.classList.contains('remove-form')) {
        const row = e.target.closest('.formset-row');
        if (formsetContainer.querySelectorAll('.formset-row').length > 1) {
          row.remove();
          calcularCampos();  // recalcula ao remover
        }
      }
    });
  });

  document.addEventListener("DOMContentLoaded", function () {
    const dataInput = document.getElementById("id_data");
    const mesInput = document.getElementById("id_mes");
    const semanaInput = document.getElementById("id_semana");

    dataInput?.addEventListener("change", function () {
      if (!dataInput.value) return;
      const data = new Date(dataInput.value);
      const mes = data.toLocaleString("pt-BR", { month: "long" });
      const semana = Math.floor((data.getDate() - 1) / 7) + 1;
      mesInput.value = mes.charAt(0).toUpperCase() + mes.slice(1);
      semanaInput.value = semana;
    });
  });
</script>

{% endblock %}