<section class="featured-section">
    <h3><?= trad('Recently added'); ?></h3>

    <p>
        <?php $newannonces = $_SESSION['newannonces']; ?>
        <?php if($keyword) echo trad('for')." <b>".htmlspecialchars($keyword)."</b>"; ?>
        <?php if($location && $location != "Localisation") echo trad('to')." <b>".htmlspecialchars($location)."</b>"; ?>
    </p>

    <div class="listings">
        <?php foreach($newannonces as $annonce):
            $photos = [];
            $field = trim($annonce['photo'] ?? '');
            if ($field !== '') {
                $photos = array_map('trim', explode(',', $field));
            }
            // Si pas de photo, ajouter l'image par défaut
if (empty($photos)) {
    $photos[] = '/img/default-ad.webp';
}
            $carouselId = 'carousel' . $annonce['ref'];
        ?>
        <div class="listing">
            <a href="index.php?p=details&ref=<?= urlencode($annonce['ref']) ?>">
                <!-- Carousel -->
                <div id="<?= $carouselId ?>" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <?php foreach ($photos as $i => $photo): ?>
                        <div class="carousel-item <?= $i === 0 ? 'active' : '' ?>">
                            <img src="<?= !empty($photo) ? htmlspecialchars($photo) : 'img/default-ad.webp'; ?>" class="d-block w-100" alt="<?= htmlspecialchars($annonce['titre']) ?>" style="height:150px; object-fit:cover;">
                        </div>
                        <?php endforeach; ?>
                    </div>

                    <?php if(count($photos) > 1): ?>
                    <button class="carousel-control-prev" type="button" data-bs-target="#<?= $carouselId ?>" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden"><?= trad('Previous') ?></span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#<?= $carouselId ?>" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden"><?= trad('Next') ?></span>
                    </button>

                   <!-- Miniatures sous le carousel -->
<?php
$maxThumbs = 3;
$totalPhotos = count($photos);
$remaining = $totalPhotos - $maxThumbs;
?>

<div class="d-flex justify-content-center gap-1 mt-2 flex-wrap thumbnails">

    <?php foreach ($photos as $i => $thumb): ?>

        <?php if ($i < $maxThumbs): ?>
            <!-- Miniatures normales -->
            <img src="<?= htmlspecialchars($thumb) ?>"
                 class="thumb-img"
                 onclick="
                    var c = bootstrap.Carousel.getInstance(document.getElementById('<?= $carouselId ?>')) 
                        || new bootstrap.Carousel(document.getElementById('<?= $carouselId ?>')); 
                    c.to(<?= $i ?>);
                 ">
        <?php elseif ($i === $maxThumbs): ?>
            <!-- Badge +X -->
            <div class="thumb-more"
                 onclick="
                    var c = bootstrap.Carousel.getInstance(document.getElementById('<?= $carouselId ?>')) 
                        || new bootstrap.Carousel(document.getElementById('<?= $carouselId ?>')); 
                    c.to(<?= $i ?>);
                 ">
                +<?= $remaining ?>
            </div>
            <?php break; ?>
        <?php endif; ?>

    <?php endforeach; ?>

</div>

                    <?php endif; ?>
                </div>

                <div class="title mt-2"><?= htmlspecialchars($annonce['titre']) ?></div>
                <div class="meta mt-1">
                    <div class="price"><?= htmlspecialchars($annonce['prix']) ?> <?= $_SESSION['devise'] ?></div>
                    <div class="ville"><?= htmlspecialchars($annonce['ville']) ?></div>
                </div>
            </a>
        </div>
        <?php endforeach; ?>
    </div>
</section>
<style>
.listings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.listing {
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s, transform 0.1s;
}
.listing a {
    text-decoration: none; /* supprime le soulignement */
    color: inherit;        /* prend la couleur du parent */
}

.listing a:hover {
    color: inherit;        /* pas de changement de couleur au survol */
}
.listing:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.carousel-item img {
    border-radius: 8px;
}

.title {
    font-size: 16px;
    font-weight: 700;
    margin: 8px 10px 4px 10px;
}

.meta {
    display: flex;
    justify-content: space-between;
    padding: 0 10px 8px 10px;
    font-size: 14px;
}

.price {
    font-weight: 700;
    color: #d9534f;
    direction: ltr;
    unicode-bidi: embed;
}

.ville {
    color: #555;
}
.thumb-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 4px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.thumb-img:hover {
    opacity: 0.8;
}

/* Badge +X */
.thumb-more {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.thumb-more:hover {
    background: rgba(0,0,0,0.75);
}

</style>