<!-- ===================== 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}.default-radio-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:#fff;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;color:var(--text-muted)}.default-radio-pill input{width:16px;height:16px}.default-radio-pill:has(input:checked){background:#ecfdf5;border-color:#10b981;color:#047857}@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=0; foreach($account_countries as $cid=>$isDef){ if((int)$isDef===1){ $defaultCountryId=(int)$cid; break; } }
?>
<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'])) ?>" data-country-id="<?= crmEid($c['id']) ?>">
            <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><button type="button" class="btn btn-primary btn-sm country-add-btn">Add</button><input type="checkbox" class="country-checkbox" value="<?= crmEid($c['id']) ?>" style="display:none"></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'])) ?>" data-country-id="<?= crmEid($c['id']) ?>">
            <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="<?= crmEid($c['id']) ?>" checked><label class="default-radio-pill"><input type="radio" name="default_country" value="<?= crmEid($c['id']) ?>" <?= $isDefault?'checked':'' ?>> Default</label></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'});}
function updateCountryCounts(){const notAdded=document.querySelectorAll('#not-added-list .country-item').length; const added=document.querySelectorAll('#added-list .country-item').length; const heads=document.querySelectorAll('#tab-countries .country-panel-head .badge'); if(heads[0])heads[0].textContent=notAdded; if(heads[1])heads[1].textContent=added;}
document.addEventListener('click', function(e){
  const btn=e.target.closest('.country-add-btn'); if(!btn)return;
  const row=btn.closest('.country-item'); const cb=row.querySelector('.country-checkbox'); cb.checked=true;
  row.classList.add('added');
  const actions=row.querySelector('.country-actions');
  actions.innerHTML='<span class="text-xs text-muted">Keep</span><input type="checkbox" class="country-checkbox" value="'+cb.value+'" checked><label class="default-radio-pill"><input type="radio" name="default_country" value="'+cb.value+'"> Default</label>';
  document.getElementById('added-list').prepend(row);
  showToast('Added to my account', 'success');
  updateCountryCounts();
});
</script>
</div>
