<link rel="stylesheet" href="assets/css/style.css">
<!-- Customer Testimonials Section -->
<section class="packages-section">
    <div class="section-header">
        <h2>আমাদের সেবা নিয়ে<span style="color:var(--primary-color);"> গ্রাহকদের মতামত </span></h2>
        <span style="display: block; width: 80px; height: 5px; background: var(--primary-color); margin: 10px auto;"></span>
    </div>

    <div class="testi-wrapper">
        <button class="slider-nav-btn btn-l" id="prevBtn"><i class="fas fa-chevron-left"></i></button>
        <button class="slider-nav-btn btn-r" id="nextBtn"><i class="fas fa-chevron-right"></i></button>
        
        <div class="testi-container" id="testiSlider">
            <?php 
            $testi_res = mysqli_query($conn, "SELECT * FROM testimonials WHERE status='Active' ORDER BY id DESC");
            if(mysqli_num_rows($testi_res) > 0):
                while($t = mysqli_fetch_assoc($testi_res)):
            ?>
            <div class="testimonial-card">
                <div style="color: #f39c12; margin-bottom: 5px; font-size: 0.8rem;">
                    <?php for($i=1; $i<=$t['rating']; $i++) echo '<i class="fas fa-star"></i>'; ?>
                </div>
                <p style="color: #555; font-size: 0.95rem; line-height: 1.4; margin-bottom: 5px; text-align: justify;">
                    "<?php echo $t['comment']; ?>"
                </p>
                <div class="testi-user-box">
                    <img src="<?php echo $t['image'] ?: 'https://via.placeholder.com/100'; ?>" alt="User" class="testi-img">
                    <div>
                        <h5 style="margin: 0; color: #333; font-weight: 700; font-size: 0.95rem;"><?php echo $t['name']; ?></h5>
                        <small style="color: #888;"><?php echo $t['designation']; ?></small>
                    </div>
                </div>
            </div>
            <?php 
                endwhile; 
            endif; 
            ?>
        </div>
</div>
</section>

<script>
    // Testimonial Slider Logic
    const slider = document.getElementById('testiSlider');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const cards = document.querySelectorAll('.testimonial-card');
    
    let isDown = false, startX, scrollLeft;

    function updateActiveSlides() {
        const containerRect = slider.getBoundingClientRect();
        const center = containerRect.left + containerRect.width / 2;
        cards.forEach(card => {
            const cardRect = card.getBoundingClientRect();
            const cardCenter = cardRect.left + cardRect.width / 2;
            if (Math.abs(center - cardCenter) < cardRect.width / 2) card.classList.add('active-slide');
            else card.classList.remove('active-slide');
        });
    }

    function moveSlider(direction) {
        const card = slider.querySelector('.testimonial-card');
        if (card) slider.scrollBy({ left: direction * (card.clientWidth + 20), behavior: 'smooth' });
    }

    if(prevBtn) prevBtn.addEventListener('click', () => moveSlider(-1));
    if(nextBtn) nextBtn.addEventListener('click', () => moveSlider(1));
    if(slider) {
        slider.addEventListener('scroll', updateActiveSlides);
        window.addEventListener('load', updateActiveSlides);
        slider.addEventListener('mousedown', (e) => { isDown = true; slider.style.scrollSnapType = 'none'; startX = e.pageX - slider.offsetLeft; scrollLeft = slider.scrollLeft; });
        slider.addEventListener('mouseup', () => { isDown = false; slider.style.scrollSnapType = 'x mandatory'; });
        slider.addEventListener('mousemove', (e) => { if (!isDown) return; e.preventDefault(); const walk = (e.pageX - slider.offsetLeft - startX) * 2; slider.scrollLeft = scrollLeft - walk; });
    }

    setInterval(() => {
        if (slider && !isDown) {
            if (slider.scrollLeft + slider.clientWidth >= slider.scrollWidth - 5) slider.scrollTo({ left: 0, behavior: 'smooth' });
            else moveSlider(1);
        }
    }, 6000);
</script>