@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0">MS Teams Integration</h4>
        <div class="text-secondary small mt-1">Configure the Microsoft Teams Direct Routing trunk and manage Teams-enabled extensions.</div>
    </div>
    <div class="mt-2 mt-md-0">
        <a href="/trunks/teams/certificates" class="btn btn-outline-secondary btn-sm">
            <i data-lucide="shield" style="width:14px;height:14px;"></i> Certificates
        </a>
        @if($config && $config->enabled)
            <span class="badge bg-success">Enabled</span>
        @else
            <span class="badge bg-secondary">Disabled</span>
        @endif
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif
@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0 ps-3">
            @foreach ($errors->all() as $e)
                <li>{{ $e }}</li>
            @endforeach
        </ul>
    </div>
@endif


<div class="card mb-4">
    <div class="card-header d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-2">
            <i data-lucide="activity" style="width:16px;height:16px;"></i>
            <span class="fw-semibold">Connectivity Status</span>
        </div>
        <button type="button" class="btn btn-outline-primary btn-sm" onclick="validateConnectivity()">
            <i data-lucide="refresh-cw" style="width:14px;height:14px;"></i> Test Connectivity
        </button>
    </div>
    <div class="card-body">
        <div class="row" id="healthDashboard">
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">DNS Resolution</div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-secondary" id="dnsStatus">Unknown</span>
                        <small class="text-muted" id="dnsMessage">Not checked</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">TLS Connection</div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-secondary" id="tlsStatus">Unknown</span>
                        <small class="text-muted" id="tlsMessage">Not checked</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">SIP OPTIONS</div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-secondary" id="sipOptionsStatus">Unknown</span>
                        <small class="text-muted" id="sipOptionsMessage">Not checked</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">SBC Reachable</div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-secondary" id="sbcStatus">Unknown</span>
                        <small class="text-muted" id="sbcMessage">Not checked</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if($defaultCert)
<div class="card mb-4">
    <div class="card-header d-flex align-items-center gap-2">
        <i data-lucide="shield" style="width:16px;height:16px;"></i>
        <span class="fw-semibold">Certificate Status</span>
        @if($defaultCert->status === 'active')
            <span class="badge bg-success">Valid</span>
        @elseif($defaultCert->status === 'expiring_soon')
            <span class="badge bg-warning">Expiring Soon</span>
        @elseif($defaultCert->status === 'expired')
            <span class="badge bg-danger">Expired</span>
        @else
            <span class="badge bg-secondary">{{ $defaultCert->status }}</span>
        @endif
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-4">
                <div class="text-secondary small mb-1">Subject</div>
                <div class="font-monospace small">{{ $defaultCert->subject ?? '—' }}</div>
            </div>
            <div class="col-md-4">
                <div class="text-secondary small mb-1">Issuer</div>
                <div class="font-monospace small">{{ $defaultCert->issuer ?? '—' }}</div>
            </div>
            <div class="col-md-4">
                <div class="text-secondary small mb-1">Expires</div>
                <div class="small">
                    @if($defaultCert->valid_to)
                        {{ \Carbon\Carbon::parse($defaultCert->valid_to)->format('M d, Y') }}
                        @if(\Carbon\Carbon::parse($defaultCert->valid_to)->diffInDays(now()) < 30)
                            <span class="text-warning">({{ \Carbon\Carbon::parse($defaultCert->valid_to)->diffInDays(now()) }} days)</span>
                        @endif
                    @else
                        —
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endif


<div class="card mb-4">
    <div class="card-header d-flex align-items-center gap-2">
        <i data-lucide="bar-chart-2" style="width:16px;height:16px;"></i>
        <span class="fw-semibold">Call Statistics (24h)</span>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">Inbound Calls</div>
                    <div class="fw-bold" id="inboundCalls">—</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">Outbound Calls</div>
                    <div class="fw-bold" id="outboundCalls">—</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">Concurrent Calls</div>
                    <div class="fw-bold" id="concurrentCalls">—</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-3 border rounded">
                    <div class="text-secondary small mb-1">Last Call</div>
                    <div class="small" id="lastCall">—</div>
                </div>
            </div>
        </div>
    </div>
</div>


