{% extends "base.html" %}
{% block title %}{% if group %}Editar {{ group.name }}{% else %}Novo Grupo de Horário{% endif %}{% endblock %}
{% set active = "app-time-groups" %}
{% block content %}
<h4>{% if group %}✏️ {{ group.name }}{% else %}➕ Novo Grupo de Horário{% endif %}</h4>
<form method="post" action="/app/pbx/time-groups/save" class="row g-3" id="groupForm">
  {% if group %}<input type="hidden" name="id" value="{{ group.id }}">{% endif %}

  <div class="col-md-6">
    <label class="form-label">Nome *</label>
    <input type="text" name="name" class="form-control" required value="{{ group.name if group else '' }}">
  </div>
  <div class="col-md-6">
    <label class="form-label"></label>
    <div class="form-check mt-2">
      <input type="checkbox" name="enabled" class="form-check-input" id="chk_en" {% if not group or group.enabled %}checked{% endif %}>
      <label class="form-check-label" for="chk_en">Ativo</label>
    </div>
  </div>

  <div class="col-12">
    <label class="form-label">Descrição</label>
    <textarea name="description" class="form-control" rows="2">{{ group.description if group else '' }}</textarea>
  </div>

  <div class="col-12">
    <h6>Períodos</h6>
    <table class="table table-sm" id="entriesTable">
      <thead><tr><th>Dia</th><th>Início</th><th>Fim</th><th></th></tr></thead>
      <tbody>
        {% if group and group.entries %}
        {% for e in group.entries %}
        <tr>
          <td>
            <select name="entry_dow" class="form-select form-select-sm">
              {% for d in ["mon","tue","wed","thu","fri","sat","sun","all"] %}
              <option value="{{ d }}" {% if e.day_of_week == d %}selected{% endif %}>{{ {"mon":"Seg","tue":"Ter","wed":"Qua","thu":"Qui","fri":"Sex","sat":"Sáb","sun":"Dom","all":"Todos os dias"}[d] }}</option>
              {% endfor %}
            </select>
          </td>
          <td><input type="time" name="entry_start" class="form-control form-control-sm" value="{{ e.start_time }}"></td>
          <td><input type="time" name="entry_end" class="form-control form-control-sm" value="{{ e.end_time }}"></td>
          <td><button type="button" class="btn btn-sm btn-danger" onclick="this.closest('tr').remove()">✕</button></td>
        </tr>
        {% endfor %}
        {% endif %}
      </tbody>
    </table>
    <button type="button" class="btn btn-sm btn-secondary" onclick="addEntry()">+ Adicionar Período</button>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">💾 Salvar</button>
    <a href="/app/pbx/time-groups" class="btn btn-secondary">Cancelar</a>
  </div>
</form>

<script>
function addEntry() {
  const tbody = document.querySelector("#entriesTable tbody");
  const tr = document.createElement("tr");
  const dias = {mon:"Seg",tue:"Ter",wed:"Qua",thu:"Qui",fri:"Sex",sat:"Sáb",sun:"Dom",all:"Todos"};
  let sel = '<select name="entry_dow" class="form-select form-select-sm">';
  for (let [k,v] of Object.entries(dias)) sel += `<option value="${k}">${v}</option>`;
  sel += '</select>';
  tr.innerHTML = `<td>${sel}</td><td><input type="time" name="entry_start" class="form-control form-control-sm" value="09:00"></td><td><input type="time" name="entry_end" class="form-control form-control-sm" value="18:00"></td><td><button type="button" class="btn btn-sm btn-danger" onclick="this.closest('tr').remove()">✕</button></td>`;
  tbody.appendChild(tr);
}
</script>
{% endblock %}