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

{% block content %}
<div class="card my-3">
  <div class="card-header bg-success text-white">
    <h5 class="mb-0">Editar Registro - Paper Pot</h5>
  </div>
  <div class="card-body">
    <form method="post" novalidate>
      {% csrf_token %}

      <div class="row">
        <div class="col-md-4">
          <label for="id_data" class="form-label">Data</label>
          <input type="date" name="data" id="id_data"
                 class="form-control {% if form.data.errors %}is-invalid{% endif %}"
                 value="{{ form.data.value|date:'Y-m-d' }}">
          {% for error in form.data.errors %}
            <div class="invalid-feedback">{{ error }}</div>
          {% endfor %}
        </div>
        <div class="col-md-4">
          <label for="id_mes" class="form-label">Mês</label>
          {{ form.mes }}
        </div>
        <div class="col-md-4">
          <label for="id_semana" class="form-label">Semana</label>
          {{ form.semana }}
        </div>
      </div>

     
   
      <div class="row">
        <div class="col-md-4">
          <label for="id_quantidade_paper_cheio" class="form-label">Paper Cheio</label>
          {{ form.quantidade_paper_cheio }}
        </div>
        <div class="col-md-4">
          <label for="id_quantidade_papel_utilizado" class="form-label">Papel Utilizado</label>
          {{ form.quantidade_papel_utilizado }}
        </div>
        <div class="col-md-4">
          <label for="id_substrato_balde" class="form-label">Substrato (balde)</label>
          {{ form.substrato_balde }}
        </div>
        
      </div>

      <div class="row">
        <div class="col-md-4">
          <label for="id_substrato_litros" class="form-label">Substrato (L)</label>
          {{ form.substrato_litros }}
        </div>
        <div class="col-md-4">
          <label for="id_producao_por_litro" class="form-label">Produção por Litro</label>
          {{ form.producao_por_litro }}
        </div>
        <div class="col-md-4">
          <label for="id_horas_trabalhadas" class="form-label">Horas Trabalhadas</label>
          {{ form.horas_trabalhadas }}
        </div>
        
      </div>

      <div class="row">
        <div class="col-md-4">
          <label for="id_quantidade_paradas" class="form-label">Q. Paradas</label>
          {{ form.quantidade_paradas }}
        </div>
        <div class="col-md-4">
          <label for="id_producao_por_hora" class="form-label">Produção/Hora</label>
          {{ form.producao_por_hora }}
        </div>
        <div class="col-md-4">
          <label for="id_basocote_kg" class="form-label">Basocote (kg)</label>
          {{ form.basocote_kg }}
        </div>
        
      </div>
      <div class="row">
        <div class="col-md-4">
          <label for="id_observacao" class="form-label">Observação</label>
          {{ form.observacao }}
        </div>
      </div>
 <hr>
      <h6>Horários de Início e Parada</h6>
      <div id="horarios-container">
        {% for horario in horarios %}
        <div class="row mb-2 horario-row">
          <div class="col-md-5">
            <label>Hora Início</label>
            <input type="time" name="hora_inicio_{{ forloop.counter0 }}" class="form-control" value="{{ horario.hora_inicio|time:'H:i' }}">
          </div>
          <div class="col-md-5">
            <label>Hora Parada</label>
            <input type="time" name="hora_parada_{{ forloop.counter0 }}" class="form-control" value="{{ horario.hora_parada|time:'H:i' }}">
          </div>
          <div class="col-md-2 d-flex align-items-end">
            <button type="button" class="btn btn-danger btn-remove-horario">Remover</button>
          </div>
        </div>
        {% endfor %}
      </div>
      <input type="hidden" id="total_horarios" name="total_horarios" value="{{ total_horarios }}">
      <button type="button" class="btn btn-outline-success mt-2" id="addHorario">+ Adicionar Horário</button>

      <div class="d-flex justify-content-between mt-4">
        <a href="{% url 'lista_paperpot' %}" class="btn btn-secondary">Cancelar</a>
        <button type="submit" class="btn btn-primary">Salvar Alterações</button>
      </div>
    </form>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  let totalHorarios = parseInt(document.getElementById("total_horarios").value) || 0;

  document.getElementById("addHorario").addEventListener("click", function () {
    const container = document.getElementById("horarios-container");
    const div = document.createElement("div");
    div.classList.add("row", "mb-2", "horario-row");
    div.innerHTML = `
      <div class="col-md-5">
        <label>Hora Início</label>
        <input type="time" name="hora_inicio_${totalHorarios}" class="form-control">
      </div>
      <div class="col-md-5">
        <label>Hora Parada</label>
        <input type="time" name="hora_parada_${totalHorarios}" class="form-control">
      </div>
      <div class="col-md-2 d-flex align-items-end">
        <button type="button" class="btn btn-danger btn-remove-horario">Remover</button>
      </div>
    `;
    container.appendChild(div);
    totalHorarios++;
    document.getElementById("total_horarios").value = totalHorarios;
  });

  document.addEventListener("click", function (e) {
    if (e.target.classList.contains("btn-remove-horario")) {
      e.target.closest(".horario-row").remove();
    }
  });
});
</script>
{% endblock %}