{{-- TEAMS USERS STATUS --}}
<div class="card mb-4">
    <div class="card-header d-flex align-items-center gap-2">
        <i data-lucide="users" style="width:16px;height:16px;"></i>
        <span class="fw-semibold">Teams Users Status</span>
        <span class="badge bg-secondary ms-1">{{ count($extensions) }}</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>Number</th>
                        <th>Extension</th>
                        <th>Description</th>
                        <th>SIP Status</th>
                        <th>IP Address</th>
                    </tr>
                </thead>
                <tbody id="teamsUsersTable">
                    <tr>
                        <td colspan="5" class="text-center text-secondary py-4">Loading...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>


{{-- DIRECT ROUTING DIAGNOSTICS --}}
<div class="card mb-4">
    <div class="card-header d-flex align-items-center gap-2">
        <i data-lucide="activity" style="width:16px;height:16px;"></i>
        <span class="fw-semibold">Direct Routing Diagnostics</span>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-3">
                <button type="button" class="btn btn-outline-primary btn-sm w-100" onclick="testDns()">
                    <i data-lucide="globe" style="width:14px;height:14px;"></i> Test DNS
                </button>
                <div class="small text-muted mt-1" id="dnsResult">Not tested</div>
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-outline-primary btn-sm w-100" onclick="testTls()">
                    <i data-lucide="lock" style="width:14px;height:14px;"></i> Test TLS
                </button>
                <div class="small text-muted mt-1" id="tlsResult">Not tested</div>
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-outline-primary btn-sm w-100" onclick="testOptions()">
                    <i data-lucide="phone" style="width:14px;height:14px;"></i> Test OPTIONS
                </button>
                <div class="small text-muted mt-1" id="optionsResult">Not tested</div>
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-outline-primary btn-sm w-100" onclick="testRouting()">
                    <i data-lucide="route" style="width:14px;height:14px;"></i> Test Routing
                </button>
                <div class="small text-muted mt-1" id="routingResult">Not tested</div>
            </div>
        </div>
    </div>
</div>


