<?php 
    $baslik=3;
    include"header.php" 
?>
<section class="listing-gallery-section">
    <div class="container" style="max-width: 900px;"> <div class="mb-3">
            <h2 class="fw-bold">Rüya Gibi Düğün Organizasyonu</h2>
            <p class="text-muted"><i class="bi bi-geo-alt"></i> Çırağan Sarayı, İstanbul</p>
        </div>

        <div class="main-image-container">
            <div class="photo-counter" id="counter">1 / 5</div>

            <button class="nav-arrow prev-btn" onclick="changeSlide(-1)">
                <i class="bi bi-chevron-left fs-4"></i>
            </button>

            <img id="current-img" src="" class="main-image" alt="Ana Görsel">

            <button class="nav-arrow next-btn" onclick="changeSlide(1)">
                <i class="bi bi-chevron-right fs-4"></i>
            </button>
        </div>

        <div class="thumbnails-container" id="thumb-container">
            </div>

    </div>
</section>


<script>
    // --- VERİ LİSTESİ (Buraya istediğin resimleri ekle) ---
    const images = [
        "https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1200&q=80",
        "https://images.unsplash.com/photo-1511795409834-ef04bbd61622?auto=format&fit=crop&w=1200&q=80",
        "https://images.unsplash.com/photo-1520854221256-17451cc330e7?auto=format&fit=crop&w=1200&q=80",
        "https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1200&q=80",
        "https://images.unsplash.com/photo-1505932794465-147d1f1b2c97?auto=format&fit=crop&w=1200&q=80"
    ];

    let currentIndex = 0; // Şu an kaçıncı resimdeyiz?

    // Elementleri Seç
    const mainImg = document.getElementById('current-img');
    const counter = document.getElementById('counter');
    const thumbContainer = document.getElementById('thumb-container');

    // --- BAŞLATMA FONKSİYONU ---
    function initGallery() {
        // 1. Ana resmi yükle
        updateMainImage();

        // 2. Küçük resimleri (Thumbnail) oluştur
        images.forEach((imgSrc, index) => {
            const thumb = document.createElement('img');
            thumb.src = imgSrc;
            thumb.classList.add('thumb');
            thumb.dataset.index = index; // Hangi sırada olduğunu kaydet
            
            // Tıklama olayı
            thumb.onclick = () => {
                currentIndex = index;
                updateMainImage();
            };

            thumbContainer.appendChild(thumb);
        });

        // İlk küçük resmi seçili yap
        highlightThumbnail();
    }

    // --- RESİM DEĞİŞTİRME ---
    function updateMainImage() {
        // Ana resmin kaynağını değiştir
        mainImg.src = images[currentIndex];
        
        // Sayacı güncelle
        counter.innerText = `${currentIndex + 1} / ${images.length}`;

        // Küçük resim vurgusunu güncelle
        highlightThumbnail();
    }

    // --- OKLARLA GEZİNME ---
    function changeSlide(direction) {
        currentIndex += direction;

        // Başa veya sona gelince döngü yap
        if (currentIndex >= images.length) {
            currentIndex = 0;
        } else if (currentIndex < 0) {
            currentIndex = images.length - 1;
        }

        updateMainImage();
    }

    // --- THUMBNAIL VURGULAMA ---
    function highlightThumbnail() {
        // Tüm thumb'lardan active sınıfını sil
        const thumbs = document.querySelectorAll('.thumb');
        thumbs.forEach(t => t.classList.remove('active'));

        // Şu anki indexteki thumb'a active ekle
        if (thumbs[currentIndex]) {
            thumbs[currentIndex].classList.add('active');
            
            // Seçili thumbnail ekranda görünmüyorsa oraya kaydır (Otomatik odaklanma)
            thumbs[currentIndex].scrollIntoView({ 
                behavior: 'smooth', 
                block: 'nearest', 
                inline: 'center' 
            });
        }
    }

    // Sayfa yüklenince çalıştır
    initGallery();

</script>
    
<?php include"footer.php" ?>


