<?php
session_start();

$lang = $_SESSION['ln'] ?? 'en';

$field = "nom_" . $lang;
$sql = "SELECT code, alpha2, $field AS nom_pays FROM mondialisa_pays WHERE statut = 1  ORDER BY nom_pays ASC";
$stmt = $dbh->query($sql);
$paysList = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<style>
body {
  background: #f8f9fa;
  font-family: system-ui, sans-serif;
}
.country-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.15s, background 0.15s;
}
.country-card:hover {
  transform: translateY(-2px);
  background: #f1f1f1;
}
.country-flag {
  width: 32px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid #ddd;
}
.search-box {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  border: 1px solid #ccc;
}
</style>

<div class="container my-4">
  <h3 class="text-center mb-4">🌍 <?= trad('Select your country'); ?></h3>

  <!-- Champ de recherche -->
  <div class="mb-4 text-center">
    <input type="text" id="search" class="form-control search-box" placeholder="">
  </div>

  <!-- Liste des pays -->
  <div id="countryList" class="row g-3">
    <?php foreach ($paysList as $p): 
      $flag = strtolower($p['alpha2']);
    ?>
      <div class="col-12 col-md-6 col-lg-4 country-item">
        <a href="index.php?country=<?= urlencode($p['code']); ?>" class="text-decoration-none text-dark">
          <div class="country-card">
            <img src="https://flagcdn.com/w40/<?= $flag; ?>.png" class="country-flag" alt="<?= htmlspecialchars($p['nom_pays']); ?>">
            <span><?= htmlspecialchars($p['nom_pays']); ?></span>
          </div>
        </a>
      </div>
    <?php endforeach; ?>
  </div>
</div>

<script>
// Filtrage en direct
document.getElementById('search').addEventListener('input', function() {
  let filter = this.value.toLowerCase();
  document.querySelectorAll('.country-item').forEach(item => {
    let text = item.textContent.toLowerCase();
    item.style.display = text.includes(filter) ? '' : 'none';
  });
});
</script>