<div class="card mb-4">
    <div class="card-header d-flex align-items-center gap-2">
        <i data-lucide="settings" style="width:16px;height:16px;"></i>
        <span class="fw-semibold">Trunk Configuration</span>
    </div>
    <div class="card-body">
        <form method="POST" action="/trunks/teams">
            @csrf
            @method('PUT')
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Trunk Endpoint (PJSIP ID)</label>
                    <input type="text" name="trunk_endpoint" class="form-control" value="{{ old('trunk_endpoint', $config->trunk_endpoint ?? '') }}" placeholder="e.g. 0179619839">
                    <small class="text-muted">The PJSIP endpoint ID for the Teams SBC trunk.</small>
                </div>
                <div class="col-md-4">
                    <label class="form-label">SIP Domain</label>
                    <input type="text" name="sip_domain" class="form-control" value="{{ old('sip_domain', $config->sip_domain ?? 'sip.pstnhub.microsoft.com') }}">
                    <small class="text-muted">Microsoft Teams SBC domain.</small>
                </div>
                <div class="col-md-2">
                    <label class="form-label">SIP Port</label>
                    <input type="number" name="sip_port" class="form-control" value="{{ old('sip_port', $config->sip_port ?? 5061) }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Transport</label>
                    <select name="sip_transport" class="form-select">
                        <option value="sips" {{ (old('sip_transport', $config->sip_transport ?? 'sips')) === 'sips' ? 'selected' : '' }}>SIPS (TLS)</option>
                        <option value="sip" {{ (old('sip_transport', $config->sip_transport ?? 'sips')) === 'sip' ? 'selected' : '' }}>SIP (UDP/TCP)</option>
                    </select>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-3">
                    <label class="form-label">DID Prefix</label>
                    <input type="text" name="did_prefix" class="form-control" value="{{ old('did_prefix', $config->did_prefix ?? '') }}" placeholder="e.g. +2741450">
                    <small class="text-muted">Prepended to ext number for Teams E.164 URI.</small>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Country Code</label>
                    <input type="text" name="country_code" class="form-control" value="{{ old('country_code', $config->country_code ?? '') }}" placeholder="e.g. +27">
                    <small class="text-muted">Prefix Teams uses for incoming calls.</small>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Dial Timeout (s)</label>
                    <input type="number" name="dial_timeout" class="form-control" value="{{ old('dial_timeout', $config->dial_timeout ?? 30) }}">
                </div>
                <div class="col-md-2 d-flex align-items-center pt-4">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="ring_local_sip" value="1" id="ringLocalSip"
                            {{ old('ring_local_sip', $config->ring_local_sip ?? 1) ? 'checked' : '' }}>
                        <label class="form-check-label" for="ringLocalSip">Ring SIP Phone</label>
                    </div>
                </div>
                <div class="col-md-2 d-flex align-items-center pt-4">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="enabled" value="1" id="teamsEnabled"
                            {{ old('enabled', $config->enabled ?? 0) ? 'checked' : '' }}>
                        <label class="form-check-label" for="teamsEnabled">Enabled</label>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-2 d-flex align-items-center pt-4">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="media_bypass" value="1" id="mediaBypass"
                            {{ old('media_bypass', $config->media_bypass ?? 0) ? 'checked' : '' }}>
                        <label class="form-check-label" for="mediaBypass">Media Bypass</label>
                    </div>
                </div>
            </div>

            
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Failover SBC Endpoint</label>
                    <input type="text" name="failover_sbc_endpoint" class="form-control" value="{{ old('failover_sbc_endpoint', $config->failover_sbc_endpoint ?? '') }}" placeholder="e.g. 0179619840">
                    <small class="text-muted">Secondary SBC endpoint for failover.</small>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Failover SIP Domain</label>
                    <input type="text" name="failover_sip_domain" class="form-control" value="{{ old('failover_sip_domain', $config->failover_sip_domain ?? '') }}" placeholder="e.g. sip.pstnhub.microsoft.com">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Failover SIP Port</label>
                    <input type="number" name="failover_sip_port" class="form-control" value="{{ old('failover_sip_port', $config->failover_sip_port ?? 5061) }}">
                </div>
            </div>

            
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Emergency Location ID</label>
                    <input type="text" name="emergency_location_id" class="form-control" value="{{ old('emergency_location_id', $config->emergency_location_id ?? '') }}" placeholder="e.g. loc-12345">
                    <small class="text-muted">Microsoft Teams emergency location ID.</small>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Emergency DID</label>
                    <input type="text" name="emergency_did" class="form-control" value="{{ old('emergency_did', $config->emergency_did ?? '') }}" placeholder="e.g. +27115551234">
                    <small class="text-muted">DID for emergency calls.</small>
                </div>
            </div>

            
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Voice Routing Policy</label>
                    <input type="text" name="voice_routing_policy" class="form-control" value="{{ old('voice_routing_policy', $config->voice_routing_policy ?? '') }}" placeholder="e.g. GlobalPolicy">
                    <small class="text-muted">Microsoft Teams voice routing policy name.</small>
                </div>
                <div class="col-md-4">
                    <label class="form-label">PSTN Usage</label>
                    <input type="text" name="pstn_usage" class="form-control" value="{{ old('pstn_usage', $config->pstn_usage ?? '') }}" placeholder="e.g. GlobalPSTN">
                    <small class="text-muted">Microsoft Teams PSTN usage record.</small>
                </div>
            </div>

            
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Tenant ID</label>
                    <input type="text" name="tenant_id" class="form-control" value="{{ old('tenant_id', $config->tenant_id ?? '') }}" placeholder="e.g. 12345678-1234-1234-1234-123456789012">
                    <small class="text-muted">Microsoft 365 tenant ID.</small>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Tenant Domain</label>
                    <input type="text" name="tenant_domain" class="form-control" value="{{ old('tenant_domain', $config->tenant_domain ?? '') }}" placeholder="e.g. contoso.onmicrosoft.com">
                    <small class="text-muted">Microsoft 365 tenant domain.</small>
                </div>
            </div>

            
            <div class="row mb-3">
                <div class="col-md-4">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="federation_enabled" value="1" id="federationEnabled"
                            {{ old('federation_enabled', $config->federation_enabled ?? 0) ? 'checked' : '' }}>
                        <label class="form-check-label" for="federationEnabled">Federation Enabled</label>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Federation Domain</label>
                    <input type="text" name="federation_domain" class="form-control" value="{{ old('federation_domain', $config->federation_domain ?? '') }}" placeholder="e.g. federated.contoso.com">
                </div>
            </div>

            <div class="text-end">
                <button type="submit" class="btn btn-primary btn-sm">Save Configuration</button>
            </div>
        </form>
    </div>
