{% extends "base.html" %}
{% block title %}🧙 Wizard de Rota de Entrada{% endblock %}
{% set active = "app-inbound" %}
{% block content %}
<style>
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.step-indicator { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; }
.step-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; transition: all .2s; }
.step-dot.pending { background: #e5e7eb; color: #6b7280; }
.step-dot.active-dot { background: #0f3460; color: #fff; transform: scale(1.1); }
.step-dot.done { background: #10b981; color: #fff; }
.step-label { font-size: 11px; text-align: center; color: #6b7280; margin-top: 4px; }
.step-connector { width: 30px; height: 2px; align-self: center; background: #e5e7eb; }
.step-connector.done { background: #10b981; }
</style>

<h4 class="mb-3">🧙 Wizard: Nova Rota de Entrada</h4>
<div class="step-indicator" id="stepIndicator"></div>

<form method="post" action="/app/pbx/inbound-routes/save" id="wizardForm" class="row g-3">
  <input type="hidden" name="id" value="">
  <input type="hidden" name="enabled" value="on">
  <input type="hidden" name="description" value="">

  <!-- STEP 1: Identificacao -->
  <div class="wizard-step active" data-step="1">
    <h5 class="mb-3">📋 Passo 1: Identificação</h5>
    <div class="col-md-6">
      <label class="form-label">📛 Nome da Rota *</label>
      <input type="text" id="f_name" name="name" class="form-control" placeholder="Ex: Entrada Principal" required>
    </div>
    <div class="col-md-3">
      <label class="form-label">📞 DID / Número Discado</label>
      <input type="text" name="did" class="form-control" placeholder="Ex: 5133330000">
      <small class="text-muted">Deixe vazio para capturar todas</small>
    </div>
    <div class="col-md-3">
      <label class="form-label">🔢 Prioridade</label>
      <input type="number" name="priority" class="form-control" value="0" min="0" max="999">
    </div>
    <div class="col-md-4 mt-3">
      <label class="form-label">🔇 Filtrar por CallerID</label>
      <input type="text" name="callerid" class="form-control" placeholder="Ex: 5199998888 (opcional)">
    </div>
    <div class="col-md-4 mt-3">
      <label class="form-label">📡 Filtrar por Tronco</label>
      <select name="trunk_name" class="form-select">
        <option value="">Todos os troncos</option>
        {% for t in trunks %}<option value="{{ t.name }}">{{ t.name }}</option>{% endfor %}
      </select>
    </div>
    <div class="col-12 mt-3">
      <button type="button" class="btn btn-primary" onclick="avancarStep1()">Avançar →</button>
    </div>
  </div>

  <!-- STEP 2: Destino -->
  <div class="wizard-step" data-step="2">
    <h5 class="mb-3">🎯 Passo 2: Destino</h5>
    <div class="col-md-5">
      <label class="form-label">Tipo de Destino</label>
      <select name="destination_type" class="form-select" id="destType" onchange="atualizarDestSelect()">
        <option value="extension">📞 Ramal</option>
        <option value="queue">🔁 Fila</option>
        <option value="ring_group">👥 Grupo</option>
        <option value="ivr">🔀 URA</option>
        <option value="announcement">📢 Anúncio</option>
        <option value="time_condition">⏰ Cond. Horário</option>
        <option value="hangup">❌ Desligar</option>
      </select>
    </div>
    <div class="col-md-5">
      <label class="form-label">Destino</label>
      <input type="text" name="destination" id="f_destination" class="form-control" placeholder="Ramal, fila, etc.">
    </div>
    <div class="col-md-2">
      <label class="form-label">&nbsp;</label>
      <div class="form-check mt-2">
        <input type="checkbox" name="recording" class="form-check-input" id="chk_rec" value="on">
        <label class="form-check-label" for="chk_rec">🎤 Gravar</label>
      </div>
    </div>

    <div class="col-12 mt-4">
      <h6>📌 Selecionar Destino</h6>
      <select class="form-select" id="destPick" onchange="document.getElementById('f_destination').value = this.value" size="8">
        <option value="">— Selecione o tipo primeiro —</option>
      </select>
    </div>

    <div class="col-12 mt-3">
      <button type="button" class="btn btn-outline-secondary" onclick="goStep(1)">← Voltar</button>
      <button type="button" class="btn btn-primary" onclick="avancarStep2()">Avançar →</button>
    </div>
  </div>

  <!-- STEP 3: Revisao -->
  <div class="wizard-step" data-step="3">
    <h5 class="mb-3">✅ Passo 3: Revisão</h5>
    <div class="card">
      <div class="card-body p-0">
        <table class="table table-sm mb-0" id="reviewTable"></table>
      </div>
    </div>
    <div class="mt-3">
      <button type="button" class="btn btn-outline-secondary" onclick="goStep(2)">← Voltar</button>
      <button type="submit" class="btn btn-success btn-lg">💾 Salvar Rota</button>
    </div>
  </div>
</form>

<script>
const STEPS = [
  { num: 1, label: "Identificação" },
  { num: 2, label: "Destino" },
  { num: 3, label: "Revisão" }
];
let currentStep = 1;

// Dados dos destinos
const DEST_OPTIONS = {
{% for p in peers %} "{{ p.name }}": "📞 {{ p.name }} - {{ p.display_name or p.name }}",
{% endfor %}
{% for q in queues %} "{{ q.extension or q.name }}": "🔁 {{ q.name }}",
{% endfor %}
{% for g in ring_groups %} "{{ g.extension }}": "👥 {{ g.name }}",
{% endfor %}
{% for i in ivrs %} "{{ i.extension }}": "🔀 {{ i.name }}",
{% endfor %}
};

const DEST_KEYS = {
  extension: [{% for p in peers %}"{{ p.name }}",{% endfor %}],
  queue: [{% for q in queues %}"{{ q.extension or q.name }}",{% endfor %}],
  ring_group: [{% for g in ring_groups %}"{{ g.extension }}",{% endfor %}],
  ivr: [{% for i in ivrs %}"{{ i.extension }}",{% endfor %}],
  announcement: [{% for a in announcements %}"{{ a.name }}",{% endfor %}],
  time_condition: [{% for t in time_conditions %}"{{ t.name }}",{% endfor %}],
  hangup: ["hangup"],
};

const TYPE_LABELS = {
  extension: '📞 Ramal', queue: '🔁 Fila', ring_group: '👥 Grupo',
  ivr: '🔀 URA', announcement: '📢 Anúncio',
  time_condition: '⏰ Cond. Horário', hangup: '❌ Desligar'
};

function buildStepIndicators() {
  const c = document.getElementById('stepIndicator');
  c.innerHTML = STEPS.map((s,i) => {
    const dot = `<div class="step-dot pending" id="dot${s.num}">${s.num}</div>`;
    const lbl = `<div class="step-label">${s.label}</div>`;
    const conn = i < STEPS.length-1 ? `<div class="step-connector" id="cn${s.num}"></div>` : '';
    return `<div style="display:flex;flex-direction:column;align-items:center">${dot}${lbl}</div>${conn}`;
  }).join('');
}
buildStepIndicators();

function goStep(n) {
  currentStep = n;
  document.querySelectorAll('.wizard-step').forEach(el => el.classList.remove('active'));
  document.querySelector(`[data-step="${n}"]`).classList.add('active');
  STEPS.forEach(s => {
    const d = document.getElementById('dot'+s.num);
    d.className = 'step-dot ' + (s.num < n ? 'done' : s.num === n ? 'active-dot' : 'pending');
    const cn = document.getElementById('cn'+s.num);
    if (cn) cn.className = 'step-connector' + (s.num < n ? ' done' : '');
  });
  if (n === 3) buildReview();
}

function avancarStep1() {
  const name = document.getElementById('f_name').value.trim();
  if (!name) {
    alert('Informe o nome da rota');
    document.getElementById('f_name').focus();
    return;
  }
  goStep(2);
}

function avancarStep2() {
  const dest = document.getElementById('f_destination').value.trim();
  if (!dest) {
    alert('Selecione um destino');
    return;
  }
  goStep(3);
}

function atualizarDestSelect() {
  const type = document.getElementById('destType').value;
  const keys = DEST_KEYS[type] || [];
  const sel = document.getElementById('destPick');
  if (type === 'hangup') {
    sel.innerHTML = '<option value="hangup">❌ Desligar chamada</option>';
    document.getElementById('f_destination').value = 'hangup';
    return;
  }
  sel.innerHTML = keys.map(k => {
    const label = DEST_OPTIONS[k] || k;
    return '<option value="' + k + '">' + label + '</option>';
  }).join('') || '<option value="">Nenhum disponível</option>';
  if (keys.length === 1) document.getElementById('f_destination').value = keys[0];
}

function buildReview() {
  const fd = new FormData(document.getElementById('wizardForm'));
  const destType = fd.get('destination_type') || 'extension';
  const destVal = fd.get('destination') || '—';
  const typeLabel = TYPE_LABELS[destType] || destType;
  const trunkLabel = fd.get('trunk_name') || '(todos)';

  const rows = [
    ['Nome', fd.get('name') || '?'],
    ['DID', fd.get('did') || '(qualquer)'],
    ['Tronco', trunkLabel],
    ['Prioridade', fd.get('priority') || '0'],
    ['CallerID', fd.get('callerid') || '(qualquer)'],
    ['Destino', typeLabel + ' → ' + destVal],
    ['Gravação', fd.get('recording') === 'on' ? '✅ Sim' : '❌ Não'],
  ];
  document.getElementById('reviewTable').innerHTML = rows.map(r =>
    '<tr><td style="font-weight:600;width:140px;padding:6px 10px">'+r[0]+'</td><td style="padding:6px 10px">'+r[1]+'</td></tr>'
  ).join('');
}
</script>
{% endblock %}