{% extends "base.html" %}
{% from "pbx/partials/destination_selector.html" import destination_selector %}
{% block title %}{{ "Editar" if peer else "Novo" }} Ramal<script>
function toggleDest(prefix) {
  const fieldId = prefix === 'busy' ? 'busyDestField' : 
                  prefix === 'unavail' ? 'unavailDestField' : 'noanswerDestField';
  const selName = prefix === 'busy' ? 'busy_destination_type' : 
                  prefix === 'unavail' ? 'unavailable_destination_type' : 'noanswer_destination_type';
  const sel = document.querySelector(`select[name="${selName}"]`);
  const field = document.getElementById(fieldId);
  if (sel) field.style.display = sel.value === 'hangup' ? 'none' : 'block';
}
</script>


<script>
function toggleNotif() {
  var sel = document.querySelector('select[name="notification_method"]');
  var field = document.getElementById('notifTargetField');
  var label = document.getElementById('notifTargetLabel');
  if (sel.value === 'nenhum') {
    field.style.display = 'none';
  } else {
    field.style.display = 'block';
    if (sel.value === 'email') label.innerText = 'Email';
    else if (sel.value === 'whatsapp') label.innerText = 'Telefone (WhatsApp)';
    else label.innerText = 'Chat ID / Username (Telegram)';
  }
}
</script>

{% endblock %}
{% block content %}
<div class="mb-3">
  <h4>{{ "Editar Ramal" if peer else "Novo Ramal" }}</h4>
</div>

