@php
    $endpoint = $endpoint ?? null;
    $auth = $auth ?? null;
    $aor = $aor ?? null;
    $reg = $reg ?? null;
    $trunk = $trunk ?? null;
    $isEdit = $isEdit ?? false;
    $codecs = $codecs ?? [];

    if (empty($codecs)) {
        $codecs = [
            'ulaw' => ['label' => 'G.711 ulaw', 'hz' => '8 kHz',  'preferred' => true],
            'alaw' => ['label' => 'G.711 alaw', 'hz' => '8 kHz',  'preferred' => true],
            'g729' => ['label' => 'G.729',      'hz' => '8 kHz',  'preferred' => false],
            'g722' => ['label' => 'G.722',      'hz' => '16 kHz', 'preferred' => false],
            'opus' => ['label' => 'Opus',       'hz' => '48 kHz', 'preferred' => false],
            'gsm'  => ['label' => 'GSM',        'hz' => '8 kHz',  'preferred' => false],
        ];
    }

    $v = function ($key, $default = '') use ($endpoint, $auth, $aor, $reg, $trunk) {
        $map = [
            // Endpoint fields
            'id' => optional($endpoint)->id,
            'description' => optional($endpoint)->description,
            'transport' => optional($endpoint)->transport ?: 'transport-udp',
            'context' => optional($endpoint)->context ?: 'from-trunk',
            'from_user' => optional($endpoint)->from_user ?: optional($trunk)->from_user,
            'from_domain' => optional($endpoint)->from_domain ?? optional($trunk)->from_domain,
            'outbound_proxy' => optional($endpoint)->outbound_proxy ?? optional($trunk)->outbound_proxy,
            'rtp_timeout' => optional($endpoint)->rtp_timeout,
            'rtp_timeout_hold' => optional($endpoint)->rtp_timeout_hold,
            'identify_by' => optional($endpoint)->identify_by ?: 'username',
            'dtmf_mode' => optional($endpoint)->dtmf_mode ?: 'rfc4733',
            'direct_media' => (optional($endpoint)->direct_media ?? 'no') === 'yes',
            'preferred_codec_only' => (optional($endpoint)->preferred_codec_only ?? 'no') === 'yes',
            'rtcp_mux' => (optional($endpoint)->rtcp_mux ?? 'no') === 'yes',
            'trust_id_inbound' => (optional($endpoint)->trust_id_inbound ?? 'no') === 'yes',
            'trust_id_outbound' => (optional($endpoint)->trust_id_outbound ?? 'no') === 'yes',
            'send_pai' => (optional($endpoint)->send_pai ?? 'no') === 'yes',
            'send_rpid' => (optional($endpoint)->send_rpid ?? 'no') === 'yes',
            'user_eq_phone' => (optional($endpoint)->user_eq_phone ?? 'no') === 'yes',
            // NAT-safe defaults for a NEW trunk (no $endpoint yet): symmetric RTP
            // and force_rport prevent one-way / no audio behind NAT, which is the
            // norm for our on-prem boxes. On edit, the saved value is honoured.
            'rtp_symmetric' => (optional($endpoint)->rtp_symmetric ?? ($endpoint ? 'no' : 'yes')) === 'yes',
            'rewrite_contact' => (optional($endpoint)->rewrite_contact ?? 'no') === 'yes',
            'force_rport' => (optional($endpoint)->force_rport ?? ($endpoint ? 'no' : 'yes')) === 'yes',
            'force_outbound_cli' => optional($endpoint)->force_outbound_cli,
            'callerid' => optional($endpoint)->callerid ?? optional($trunk)->caller_id,
            'per_extension_cli' => (bool) (optional($trunk)->per_extension_cli ?? 0),
            'outbound_auth' => optional($endpoint)->outbound_auth,
            'auth' => optional($endpoint)->auth,
            'inbound_auth' => optional($endpoint)->auth,
            'language' => optional($endpoint)->language,
            'accountcode' => optional($endpoint)->accountcode,
            't38_udptl' => (optional($endpoint)->t38_udptl ?? 'no') === 'yes',
            't38_udptl_ec' => optional($endpoint)->t38_udptl_ec,
            't38_udptl_nat' => (optional($endpoint)->t38_udptl_nat ?? 'no') === 'yes',
            't38_udptl_ipv6' => (optional($endpoint)->t38_udptl_ipv6 ?? 'no') === 'yes',
            'timers' => (optional($endpoint)->timers ?? 'no') === 'yes',
            'timers_min_se' => optional($endpoint)->timers_min_se ?: 90,
            'timers_sess_expires' => optional($endpoint)->timers_sess_expires ?: 1800,
            '100rel' => (optional($endpoint)->{'100rel'} ?? 'no') === 'yes',
            'connected_line_method' => optional($endpoint)->connected_line_method ?: 'invite',
            'media_encryption' => optional($endpoint)->media_encryption ?: 'no',
            'use_avpf' => (optional($endpoint)->use_avpf ?? 'no') === 'yes',
            'use_ptime' => (optional($endpoint)->use_ptime ?? 'no') === 'yes',
            'ice_support' => (optional($endpoint)->ice_support ?? 'no') === 'yes',
            'acl' => optional($endpoint)->acl,
            'allow' => optional($endpoint)->allow,
            'callerid_privacy' => optional($endpoint)->callerid_privacy,
            'callerid_tag' => optional($endpoint)->callerid_tag,
            'call_group' => optional($endpoint)->call_group,
            'pickup_group' => optional($endpoint)->pickup_group,
            'named_call_group' => optional($endpoint)->named_call_group,
            'named_pickup_group' => optional($endpoint)->named_pickup_group,
            'device_state_busy_at' => optional($endpoint)->device_state_busy_at,
            'disable_direct_media_on_nat' => (optional($endpoint)->disable_direct_media_on_nat ?? 'no') === 'yes',
            'direct_media_glare_mitigation' => optional($endpoint)->direct_media_glare_mitigation ?: 'none',
            'direct_media_method' => optional($endpoint)->direct_media_method ?: 'invite',
            'follow_early_media_fork' => (optional($endpoint)->follow_early_media_fork ?? 'no') === 'yes',
            'ignore_183_without_sdp' => (optional($endpoint)->ignore_183_without_sdp ?? 'no') === 'yes',
            'inband_progress' => (optional($endpoint)->inband_progress ?? 'no') === 'yes',
            'incoming_call_offer_pref' => optional($endpoint)->incoming_call_offer_pref ?: 'local',
            'outgoing_call_offer_pref' => optional($endpoint)->outgoing_call_offer_pref ?: 'remote_merge',
            'overlap_context' => optional($endpoint)->overlap_context,
            'redirect_method' => optional($endpoint)->redirect_method ?: 'user',
            'refer_blind_progress' => (optional($endpoint)->refer_blind_progress ?? 'no') === 'yes',
            'send_diversion' => (optional($endpoint)->send_diversion ?? 'no') === 'yes',
            'send_history_info' => (optional($endpoint)->send_history_info ?? 'no') === 'yes',
            'send_connected_line' => (optional($endpoint)->send_connected_line ?? 'no') === 'yes',
            'trust_connected_line' => (optional($endpoint)->trust_connected_line ?? 'no') === 'yes',
            'rpid_immediate' => (optional($endpoint)->rpid_immediate ?? 'no') === 'yes',
            'tone_zone' => optional($endpoint)->tone_zone,
            'tos_audio' => optional($endpoint)->tos_audio,
            'tos_video' => optional($endpoint)->tos_video,
            'cos_audio' => optional($endpoint)->cos_audio,
            'cos_video' => optional($endpoint)->cos_video,
            'sub_min_expiry' => optional($endpoint)->sub_min_expiry,
            'moh_suggest' => optional($endpoint)->moh_suggest,
            'voicemail_extension' => optional($endpoint)->voicemail_extension,
            'mailboxes' => optional($endpoint)->mailboxes,
            'max_audio_streams' => optional($endpoint)->max_audio_streams ?: 10,
            'max_video_streams' => optional($endpoint)->max_video_streams ?: 1,
            'bundle' => (optional($endpoint)->bundle ?? 'no') === 'yes',
            'webrtc' => (optional($endpoint)->webrtc ?? 'no') === 'yes',
            'stir_shaken' => (optional($endpoint)->stir_shaken ?? 'no') === 'yes',
            'stir_shaken_profile' => optional($endpoint)->stir_shaken_profile,
            'dtls_auto_generate_cert' => (optional($endpoint)->dtls_auto_generate_cert ?? 'no') === 'yes',
            'dtls_setup' => optional($endpoint)->dtls_setup ?: 'active',
            'dtls_verify' => (optional($endpoint)->dtls_verify ?? 'no') === 'yes',
            'dtls_rekey' => optional($endpoint)->dtls_rekey,
            'dtls_fingerprint' => optional($endpoint)->dtls_fingerprint ?: 'SHA-256',
            'dtls_cert_file' => optional($endpoint)->dtls_cert_file,
            'dtls_private_key' => optional($endpoint)->dtls_private_key,
            'dtls_ca_file' => optional($endpoint)->dtls_ca_file,
            'dtls_ca_path' => optional($endpoint)->dtls_ca_path,
            'dtls_cipher' => optional($endpoint)->dtls_cipher,
            'srtp_tag_32' => (optional($endpoint)->srtp_tag_32 ?? 'no') === 'yes',
            'media_address' => optional($endpoint)->media_address,
            'media_use_received_transport' => (optional($endpoint)->media_use_received_transport ?? 'no') === 'yes',
            'rtp_keepalive' => optional($endpoint)->rtp_keepalive,
            'rtp_ipv6' => (optional($endpoint)->rtp_ipv6 ?? 'no') === 'yes',
            'rtcp_mux' => (optional($endpoint)->rtcp_mux ?? 'no') === 'yes',
            'rtcp_mux' => (optional($endpoint)->rtcp_mux ?? 'no') === 'yes',
            'record_on_feature' => optional($endpoint)->record_on_feature,
            'record_off_feature' => optional($endpoint)->record_off_feature,
            'fax_detect' => (optional($endpoint)->fax_detect ?? 'no') === 'yes',
            'fax_detect_timeout' => optional($endpoint)->fax_detect_timeout,
            'g726_non_standard' => (optional($endpoint)->g726_non_standard ?? 'no') === 'yes',
            'message_context' => optional($endpoint)->message_context,
            'aggregate_mwi' => (optional($endpoint)->aggregate_mwi ?? 'no') === 'yes',
            'mwi_from_user' => optional($endpoint)->mwi_from_user,
            'allow_subscribe' => (optional($endpoint)->allow_subscribe ?? 'no') === 'yes',
            'allow_transfer' => (optional($endpoint)->allow_transfer ?? 'no') === 'yes',
            'allow_unauthenticated_options' => (optional($endpoint)->allow_unauthenticated_options ?? 'no') === 'yes',
            'allow_overlap' => (optional($endpoint)->allow_overlap ?? 'no') === 'yes',
            'supress_moh_on_sendonly' => (optional($endpoint)->supress_moh_on_sendonly ?? 'no') === 'yes',
            'suppress_q850_reason_headers' => (optional($endpoint)->suppress_q850_reason_headers ?? 'no') === 'yes',
            'subscribe_context' => optional($endpoint)->subscribe_context,
            'one_touch_recording' => (optional($endpoint)->one_touch_recording ?? 'no') === 'yes',
            'sdp_owner' => optional($endpoint)->sdp_owner,
            'sdp_session' => optional($endpoint)->sdp_session,
            'tos_audio' => optional($endpoint)->tos_audio,
            'tos_video' => optional($endpoint)->tos_video,
            'cos_audio' => optional($endpoint)->cos_audio,
            'cos_video' => optional($endpoint)->cos_video,
            'allow' => optional($endpoint)->allow,
            
            // Auth fields
            'username' => optional($auth)->username ?? optional($trunk)->username,
            'password' => optional($auth)->password ?? optional($trunk)->password,
            'auth_type' => optional($auth)->auth_type ?? optional($trunk)->auth_type,
            'realm' => optional($auth)->realm,
            
            // AOR fields
            'contact' => optional($aor)->contact,
            'max_contacts' => optional($aor)->max_contacts ?? optional($trunk)->max_contacts,
            'qualify_frequency' => optional($aor)->qualify_frequency,
            'qualify_timeout' => optional($aor)->qualify_timeout,
            'remove_existing' => (optional($aor)->remove_existing ?? 'no') === 'yes',
            'support_path' => (optional($aor)->support_path ?? 'no') === 'yes',
            
            // Registration fields
            'reg_server_uri' => optional($reg)->server_uri ?? optional($trunk)->server_uri,
            'reg_client_uri' => optional($reg)->client_uri ?? optional($trunk)->client_uri,
            'reg_contact_user' => optional($reg)->contact_user ?? optional($trunk)->contact_user,
            'retry_interval' => optional($reg)->retry_interval,
            'expiration' => optional($reg)->expiration,
            'max_retries' => optional($reg)->max_retries,
            'forbidden_retry_interval' => optional($reg)->forbidden_retry_interval,
            'fatal_retry_interval' => optional($reg)->fatal_retry_interval,
            'auth_rejection_permanent' => (optional($reg)->auth_rejection_permanent ?? 'no') === 'yes',
            'line' => optional($reg)->line,
            'reg_endpoint' => optional($reg)->endpoint,
            
            // Trunk (sip_trunks table) fields
            'dial_prefix' => optional($trunk)->dial_prefix,
            'dial_strip' => optional($trunk)->dial_strip,
            'dial_prepend' => optional($trunk)->dial_prepend,
            'callerid_name' => optional($trunk)->trunk_cid_name,
            'enabled' => !optional($trunk)->disable_trunk,
            'notes' => optional($trunk)->notes,
        ];
        
        return $map[$key] ?? $default;
    };