</div>


<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-2">
            <i data-lucide="users" style="width:16px;height:16px;"></i>
            <span class="fw-semibold">Teams-Enabled Extensions</span>
            <span class="badge bg-secondary ms-1">{{ count($extensions) }}</span>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>Number</th>
                        <th>Extension</th>
                        <th>Description</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($extensions as $ext)
                    <tr>
                        <td class="font-monospace fw-semibold">{{ $ext->number }}</td>
                        <td>{{ ltrim($ext->number, '+') }}</td>
                        <td>{{ $ext->description ?? '—' }}</td>
                        <td class="text-end">
                            <form method="POST" action="/trunks/teams/extensions/{{ $ext->id }}" class="d-inline" onsubmit="return confirm('Remove this extension from Teams?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-outline-danger btn-sm">Delete</button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center text-secondary py-4">No Teams extensions configured. Add one below.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="p-3 border-top">
            <form method="POST" action="/trunks/teams/extensions" class="d-flex align-items-end gap-3">
                @csrf
                <div>
                    <label class="form-label">Extension Number</label>
                    <input type="text" name="number" class="form-control form-control-sm" placeholder="e.g. 1359" style="width:140px;">
                </div>
                <div>
                    <label class="form-label">Description</label>
                    <input type="text" name="description" class="form-control form-control-sm" placeholder="e.g. John Smith" style="width:200px;">
                </div>
                <button type="submit" class="btn btn-primary btn-sm">+ Add Extension</button>
            </form>
        </div>
    </div>
</div>

<script>
function validateConnectivity() {
    const badges = {
        dnsStatus: document.getElementById('dnsStatus'),
        tlsStatus: document.getElementById('tlsStatus'),
        sipOptionsStatus: document.getElementById('sipOptionsStatus'),
        sbcStatus: document.getElementById('sbcStatus'),
    };
    const messages = {
        dnsMessage: document.getElementById('dnsMessage'),
        tlsMessage: document.getElementById('tlsMessage'),
        sipOptionsMessage: document.getElementById('sipOptionsMessage'),
        sbcMessage: document.getElementById('sbcMessage'),
    };

    Object.values(badges).forEach(b => {
        b.className = 'badge bg-secondary';
        b.textContent = 'Checking...';
    });
    Object.values(messages).forEach(m => m.textContent = 'Checking...');

    fetch('/trunks/teams/validate-connectivity')
        .then(r => r.json())
        .then(data => {
            if (data.dns) {
                badges.dnsStatus.className = data.dns.status === 'pass' ? 'badge bg-success' : 'badge bg-danger';
                badges.dnsStatus.textContent = data.dns.status === 'pass' ? 'OK' : 'FAIL';
                messages.dnsMessage.textContent = data.dns.message;
            }
            if (data.tls) {
                badges.tlsStatus.className = data.tls.status === 'pass' ? 'badge bg-success' : 'badge bg-danger';
                badges.tlsStatus.textContent = data.tls.status === 'pass' ? 'OK' : 'FAIL';
                messages.tlsMessage.textContent = data.tls.message;
            }
            if (data.sip_options) {
                badges.sipOptionsStatus.className = data.sip_options.status === 'pass' ? 'badge bg-success' : 'badge bg-danger';
                badges.sipOptionsStatus.textContent = data.sip_options.status === 'pass' ? 'OK' : 'FAIL';
                messages.sipOptionsMessage.textContent = data.sip_options.message;
            }
            if (data.sbc_reachable) {
                badges.sbcStatus.className = data.sbc_reachable.status === 'pass' ? 'badge bg-success' : 'badge bg-danger';
                badges.sbcStatus.textContent = data.sbc_reachable.status === 'pass' ? 'OK' : 'FAIL';
                messages.sbcMessage.textContent = data.sbc_reachable.message;
            }
        })
        .catch(err => {
            console.error(err);
            Object.values(badges).forEach(b => {
                b.className = 'badge bg-danger';
                b.textContent = 'ERROR';
            });
            Object.values(messages).forEach(m => m.textContent = 'Validation failed');
        });
}

