<?php
// Photo principale (si plusieurs séparées par virgules)
// --- Gestion photos multiples ---
$photos = [];
if (!empty($annonce['photo'])) {
    $parts = explode(",", $annonce['photo']);
    foreach ($parts as $p) {
        $p = trim($p);
        if ($p !== "") $photos[] = $p;
    }
}

$mainPhoto = $photos[0] ?? "/img/default-ad.webp";


// WhatsApp number
$telWhatsApp = preg_replace('/[^0-9]/', '', $annonce['tel']);

// Ajout indicatif pays si stocké dans ton système
$countryCode = $_SESSION['COUNTRY']['dial_code'] ?? ""; 
if ($countryCode && strpos($telWhatsApp, $countryCode) !== 0) {
    $telWhatsApp = $countryCode . $telWhatsApp;
}
?>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
  .related .card {transition: transform .2s;}
  .related .card:hover {transform: scale(1.05);}
  .badge-cat { font-size: 0.9rem; }
  .country-flag { width: 28px; height: auto; margin-right: 5px; }
  .img-main { object-fit: cover; max-height: 420px; width: 100%; }
</style>

<!-- Listing Details -->
<div class="card shadow-lg mb-5">
  <div class="row g-0">

  <div class="col-md-5">

    <!-- PHOTO PRINCIPALE -->
    <img id="mainPhoto"
         src="<?= htmlspecialchars($mainPhoto) ?>"
         class="img-fluid rounded mb-3 w-100"
         style="object-fit: cover; max-height: 420px;"
         alt="Photo">

    <!-- MINIATURES -->
    <?php if (count($photos) > 1): ?>
        <div class="d-flex flex-wrap gap-2">

            <?php foreach ($photos as $p): ?>
                <img src="<?= htmlspecialchars($p) ?>"
                     class="img-thumbnail thumb-photo"
                     style="width: 75px; height: 75px; object-fit: cover; cursor: pointer;"
                     onclick="changePhoto('<?= htmlspecialchars($p) ?>')">
            <?php endforeach; ?>

        </div>
    <?php endif; ?>
</div>
<script>
function changePhoto(src) {
    document.getElementById('mainPhoto').src = src;
}
</script>

<?php
/*
    <!-- Photo -->
    <div class="col-md-5 bg-light">
      <?php if ($mainPhoto): ?>
        <img src="<?= htmlspecialchars($mainPhoto) ?>" 
             class="img-main rounded-start"
             alt="<?= htmlspecialchars($annonce['titre']) ?>">
      <?php else: ?>
        <img src="https://via.placeholder.com/500x350?text=No+photo" 
             class="img-main rounded-start" 
             alt="No photo">
      <?php endif; ?>
    </div>
*/
?>
    <!-- Content -->
    <div class="col-md-7">
      <div class="card-body">

        <div class="d-flex justify-content-between align-items-center">
          <h3 class="card-title mb-0"><?= htmlspecialchars($annonce['titre']) ?></h3>
          <span class="badge bg-primary badge-cat">
            <?= ucfirst(htmlspecialchars($annonce['categorie'])) ?>
          </span>
        </div>

        <p class="card-text text-muted mt-1">
          <?= trad('Posted on'); ?> 
          <?= date("d/m/Y H:i", strtotime($annonce['ajtle'])) ?>

          <?php if (!empty($annonce['ville'])): ?>
            • <img src="https://flagcdn.com/w40/<?= strtolower($annonce['pays']); ?>.png" 
                   class="country-flag" 
                   alt="<?= htmlspecialchars($annonce['pays']); ?>">
            <?= htmlspecialchars($annonce['ville']) ?>
          <?php endif; ?>
        </p>

        <p class="card-text mt-3"><?= nl2br(htmlspecialchars($annonce['description'])) ?></p>

        <?php if ($annonce['prix'] > 0): ?>
          <h4 class="text-success fw-bold"><?= number_format($annonce['prix'], 0, ',', ' ') ?></h4>
        <?php endif; ?>

        <hr class="my-4">

        <h5 class="mb-1"><?= trad('Contact'); ?></h5>

        <!-- Contact buttons -->
        <?php if (!empty($annonce['tel'])): ?>

          <!-- Call button -->
          <a href="tel:<?= htmlspecialchars($annonce['tel']) ?>" 
             class="btn btn-outline-primary btn-sm mb-2">
            📞 <?= trad('Call'); ?>
          </a>

          <!-- WhatsApp button -->
          <a href="https://wa.me/<?= $telWhatsApp ?>?text=<?= urlencode("Hello, I am interested in your listing: " . $annonce['titre']) ?>" 
             class="btn btn-success btn-sm mb-2 ms-1"
             target="_blank">
            💬 WhatsApp
          </a>

        <?php endif; ?>

        <div class="mt-4">
          <a href="index.php" class="btn btn-secondary">← <?= trad('Back to listings'); ?></a>
        </div>

      </div>
    </div>

  </div>
</div>

<!-- Related Listings -->
<?php if ($related): ?>
  <h4 class="mb-3"><?= trad('Other listings in the same category'); ?></h4>

  <div class="row row-cols-1 row-cols-md-4 g-4 related">

    <?php foreach ($related as $r): ?>

      <?php
        $relPhoto = "";
        if (!empty($r['photo'])) {
          $p = explode(",", $r['photo']);
          $relPhoto = trim($p[0]);
        }
      ?>

      <div class="col">
        <div class="card h-100 shadow-sm">

          <img src="<?= $relPhoto ? htmlspecialchars($relPhoto) : 'https://via.placeholder.com/300x200?text=No+photo' ?>" 
               class="card-img-top" 
               alt="<?= htmlspecialchars($r['titre']) ?>">

          <div class="card-body">
            <h5 class="card-title text-truncate"><?= htmlspecialchars($r['titre']) ?></h5>
          </div>

          <div class="card-footer d-flex justify-content-between align-items-center">
            <span class="text-success fw-bold">
              <?= $r['prix'] > 0 ? number_format($r['prix'],0,',',' ') . '' : trad('Price not specified') ?>
            </span>
            <a href="index.php?p=details&ref=<?= $r['ref'] ?>" 
               class="btn btn-sm btn-primary">
              <?= trad('View'); ?>
            </a>
          </div>

        </div>
      </div>

    <?php endforeach; ?>

  </div>
<?php endif; ?>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
