<div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 d-none" id="top-announcement-bar" data-bs-theme="dark">
    <div class="container position-relative d-flex min-w-0">
        <div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1" style="max-width: 458px">
            <div class="nav me-2">
                <button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
                    <i class="ci-chevron-left"></i>
                </button>
            </div>
            <div class="swiper fs-sm text-white"
                data-swiper='{
        "spaceBetween": 24,
        "loop": true,
        "autoplay": {
          "delay": 5000,
          "disableOnInteraction": false
        },
        "navigation": {
          "prevEl": "#topbarPrev",
          "nextEl": "#topbarNext"
        }
      }'>
                <div class="swiper-wrapper min-w-0" id="announcements-wrapper">
                    <!-- Announcements will be loaded here via AJAX -->
                </div>
            </div>
            <div class="nav ms-2">
                <button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
                    <i class="ci-chevron-right"></i>
                </button>
            </div>
        </div>
        <button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4" data-bs-dismiss="alert"
            aria-label="Close"></button>
    </div>
</div>

<style>
#top-announcement-bar {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(-100%);
}

#top-announcement-bar.show-with-animation {
    opacity: 1;
    transform: translateY(0);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    loadAnnouncements();
});

function loadAnnouncements() {
    fetch(`{{ route('product.ajax.announcements') }}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.announcements.trim() !== '') {
                document.getElementById('announcements-wrapper').innerHTML = data.announcements;
                const announcementBar = document.getElementById('top-announcement-bar');
                announcementBar.classList.remove('d-none');
                
                // Trigger animation
                setTimeout(() => {
                    announcementBar.classList.add('show-with-animation');
                }, 10);
                
                // Reinitialize swiper if it exists
                if (typeof Swiper !== 'undefined') {
                    const swiperElement = document.querySelector('.swiper');
                    if (swiperElement && swiperElement.swiper) {
                        swiperElement.swiper.update();
                    }
                }
            } else {
                // Hide announcement bar if no data
                const announcementBar = document.getElementById('top-announcement-bar');
                if (announcementBar) {
                    announcementBar.classList.add('d-none');
                }
            }
        })
        .catch(error => {
            console.error('Error loading announcements:', error);
            // Hide announcement bar on error
            const announcementBar = document.getElementById('top-announcement-bar');
            if (announcementBar) {
                announcementBar.classList.add('d-none');
            }
        });
}
</script>