<form method="post" action="/app/pbx/peers/save" class="row g-3">
  {% if peer %}
  <input type="hidden" name="id" value="{{ peer.id }}">
  {% endif %}

  <!-- Identificacao -->
  <div class="col-md-4">
    <label class="form-label">Ramal *</label>
    <input type="text" name="name" class="form-control" value="{{ peer.name if peer else '' }}" placeholder="Ex: 1001" required>
  </div>
  <div class="col-md-4">
    <label class="form-label">Display Name</label>
    <input type="text" name="display_name" class="form-control" value="{{ peer.display_name if peer else '' }}" placeholder="Ex: Joao Silva">
  </div>
  <div class="col-md-4">
    <label class="form-label">Senha</label>
    <input type="text" name="secret" class="form-control" value="{{ peer.secret if peer else '' }}" placeholder="Deixe em branco para auto-gerar">
  </div>

  <!-- Conexao -->
  <div class="col-md-3">
    <label class="form-label">Tipo</label>
    <select name="peer_type" class="form-select">
      <option value="extension" {% if peer and peer.peer_type=="extension" %}selected{% endif %}>Ramal</option>
      <option value="trunk" {% if peer and peer.peer_type=="trunk" %}selected{% endif %}>Tronco</option>
    </select>
  </div>
  <div class="col-md-3">
    <label class="form-label">Transporte</label>
    <select name="transport" class="form-select">
      <option value="udp" {% if peer and peer.transport=="udp" %}selected{% endif %}>UDP</option>
      <option value="tcp" {% if peer and peer.transport=="tcp" %}selected{% endif %}>TCP</option>
      <option value="tls" {% if peer and peer.transport=="tls" %}selected{% endif %}>TLS</option>
      <option value="ws" {% if peer and peer.transport=="ws" %}selected{% endif %}>WebSocket</option>
    </select>
  </div>
  <div class="col-md-3">
    <label class="form-label">Host</label>
    <input type="text" name="host" class="form-control" value="{{ peer.host if peer else 'dynamic' }}">
  </div>
  <div class="col-md-2">
    <label class="form-label">&nbsp;</label>
    <div class="form-check mt-2">
      <input class="form-check-input" type="checkbox" name="force_dns" id="force_dns" value="1" {% if peer and peer.force_dns %}checked{% endif %}>
      <label class="form-check-label" for="force_dns">🔒 Forçar DNS</label>
    </div>
  </div>
  <div class="col-md-3">
    <label class="form-label">Contexto</label>
    <input type="text" name="context" class="form-control" value="{{ peer.context if peer else 'from-internal' }}">
  </div>

  <!-- Audio -->
  <div class="col-md-4">
    <label class="form-label">Codecs (allow)</label>
    <input type="text" name="allow" class="form-control" value="{{ peer.allow if peer else 'ulaw,alaw' }}">
  </div>
  <div class="col-md-4">
    <label class="form-label">DTMF</label>
    <select name="dtmf_mode" class="form-select">
      <option value="rfc4733" {% if peer and peer.dtmf_mode=="rfc4733" %}selected{% endif %}>RFC 4733</option>
      <option value="info" {% if peer and peer.dtmf_mode=="info" %}selected{% endif %}>SIP INFO</option>
      <option value="inband" {% if peer and peer.dtmf_mode=="inband" %}selected{% endif %}>In-band</option>
    </select>
  </div>
  <div class="col-md-2">
    <label class="form-label">Qualify (s)</label>
    <input type="number" name="qualify_frequency" class="form-control" value="{{ peer.qualify_frequency if peer else 60 }}" min="10" step="10">
  </div>
  <div class="col-md-2">
    <label class="form-label">Max Contacts</label>
    <input type="number" name="max_contacts" class="form-control" value="{{ peer.max_contacts if peer else 1 }}" min="1">
  </div>

  <!-- Toggles -->
  <div class="col-md-2">
    <div class="form-check mt-4">
      <input type="checkbox" name="direct_media" class="form-check-input" id="dm" {% if peer and peer.direct_media %}checked{% endif %}>
      <label class="form-check-label" for="dm">Direct Media</label>
    </div>
  </div>
  <div class="col-md-2">
    <div class="form-check mt-4">
      <input type="checkbox" name="enabled" class="form-check-input" id="en" {% if peer == None or peer.enabled %}checked{% endif %}>
      <label class="form-check-label" for="en">Ativo</label>
    </div>
  </div>

  <!-- CallerID -->
  <div class="col-12 mt-2">
    <hr class="my-2">
  </div>
  <div class="col-md-6">
    <label class="form-label">CallerID (identificador de chamada)</label>
    <input type="text" name="callerid" class="form-control" value="{{ peer.callerid if peer else '' }}" placeholder="Ex: 0880">
    <small class="text-muted">Se preenchido, substitui o callerid padrao</small>
  </div>
  <div class="col-md-6">
    <label class="form-label">AccountCode (departamento)</label>
    <input type="text" name="accountcode" class="form-control" value="{{ peer.accountcode if peer else '' }}" placeholder="Ex: VENDAS">
    <small class="text-muted">Usado para classificar chamadas por departamento</small>
  </div>

  <div class="col-md-3">
    <div class="form-check mt-4">
      <input type="checkbox" name="webrtc" class="form-check-input" id="wrtc" {% if peer and peer.webrtc %}checked{% endif %}>
      <label class="form-check-label" for="wrtc">🌐 WebRTC (navegador)</label>
    </div>
  </div>
  <!-- Recording Options -->
  <div class="col-12 mt-2">
    <hr class="my-2">
    <h6 class="mb-1 text-muted">🎙️ Gravação de Chamadas</h6>
  </div>
  <div class="col-md-8">
    <div class="btn-group flex-wrap" role="group" aria-label="Recording options">
      <input type="checkbox" class="btn-check" id="rec_in_ext" name="rec_in_ext" value="always" autocomplete="off"
        {% if peer and peer.rec_in_ext == "always" %}checked{% endif %}>
      <label class="btn btn-outline-primary rounded-pill px-3" for="rec_in_ext">📥 Ext. Entrando</label>

      <input type="checkbox" class="btn-check" id="rec_in_int" name="rec_in_int" value="always" autocomplete="off"
        {% if peer and peer.rec_in_int == "always" %}checked{% endif %}>
      <label class="btn btn-outline-primary rounded-pill px-3" for="rec_in_int">🏠 Int. Entrando</label>

      <input type="checkbox" class="btn-check" id="rec_out_ext" name="rec_out_ext" value="always" autocomplete="off"
        {% if peer and peer.rec_out_ext == "always" %}checked{% endif %}>
      <label class="btn btn-outline-primary rounded-pill px-3" for="rec_out_ext">📤 Ext. Saindo</label>

      <input type="checkbox" class="btn-check" id="rec_out_int" name="rec_out_int" value="always" autocomplete="off"
        {% if peer and peer.rec_out_int == "always" %}checked{% endif %}>
      <label class="btn btn-outline-primary rounded-pill px-3" for="rec_out_int">🏠 Int. Saindo</label>

      <input type="checkbox" class="btn-check" id="rec_ondemand" name="rec_ondemand" value="enabled" autocomplete="off"
        {% if peer and peer.rec_ondemand == "enabled" %}checked{% endif %}>
      <label class="btn btn-outline-warning rounded-pill px-3" for="rec_ondemand">🔘 Sob Demanda</label>
    </div>
  </div>

  <!-- Voicemail -->
  <div class="col-12 mt-2">
    <hr class="my-2">
    <h6 class="mb-1 text-muted">📧 Correio de Voz</h6>
  </div>
  <div class="col-md-3">
    <div class="form-check mt-2">
      <input type="checkbox" name="voicemail" class="form-check-input" id="vm" {% if peer and peer.voicemail %}checked{% endif %}>
      <label class="form-check-label" for="vm">Ativar Caixa Postal</label>
    </div>
  </div>
  <div class="col-md-4">
    <label class="form-label">Email para Notificação</label>
    <input type="email" name="voicemail_email" class="form-control" value="{{ peer.voicemail_email if peer else '' }}" placeholder="ramal@exemplo.com">
  </div>
  <div class="col-md-3">
    <label class="form-label">Senha da Caixa Postal</label>
    <input type="password" name="voicemail_password" class="form-control" value="{{ peer.voicemail_password if peer else '' }}" placeholder="****">
  </div>

  <!-- Recursos PBX -->
  <div class="col-12 mt-2">
    <hr class="my-2">
    <h6 class="mb-1 text-muted">🔧 Recursos PBX</h6>
  </div>
  <div class="col-md-3">
    <label class="form-label">Callgroup</label>
    <input type="text" name="callgroup" class="form-control" value="{{ peer.callgroup if peer else '' }}" placeholder="Ex: 1,2">
  </div>
  <div class="col-md-3">
    <label class="form-label">Pickupgroup</label>
    <input type="text" name="pickupgroup" class="form-control" value="{{ peer.pickupgroup if peer else '' }}" placeholder="Ex: 1">
  </div>
  <div class="col-md-3">
    <label class="form-label">Call Waiting</label>
    <select name="call_waiting" class="form-select">
      <option value="enabled" {% if peer and peer.call_waiting=="enabled" %}selected{% endif %}>Ativado</option>
      <option value="disabled" {% if peer and peer.call_waiting=="disabled" %}selected{% endif %}>Desativado</option>
    </select>
  </div>
  <div class="col-md-3">
    <label class="form-label">Qualify Timeout</label>
    <input type="number" step="0.1" name="qualify_timeout" class="form-control" value="{{ peer.qualify_timeout if peer else 3.0 }}" placeholder="3.0">
  </div>

  <!-- DID / CID -->
  <div class="col-md-4">
    <label class="form-label">DID Direto</label>
    <input type="text" name="direct_did" class="form-control" value="{{ peer.direct_did if peer else '' }}" placeholder="Ex: 5133330000">
  </div>
  <div class="col-md-4">
    <label class="form-label">Outbound CID</label>
    <input type="text" name="outbound_cid" class="form-control" value="{{ peer.outbound_cid if peer else '' }}" placeholder="Ex: 5133330000">
  </div>

  <!-- ACL -->
  <div class="col-md-4">
    <label class="form-label">Deny (ACL)</label>
    <input type="text" name="deny" class="form-control" value="{{ peer.deny if peer else '' }}" placeholder="Ex: 0.0.0.0/0.0.0.0">
  </div>
  <div class="col-md-4">
    <label class="form-label">Permit (ACL)</label>
    <input type="text" name="permit" class="form-control" value="{{ peer.permit if peer else '' }}" placeholder="Ex: 192.168.0.0/255.255.0.0">
  </div>

  <!-- Destinos de Fallback -->
  <div class="col-12 mt-2">
    <hr class="my-2">
    <h6 class="mb-1 text-muted">🎯 Destinos de Fallback</h6>
    <p class="text-muted small mb-1">Configure para onde a chamada vai quando o ramal está ocupado, indisponível ou não atende.</p>
  </div>
  <div class="col-md-3">
    <label class="form-label">⏱ Ring Time (s)</label>
    <input type="number" name="ringtime" class="form-control" value="{{ peer.ringtime if peer else 30 }}" min="5" max="120">
  </div>

  <div class="col-12"><hr class="my-1"><h6>🚫 Destinos de Desvio</h6></div>

  <div class="col-md-4">
    {{ destination_selector(
      all_destinations=all_destinations,
      selected_type=peer.busy_destination_type if peer else '',
      selected_dest=peer.busy_destination if peer else '',
      field_name="busy_destination",
      label="🚫 Se Ocupado"
    ) }}
  </div>

  <div class="col-md-4">
    {{ destination_selector(
      all_destinations=all_destinations,
      selected_type=peer.unavailable_destination_type if peer else '',
      selected_dest=peer.unavailable_destination if peer else '',
      field_name="unavailable_destination",
      label="📴 Se Indisponível"
    ) }}
  </div>

  <div class="col-md-4">
    {{ destination_selector(
      all_destinations=all_destinations,
      selected_type=peer.noanswer_destination_type if peer else '',
      selected_dest=peer.noanswer_destination if peer else '',
      field_name="noanswer_destination",
      label="⏳ Se Não Atender"
    ) }}
  </div>

  <!-- Observacoes -->
  <div class="col-12 mt-2">
    <hr class="my-2">
  </div>

  <!-- Notificacao de Credenciais -->
  <div class="col-12 mt-2">
    <hr class="my-2">
    <h6 class="mb-1 text-muted">📬 Notificacao de Credenciais</h6>
    <p class="text-muted small mb-1">Envia as credenciais ao criar o ramal. (Alteracoes nao reenviam.)</p>
  </div>
  <div class="col-md-3">
    <label class="form-label">Metodo de Envio</label>
    <select name="notification_method" class="form-select" onchange="toggleNotif()">
      <option value="nenhum" {% if not peer or peer.notification_method=="nenhum" %}selected{% endif %}>Nenhum</option>
      <option value="email" {% if peer and peer.notification_method=="email" %}selected{% endif %}>Email</option>
      <option value="whatsapp" {% if peer and peer.notification_method=="whatsapp" %}selected{% endif %}>WhatsApp</option>
      <option value="telegram" {% if peer and peer.notification_method=="telegram" %}selected{% endif %}>Telegram</option>
    </select>
  </div>
  <div class="col-md-3" id="notifTargetField">
    <label class="form-label" id="notifTargetLabel">Email / Telefone / Chat ID</label>
    <input type="text" name="notification_target" class="form-control" value="{{ peer.notification_email or peer.notification_phone or peer.notification_telegram or '' }}" placeholder="email@exemplo.com">
    <small class="text-muted">Preencha conforme o metodo escolhido.</small>
  </div>
  <div class="col-12">
    <label class="form-label">Mensagem de Boas-Vindas (opcional)</label>
    <textarea name="welcome_message" class="form-control" rows="2">{{ peer.welcome_message if peer else '' }}</textarea>
  </div>

  <div class="col-12">
    <label class="form-label">Observacoes</label>
    <textarea name="notes" class="form-control" rows="2">{{ peer.notes if peer else '' }}</textarea>
  </div>

  <div class="col-12 mt-3">
    <button type="submit" class="btn btn-primary px-4">Salvar</button>
    <a href="/app/pbx/peers" class="btn btn-outline-secondary px-4">Cancelar</a>
  </div>
</form>
<script>
function toggleDest(prefix) {
  const fieldId = prefix === 'busy' ? 'busyDestField' : 
                  prefix === 'unavail' ? 'unavailDestField' : 'noanswerDestField';
  const selName = prefix === 'busy' ? 'busy_destination_type' : 
                  prefix === 'unavail' ? 'unavailable_destination_type' : 'noanswer_destination_type';
  const sel = document.querySelector(`select[name="${selName}"]`);
  const field = document.getElementById(fieldId);
  if (sel) field.style.display = sel.value === 'hangup' ? 'none' : 'block';
}
</script>


<script>
function toggleNotif() {
  var sel = document.querySelector('select[name="notification_method"]');
  var field = document.getElementById('notifTargetField');
  var label = document.getElementById('notifTargetLabel');
  if (sel.value === 'nenhum') {
    field.style.display = 'none';
  } else {
    field.style.display = 'block';
    if (sel.value === 'email') label.innerText = 'Email';
    else if (sel.value === 'whatsapp') label.innerText = 'Telefone (WhatsApp)';
    else label.innerText = 'Chat ID / Username (Telegram)';
  }
}
</script>

{% endblock %}