<!-- ===================== COUNTRIES TAB ===================== -->
<div class="tab-pane <?= ($requested_tab === 'countries') ? 'active' : '' ?>" id="tab-countries">

<style>
.countries-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap:12px;
}

.country-box{
  border:1px solid #eee;
  border-radius:12px;
  padding:12px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  cursor:pointer;
  transition:0.2s;
  background:#fff;
}

.country-box:hover{
  border-color:#3B82F6;
  transform:translateY(-2px);
}

.country-left{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.country-name{
  font-weight:600;
  font-size:14px;
}

.default-badge{
  font-size:10px;
  padding:2px 6px;
  border-radius:6px;
  background:#10b981;
  color:#fff;
  width:fit-content;
}

.country-right{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.country-right small{
  font-size:10px;
  color:#666;
}
</style>

<div class="card" >

  <div class="card-header">
    <span class="card-title">🌍 Available Countries</span>
  </div>

  <div class="card-body">

    <!-- SEARCH -->
    <div class="form-group" style="margin-bottom:15px;">
      <input 
        type="text" 
        id="countrySearch" 
        class="form-control" 
        placeholder="Search country..."
        onkeyup="filterCountriesGrid()"
      >
    </div>

    <!-- GRID -->
    <div id="countriesList" class="countries-grid">

      <?php 
      // IMPORTANT: use $all_countries only ONCE (clone result first)
      $countriesRes = $conn->query("SELECT * FROM countries ORDER BY name ASC");

      while($c = $countriesRes->fetch_assoc()):
        $isChecked = isset($account_countries[$c['id']]);
        $isDefault = ($config['default_country'] ?? 0) == $c['id'];
      ?>

        <div class="country-box country-item" data-name="<?= strtolower($c['name']) ?>">

          <div class="country-left">
            <div class="country-name">
              <?= htmlspecialchars($c['name']) ?>
            </div>

            <?php if($isDefault): ?>
              <div class="default-badge">DEFAULT</div>
            <?php endif; ?>
          </div>

          <div class="country-right">

            <!-- SELECT COUNTRY -->
            <input 
              type="checkbox"
              class="country-checkbox"
              value="<?= $c['id'] ?>"
              <?= $isChecked ? 'checked' : '' ?>
            >

            <!-- DEFAULT COUNTRY -->
            <input 
              type="radio"
              name="default_country"
              value="<?= $c['id'] ?>"
              <?= $isDefault ? 'checked' : '' ?>
            >
            <small>default</small>

          </div>

        </div>

      <?php endwhile; ?>

    </div>

    <!-- SAVE -->
    <div style="margin-top:20px;">
      <button type="button" class="btn btn-primary" onclick="saveCountries()">
        💾 Save Countries
      </button>
    </div>

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