{% extends "base.html" %}
{% block title %}Diagnóstico de Rede{% endblock %}
{% set active = "network" %}
{% block content %}
<div class="container-fluid mt-3">
  <div class="row mb-3">
    <div class="col">
      <h4>🔧 Diagnóstico de Rede</h4>
    </div>
  </div>
  <div class="row g-3">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header d-flex justify-content-between">
          <span>📶 Ping</span>
          <div class="input-group input-group-sm" style="max-width:300px">
            <input type="text" class="form-control" id="pingHost" value="8.8.8.8">
            <button class="btn btn-primary" onclick="runPing()">Pingar</button>
          </div>
        </div>
        <div class="card-body"><pre id="pingOutput" class="mb-0" style="font-size:12px;max-height:200px;overflow-y:auto;">Clique em Pingar</pre></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <div class="card-header d-flex justify-content-between">
          <span>🛤️ Traceroute</span>
          <div class="input-group input-group-sm" style="max-width:300px">
            <input type="text" class="form-control" id="traceHost" value="8.8.8.8">
            <button class="btn btn-primary" onclick="runTrace()">Traçar</button>
          </div>
        </div>
        <div class="card-body"><pre id="traceOutput" class="mb-0" style="font-size:12px;max-height:200px;overflow-y:auto;">Clique em Traçar</pre></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <div class="card-header d-flex justify-content-between">
          <span>📞 SIP Ping</span>
          <div class="input-group input-group-sm" style="max-width:300px">
            <input type="text" class="form-control" id="sipHost" value="8.8.8.8">
            <button class="btn btn-primary" onclick="runSipPing()">SIP OPTIONS</button>
          </div>
        </div>
        <div class="card-body"><pre id="sipOutput" class="mb-0" style="font-size:12px;max-height:200px;overflow-y:auto;">Clique em SIP OPTIONS</pre></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <div class="card-header d-flex justify-content-between">
          <span>🌐 DNS</span>
          <div class="input-group input-group-sm" style="max-width:300px">
            <input type="text" class="form-control" id="dnsHost" value="sisnetcall.sisnetsul.com.br">
            <button class="btn btn-primary" onclick="runDns()">Consultar</button>
          </div>
        </div>
        <div class="card-body"><pre id="dnsOutput" class="mb-0" style="font-size:12px;max-height:200px;overflow-y:auto;">Clique em Consultar</pre></div>
      </div>
    </div>
  </div>
</div>
<script>
async function runPing() {
  const host = document.getElementById('pingHost').value;
  const out = document.getElementById('pingOutput');
  out.textContent = 'Pingando ' + host + '...';
  const r = await fetch('/app/network/api/ping?host=' + encodeURIComponent(host));
  const d = await r.json();
  out.textContent = d.output || d.error || 'Sem resposta';
}
async function runTrace() {
  const host = document.getElementById('traceHost').value;
  const out = document.getElementById('traceOutput');
  out.textContent = 'Tracando ' + host + '...';
  const r = await fetch('/app/network/api/traceroute?host=' + encodeURIComponent(host));
  const d = await r.json();
  out.textContent = d.output || d.error || 'Sem resposta';
}
async function runSipPing() {
  const host = document.getElementById('sipHost').value;
  const out = document.getElementById('sipOutput');
  out.textContent = 'SIP OPTIONS para ' + host + '...';
  const r = await fetch('/app/network/api/sip-ping?host=' + encodeURIComponent(host));
  const d = await r.json();
  out.textContent = d.output || d.error || 'Sem resposta';
}
async function runDns() {
  const host = document.getElementById('dnsHost').value;
  const out = document.getElementById('dnsOutput');
  out.textContent = 'Consultando ' + host + '...';
  const r = await fetch('/app/network/api/dns?host=' + encodeURIComponent(host));
  const d = await r.json();
  out.textContent = d.output || d.error || 'Sem resposta';
}
</script>
{% endblock %}