function loadCallStatistics() {
    fetch('/trunks/teams/call-statistics')
        .then(r => r.json())
        .then(data => {
            document.getElementById('inboundCalls').textContent = data.inbound_calls_24h;
            document.getElementById('outboundCalls').textContent = data.outbound_calls_24h;
            document.getElementById('concurrentCalls').textContent = data.concurrent_calls;
            if (data.last_call_time) {
                const lastCall = new Date(data.last_call_time);
                document.getElementById('lastCall').textContent = lastCall.toLocaleString();
            } else {
                document.getElementById('lastCall').textContent = 'No calls';
            }
        })
        .catch(err => console.error(err));
}

loadCallStatistics();
validateConnectivity();

function loadTeamsUsersStatus() {
    fetch('/trunks/teams/users-status')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('teamsUsersTable');
            if (data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center text-secondary py-4">No Teams users configured.</td></tr>';
                return;
            }
            tbody.innerHTML = data.map(user => `
                <tr>
                    <td class="font-monospace fw-semibold">${user.number}</td>
                    <td>${user.extension}</td>
                    <td>${user.description || '—'}</td>
                    <td>
                        ${user.registered 
                            ? '<span class="badge bg-success">Registered</span>' 
                            : '<span class="badge bg-secondary">Unregistered</span>'}
                    </td>
                    <td class="font-monospace small">${user.ip || '—'}</td>
                </tr>
            `).join('');
        })
        .catch(err => {
            console.error(err);
            document.getElementById('teamsUsersTable').innerHTML = '<tr><td colspan="5" class="text-center text-danger py-4">Failed to load users status.</td></tr>';
        });
}

loadTeamsUsersStatus();

function testDns() {
    document.getElementById('dnsResult').textContent = 'Testing...';
    fetch('/trunks/teams/validate-connectivity')
        .then(r => r.json())
        .then(data => {
            if (data.dns) {
                document.getElementById('dnsResult').textContent = data.dns.status === 'pass' 
                    ? '✓ ' + data.dns.message 
                    : '✗ ' + data.dns.message;
            }
        })
        .catch(err => {
            document.getElementById('dnsResult').textContent = 'Error: ' + err.message;
        });
}

function testTls() {
    document.getElementById('tlsResult').textContent = 'Testing...';
    fetch('/trunks/teams/validate-connectivity')
        .then(r => r.json())
        .then(data => {
            if (data.tls) {
                document.getElementById('tlsResult').textContent = data.tls.status === 'pass' 
                    ? '✓ ' + data.tls.message 
                    : '✗ ' + data.tls.message;
            }
        })
        .catch(err => {
            document.getElementById('tlsResult').textContent = 'Error: ' + err.message;
        });
}

function testOptions() {
    document.getElementById('optionsResult').textContent = 'Testing...';
    fetch('/trunks/teams/validate-connectivity')
        .then(r => r.json())
        .then(data => {
            if (data.sip_options) {
                document.getElementById('optionsResult').textContent = data.sip_options.status === 'pass' 
                    ? '✓ ' + data.sip_options.message 
                    : '✗ ' + data.sip_options.message;
            }
        })
        .catch(err => {
            document.getElementById('optionsResult').textContent = 'Error: ' + err.message;
        });
}

function testRouting() {
    document.getElementById('routingResult').textContent = 'Testing...';
    fetch('/trunks/teams/validate-connectivity')
        .then(r => r.json())
        .then(data => {
            if (data.sbc_reachable) {
                document.getElementById('routingResult').textContent = data.sbc_reachable.status === 'pass' 
                    ? '✓ ' + data.sbc_reachable.message 
                    : '✗ ' + data.sbc_reachable.message;
            }
        })
        .catch(err => {
            document.getElementById('routingResult').textContent = 'Error: ' + err.message;
        });
}
</script>
@endsection