{% extends "base.html" %}
{% block title %}Callback{% endblock %}
{% set active = "pbx-callback" %}
{% block content %}
<div class="container-fluid">
  <h4 class="mb-3">📞 Callback (Retorno de Chamada)</h4>

  <div class="row">
    <div class="col-md-7">
      <div class="card">
        <div class="card-header">
          <strong>Iniciar Callback</strong>
        </div>
        <div class="card-body">
          <form id="callbackForm">
            <div class="mb-3">
              <label class="form-label">Número Externo (quem vai receber o callback)</label>
              <input type="text" name="external_number" class="form-control" placeholder="Ex: 51999999999" required>
              <div class="form-text">Número da pessoa que está esperando o retorno.</div>
            </div>

            <div class="row mb-3">
              <div class="col-md-6">
                <label class="form-label">⏱️ Aguardar antes de ligar</label>
                <select name="delay_type" class="form-select" id="delayTypeSelect">
                  <option value="0">Imediato (0s)</option>
                  <option value="5">5 segundos</option>
                  <option value="10" selected>10 segundos</option>
                  <option value="30">30 segundos</option>
                  <option value="60">1 minuto</option>
                  <option value="custom">Personalizado...</option>
                </select>
              </div>
              <div class="col-md-6" id="customDelayField" style="display:none">
                <label class="form-label">Tempo (segundos)</label>
                <input type="number" name="delay_custom" class="form-control" min="1" max="3600" value="15" placeholder="Ex: 15">
              </div>
            </div>

            <div class="mb-3">
              <label class="form-label">Redirecionar para</label>
              <select name="dest_type" class="form-select" id="destTypeSelect" required>
                <option value="extension">📞 Ramal</option>
                <option value="queue">📋 Fila</option>
                <option value="ring_group">🔔 Grupo de Chamada</option>
                <option value="ivr">🎤 URA</option>
                <option value="announcement">📢 Anúncio</option>
                <option value="conference">👥 Conferência</option>
                <option value="follow_me">📱 Follow Me</option>
                <option value="time_condition">⏰ Condição de Tempo</option>
                <option value="external">🌐 Número Externo</option>
              </select>
            </div>

            <div class="mb-3">
              <label class="form-label">Valor do Destino</label>

              {# Ramal #}
              <select name="dest_value" class="form-select dest-select" id="dest-ext">
                <option value="">Selecione o ramal...</option>
                {% for p in peers %}
                <option value="{{ p.name }}">{{ p.display_name or p.name }} ({{ p.name }})</option>
                {% endfor %}
              </select>

              {# Fila #}
              <select name="dest_value" class="form-select dest-select" id="dest-queue" style="display:none">
                <option value="">Selecione a fila...</option>
                {% for q in queues %}
                <option value="{{ q.id }}">{{ q.name }} {% if q.extension %}({{ q.extension }}){% endif %} - {{ q.strategy }}</option>
                {% endfor %}
              </select>

              {# Grupo de Chamada #}
              <select name="dest_value" class="form-select dest-select" id="dest-ring_group" style="display:none">
                <option value="">Selecione o grupo...</option>
                {% for g in ring_groups %}
                <option value="{{ g.id }}">{{ g.name }} ({{ g.extension }})</option>
                {% endfor %}
              </select>

              {# URA #}
              <select name="dest_value" class="form-select dest-select" id="dest-ivr" style="display:none">
                <option value="">Selecione a URA...</option>
                {% for i in ivrs %}
                <option value="{{ i.id }}">{{ i.name }} ({{ i.extension }})</option>
                {% endfor %}
              </select>

              {# Anúncio #}
              <select name="dest_value" class="form-select dest-select" id="dest-announcement" style="display:none">
                <option value="">Selecione o anúncio...</option>
                {% for a in announcements %}
                <option value="{{ a.id }}">{{ a.name }}</option>
                {% endfor %}
              </select>

              {# Conferência #}
              <select name="dest_value" class="form-select dest-select" id="dest-conference" style="display:none">
                <option value="">Selecione a conferência...</option>
                {% for c in conferences %}
                <option value="{{ c.id }}">{{ c.name }} ({{ c.extension }})</option>
                {% endfor %}
              </select>

              {# Follow Me #}
              <select name="dest_value" class="form-select dest-select" id="dest-follow_me" style="display:none">
                <option value="">Selecione o Follow Me...</option>
                {% for f in follow_me %}
                <option value="{{ f.id }}">{{ f.name }} ({{ f.extension }})</option>
                {% endfor %}
              </select>

              {# Condição de Tempo #}
              <select name="dest_value" class="form-select dest-select" id="dest-time_condition" style="display:none">
                <option value="">Selecione a condição...</option>
                {% for t in time_conditions %}
                <option value="{{ t.id }}">{{ t.name }}</option>
                {% endfor %}
              </select>

              {# Número Externo #}
              <input type="text" name="dest_value" class="form-control dest-select" id="dest-external"
                     placeholder="Ex: 51999999999" style="display:none">
            </div>

            <button type="submit" class="btn btn-primary" id="btnCallback">
              🔄 Iniciar Callback
            </button>
          </form>
          <div id="callbackResult" class="mt-3"></div>
        </div>
      </div>
    </div>

    <div class="col-md-5">
      <div class="card">
        <div class="card-header">
          <strong>Como funciona</strong>
        </div>
        <div class="card-body">
          <ol class="mb-0">
            <li>Informe o <strong>número externo</strong> da pessoa</li>
            <li>Escolha para <strong>onde redirecionar</strong> quando ela atender</li>
            <li>O sistema liga pra ela e, quando atende, transfere pro destino</li>
          </ol>
          <hr>
          <p class="text-muted small mb-0">
            ✅ O destino pode ser: ramal, fila, grupo, URA, anúncio,
            conferência, follow me, condição de tempo ou outro número externo.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// Controle do campo de tempo personalizado
document.getElementById("delayTypeSelect").addEventListener("change", function() {
  document.getElementById("customDelayField").style.display =
    this.value === "custom" ? "block" : "none";
  document.querySelector("#customDelayField input").required = this.value === "custom";
});

// Troca o campo de destino conforme o tipo selecionado
document.getElementById("destTypeSelect").addEventListener("change", function() {
  const selected = this.value;
  document.querySelectorAll(".dest-select").forEach(el => el.style.display = "none");
  const target = document.getElementById("dest-" + selected);
  if (target) target.style.display = "block";
});

document.getElementById("callbackForm").addEventListener("submit", async function(e) {
  e.preventDefault();
  const btn = document.getElementById("btnCallback");
  btn.disabled = true;
  btn.innerHTML = '⏳ Aguardando...';

  const formData = new FormData(this);
  const resultDiv = document.getElementById("callbackResult");

  try {
    const resp = await fetch("/app/pbx/callback/dispatch", {
      method: "POST",
      body: formData
    });
    const data = await resp.json();
    if (data.status === "ok") {
      resultDiv.innerHTML = `<div class="alert alert-success">✅ ${data.message}</div>`;
    } else {
      resultDiv.innerHTML = `<div class="alert alert-danger">❌ ${data.message}</div>`;
    }
  } catch (err) {
    resultDiv.innerHTML = `<div class="alert alert-danger">❌ Erro: ${err.message}</div>`;
  } finally {
    btn.disabled = false;
    btn.innerHTML = '🔄 Iniciar Callback';
  }
});
</script>
{% endblock %}