<!-- ===================== COUNTRIES TAB ===================== -->
<div class="tab-pane <?= ($requested_tab === 'countries') ? 'active' : '' ?>" id="tab-countries">
<style>
.country-two-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}.country-panel{border:1px solid var(--border);border-radius:14px;background:#fff;overflow:hidden}.country-panel-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg-base)}.country-list{max-height:520px;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px}.country-row{border:1px solid var(--border);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff}.country-row.added{border-color:#bfdbfe;background:#eff6ff}.country-row-title{font-weight:700}.country-row-code{font-size:12px;color:var(--text-muted)}.default-badge{font-size:10px;padding:2px 7px;border-radius:999px;background:#10b981;color:#fff;margin-left:6px}.country-actions{display:flex;align-items:center;gap:8px}.country-search{margin-bottom:10px}@media(max-width:800px){.country-two-cols{grid-template-columns:1fr}}
</style>
<?php
$allCountriesRows=[]; $cr=$conn->query("SELECT id,name,phone_code FROM countries ORDER BY name ASC"); while($cr && $row=$cr->fetch_assoc()) $allCountriesRows[]=$row;
$leftCountries=[]; $rightCountries=[]; foreach($allCountriesRows as $c){ if(isset($account_countries[$c['id']])) $rightCountries[]=$c; else $leftCountries[]=$c; }
$defaultCountryId=(int)($config['default_country'] ?? 0);
?>
<div class="card">
  <div class="card-header"><span class="card-title">🌍 Countries</span></div>
  <div class="card-body">
    <div class="country-two-cols">
      <div class="country-panel">
        <div class="country-panel-head"><strong>Not Added</strong><span class="badge badge-gray"><?= count($leftCountries) ?></span></div>
        <div style="padding:10px 10px 0"><input type="text" class="form-control country-search" placeholder="Search not added..." onkeyup="filterCountryPanel(this,'not-added-list')"></div>
        <div class="country-list" id="not-added-list">
          <?php foreach($leftCountries as $c): ?>
          <label class="country-row country-item" data-name="<?= strtolower(htmlspecialchars($c['name'])) ?>">
            <div><div class="country-row-title"><?= htmlspecialchars($c['name']) ?></div><div class="country-row-code"><?= htmlspecialchars($c['phone_code'] ?? '') ?></div></div>
            <div class="country-actions"><span class="text-xs text-muted">Add</span><input type="checkbox" class="country-checkbox" value="<?= (int)$c['id'] ?>"></div>
          </label>
          <?php endforeach; ?>
        </div>
      </div>
      <div class="country-panel">
        <div class="country-panel-head"><strong>Added to my account</strong><span class="badge badge-blue"><?= count($rightCountries) ?></span></div>
        <div style="padding:10px 10px 0"><input type="text" class="form-control country-search" placeholder="Search added..." onkeyup="filterCountryPanel(this,'added-list')"></div>
        <div class="country-list" id="added-list">
          <?php foreach($rightCountries as $c): $isDefault=$defaultCountryId===(int)$c['id']; ?>
          <label class="country-row country-item added" data-name="<?= strtolower(htmlspecialchars($c['name'])) ?>">
            <div><div class="country-row-title"><?= htmlspecialchars($c['name']) ?><?php if($isDefault): ?><span class="default-badge">DEFAULT</span><?php endif; ?></div><div class="country-row-code"><?= htmlspecialchars($c['phone_code'] ?? '') ?></div></div>
            <div class="country-actions"><span class="text-xs text-muted">Keep</span><input type="checkbox" class="country-checkbox" value="<?= (int)$c['id'] ?>" checked><input type="radio" name="default_country" value="<?= (int)$c['id'] ?>" <?= $isDefault?'checked':'' ?> title="Default"></div>
          </label>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
    <div style="margin-top:16px"><button type="button" class="btn btn-primary" onclick="saveCountries()">💾 Save Countries</button></div>
  </div>
</div>
<script>
function filterCountryPanel(input,listId){const q=(input.value||'').toLowerCase();document.querySelectorAll('#'+listId+' .country-item').forEach(el=>{el.style.display=(el.dataset.name||'').includes(q)?'flex':'none'});}
</script>
</div>
