{{-- Global Broadcast Notification Component for Vendor Users --}}
@if (isset($global_broadcasts) && $global_broadcasts->count() > 0)
    {{-- Announcement Modal (Auto-show on page load) --}}
    <div class="modal fade" id="globalAnnouncementModal" tabindex="-1" aria-labelledby="globalAnnouncementModalLabel"
        aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content announcement-modal-content">
                <div class="modal-header announcement-modal-header">
                    <div class="d-flex align-items-center gap-3">
                        <div class="announcement-icon-wrapper">
                            <i class="fas fa-bullhorn"></i>
                        </div>
                        <div>
                            <h5 class="modal-title mb-0 fw-bold" id="globalAnnouncementModalLabel">
                                Pengumuman Penting
                            </h5>
                            <small class="text-muted">PT Multi Spunindo Jaya Tbk</small>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-primary rounded-pill" id="globalAnnouncementCounter">
                            1 / {{ $global_broadcasts->count() }}
                        </span>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                </div>
                <div class="modal-body p-0">
                    <div class="announcement-carousel">
                        @foreach ($global_broadcasts as $index => $broadcast)
                            <div class="announcement-slide {{ $index === 0 ? 'active' : '' }}" data-index="{{ $index }}"
                                data-broadcast-id="{{ $broadcast->id }}">
                                <div class="announcement-content p-4">
                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                        <div class="announcement-date-badge">
                                            <i class="fas fa-calendar-alt me-1"></i>
                                            {{ \Carbon\Carbon::parse($broadcast->tanggal_awal)->format('d M Y') }}
                                            -
                                            {{ \Carbon\Carbon::parse($broadcast->tanggal_akhir)->format('d M Y') }}
                                        </div>
                                        <small class="text-muted">
                                            <i class="fas fa-clock me-1"></i>
                                            {{ \Carbon\Carbon::parse($broadcast->created_at)->diffForHumans() }}
                                        </small>
                                    </div>

                                    <div class="announcement-recipient mb-3">
                                        <strong>Kepada Yth.</strong>
                                        <span
                                            class="badge bg-info ms-1">{{ isset($global_vendor) && $global_vendor ? strtoupper($global_vendor->nama) : 'Vendor Internal' }}</span>
                                    </div>

                                    <div class="announcement-message-wrapper">
                                        <div class="announcement-message-content">
                                            {!! $broadcast->pesan !!}
                                        </div>
                                        <div class="scroll-indicator scroll-indicator-left"
                                            onclick="scrollGlobalBroadcastMessage(this, -200)">
                                            <i class="fas fa-chevron-left"></i>
                                        </div>
                                        <div class="scroll-indicator scroll-indicator-right"
                                            onclick="scrollGlobalBroadcastMessage(this, 200)">
                                            <i class="fas fa-chevron-right"></i>
                                        </div>
                                    </div>

                                    <div class="announcement-signature mt-4">
                                        <div class="signature-line"></div>
                                        <p class="mb-1 text-muted">Hormat kami,</p>
                                        <p class="mb-0 fw-bold text-primary">PT Multi Spunindo Jaya Tbk</p>
                                        <small class="text-muted">Nonwovens Manufacturer</small>
                                        <p class="mb-1">Desa Jabaran, RT.008 RW.003</p>
                                        <p class="mb-1">Desa Jabaran, Balongbendo, Kab. Sidoarjo Jawa Timur 61263, Jawa Timur -
                                            Indonesia</p>
                                        <p class="mb-1">Telp : +62-31 -8975555</p>
                                        <p class="mb-0">Fax : +62-31-8976666, 8971300</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="modal-footer announcement-modal-footer">
                    @if ($global_broadcasts->count() > 1)
                        <div class="d-flex gap-2 me-auto">
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="globalPrevAnnouncement" disabled>
                                <i class="fas fa-chevron-left"></i> Sebelumnya
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="globalNextAnnouncement">
                                Selanjutnya <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    @endif
                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="dismissCurrentBroadcast()">
                        <i class="fas fa-eye-slash me-1"></i> Jangan Tampilkan Lagi
                    </button>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
                        <i class="fas fa-check me-1"></i> Mengerti
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Styles for broadcast notification (SAME AS VENDOR DASHBOARD) --}}
    <style>
        /* ===== Announcement Modal Styles ===== */
        .announcement-trigger {
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(2, 130, 132, 0.3);
        }

        .announcement-trigger:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(2, 130, 132, 0.4);
        }

        .pulse-animation {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
            }

            70% {
                transform: scale(1.1);
                box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
            }

            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
            }
        }

        .announcement-modal-content {
            border: none;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .announcement-modal-header {
            background: linear-gradient(135deg, #028284 0%, #017374 100%);
            color: white;
            padding: 20px 25px;
            border: none;
        }

        .announcement-modal-header .modal-title {
            color: white;
        }

        .announcement-modal-header small {
            color: rgba(255, 255, 255, 0.8) !important;
        }

        .announcement-modal-header .btn-close {
            filter: brightness(0) invert(1);
            opacity: 0.8;
        }

        .announcement-modal-header .btn-close:hover {
            opacity: 1;
        }

        .announcement-icon-wrapper {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .announcement-icon-wrapper i {
            font-size: 24px;
            color: white;
        }

        .announcement-carousel {
            position: relative;
        }

        .announcement-slide {
            display: none;
            animation: slideIn 0.3s ease;
        }

        .announcement-slide.active {
            display: block;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(20px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .announcement-content {
            background: #fff;
        }

        .announcement-date-badge {
            background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
            color: #2e7d32;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }

        .announcement-recipient {
            font-size: 15px;
            color: #444;
        }

        /* Scrollable message wrapper */
        .announcement-message-wrapper {
            position: relative;
            max-height: 350px;
            overflow: visible;
        }

        .announcement-message-content {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            border-left: 4px solid #028284;
            color: #333;
            font-size: 14px;
            line-height: 1.8;
            max-height: 350px;
            overflow-y: auto;
            overflow-x: auto;
            scroll-behavior: smooth;
        }

        .announcement-message-content::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        .announcement-message-content::-webkit-scrollbar-track {
            background: #e9ecef;
            border-radius: 4px;
        }

        .announcement-message-content::-webkit-scrollbar-thumb {
            background: #028284;
            border-radius: 4px;
        }

        .announcement-message-content::-webkit-scrollbar-thumb:hover {
            background: #017374;
        }

        .announcement-message-content::-webkit-scrollbar-corner {
            background: #e9ecef;
        }

        .announcement-message-content p {
            margin-bottom: 10px;
        }

        .announcement-message-content p:last-child {
            margin-bottom: 0;
        }

        /* Allow images to display at original size with scrolling */
        .announcement-message-content img {
            max-width: none;
            height: auto;
            border-radius: 8px;
            margin: 10px 0;
            display: block;
        }

        /* Scroll indicators */
        .scroll-indicator {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            background: rgba(2, 130, 132, 0.9);
            color: white;
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .scroll-indicator:hover {
            background: #017374;
            transform: translateY(-50%) scale(1.1);
        }

        .scroll-indicator-left {
            left: 5px;
        }

        .scroll-indicator-right {
            right: 5px;
        }

        .announcement-message-wrapper:hover .scroll-indicator.active {
            display: flex;
        }

        .announcement-signature {
            text-align: right;
            padding-top: 15px;
        }

        .signature-line {
            width: 150px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #028284);
            margin-left: auto;
            margin-bottom: 10px;
        }

        .announcement-modal-footer {
            background: #f8f9fa;
            border-top: 1px solid #e9ecef;
            padding: 15px 25px;
        }

        @media (max-width: 768px) {
            .announcement-modal-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .announcement-date-badge {
                font-size: 11px;
                padding: 6px 12px;
            }

            .announcement-signature {
                text-align: center;
            }

            .signature-line {
                margin: 0 auto 10px;
            }
        }
    </style>

    {{-- Script for broadcast notification --}}
    <script>
        // Storage key for dismissed broadcasts - uses Laravel session ID to reset on new login
        // When user logs out and logs in again, a new session ID is generated, so dismissed broadcasts reset
        const SESSION_ID = '{{ session()->getId() }}';
        const DISMISSED_BROADCASTS_KEY = 'dismissed_broadcasts_' + SESSION_ID;

        // Clean up old session keys to prevent localStorage bloat
        function cleanupOldSessionKeys() {
            const keysToRemove = [];
            for (let i = 0; i < localStorage.length; i++) {
                const key = localStorage.key(i);
                if (key && key.startsWith('dismissed_broadcasts_') && key !== DISMISSED_BROADCASTS_KEY) {
                    keysToRemove.push(key);
                }
            }
            keysToRemove.forEach(key => localStorage.removeItem(key));
        }

        // Run cleanup on load
        cleanupOldSessionKeys();

        // Get dismissed broadcast IDs from localStorage (unique per login session)
        function getDismissedBroadcasts() {
            const stored = localStorage.getItem(DISMISSED_BROADCASTS_KEY);
            return stored ? JSON.parse(stored) : [];
        }

        // Save dismissed broadcast ID to localStorage
        function saveDismissedBroadcast(broadcastId) {
            const dismissed = getDismissedBroadcasts();
            if (!dismissed.includes(broadcastId)) {
                dismissed.push(broadcastId);
                localStorage.setItem(DISMISSED_BROADCASTS_KEY, JSON.stringify(dismissed));
            }
        }

        // Check if broadcast should be shown
        function shouldShowBroadcast(broadcastId) {
            const dismissed = getDismissedBroadcasts();
            return !dismissed.includes(broadcastId);
        }

        // Dismiss current broadcast and move to next or close modal
        function dismissCurrentBroadcast() {
            const activeSlide = document.querySelector('#globalAnnouncementModal .announcement-slide.active');
            if (activeSlide) {
                const broadcastId = activeSlide.dataset.broadcastId;
                saveDismissedBroadcast(broadcastId);

                // Check if there are more broadcasts to show
                const allSlides = document.querySelectorAll('#globalAnnouncementModal .announcement-slide');
                let nextIndex = -1;

                allSlides.forEach((slide, index) => {
                    if (slide !== activeSlide && shouldShowBroadcast(slide.dataset.broadcastId)) {
                        if (nextIndex === -1) nextIndex = index;
                    }
                });

                if (nextIndex !== -1) {
                    // Move to next undismissed broadcast
                    globalCurrentIndex = nextIndex;
                    updateGlobalSlide();
                } else {
                    // Close modal if all broadcasts are dismissed
                    const modal = bootstrap.Modal.getInstance(document.getElementById('globalAnnouncementModal'));
                    if (modal) modal.hide();
                }
            }
        }

        // Global variables for carousel
        let globalCurrentIndex = 0;
        const globalTotalSlides = {{ $global_broadcasts->count() }};

        // Update slide display
        function updateGlobalSlide() {
            const slides = document.querySelectorAll('#globalAnnouncementModal .announcement-slide');
            const counter = document.getElementById('globalAnnouncementCounter');
            const prevBtn = document.getElementById('globalPrevAnnouncement');
            const nextBtn = document.getElementById('globalNextAnnouncement');

            slides.forEach((slide, i) => {
                slide.classList.toggle('active', i === globalCurrentIndex);
            });

            if (counter) counter.textContent = `${globalCurrentIndex + 1} / ${globalTotalSlides}`;
            if (prevBtn) prevBtn.disabled = globalCurrentIndex === 0;
            if (nextBtn) nextBtn.disabled = globalCurrentIndex === globalTotalSlides - 1;

            // Reinitialize scroll indicators for new active slide
            setTimeout(initGlobalScrollIndicators, 100);
        }

        // Auto-show global announcement modal
        window.addEventListener('load', function () {
            // Check if there are any broadcasts to show (not dismissed)
            const allSlides = document.querySelectorAll('#globalAnnouncementModal .announcement-slide');
            let hasUndismissed = false;
            let firstUndismissedIndex = -1;

            allSlides.forEach((slide, index) => {
                if (shouldShowBroadcast(slide.dataset.broadcastId)) {
                    hasUndismissed = true;
                    if (firstUndismissedIndex === -1) firstUndismissedIndex = index;
                }
            });

            if (!hasUndismissed) {
                return; // Don't show modal if all broadcasts are dismissed
            }

            // Set first undismissed as active
            globalCurrentIndex = firstUndismissedIndex;

            // Add delay to show after any SweetAlert modals
            setTimeout(function () {
                const modalElement = document.getElementById('globalAnnouncementModal');
                if (modalElement) {
                    // Update to show first undismissed
                    updateGlobalSlide();

                    const announcementModal = new bootstrap.Modal(modalElement);
                    announcementModal.show();

                    // Initialize scroll indicators
                    initGlobalScrollIndicators();
                }
            }, 1500);
        });

        // Navigation buttons
        document.addEventListener('DOMContentLoaded', function () {
            const prevBtn = document.getElementById('globalPrevAnnouncement');
            const nextBtn = document.getElementById('globalNextAnnouncement');

            if (prevBtn) {
                prevBtn.addEventListener('click', function () {
                    if (globalCurrentIndex > 0) {
                        globalCurrentIndex--;
                        updateGlobalSlide();
                    }
                });
            }

            if (nextBtn) {
                nextBtn.addEventListener('click', function () {
                    if (globalCurrentIndex < globalTotalSlides - 1) {
                        globalCurrentIndex++;
                        updateGlobalSlide();
                    }
                });
            }
        });

        // Function to initialize scroll indicators
        function initGlobalScrollIndicators() {
            document.querySelectorAll('#globalAnnouncementModal .announcement-message-content').forEach(function (messageContent) {
                const wrapper = messageContent.closest('.announcement-message-wrapper');
                if (!wrapper) return;

                const scrollLeftBtn = wrapper.querySelector('.scroll-indicator-left');
                const scrollRightBtn = wrapper.querySelector('.scroll-indicator-right');

                if (!scrollLeftBtn || !scrollRightBtn) return;

                function updateScrollIndicators() {
                    const hasHorizontalScroll = messageContent.scrollWidth > messageContent.clientWidth;
                    const hasVerticalScroll = messageContent.scrollHeight > messageContent.clientHeight;

                    if (hasHorizontalScroll || hasVerticalScroll) {
                        // Show left indicator if scrolled
                        if (messageContent.scrollLeft > 0 || messageContent.scrollTop > 0) {
                            scrollLeftBtn.classList.add('active');
                        } else {
                            scrollLeftBtn.classList.remove('active');
                        }

                        // Check if at end
                        const atEndHorizontal = messageContent.scrollLeft >= (messageContent.scrollWidth - messageContent.clientWidth - 5);
                        const atEndVertical = messageContent.scrollTop >= (messageContent.scrollHeight - messageContent.clientHeight - 5);

                        // Show right indicator if not at end
                        if (!atEndHorizontal || !atEndVertical) {
                            scrollRightBtn.classList.add('active');
                        } else {
                            scrollRightBtn.classList.remove('active');
                        }
                    } else {
                        scrollLeftBtn.classList.remove('active');
                        scrollRightBtn.classList.remove('active');
                    }
                }

                setTimeout(updateScrollIndicators, 100);
                messageContent.addEventListener('scroll', updateScrollIndicators);
            });
        }

        // Function to scroll broadcast message content
        function scrollGlobalBroadcastMessage(button, amount) {
            const wrapper = button.closest('.announcement-message-wrapper');
            if (wrapper) {
                const messageContent = wrapper.querySelector('.announcement-message-content');
                if (messageContent) {
                    if (messageContent.scrollWidth > messageContent.clientWidth) {
                        messageContent.scrollBy({ left: amount, behavior: 'smooth' });
                    } else {
                        messageContent.scrollBy({ top: amount, behavior: 'smooth' });
                    }
                }
            }
        }
    </script>
@endif