@endphp

@php
    $selectedCodecs = old('codecs');
    if ($selectedCodecs === null) {
        $raw = $endpoint->allow ?? '';
        $selectedCodecs = $raw
            ? preg_split('/\s*,\s*/', $raw, -1, PREG_SPLIT_NO_EMPTY)
            : ['ulaw', 'alaw'];
    }
    $selectedCodecs = array_map(fn($c) => strtolower(trim($c)), (array) $selectedCodecs);
@endphp

<style>
/* ═══════════════════════════════════════════════════
   Enterprise SIP Trunk Form – V-Connect PBX
═══════════════════════════════════════════════════ */

/* Layout shell */
.etf-shell {
    display: flex;
    gap: 0;
    min-height: 600px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15,23,42,.07);
}

/* ── Left sidebar nav ── */
.etf-nav {
    width: 200px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #e2e8f0;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.etf-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    border-radius: 0;
    color: #64748b;
    font-size: .8rem;
    font-weight: 600;
    transition: background .12s, color .12s;
    position: relative;
}
.etf-nav-item:hover { background: #f8fafc; color: #1e293b; }
.etf-nav-item.active {
    background: rgba(79,70,229,.07);
    color: #4f46e5;
}
.etf-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 3px;
    background: #4f46e5;
    border-radius: 0 3px 3px 0;
}
.etf-nav-icon { width: 15px; height: 15px; flex-shrink: 0; }
.etf-nav-divider { height: 1px; background: #f1f5f9; margin: 6px 16px; }
.etf-nav-section-label {
    font-size: .65rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 8px 16px 4px;
}

/* ── Main content ── */
.etf-content {
    flex: 1;
    min-width: 0;
    padding: 20px 22px;
    background: #f8fafc;
}

/* ── Right status panel ── */
.etf-status {
    width: 220px;
    flex-shrink: 0;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Panes */
.etf-pane { display: none; }
.etf-pane.active { display: block; }

/* Section heading inside pane */
.etf-section-title {
    font-size: .82rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.etf-section-desc {
    font-size: .76rem;
    color: #64748b;
    margin-bottom: 16px;
    margin-top: -10px;
    line-height: 1.5;
}

/* Cards */
.tf-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
    overflow: hidden;
    margin-bottom: 14px;
}
.tf-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: .8rem;
    font-weight: 700;
    color: #0f172a;
    background: #fafbfc;
}
.tf-card-header-desc {
    margin-left: auto;
    font-size: .72rem;
    color: #94a3b8;
    font-weight: 400;
}
.tf-card-body { padding: 16px; }

/* Form controls */
.tf-label {
    font-size: .74rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.tf-label .tf-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: #e2e8f0;
    border-radius: 50%;
    font-size: .6rem;
    color: #64748b;
    cursor: help;
    font-weight: 700;
    position: relative;
}
.tf-label .tf-tooltip:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: 18px;
    top: -4px;
    background: #1e293b;
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 400;
    white-space: nowrap;
    z-index: 100;
    max-width: 260px;
    white-space: normal;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.tf-input, .tf-select {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    padding: .45rem .7rem;
    font-size: .84rem;
    color: #111827;
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.tf-input:focus, .tf-select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.tf-input[readonly] { background: #f9fafb; color: #6b7280; cursor: default; }
.tf-input::placeholder { color: #9ca3af; }
.tf-input-hint { font-size: .71rem; color: #9ca3af; margin-top: 3px; line-height: 1.4; }

/* Field group row */
.tf-field { margin-bottom: 0; }

/* Validation states */
.tf-input.is-checking { border-color: #f59e0b; }
.tf-input.is-valid   { border-color: #22c55e; }
.tf-input.is-invalid { border-color: #ef4444; }
.tf-val-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
}
.tf-val-badge.ok    { background: rgba(34,197,94,.1);  color: #15803d; }
.tf-val-badge.warn  { background: rgba(245,158,11,.1);  color: #b45309; }
.tf-val-badge.err   { background: rgba(239,68,68,.1);   color: #b91c1c; }
.tf-val-badge.check { background: rgba(99,102,241,.1);  color: #4338ca; }

/* Toggle switches */
.tf-switch { position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.tf-switch input { opacity:0; width:0; height:0; }
.tf-switch-slider { position:absolute; inset:0; background:#d1d5db; border-radius:999px; cursor:pointer; transition:.2s; }
.tf-switch-slider:before { content:""; position:absolute; width:14px; height:14px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.tf-switch input:checked + .tf-switch-slider { background:#4f46e5; }
.tf-switch input:checked + .tf-switch-slider:before { transform:translateX(16px); }

.tf-big-toggle { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.tf-big-toggle input { opacity:0; width:0; height:0; }
.tf-big-slider { position:absolute; inset:0; background:#d1d5db; border-radius:999px; cursor:pointer; transition:.2s; }
.tf-big-slider:before { content:""; position:absolute; width:18px; height:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.tf-big-toggle input:checked + .tf-big-slider { background:#22c55e; }
.tf-big-toggle input:checked + .tf-big-slider:before { transform:translateX(20px); }

/* Toggle row */
.tf-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f3f4f6; }
.tf-toggle-row:last-child { border-bottom: none; }
.tf-toggle-label { font-size:.83rem; font-weight:600; color:#111827; }
.tf-toggle-sub { font-size:.71rem; color:#6b7280; margin-top:1px; }

/* Bool grid */
.tf-bool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px 8px;
}
.tf-bool-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
}
.tf-bool-item:hover { background: #f3f4f6; }
.tf-bool-label { font-size:.81rem; font-weight:500; color:#111827; }
.tf-bool-desc  { font-size:.69rem; color:#9ca3af; line-height:1.3; }

/* Codec rows */
.tf-codec-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 0; border-bottom:1px solid #f3f4f6;
}
.tf-codec-row:last-child { border-bottom:none; }
.tf-codec-name { font-size:.83rem; font-weight:600; color:#111827; }
.tf-codec-hz { font-size:.73rem; color:#9ca3af; }
.tf-codec-badge { font-size:.68rem; font-weight:700; background:rgba(79,70,229,.08); color:#4338ca; border-radius:4px; padding:1px 6px; }
.tf-codec-preferred { font-size:.68rem; font-weight:700; background:rgba(34,197,94,.1); color:#15803d; border-radius:4px; padding:1px 6px; }
.tf-label-sm { font-size:.72rem; font-weight:600; color:#374151; margin-bottom:4px; display:block; }

/* Status panel widgets */
.etf-stat-title { font-size:.68rem; font-weight:800; color:#6b7280; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.etf-stat-row { display:flex; align-items:center; justify-content:space-between; padding:5px 0; border-bottom:1px solid #f3f4f6; }
.etf-stat-row:last-child { border-bottom:none; }
.etf-stat-key { font-size:.76rem; color:#6b7280; }
.etf-stat-val { font-size:.76rem; font-weight:700; color:#111827; }
.etf-dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:4px; }
.etf-dot.green  { background:#22c55e; box-shadow:0 0 4px rgba(34,197,94,.5); }
.etf-dot.red    { background:#ef4444; }
.etf-dot.grey   { background:#d1d5db; }
.etf-dot.amber  { background:#f59e0b; }

/* Info table (Teams preset) */
.tf-info-table { width:100%; }
.tf-info-table tr td { padding:6px 0; font-size:.82rem; border-bottom:1px solid #f3f4f6; }
.tf-info-table tr:last-child td { border-bottom:none; }
.tf-info-table .tf-it-key { color:#6b7280; width:45%; }
.tf-info-table .tf-it-val { color:#111827; font-weight:600; }

/* Responsive */
@media (max-width: 900px) {
    .etf-nav { width: 52px; }
    .etf-nav-item span.etf-nav-txt { display: none; }
    .etf-nav-section-label { display: none; }
    .etf-nav-divider { margin: 4px 8px; }
    .etf-status { display: none; }
}
@media (max-width: 600px) {
    .etf-shell { flex-direction: column; }
    .etf-nav { width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid #e2e8f0; padding: 6px 8px; }
    .etf-nav-item { flex-direction: column; gap: 2px; padding: 6px 10px; font-size: .68rem; }
    .etf-nav-item.active::before { top: auto; bottom: 0; left: 4px; right: 4px; width: auto; height: 2px; border-radius: 2px 2px 0 0; }
    .etf-nav-section-label, .etf-nav-divider { display: none; }
}
</style>

<div class="etf-shell">

{{-- ════ LEFT SIDEBAR NAV ════ --}}
<nav class="etf-nav" id="etfNav">
    <div class="etf-nav-section-label">Configuration</div>
    <button type="button" class="etf-nav-item active" data-pane="etf-overview">
        <svg class="etf-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
        <span class="etf-nav-txt">Overview</span>
    </button>
    <button type="button" class="etf-nav-item" data-pane="etf-connectivity">
        <svg class="etf-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
        <span class="etf-nav-txt">Connectivity</span>
    </button>
    <button type="button" class="etf-nav-item" data-pane="etf-auth">
        <svg class="etf-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
        <span class="etf-nav-txt">Authentication</span>
    </button>
    <button type="button" class="etf-nav-item" data-pane="etf-registration">
        <svg class="etf-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
        <span class="etf-nav-txt">Registration</span>
    </button>
    <button type="button" class="etf-nav-item" data-pane="etf-media">
        <svg class="etf-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
        <span class="etf-nav-txt">Media</span>
    </button>
    <button type="button" class="etf-nav-item" data-pane="etf-callerid">
        <svg class="etf-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        <span class="etf-nav-txt">Caller ID</span>
    </button>
    <div class="etf-nav-divider"></div>
    <div class="etf-nav-section-label">Advanced</div>
    <button type="button" class="etf-nav-item" data-pane="etf-signalling">
        <svg class="etf-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
        <span class="etf-nav-txt">Signalling</span>
    </button>
    <button type="button" class="etf-nav-item" data-pane="etf-security">
        <svg class="etf-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        <span class="etf-nav-txt">Security</span>
    </button>
    <button type="button" class="etf-nav-item" data-pane="etf-advanced">
        <svg class="etf-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M4.93 4.93a10 10 0 0 0 0 14.14M8.46 8.46a5 5 0 0 0 0 7.07"/></svg>
        <span class="etf-nav-txt">Advanced</span>
    </button>
    @if($isEdit)
    <button type="button" class="etf-nav-item" data-pane="etf-teams">
        <svg class="etf-nav-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        <span class="etf-nav-txt">Teams</span>
    </button>
    @endif
</nav>

{{-- ════ MAIN CONTENT ════ --}}
<div class="etf-content">

{{-- ══ OVERVIEW ══ --}}
<div class="etf-pane active" id="etf-overview">
    <div class="row g-3">
        {{-- Left: General Information --}}
        <div class="col-12 col-lg-7">
            <div class="tf-card">
                <div class="tf-card-header">
                    <x-lucide-info style="width:15px;height:15px;color:#6366f1;" /> General Information
                </div>
                <div class="tf-card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="tf-label">Trunk Name <span title="Human-readable label" style="color:#94a3b8;font-weight:400;">ⓘ</span></label>
                            <input name="description" value="{{ $v('description') }}" class="tf-input" placeholder="e.g. Teams Trunk">
                        </div>
                        @if($isEdit)
                        <div class="col-md-6">
                            <label class="tf-label">Trunk Number (ID) <span title="PJSIP endpoint ID — read only" style="color:#94a3b8;font-weight:400;">ⓘ</span></label>
                            <input name="id" value="{{ $v('id') }}" class="tf-input" readonly style="background:#f8fafc;color:#64748b;cursor:default;">
                        </div>
                        @else
                        <div class="col-md-6">
                            <label class="tf-label">Trunk ID (Endpoint) <span title="PJSIP endpoint ID - must match dialplan reference" style="color:#94a3b8;font-weight:400;">ⓘ</span></label>
                            <input name="id" value="{{ $v('id') }}" required pattern="^[A-Za-z0-9_\-]+$" class="tf-input" placeholder="ECN or trunk-ecn">
                            <div class="tf-input-hint">Unique identifier used in Dial(PJSIP/...@ID). Must match what your dialplan expects.</div>
                        </div>
                        @endif
                        <div class="col-md-6">
                            <label class="tf-label">Outbound Caller ID <span title="SIP From header username" style="color:#94a3b8;font-weight:400;">ⓘ</span></label>
                            <input name="from_user" value="{{ $v('from_user') }}" class="tf-input" placeholder="+12025550123">
                            <div class="tf-input-hint">The number presented on outbound calls. When per-extension Caller ID is on, this is the fallback used for extensions with no own CLI.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="tf-label">Domain <span title="SIP From header domain" style="color:#94a3b8;font-weight:400;">ⓘ</span></label>
                            <input name="from_domain" value="{{ $v('from_domain') }}" class="tf-input" placeholder="sbc.example.net">
                        </div>
                        <div class="col-md-6">
                            <label class="tf-label">Emergency Caller ID <span title="CLI for emergency calls" style="color:#94a3b8;font-weight:400;">ⓘ</span></label>
                            <input name="emergency_cid" value="{{ old('emergency_cid', optional($endpoint)->emergency_cid ?? '') }}" class="tf-input" placeholder="+12025550123">
                        </div>
                        <div class="col-md-6">
                            <label class="tf-label">Transport <span title="SIP transport protocol" style="color:#94a3b8;font-weight:400;">ⓘ</span></label>
                            <input value="{{ strtoupper(str_replace('transport-', '', $v('transport') ?: 'transport-udp')) }}" class="tf-input" readonly style="background:#f9fafb;color:#64748b;">
                            <div class="tf-input-hint">Configure in <a href="#" onclick="document.querySelector('[data-pane=etf-connectivity]').click();return false;">Connectivity</a> tab</div>
                        </div>
                        <div class="col-12">
                            <label class="tf-label">Notes / Description</label>
                            <textarea name="notes" rows="2" class="tf-input" style="resize:vertical;" placeholder="Optional notes about this trunk">{{ old('notes') }}</textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="tf-label">Force Outbound CLI</label>
                            <input value="{{ old('force_outbound_cli', optional($endpoint)->force_outbound_cli ?? '') ?: 'Not set' }}" class="tf-input" readonly style="background:#f9fafb;color:#64748b;">
                            <div class="tf-input-hint">Configure in <a href="#" onclick="document.querySelector('[data-pane=etf-callerid]').click();return false;">Caller ID</a> tab</div>
                        </div>
                    </div>

                    {{-- Carrier CLI Section --}}
                    <div class="tf-card mt-3">
                        <div class="tf-card-header"><x-lucide-shield-check style="width:15px;height:15px;color:#6366f1;" /> Carrier CLI Analysis</div>
                        <div class="tf-card-body">
                            <div class="row g-2">
                                <div class="col-md-6">
                                    <label class="tf-label-sm">Authentication Username</label>
                                    <input type="text" class="tf-input" value="{{ $v('username') ?? 'Not set' }}" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="tf-label-sm">From User</label>
                                    <input type="text" class="tf-input" value="{{ $v('from_user') ?? 'Not set' }}" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="tf-label-sm">Caller ID</label>
                                    <input type="text" class="tf-input" value="{{ $v('callerid') ?? 'Not set' }}" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="tf-label-sm">Force Outbound CLI</label>
                                    <input type="text" class="tf-input" value="{{ $v('force_outbound_cli') ?? 'Not set' }}" readonly>
                                </div>
                            </div>
                            @php
                                $authUser = $v('username') ?? '';
                                $fromUser = $v('from_user') ?? '';
                                $forceCli = $v('force_outbound_cli') ?? '';
                                $hasMismatch = ($authUser && $fromUser && $authUser !== $fromUser) || ($authUser && $forceCli && $authUser !== $forceCli);
                            @endphp
                            @if($hasMismatch)
                                <div class="alert alert-warning mt-2 mb-0" style="font-size:0.85rem;">
                                    <strong>⚠ Warning:</strong> Caller ID differs from authentication username. Carrier may reject outbound calls.
                                </div>
                            @else
                                <div class="alert alert-success mt-2 mb-0" style="font-size:0.85rem;">
                                    <strong>✓ OK:</strong> Caller ID matches authentication username.
                                </div>
                            @endif
                        </div>
                    </div>

                    {{-- Enable Trunk toggle --}}
                    <div class="tf-toggle-row mt-3" style="border-top:1px solid #f1f5f9;padding-top:14px;">
                        <div>
                            <div class="tf-toggle-label">Enable Trunk</div>
                            <div class="tf-toggle-sub">Trunk is enabled and available for use</div>
                        </div>
                        <label class="tf-big-toggle">
                            <input type="checkbox" name="enabled" value="1"
                                   @checked(old('enabled', $trunk ? !$trunk->disable_trunk : true))>
                            <span class="tf-big-slider"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        {{-- Right: Allowed Codecs --}}
        <div class="col-12 col-lg-5">
            <div class="tf-card h-100">
                <div class="tf-card-header">
                    <x-lucide-radio style="width:15px;height:15px;color:#6366f1;" /> Allowed Codecs
                </div>
                <div class="tf-card-body">
                    @if(!empty($codecs))
                    @foreach($codecs as $key => $meta)
                        @php
                            $keyL = strtolower($key);
                            $label = is_array($meta) ? ($meta['label'] ?? $key) : $meta;
                            $hz    = is_array($meta) ? ($meta['hz']    ?? '')    : '';
                            $pref  = is_array($meta) ? ($meta['preferred'] ?? false) : false;
                        @endphp
                        <div class="tf-codec-row">
                            <div class="d-flex align-items-center gap-2">
                                <input type="checkbox" name="codecs[]" value="{{ $keyL }}"
                                    id="codec_{{ $keyL }}"
                                    class="form-check-input mt-0"
                                    style="width:16px;height:16px;border-radius:4px;"
                                    @checked(in_array($keyL, $selectedCodecs))>
                                <label for="codec_{{ $keyL }}" class="tf-codec-name mb-0" style="cursor:pointer;">{{ $label }}</label>
                                @if($pref)
                                    <span class="tf-codec-preferred">Preferred</span>
                                @endif
                            </div>
                            <span class="tf-codec-hz">{{ $hz }}</span>
                        </div>
                    @endforeach
                    @endif
                    <div class="mt-3 pt-2" style="border-top:1px solid #f1f5f9;">
                        <button type="button" class="btn btn-outline-secondary btn-sm d-flex align-items-center gap-1">
                            <x-lucide-settings-2 style="width:13px;height:13px;" /> Edit Codec Settings
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ══ CONNECTIVITY ══ --}}
<div class="etf-pane" id="etf-connectivity">
    <div class="tf-card">
        <div class="tf-card-header">
            <svg style="width:15px;height:15px;color:#6366f1;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
            Transport &amp; Proxy
            <span class="tf-card-header-desc">How SIP signalling travels to this provider</span>
        </div>
        <div class="tf-card-body">
            <div class="row g-3">
                <div class="col-md-5">
                    <label class="tf-label">Transport Protocol <span class="tf-tooltip" data-tip="SIP transport layer — UDP for most carriers, TLS for encrypted/Teams trunks">?</span></label>
                    @php
                        $storedTransport2 = strtolower($v('transport'));
                        if (!str_starts_with($storedTransport2, 'transport-')) {
                            $storedTransport2 = 'transport-' . $storedTransport2;
                        }
                        $availableTransports2 = $transports ?? ['transport-udp', 'transport-tcp', 'transport-tls'];
                    @endphp
                    <select name="transport" class="tf-select">
                        @foreach($availableTransports2 as $tVal2)
                            @php $tLabel2 = strtoupper(str_replace('transport-', '', $tVal2)); @endphp
                            <option value="{{ $tVal2 }}" @selected($storedTransport2 === $tVal2)>{{ $tLabel2 }}</option>
                        @endforeach
                    </select>
                    <div class="tf-input-hint">Current: {{ $v('transport') ?: 'transport-udp' }}</div>
                </div>
                <div class="col-md-7">
                    <label class="tf-label">Outbound Proxy <span class="tf-tooltip" data-tip="Route all SIP requests through this proxy server">?</span></label>
                    <input name="outbound_proxy" value="{{ $v('outbound_proxy') }}" class="tf-input" placeholder="sip:proxy.example.com:5060;lr">
                    <div class="tf-input-hint">Leave blank if no outbound proxy is required</div>
                </div>
            </div>
        </div>
    </div>
    <div class="tf-card">
        <div class="tf-card-header">
            <svg style="width:15px;height:15px;color:#6366f1;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
            Contact &amp; Address of Record (AOR)
            <span class="tf-card-header-desc">Where to send and receive SIP traffic</span>
        </div>
        <div class="tf-card-body">
            <div class="row g-3">
                <div class="col-12">
                    <label class="tf-label">Contact URI <span class="tf-tooltip" data-tip="SIP contact address of the remote endpoint or provider">?</span></label>
                    <input name="contact" value="{{ $v('contact') }}" class="tf-input" placeholder="sip:sip.provider.com:5060">
                    <div class="tf-input-hint">Used for static contacts (no registration). Leave blank if registering.</div>
                </div>
                <div class="col-md-4">
                    <label class="tf-label">Max Contacts <span class="tf-tooltip" data-tip="Maximum simultaneous registrations allowed">?</span></label>
                    <input name="max_contacts" type="number" value="{{ $v('max_contacts') }}" class="tf-input" min="1">
                </div>
                <div class="col-md-4">
                    <label class="tf-label">Qualify Frequency (s) <span class="tf-tooltip" data-tip="How often to send SIP OPTIONS to check if endpoint is alive">?</span></label>
                    <input name="qualify_frequency" type="number" value="{{ $v('qualify_frequency') }}" class="tf-input" min="0">
                </div>
                <div class="col-md-4">
                    <label class="tf-label">Qualify Timeout (s) <span class="tf-tooltip" data-tip="Time to wait for OPTIONS response before marking endpoint unreachable">?</span></label>
                    <input name="qualify_timeout" type="number" value="{{ $v('qualify_timeout') }}" class="tf-input" min="0">
                </div>
            </div>
            <div class="tf-bool-grid mt-3">
                <div class="tf-bool-item">
                    <input type="hidden" name="remove_existing" value="0">
                    <label class="tf-switch mb-0">
                        <input type="checkbox" name="remove_existing" value="1" @checked($v('remove_existing'))>
                        <span class="tf-switch-slider"></span>
                    </label>
                    <div>
                        <div class="tf-bool-label">Remove Existing <span class="tf-tooltip" data-tip="Remove all existing contacts when a new registration arrives">?</span></div>
                    </div>
                </div>
                <div class="tf-bool-item">
                    <input type="hidden" name="support_path" value="0">
                    <label class="tf-switch mb-0">
                        <input type="checkbox" name="support_path" value="1" @checked($v('support_path'))>
                        <span class="tf-switch-slider"></span>
                    </label>
                    <div>
                        <div class="tf-bool-label">Support Path <span class="tf-tooltip" data-tip="Enable RFC 3327 Path header support for routing">?</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tf-card">
        <div class="tf-card-header">
            <svg style="width:15px;height:15px;color:#6366f1;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/></svg>
            Digit Manipulation
            <span class="tf-card-header-desc">Transform dialed numbers for carrier requirements</span>
        </div>
        <div class="tf-card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="tf-label">Dial Prefix <span class="tf-tooltip" data-tip="Add this prefix to all dialed numbers before sending to carrier">?</span></label>
                    <input name="dial_prefix" value="{{ $v('dial_prefix') }}" class="tf-input" placeholder="e.g., 00">
                </div>
                <div class="col-md-4">
                    <label class="tf-label">Strip Digits <span class="tf-tooltip" data-tip="Remove this many digits from the start of the dialed number">?</span></label>
                    <input name="dial_strip" type="number" value="{{ $v('dial_strip') }}" class="tf-input" placeholder="0" min="0">
                </div>
                <div class="col-md-4">
                    <label class="tf-label">Prepend Digits <span class="tf-tooltip" data-tip="Add these digits after stripping">?</span></label>
                    <input name="dial_prepend" value="{{ $v('dial_prepend') }}" class="tf-input" placeholder="e.g., 0">
                </div>
            </div>
            <div class="mt-3 p-2" style="background:#f0f9ff;border:1px solid #bae6fd;border-radius:6px;">
                <div style="font-size:.76rem;color:#0369a1;font-weight:600;">Example: 27768024199 → Strip 2, Prepend 0 → 0768024199</div>
            </div>
        </div>
    </div>
</div>

{{-- ══ CALLER ID & IDENTITY ══ --}}
<div class="etf-pane" id="etf-callerid">
    <div class="tf-card">
        <div class="tf-card-header"><x-lucide-shield-check style="width:15px;height:15px;color:#6366f1;" /> Caller ID & Identity</div>
        <div class="tf-card-body">
            {{-- Per-extension caller ID toggle --}}
            <div class="tf-toggle-row" style="background:#f8fafc;border:1px solid #e7ebf0;border-radius:10px;padding:12px 14px;margin-bottom:16px;">
                <div style="padding-right:16px;">
                    <div class="tf-toggle-label">Use per-extension caller ID</div>
                    <div class="tf-toggle-sub">When on, each extension presents its own External Caller ID on outbound calls, falling back to the Caller ID Number below when an extension has none. When off, every call uses this trunk's single caller ID.</div>
                </div>
                <input type="hidden" name="per_extension_cli" value="0">
                <label class="tf-big-toggle">
                    <input type="checkbox" name="per_extension_cli" value="1" @checked($v('per_extension_cli'))>
                    <span class="tf-big-slider"></span>
                </label>
            </div>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="tf-label">From Domain</label>
                    <input value="{{ $v('from_domain') ?: 'Not set' }}" class="tf-input" readonly style="background:#f9fafb;color:#64748b;">
                    <div class="tf-input-hint">Configured in <a href="#" onclick="document.querySelector('[data-pane=etf-overview]').click();return false;">Overview</a></div>
                </div>
                <div class="col-md-6">
                    <label class="tf-label">Caller ID Number</label>
                    <input name="callerid" value="{{ $v('callerid') }}" class="tf-input" placeholder="e.g., 2167448685">
                    <div class="tf-input-hint">Default caller ID number</div>
                </div>
                <div class="col-md-6">
                    <label class="tf-label">Caller ID Name</label>
                    <input name="callerid_name" value="{{ $v('callerid_name') }}" class="tf-input" placeholder="e.g., Vodacom">
                    <div class="tf-input-hint">Default caller ID name</div>
                </div>
                <div class="col-md-6">
                    <label class="tf-label">Force Outbound CLI</label>
                    <input name="force_outbound_cli" value="{{ $v('force_outbound_cli') }}" class="tf-input" placeholder="e.g., 2167448685">
                    <div class="tf-input-hint">Override caller ID for all calls through this trunk</div>
                </div>
            </div>
            <hr class="my-3">
            <div class="row g-3">
                <div class="col-sm-6 col-lg-4">
                    <div class="d-flex align-items-center gap-2 py-1">
                        <input type="hidden" name="trust_id_outbound" value="0">
                        <label class="tf-switch mb-0">
                            <input type="checkbox" name="trust_id_outbound" value="1" @checked($v('trust_id_outbound'))>
                            <span class="tf-switch-slider"></span>
                        </label>
                        <span style="font-size:.83rem;color:#1e293b;font-weight:500;">Trust ID Outbound</span>
                    </div>
                    <div class="tf-input-hint">Trust caller ID from trusted sources</div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="d-flex align-items-center gap-2 py-1">
                        <input type="hidden" name="trust_id_inbound" value="0">
                        <label class="tf-switch mb-0">
                            <input type="checkbox" name="trust_id_inbound" value="1" @checked($v('trust_id_inbound'))>
                            <span class="tf-switch-slider"></span>
                        </label>
                        <span style="font-size:.83rem;color:#1e293b;font-weight:500;">Trust ID Inbound</span>
                    </div>
                    <div class="tf-input-hint">Trust caller ID from inbound calls</div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="d-flex align-items-center gap-2 py-1">
                        <input type="hidden" name="send_pai" value="0">
                        <label class="tf-switch mb-0">
                            <input type="checkbox" name="send_pai" value="1" @checked($v('send_pai'))>
                            <span class="tf-switch-slider"></span>
                        </label>
                        <span style="font-size:.83rem;color:#1e293b;font-weight:500;">Send PAI</span>
                    </div>
                    <div class="tf-input-hint">Send P-Asserted-Identity header</div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="d-flex align-items-center gap-2 py-1">
                        <input type="hidden" name="send_rpid" value="0">
                        <label class="tf-switch mb-0">
                            <input type="checkbox" name="send_rpid" value="1" @checked($v('send_rpid'))>
                            <span class="tf-switch-slider"></span>
                        </label>
                        <span style="font-size:.83rem;color:#1e293b;font-weight:500;">Send RPID</span>
                    </div>
                    <div class="tf-input-hint">Send Remote-Party-ID header</div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="d-flex align-items-center gap-2 py-1">
                        <label class="tf-switch mb-0">
                            <input type="checkbox" name="user_eq_phone" value="1" @checked($v('user_eq_phone'))>
                            <span class="tf-switch-slider"></span>
                        </label>
                        <span style="font-size:.83rem;color:#1e293b;font-weight:500;">User = Phone</span>
                    </div>
                    <div class="tf-input-hint">Treat user as phone number</div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ══ SIGNALLING ══ --}}
<div class="etf-pane" id="etf-signalling">
    <div class="tf-card">
        <div class="tf-card-header"><x-lucide-activity style="width:15px;height:15px;color:#6366f1;" /> Signalling</div>
        <div class="tf-card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="tf-label">DTMF Mode <span class="tf-tooltip" data-tip="How DTMF tones are carried — rfc4733 is the most compatible with carriers">?</span></label>
                    <select name="dtmf_mode" class="tf-select">
                        @foreach(['auto','info','inband','rfc4733'] as $opt)
                            <option value="{{ $opt }}" @selected($v('dtmf_mode') === $opt)>{{ $opt }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="tf-label">Identify By</label>
                    <input value="{{ $v('identify_by') ?: 'username' }}" class="tf-input" readonly style="background:#f9fafb;color:#64748b;">
                    <div class="tf-input-hint">Configure in <a href="#" onclick="document.querySelector('[data-pane=etf-security]').click();return false;">Security</a> tab</div>
                </div>
                <div class="col-md-4">
                    <label class="tf-label">Outbound Proxy</label>
                    <input value="{{ $v('outbound_proxy') ?: 'None' }}" class="tf-input" readonly style="background:#f9fafb;color:#64748b;">
                    <div class="tf-input-hint">Configure in <a href="#" onclick="document.querySelector('[data-pane=etf-connectivity]').click();return false;">Connectivity</a> tab</div>
                </div>
            </div>
            <div class="row g-3 mt-2">
                @foreach([
                    ['direct_media',        'Direct Media',        'Allow media to flow directly between endpoints bypassing Asterisk'],
                    ['preferred_codec_only','Preferred Codec Only','Offer only the first/preferred codec in SDP'],
                    ['rtcp_mux',           'RTCP Mux',            'Multiplex RTP and RTCP on the same port (RFC 5761)'],
                    ['rtp_symmetric',      'RTP Symmetric',       'Send RTP to the address/port from which it was received'],
                    ['rewrite_contact',    'Rewrite Contact',     'Rewrite the Contact header with the address used to reach Asterisk'],
                    ['force_rport',        'Force RPort',         'Force symmetric response port (RFC 3581)'],
                ] as [$fname, $flabel, $ftip])
                <div class="col-sm-6 col-lg-4">
                    <div class="tf-bool-item">
                        <label class="tf-switch mb-0">
                            <input type="checkbox" name="{{ $fname }}" value="1" @checked($v($fname))>
                            <span class="tf-switch-slider"></span>
                        </label>
                        <div>
                            <div class="tf-bool-label">{{ $flabel }} <span class="tf-tooltip" data-tip="{{ $ftip }}">?</span></div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

{{-- ══ MEDIA ══ --}}
<div class="etf-pane" id="etf-media">
    <div class="tf-card">
        <div class="tf-card-header"><x-lucide-volume-2 style="width:15px;height:15px;color:#6366f1;" /> Media</div>
        <div class="tf-card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="tf-label">RTP Timeout (s)</label>
                    <input name="rtp_timeout" type="number" value="{{ $v('rtp_timeout') }}" class="tf-input" placeholder="60">
                </div>
                <div class="col-md-6">
                    <label class="tf-label">RTP Timeout Hold (s)</label>
                    <input name="rtp_timeout_hold" type="number" value="{{ $v('rtp_timeout_hold') }}" class="tf-input" placeholder="300">
                </div>
            <hr class="my-3">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="tf-label">RTP Keepalive (s)</label>
                    <input name="rtp_keepalive" type="number" value="{{ $v('rtp_keepalive') }}" class="tf-input" placeholder="0">
                    <div class="tf-input-hint">Seconds between RTP keepalive packets (0 = disabled)</div>
                </div>
                <div class="col-md-6">
                    <label class="tf-label">Media Encryption</label>
                    <input value="{{ strtoupper($v('media_encryption') ?: 'none') }}" class="tf-input" readonly style="background:#f9fafb;color:#64748b;">
                    <div class="tf-input-hint">Configure in <a href="#" onclick="document.querySelector('[data-pane=etf-security]').click();return false;">Security</a> tab</div>
                </div>
            </div>
            <div class="row g-3 mt-2">
                <div class="col-sm-6 col-lg-4">
                    <div class="d-flex align-items-center gap-2 py-1">
                        <label class="tf-switch mb-0">
                            <input type="checkbox" name="ice_support" value="1" @checked($v('ice_support'))>
                            <span class="tf-switch-slider"></span>
                        </label>
                        <span style="font-size:.83rem;color:#1e293b;font-weight:500;">ICE Support</span>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="d-flex align-items-center gap-2 py-1">
                        <label class="tf-switch mb-0">
                            <input type="checkbox" name="use_avpf" value="1" @checked($v('use_avpf'))>
                            <span class="tf-switch-slider"></span>
                        </label>
                        <span style="font-size:.83rem;color:#1e293b;font-weight:500;">Use AVPF</span>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="d-flex align-items-center gap-2 py-1">
                        <label class="tf-switch mb-0">
                            <input type="checkbox" name="use_ptime" value="1" @checked($v('use_ptime'))>
                            <span class="tf-switch-slider"></span>
                        </label>
                        <span style="font-size:.83rem;color:#1e293b;font-weight:500;">Use PTime</span>
                    </div>
                </div>
            </div>

            </div>
        </div>
    </div>
</div>

{{-- ══ AUTHENTICATION ══ --}}
<div class="etf-pane" id="etf-auth">
    <div class="tf-card">
        <div class="tf-card-header"><x-lucide-lock style="width:15px;height:15px;color:#6366f1;" /> Authentication</div>
        <div class="tf-card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="tf-label">Username</label>
                    <input name="username" value="{{ $v('username') }}" class="tf-input" placeholder="sip-username">
                </div>
                <div class="col-md-6">
                    <label class="tf-label">Password</label>
                    <input name="secret" type="password" value="" class="tf-input" placeholder="{{ $isEdit ? 'Leave blank to keep current' : 'Enter password (optional if using IP auth)' }}">
                    @if($isEdit)
                        <div class="tf-input-hint">Leave blank to keep the existing password.</div>
                    @endif
                </div>
            </div>
            <div class="row g-3 mt-2">
                <div class="col-md-6">
                    <label class="tf-label">Auth Type</label>
                    <select name="auth_type" class="tf-select">
                        <option value="userpass" @selected($v('auth_type') === 'userpass')">Username/Password</option>
                        <option value="md5" @selected($v('auth_type') === 'md5')">MD5</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="tf-label">Realm</label>
                    <input name="realm" value="{{ $v('realm') }}" class="tf-input" placeholder="e.g., asterisk">
                </div>
            </div>
            <div class="row g-3 mt-2">
                <div class="col-md-6">
                    <label class="tf-label">Outbound Auth Object</label>
                    <input type="text" class="tf-input" value="{{ $v('outbound_auth') ?? 'Not set' }}" readonly>
                    <div class="tf-input-hint">Automatically set when username/password auth is configured</div>
                </div>
                <div class="col-md-6">
                    <label class="tf-label">Inbound Auth Object</label>
                    <input type="text" class="tf-input" value="{{ $v('inbound_auth') ?? 'Not set' }}" readonly>
                    <div class="tf-input-hint">Automatically set when username/password auth is configured</div>
                </div>
            </div>

        </div>
    </div>
</div>


{{-- ══ REGISTRATION ══ --}}
<div class="etf-pane" id="etf-registration">
    <div class="tf-card">
        <div class="tf-card-header"><x-lucide-globe style="width:15px;height:15px;color:#6366f1;" /> Provider Registration</div>
        <div class="tf-card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="tf-label">Server URI</label>
                    <input name="reg_server_uri" value="{{ $v('reg_server_uri') }}" class="tf-input" placeholder="sip:sip.provider.com:5060">
                </div>
                <div class="col-md-4">
                    <label class="tf-label">Client URI</label>
                    <input name="reg_client_uri" value="{{ $v('reg_client_uri') }}" class="tf-input" placeholder="sip:user@sip.provider.com">
                    <div class="tf-input-hint">Leave blank to auto-use the Authentication Username — keeps the account consistent.</div>
                </div>
                <div class="col-md-4">
                    <label class="tf-label">Contact User</label>
                    <input name="reg_contact_user" value="{{ $v('reg_contact_user') }}" class="tf-input">
                </div>
                <div class="col-md-4">
                    <label class="tf-label">Outbound Auth</label>
                    <input type="text" class="tf-input" value="{{ $v('outbound_auth') ?? 'Not set' }}" readonly>
                    <div class="tf-input-hint">Automatically set when username/password auth is configured</div>
                </div>
            </div>
            <div class="row g-3 mt-2">
                <div class="col-md-3">
                    <label class="tf-label">Retry Interval (s)</label>
                    <input name="retry_interval" type="number" value="{{ $v('retry_interval') }}" class="tf-input">
                </div>
                <div class="col-md-3">
                    <label class="tf-label">Expiration (s)</label>
                    <input name="expiration" type="number" value="{{ $v('expiration') }}" class="tf-input">
                </div>
                <div class="col-md-3">
                    <label class="tf-label">Max Retries</label>
                    <input name="max_retries" type="number" value="{{ $v('max_retries') }}" class="tf-input">
                </div>
                <div class="col-md-3">
                    <label class="tf-label">Forbidden Retry Interval (s)</label>
                    <input name="forbidden_retry_interval" type="number" value="{{ $v('forbidden_retry_interval') }}" class="tf-input">
                </div>
            </div>
            <div class="row g-3 mt-2">
                <div class="col-md-4">
                    <label class="tf-label">Fatal Retry Interval (s)</label>
                    <input name="fatal_retry_interval" type="number" value="{{ $v('fatal_retry_interval') }}" class="tf-input">
                </div>
                <div class="col-md-4">
                    <label class="tf-label">Line Support</label>
                    <select name="line" class="tf-select">
                        <option value="no" @selected($v('line') === false || $v('line') === 'no' || $v('line') === null)">No</option>
                        <option value="yes" @selected($v('line') === true || $v('line') === 'yes')">Yes</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="tf-label">Support Outbound</label>
                    <select name="support_outbound" class="tf-select">
                        <option value="no" @selected($v('support_outbound') === false || $v('support_outbound') === 'no' || $v('support_outbound') === null)">No</option>
                        <option value="yes" @selected($v('support_outbound') === true || $v('support_outbound') === 'yes')">Yes</option>
                    </select>
                </div>
            </div>
            <div class="row g-3 mt-2">
                <div class="col-md-6">
                    <label class="tf-label">Endpoint</label>
                    <input name="reg_endpoint" value="{{ $v('endpoint') }}" class="tf-input" placeholder="e.g., trunk-Vodacom">
                </div>
                <div class="col-md-6">
                    <label class="tf-label">Security Negotiation</label>
                    <select name="security_negotiation" class="tf-select">
                        <option value="" @selected(empty($v('security_negotiation')))">Default</option>
                        <option value="yes" @selected($v('security_negotiation') === 'yes')">Yes</option>
                        <option value="no" @selected($v('security_negotiation') === 'no')">No</option>
                    </select>
                </div>
            </div>

            <div class="row g-3 mt-2">
                <div class="col-12">
                    <div class="d-flex align-items-center gap-2 py-1">
                        <label class="tf-switch mb-0">
                            <input type="checkbox" name="auth_rejection_permanent" value="1" @checked($v('auth_rejection_permanent'))>
                            <span class="tf-switch-slider"></span>
                        </label>
                        <span style="font-size:.83rem;color:#1e293b;font-weight:500;">Permanent Auth Rejection</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    {{-- CLI Mapping Card --}}
    <div class="tf-card mt-3">
        <div class="tf-card-header"><x-lucide-user style="width:15px;height:15px;color:#6366f1;" /> CLI Mapping</div>
        <div class="tf-card-body">
            <div class="tf-input-hint mb-3">Map extension numbers to carrier-approved CLIs for carriers that reject extension numbers</div>
            <div id="cli-mapping-container">
                @php
                    $cliMappings = DB::table('trunk_cli_mapping')->where('trunk_id', optional($endpoint)->id ?? '')->get();
                @endphp
                @if($cliMappings->isEmpty())
                    <div class="text-muted small">No CLI mappings configured</div>
                @else
                    @foreach($cliMappings as $mapping)
                        <div class="row g-2 mb-2 cli-mapping-row">
                            <div class="col-md-5">
                                <input type="text" class="tf-input mapping-extension" value="{{ $mapping->extension }}" placeholder="Extension (e.g., 1352)">
                            </div>
                            <div class="col-md-5">
                                <input type="text" class="tf-input mapping-cli" value="{{ $mapping->outbound_cli }}" placeholder="Outbound CLI (e.g., 27410032270)">
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-sm btn-outline-danger w-100" onclick="removeCliMapping(this)">Remove</button>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
            <button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addCliMapping()">+ Add Mapping</button>
        </div>
    </div>
</div>

{{-- ══ TEAMS ══ --}}
<div class="etf-pane" id="etf-teams">
    <div class="row g-3">
        <div class="col-12 col-lg-6">
            <div class="tf-card h-100">
                <div class="tf-card-header"><x-lucide-video style="width:15px;height:15px;color:#6366f1;" /> Microsoft Teams Preset Values</div>
                <div class="tf-card-body">
                    <table class="tf-info-table">
                        <tr><td class="tf-it-key">Description</td><td class="tf-it-val">MSTeams</td></tr>
                        <tr><td class="tf-it-key">Transport</td><td class="tf-it-val">transport-tls</td></tr>
                        <tr><td class="tf-it-key">Codecs</td><td class="tf-it-val">ulaw, alaw, gsm</td></tr>
                        <tr><td class="tf-it-key">DTMF</td><td class="tf-it-val">rfc4733</td></tr>
                        <tr><td class="tf-it-key">Username</td><td class="tf-it-val">msteams</td></tr>
                        <tr><td class="tf-it-key">Contact</td><td class="tf-it-val">sip:sip.pstnhub.microsoft.com</td></tr>
                        <tr><td class="tf-it-key">From Domain</td><td class="tf-it-val">msteams.nextfour.co.za</td></tr>
                        <tr><td class="tf-it-key">Identify By</td><td class="tf-it-val">auth_username</td></tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="tf-card h-100 d-flex flex-column">
                <div class="tf-card-header"><x-lucide-zap style="width:15px;height:15px;color:#f59e0b;" /> Apply Teams Defaults</div>
                <div class="tf-card-body d-flex flex-column flex-grow-1">
                    <p style="font-size:.84rem;color:#64748b;margin-bottom:16px;">Fills the form with a Microsoft Teams Direct Routing baseline. You can adjust values after applying.</p>
                    <button type="button" class="btn btn-primary mt-auto" id="applyTeamsPreset">
                        <x-lucide-zap style="width:14px;height:14px;" /> Apply Teams Preset
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ══ ADVANCED ══ --}}
<div class="etf-pane" id="etf-advanced">
    <div class="tf-card">
        <div class="tf-card-header">
            <svg style="width:15px;height:15px;color:#6366f1;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M4.93 4.93a10 10 0 0 0 0 14.14M8.46 8.46a5 5 0 0 0 0 7.07"/></svg>
            Dialplan &amp; Context
        </div>
        <div class="tf-card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="tf-label">Inbound Dialplan Context <span class="tf-tooltip" data-tip="Locked to trunks-in — the context where all inbound DID routes are generated. Changing it would stop inbound calls from reaching your routes.">?</span></label>
                    <input name="context" value="trunks-in" class="tf-input" readonly style="background:#f1f3f5;cursor:not-allowed;">
                    <div class="tf-input-hint"><i class="lucide-lock" style="width:12px;height:12px;"></i> Locked to <code>trunks-in</code> so inbound DID routes are always reached.</div>
                </div>
                <div class="col-md-6">
                    <label class="tf-label">Language <span class="tf-tooltip" data-tip="Default language for prompts and announcements on this trunk">?</span></label>
                    <input name="language" value="{{ $v('language') }}" class="tf-input" placeholder="en">
                </div>
            </div>
        </div>
    </div>
    <div class="tf-card">
        <div class="tf-card-header">
            <svg style="width:15px;height:15px;color:#6366f1;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            Session Timers
            <span class="tf-card-header-desc">SIP session refresh / keep-alive settings</span>
        </div>
        <div class="tf-card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="tf-label">Timers <span class="tf-tooltip" data-tip="Enable SIP session timers (RFC 4028)">?</span></label>
                    <select name="timers" class="tf-select">
                        <option value="no"  @selected(!$v('timers'))>Disabled</option>
                        <option value="yes" @selected( $v('timers'))>Enabled</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="tf-label">Min SE (s) <span class="tf-tooltip" data-tip="Minimum session expires value (seconds)">?</span></label>
                    <input name="timers_min_se" type="number" value="{{ $v('timers_min_se') ?: 90 }}" class="tf-input">
                </div>
                <div class="col-md-4">
                    <label class="tf-label">Session Expires (s) <span class="tf-tooltip" data-tip="Session expiration timer (seconds)">?</span></label>
                    <input name="timers_sess_expires" type="number" value="{{ $v('timers_sess_expires') ?: 1800 }}" class="tf-input">
                </div>
            </div>
        </div>
    </div>
    <div class="tf-card">
        <div class="tf-card-header">
            <svg style="width:15px;height:15px;color:#6366f1;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
            SIP Reliability &amp; Early Media
            <span class="tf-card-header-desc">100rel, progress tone and media fork behaviour</span>
        </div>
        <div class="tf-card-body">
            <div class="tf-bool-grid">
                <div class="tf-bool-item">
                    <label class="tf-switch mb-0">
                        <input type="checkbox" name="100rel" value="1" @checked($v('100rel'))>
                        <span class="tf-switch-slider"></span>
                    </label>
                    <div>
                        <div class="tf-bool-label">100rel (PRACK) <span class="tf-tooltip" data-tip="Enable reliable provisional responses (RFC 3262). Disable if carrier sends CANCEL after 183.">?</span></div>
                        <div class="tf-bool-desc">Reliable 183/180 responses</div>
                    </div>
                </div>
                <div class="tf-bool-item">
                    <label class="tf-switch mb-0">
                        <input type="checkbox" name="inband_progress" value="1" @checked($v('inband_progress'))>
                        <span class="tf-switch-slider"></span>
                    </label>
                    <div>
                        <div class="tf-bool-label">Inband Progress <span class="tf-tooltip" data-tip="Generate a 183 Session Progress with SDP when in-band ringing is heard">?</span></div>
                        <div class="tf-bool-desc">183 with inband ringback</div>
                    </div>
                </div>
                <div class="tf-bool-item">
                    <label class="tf-switch mb-0">
                        <input type="checkbox" name="follow_early_media_fork" value="1" @checked($v('follow_early_media_fork'))>
                        <span class="tf-switch-slider"></span>
                    </label>
                    <div>
                        <div class="tf-bool-label">Follow Early Media Fork <span class="tf-tooltip" data-tip="Follow early media when call forks. Disable to stop 183 SDP from being forwarded upstream.">?</span></div>
                    </div>
                </div>
                <div class="tf-bool-item">
                    <label class="tf-switch mb-0">
                        <input type="checkbox" name="ignore_183_without_sdp" value="1" @checked($v('ignore_183_without_sdp'))>
                        <span class="tf-switch-slider"></span>
                    </label>
                    <div>
                        <div class="tf-bool-label">Ignore 183 Without SDP <span class="tf-tooltip" data-tip="Ignore 183 Session Progress responses that do not contain an SDP body">?</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ══ SECURITY ══ --}}
<div class="etf-pane" id="etf-security">
    <div class="tf-card">
        <div class="tf-card-header">
            <svg style="width:15px;height:15px;color:#6366f1;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            Access Control &amp; ACL
        </div>
        <div class="tf-card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="tf-label">ACL Profile <span class="tf-tooltip" data-tip="Named ACL to apply. Defines which source IPs are permitted to send SIP to this endpoint.">?</span></label>
                    <input name="acl" value="{{ $v('acl') }}" class="tf-input" placeholder="e.g., myacl">
                    <div class="tf-input-hint">Leave blank for no IP restriction</div>
                </div>
                <div class="col-md-6">
                    <label class="tf-label">Identify By <span class="tf-tooltip" data-tip="How Asterisk matches incoming requests to this endpoint — username, IP, or both">?</span></label>
                    <select name="identify_by" class="tf-select">
                        @foreach(['username','auth_username','ip'] as $opt)
                            <option value="{{ $opt }}" @selected($v('identify_by') === $opt)>{{ $opt }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="tf-card">
        <div class="tf-card-header">
            <svg style="width:15px;height:15px;color:#6366f1;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>
            Media Encryption
        </div>
        <div class="tf-card-body">
            <div class="row g-3">
                <div class="col-md-5">
                    <label class="tf-label">Encryption Mode <span class="tf-tooltip" data-tip="SDES: SRTP key negotiated in SDP. DTLS: WebRTC-style DTLS handshake. No: unencrypted RTP.">?</span></label>
                    <select name="media_encryption" class="tf-select">
                        <option value="no"   @selected($v('media_encryption') === 'no'   || empty($v('media_encryption')))>None (RTP)</option>
                        <option value="sdes" @selected($v('media_encryption') === 'sdes')>SDES (SRTP)</option>
                        <option value="dtls" @selected($v('media_encryption') === 'dtls')>DTLS (WebRTC)</option>
                    </select>
                </div>
                <div class="col-md-7">
                    <div class="tf-bool-grid">
                        <div class="tf-bool-item">
                            <label class="tf-switch mb-0">
                                <input type="checkbox" name="srtp_tag_32" value="1" @checked($v('srtp_tag_32'))>
                                <span class="tf-switch-slider"></span>
                            </label>
                            <div>
                                <div class="tf-bool-label">SRTP Tag 32 <span class="tf-tooltip" data-tip="Use 32-bit authentication tag for SRTP (some carriers require this)">?</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tf-card">
        <div class="tf-card-header">
            <svg style="width:15px;height:15px;color:#94a3b8;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
            Routing
        </div>
        <div class="tf-card-body">
            <p class="tf-input-hint mb-0">Outbound route associations are configured in <a href="#">Outbound Routes</a>. Assign this trunk there to control which calls are sent through it.</p>
        </div>
    </div>
</div>

</div>{{-- end etf-content --}}

{{-- ════ STATUS PANEL ════ --}}
<div class="etf-status" id="etfStatusPanel">
    <div>
        <div class="etf-stat-title">Trunk Status</div>
        <div style="text-align:center;padding:10px 0;">
            @if($isEdit)
                <div id="etf-reg-dot" style="margin-bottom:6px;">
                    <span class="etf-dot grey" id="etfRegDotEl"></span>
                    <span style="font-size:.76rem;font-weight:700;color:#6b7280;" id="etfRegLabel">Checking...</span>
                </div>
            @else
                <div id="etf-new-trunk-status">
                    <span class="etf-dot grey"></span>
                    <span style="font-size:.76rem;font-weight:700;color:#6b7280;">Not Yet Created</span>
                </div>
            @endif
        </div>
        @if($isEdit)
        <div class="etf-stat-row">
            <span class="etf-stat-key">Registration</span>
            <span class="etf-stat-val" id="etfRegStatus">—</span>
        </div>
        <div class="etf-stat-row">
            <span class="etf-stat-key">Last Reg</span>
            <span class="etf-stat-val" id="etfLastReg">—</span>
        </div>
        <div class="etf-stat-row">
            <span class="etf-stat-key">OPTIONS</span>
            <span class="etf-stat-val" id="etfOptions">—</span>
        </div>
        <div class="etf-stat-row">
            <span class="etf-stat-key">Active Calls</span>
            <span class="etf-stat-val" id="etfActiveCalls">—</span>
        </div>
        @else
        <div class="etf-stat-row">
            <span class="etf-stat-key">Endpoint</span>
            <span class="etf-stat-val" style="color:#9ca3af;">N/A</span>
        </div>
        <div class="etf-stat-row">
            <span class="etf-stat-key">Auth</span>
            <span class="etf-stat-val" style="color:#9ca3af;">N/A</span>
        </div>
        <div class="etf-stat-row">
            <span class="etf-stat-key">AOR</span>
            <span class="etf-stat-val" style="color:#9ca3af;">N/A</span>
        </div>
        <div class="etf-stat-row">
            <span class="etf-stat-key">Registration</span>
            <span class="etf-stat-val" style="color:#9ca3af;">N/A</span>
        </div>
        @endif
    </div>
    @if($isEdit)
    <div>
        <div class="etf-stat-title">Host Validation</div>
        <div id="etfHostValidation" style="font-size:.73rem;color:#9ca3af;">Enter a host above to validate</div>
    </div>
    <div style="margin-top:auto;">
        <button type="button" id="etfTestBtn" class="btn btn-sm w-100" style="background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:.78rem;font-weight:600;padding:7px;">
            <svg style="width:12px;height:12px;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 8 12 12 14 14"/></svg>
            Test Connection
        </button>
    </div>
    @endif
</div>

</div>{{-- end etf-shell --}}

{{-- ════ STICKY ACTION BAR ════ --}}
<style>
.etf-action-bar {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    margin: 0 -1px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    z-index: 50;
    box-shadow: 0 -4px 12px rgba(15,23,42,.06);
    flex-wrap: wrap;
}
.etf-action-left  { display:flex; align-items:center; gap:8px; }
.etf-action-right { display:flex; align-items:center; gap:8px; }
.etf-btn-ghost {
    padding: 7px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #fff;
    color: #374151;
    font-size: .81rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
    display:inline-flex;align-items:center;gap:5px;
}
.etf-btn-ghost:hover { background: #f9fafb; }
.etf-btn-primary {
    padding: 7px 18px;
    border: none;
    border-radius: 7px;
    background: #4f46e5;
    color: #fff;
    font-size: .81rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s;
    display:inline-flex;align-items:center;gap:5px;
}
.etf-btn-primary:hover { background: #4338ca; }
.etf-btn-success {
    padding: 7px 18px;
    border: none;
    border-radius: 7px;
    background: #16a34a;
    color: #fff;
    font-size: .81rem;
    font-weight: 700;
    cursor: pointer;
    display:inline-flex;align-items:center;gap:5px;
}
.etf-btn-success:hover { background: #15803d; }
</style>

<div class="etf-action-bar">
    <div class="etf-action-left">
        <button type="button" id="etfValidateBtn" class="etf-btn-ghost">
            <svg style="width:13px;height:13px;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
            Validate
        </button>
        <button type="button" id="etfTestConnBtn" class="etf-btn-ghost">
            <svg style="width:13px;height:13px;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
            Test Connection
        </button>
        <button type="button" id="etfDraftBtn" class="etf-btn-ghost" style="color:#64748b;">
            <svg style="width:13px;height:13px;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
            Save Draft
        </button>
    </div>
    <div class="etf-action-right">
        <a href="{{ route('trunks.sip-trunks.index') }}" class="etf-btn-ghost">Cancel</a>
        <button type="submit" class="etf-btn-primary" name="_save_action" value="save">
            <svg style="width:13px;height:13px;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
            Save
        </button>
        <button type="submit" class="etf-btn-success" name="_save_action" value="apply">
            <svg style="width:13px;height:13px;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
            Save &amp; Apply
        </button>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {

    // ── Sidebar nav switcher ──
    const nav = document.getElementById('etfNav');
    if (nav) {
        nav.addEventListener('click', function (e) {
            const btn = e.target.closest('.etf-nav-item');
            if (!btn) return;
            nav.querySelectorAll('.etf-nav-item').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            const target = btn.dataset.pane;
            document.querySelectorAll('.etf-pane').forEach(p => p.classList.remove('active'));
            const pane = document.getElementById(target);
            if (pane) pane.classList.add('active');
        });
    }

    // ── Reveal the pane that holds an invalid field on submit ──
    // The form is split into panes (only one visible at a time). A required
    // field on a hidden pane (e.g. Trunk ID on Overview) makes the browser
    // fail validation with "invalid form control is not focusable" and the
    // Save silently does nothing. Catch that, switch to the offending field's
    // pane, and focus it so the user actually sees what's wrong.
    const trunkForm = document.getElementById('trunk-form');
    if (trunkForm) {
        trunkForm.addEventListener('invalid', function (e) {
            const field = e.target;
            const pane = field.closest ? field.closest('.etf-pane') : null;
            if (pane && !pane.classList.contains('active')) {
                document.querySelectorAll('.etf-pane').forEach(p => p.classList.remove('active'));
                pane.classList.add('active');
                const navBtn = document.querySelector('.etf-nav-item[data-pane="' + pane.id + '"]');
                if (navBtn) {
                    document.querySelectorAll('.etf-nav-item').forEach(b => b.classList.remove('active'));
                    navBtn.classList.add('active');
                }
            }
            if (field && typeof field.focus === 'function') {
                field.focus();
                if (typeof field.reportValidity === 'function') field.reportValidity();
            }
        }, true); // capture phase — the invalid event does not bubble
    }

    // ── Keep the registration account in step with the auth Username ──
    // The provider account is entered once (Authentication → Username). The
    // Registration "Client URI" and "Contact User" auto-follow it so a typo
    // can't make them diverge — which silently breaks registration (this bit a
    // client: auth username 00685927876 vs registration 0068592876). Only blank
    // / untouched fields are auto-filled, so manual overrides and edits stand.
    (function () {
        const userInput   = document.querySelector('input[name="username"]');
        const hostInputEl = document.querySelector('input[name="from_domain"]');
        const clientUriIn = document.querySelector('input[name="reg_client_uri"]');
        const contactIn   = document.querySelector('input[name="reg_contact_user"]');
        if (!userInput || !clientUriIn || !contactIn) return;

        // A field stays "auto" until the user types directly into it.
        clientUriIn.dataset.auto = clientUriIn.value.trim() === '' ? '1' : '0';
        contactIn.dataset.auto   = contactIn.value.trim() === '' ? '1' : '0';
        clientUriIn.addEventListener('input', () => { clientUriIn.dataset.auto = '0'; });
        contactIn.addEventListener('input', () => { contactIn.dataset.auto = '0'; });

        function sync() {
            const u = userInput.value.trim();
            if (!u) return;
            if (contactIn.dataset.auto === '1') contactIn.value = u;
            if (clientUriIn.dataset.auto === '1') {
                let host = (hostInputEl && hostInputEl.value.trim()) ? hostInputEl.value.trim() : '';
                host = host.replace(/^sip:/i, '').replace(/^sips:/i, '');
                clientUriIn.value = host ? ('sip:' + u + '@' + host) : ('sip:' + u);
            }
        }
        userInput.addEventListener('input', sync);
        if (hostInputEl) hostInputEl.addEventListener('input', sync);
    })();

    // ── Real-time host validation ──
    let validateTimer = null;
    const hostInput = document.querySelector('input[name="from_domain"]');
    const validationEl = document.getElementById('etfHostValidation');

    function validateHost(host) {
        if (!host || !validationEl) return;
        validationEl.innerHTML = '<span style="color:#f59e0b;">&#9679; Checking ' + host + '...</span>';
        fetch('/api/trunk/validate-host?host=' + encodeURIComponent(host))
            .then(r => r.json())
            .then(d => {
                if (d.reachable) {
                    validationEl.innerHTML =
                        '<span style="color:#16a34a;">&#9679; Reachable</span>' +
                        (d.latency ? '<br><span style="font-size:.69rem;color:#9ca3af;">Latency: ' + d.latency + 'ms</span>' : '') +
                        (d.dns     ? '<br><span style="font-size:.69rem;color:#9ca3af;">DNS: ' + d.dns + '</span>' : '');
                } else {
                    validationEl.innerHTML = '<span style="color:#dc2626;">&#9679; Unreachable</span><br><span style="font-size:.69rem;color:#9ca3af;">' + (d.error || '') + '</span>';
                }
            })
            .catch(() => { if(validationEl) validationEl.innerHTML = '<span style="font-size:.73rem;color:#9ca3af;">Validation unavailable</span>'; });
    }

    if (hostInput) {
        hostInput.addEventListener('input', function () {
            clearTimeout(validateTimer);
            validateTimer = setTimeout(() => validateHost(this.value.trim()), 900);
        });
        if (hostInput.value.trim()) validateHost(hostInput.value.trim());
    }

    // ── Load trunk status (edit mode only) ──
    @if($isEdit)
    const trunkId = '{{ $v('id') }}';
    if (trunkId) {
        loadTrunkStatus();
        // Refresh status every 10 seconds
        setInterval(loadTrunkStatus, 10000);
    }

    async function loadTrunkStatus() {
        try {
            const response = await fetch(`/api/trunks/${trunkId}/test-registration`, {
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content
                }
            });
            const data = await response.json();
            
            // Update status panel
            const regDot = document.getElementById('etfRegDotEl');
            const regLabel = document.getElementById('etfRegLabel');
            const regStatus = document.getElementById('etfRegStatus');
            const lastReg = document.getElementById('etfLastReg');
            const options = document.getElementById('etfOptions');
            const activeCalls = document.getElementById('etfActiveCalls');
            
            if (regDot && regLabel) {
                if (data.status === 'Registered') {
                    regDot.className = 'etf-dot green';
                    regLabel.textContent = 'Registered';
                    regLabel.style.color = '#16a34a';
                } else if (data.status === 'Unknown' || data.status === 'Not Found') {
                    regDot.className = 'etf-dot red';
                    regLabel.textContent = 'Not Registered';
                    regLabel.style.color = '#dc2626';
                } else {
                    regDot.className = 'etf-dot amber';
                    regLabel.textContent = data.status || 'Checking...';
                    regLabel.style.color = '#f59e0b';
                }
            }
            
            if (regStatus) {
                regStatus.textContent = data.status || '—';
            }
            
            if (lastReg) {
                lastReg.textContent = data.last_reg || 'Never';
            }
            
            if (options) {
                // Try SIP OPTIONS
                const optsResponse = await fetch(`/api/trunks/${trunkId}/sip-options`, {
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content
                    }
                });
                const optsData = await optsResponse.json();
                options.textContent = optsData.output && optsData.output.includes('Sent') ? 'OK' : '—';
            }
            
            if (activeCalls) {
                // Get active calls from Asterisk
                activeCalls.textContent = '—'; // TODO: Implement active calls tracking
            }
        } catch (error) {
            console.error('Failed to load trunk status:', error);
        }
    }
    @endif

    // ── Validate button ──
    document.getElementById('etfValidateBtn')?.addEventListener('click', async function () {
        const trunkId = document.querySelector('input[name="id"]')?.value;
        if (!trunkId) {
            alert('Please save the trunk first before validating');
            return;
        }
        
        this.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Validating...';
        this.disabled = true;
        
        try {
            const response = await fetch(`/trunks/sip-trunks/${trunkId}/validate`, {
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content
                }
            });
            
            const data = await response.json();
            
            if (data.overall_status === 'PASS') {
                this.innerHTML = '<svg style="width:13px;height:13px;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg> Valid';
                this.style.color = '#16a34a';
                
                // Show detailed results
                let message = 'Trunk validation PASSED\n\n';
                data.checks.forEach(check => {
                    message += `[${check.category}] ${check.check}: ${check.status}\n`;
                });
                alert(message);
            } else {
                this.innerHTML = '<svg style="width:13px;height:13px;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg> Failed';
                this.style.color = '#dc2626';
                
                // Show detailed errors
                let message = 'Trunk validation FAILED\n\n';
                data.checks.forEach(check => {
                    if (check.status === 'FAIL') {
                        message += `[${check.category}] ${check.check}: ${check.message}\n  Action: ${check.action}\n\n`;
                    }
                });
                alert(message);
            }
        } catch (error) {
            this.innerHTML = '<svg style="width:13px;height:13px;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg> Error';
            this.style.color = '#dc2626';
            alert('Validation failed: ' + error.message);
        }
        
        setTimeout(() => {
            this.innerHTML = '<svg style="width:13px;height:13px;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg> Validate';
            this.style.color = '';
            this.disabled = false;
        }, 5000);
    });

    // ── Test connection button ──
    async function testConnection() {
        const trunkId = document.querySelector('input[name="id"]')?.value;
        if (!trunkId) {
            alert('Please save the trunk first before testing connection');
            return;
        }
        
        const btn = document.getElementById('etfTestBtn') || document.getElementById('etfTestConnBtn');
        if (btn) {
            btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Testing...';
            btn.disabled = true;
        }
        
        try {
            // Test registration status
            const regResponse = await fetch(`/api/trunks/${trunkId}/test-registration`, {
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content
                }
            });
            const regData = await regResponse.json();
            
            // Test SIP OPTIONS
            const optionsResponse = await fetch(`/api/trunks/${trunkId}/sip-options`, {
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content
                }
            });
            const optionsData = await optionsResponse.json();
            
            // Display results
            let message = '=== Trunk Connection Test Results ===\n\n';
            message += `Trunk ID: ${trunkId}\n\n`;
            message += `--- Registration Status ---\n`;
            message += `Status: ${regData.status || 'Unknown'}\n`;
            message += `Last Registration: ${regData.last_reg || 'Never'}\n`;
            message += `Last Response: ${regData.last_response || 'N/A'}\n`;
            message += `Next Retry: ${regData.next_retry || 'N/A'}\n\n`;
            message += `--- SIP OPTIONS ---\n`;
            message += `AOR: ${optionsData.aor || 'N/A'}\n`;
            message += `Output: ${optionsData.output || 'No response'}\n\n`;
            
            alert(message);
        } catch (error) {
            alert('Connection test failed: ' + error.message);
        }
        
        if (btn) {
            btn.innerHTML = '<svg style="width:13px;height:13px;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg> Test';
            btn.disabled = false;
        }
    }
    document.getElementById('etfTestBtn')?.addEventListener('click', testConnection);
    document.getElementById('etfTestConnBtn')?.addEventListener('click', testConnection);

    // ── Draft save ──
    document.getElementById('etfDraftBtn')?.addEventListener('click', function () {
        const formData = {};
        const form = document.getElementById('trunk-form') || document.querySelector('form');
        if (form) new FormData(form).forEach((v, k) => { formData[k] = v; });
        try { sessionStorage.setItem('trunk_draft', JSON.stringify(formData)); } catch(e) {}
        this.innerHTML = '&#10003; Draft Saved';
        setTimeout(() => { this.innerHTML = '<svg style="width:13px;height:13px;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> Save Draft'; }, 2000);
    });

    // ── Teams preset ──
    document.getElementById('applyTeamsPreset')?.addEventListener('click', function () {
        const set = (n, v) => { const el = document.querySelector('[name="' + n + '"]'); if (el) { el.value = v; el.dispatchEvent(new Event('change')); } };
        const check = (n, v) => { const el = document.querySelector('[name="' + n + '"]'); if (el && el.type === 'checkbox') el.checked = !!v; };
        set('description',    'MSTeams');
        set('transport',      'transport-tls');
        set('identify_by',    'auth_username');
        set('dtmf_mode',      'rfc4733');
        set('contact',        'sip:sip.pstnhub.microsoft.com');
        set('from_domain',    'msteams.nextfour.co.za');
        document.querySelectorAll('[name="codecs[]"]').forEach(cb => { cb.checked = ['ulaw','alaw','gsm'].includes(cb.value); });
        check('rewrite_contact', true); check('rtp_symmetric', true); check('force_rport', true);
        alert('Teams Direct Routing preset applied. Review and save.');
    });

    // ── Form submit debug ──
    const form = document.getElementById('trunk-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            console.log('Form submit triggered, action:', form.action);
        });
    }
});
</script>