@if (isset($workshop_broadcasts) && $workshop_broadcasts->count() > 0)
    {{-- Workshop Announcement Modal (Auto-show on page load) --}}
    <div class="modal fade" id="workshopAnnouncementModal" tabindex="-1" aria-labelledby="workshopAnnouncementModalLabel"
        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 workshop-modal-content">
                <div class="modal-header workshop-modal-header">
                    <div class="d-flex align-items-center gap-3">
                        <div class="workshop-icon-wrapper">
                            <i class="fas fa-tools"></i>
                        </div>
                        <div>
                            <h5 class="modal-title mb-0 fw-bold" id="workshopAnnouncementModalLabel">
                                Tata Cara Workshop
                            </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-white text-primary rounded-pill" id="workshopAnnouncementCounter">
                            1 / {{ $workshop_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="workshop-carousel">
                        @foreach ($workshop_broadcasts as $index => $workshop)
                            <div class="workshop-slide {{ $index === 0 ? 'active' : '' }}" data-index="{{ $index }}"
                                data-workshop-id="{{ $workshop->id }}">
                                <div class="workshop-content p-4">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <div class="workshop-name-badge">
                                            <i class="fas fa-tools me-1"></i>
                                            {{ $workshop->nama }}
                                        </div>

                                        <div class="workshop-location-badge">
                                            <i class="fas fa-map-marker-alt me-1"></i>
                                            {{ $workshop->lokasi ?? '-' }}
                                            <!-- @if(isset($workshop->waktu_penggunaan) && !empty($workshop->waktu_penggunaan))
                                                <span class="mx-1">|</span>
                                                <i class="fas fa-clock me-1"></i>
                                                {{ $workshop->waktu_penggunaan }}
                                            @endif -->
                                        </div>
                                    </div>

                                    <div class="workshop-recipient mb-3 d-flex align-items-center justify-content-between flex-wrap gap-2">
                                        <div>
                                            <strong>Kepada Yth.</strong>
                                            <span class="badge bg-info ms-1">{{ isset($global_vendor) && $global_vendor ? strtoupper($global_vendor->nama) : 'Vendor Internal' }}</span>
                                        </div>
                                        
                                        @if(isset($workshop->associated_permits) && !empty($workshop->associated_permits))
                                        <div class="workshop-permit-info d-flex flex-column align-items-end gap-1">
                                            @php
                                                $permitsArr = array_filter(array_map('trim', explode(',', $workshop->associated_permits)));
                                                $permitsChunked = array_chunk($permitsArr, 2);
                                            @endphp
                                            @foreach($permitsChunked as $index => $chunk)
                                            <span class="badge w-100 text-end" style="background-color: #ff7b00; color: #000; font-size: 11px;">
                                                <i class="fas fa-file-signature me-1"></i> ID Permit: {{ implode(', ', $chunk) }}
                                            </span>
                                            @endforeach
                                        </div>
                                        @endif
                                    </div>

                                    <div class="workshop-message-wrapper">
                                        <div class="workshop-message-content text-center text-wrap" style="word-break: break-word;">
                                            @if (isset($workshop->other_notes) && !empty($workshop->other_notes))
                                                <div class="text-start mb-3" role="alert" style="background-color: #fff3cd; border-left: 4px solid #ffecb5; padding: 15px; border-radius: 6px;">
                                                    <strong><i class="fas fa-info-circle me-1"></i> Keterangan Tambahan:</strong>
                                                    <p class="mb-0 mt-2">{{ $workshop->other_notes }}</p>
                                                </div>
                                            @endif

                                            @if (!empty($workshop->cara_penggunaan) && $workshop->cara_penggunaan !== '-' && !str_contains($workshop->cara_penggunaan, 'Pengumuman_Penggunaan_Area_Workshop.jpeg'))
                                                <img src="{{ asset('storage/' . $workshop->cara_penggunaan) }}" alt="Cara Penggunaan Workshop"
                                                    class="workshop-preview-image" role="button" tabindex="0"
                                                    title="Klik untuk perbesar">
                                            @else
                                                <img src="{{ asset('storage/Pengumuman_Penggunaan_Area_Workshop.jpeg') }}" alt="Cara Penggunaan Workshop Default"
                                                    class="workshop-preview-image" role="button" tabindex="0"
                                                    title="Klik untuk perbesar">
                                            @endif
                                            <small class="workshop-image-preview-hint">
                                                <i class="fas fa-search-plus me-1"></i>Klik gambar untuk preview lebih jelas
                                            </small>
                                        </div>
                                        <div class="ws-scroll-indicator ws-scroll-indicator-left"
                                            onclick="scrollWorkshopMessage(this, -200)">
                                            <i class="fas fa-chevron-left"></i>
                                        </div>
                                        <div class="ws-scroll-indicator ws-scroll-indicator-right"
                                            onclick="scrollWorkshopMessage(this, 200)">
                                            <i class="fas fa-chevron-right"></i>
                                        </div>
                                    </div>

                                    <div class="workshop-signature mt-4">
                                        <div class="ws-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 workshop-modal-footer">
                    @if ($workshop_broadcasts->count() > 1)
                        <div class="d-flex gap-2 me-auto">
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="workshopPrevSlide" disabled>
                                <i class="fas fa-chevron-left"></i> Sebelumnya
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="workshopNextSlide">
                                Selanjutnya <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    @endif
                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="dismissCurrentWorkshop()">
                        <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>

    <div class="workshop-image-lightbox" id="workshopImageLightbox" aria-hidden="true" role="dialog" aria-modal="true"
        aria-label="Preview gambar workshop">
        <button type="button" class="workshop-image-lightbox-close" onclick="closeWorkshopImagePreview()"
            aria-label="Tutup preview">
            <i class="fas fa-times"></i>
        </button>
        <img id="workshopImageLightboxPreview" src="" alt="Preview gambar workshop">
    </div>

    {{-- Styles for workshop notification --}}
    <style>
        /* ===== Workshop Modal Styles (separate from broadcast) ===== */
        .workshop-modal-content {
            border: none;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

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

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

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

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

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

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

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

        .workshop-carousel {
            position: relative;
        }

        .workshop-slide {
            display: none;
            animation: wsSlideIn 0.3s ease;
        }

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

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

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

        .workshop-content {
            background: #fff;
        }

        .workshop-name-badge {
            background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
            color: #e65100;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
        }

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

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

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

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

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

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

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

        .workshop-message-content::-webkit-scrollbar-thumb:hover {
            background: #bf360c;
        }

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

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

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

        /* Allow images to display at original size with scrolling */
        .workshop-message-content img {
            max-width: 85%;
            height: auto;
            border-radius: 8px;
            margin: 15px auto;
            display: block;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            cursor: zoom-in;
            transition: transform 0.2s ease;
        }

        .workshop-message-content img:hover {
            transform: scale(1.01);
        }

        .workshop-image-preview-hint {
            display: inline-flex;
            align-items: center;
            margin-top: 8px;
            font-size: 12px;
            color: #6c757d;
            font-style: italic;
        }

        .workshop-image-lightbox {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(0, 0, 0, 0.88);
            z-index: 1085;
        }

        .workshop-image-lightbox.active {
            display: flex;
        }

        .workshop-image-lightbox img {
            max-width: 92vw;
            max-height: 88vh;
            width: auto;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
        }

        .workshop-image-lightbox-close {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 44px;
            height: 44px;
            border: none;
            border-radius: 50%;
            color: white;
            background: rgba(255, 255, 255, 0.22);
            backdrop-filter: blur(2px);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .workshop-image-lightbox-close:hover {
            background: rgba(255, 255, 255, 0.35);
        }

        /* Scroll indicators for workshop */
        .ws-scroll-indicator {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            background: rgba(230, 81, 0, 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);
        }

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

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

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

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

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

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

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

        /* ===== Workshop Notification Icon (separate from broadcast bell) ===== */
        .workshop-notification-icon {
            position: relative;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 8px;
            background: linear-gradient(135deg, #e65100 0%, #f57c00 100%);
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(230, 81, 0, 0.3);
        }

        .workshop-notification-icon:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(230, 81, 0, 0.4);
        }

        .workshop-notification-bell {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .workshop-notification-bell i {
            font-size: 1.3rem;
            color: white;
            animation: wsToolShake 1s ease-in-out infinite alternate;
        }

        @keyframes wsToolShake {
            0% {
                transform: rotate(-8deg);
            }

            100% {
                transform: rotate(8deg);
            }
        }

        .workshop-notification-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            background: #dc3545;
            color: white;
            font-size: 0.7rem;
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 50%;
            min-width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: wsBadgePulse 1.5s ease-in-out infinite;
            box-shadow: 0 2px 5px rgba(220, 53, 69, 0.5);
        }

        @keyframes wsBadgePulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.2);
            }
        }

        /* Flash effect for workshop icon */
        .workshop-notification-icon::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 8px;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            animation: wsFlashEffect 2s linear infinite;
        }

        @keyframes wsFlashEffect {
            0% {
                transform: translateX(-100%);
            }

            100% {
                transform: translateX(100%);
            }
        }

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

            .workshop-name-badge,
            .workshop-location-badge {
                font-size: 11px;
                padding: 6px 12px;
            }

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

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

    {{-- Script for workshop notification (SEPARATE from broadcast) --}}
    <script>
        // Workshop storage key - uses SEPARATE prefix 'dismissed_workshops_' to avoid conflicts with broadcast
        const WS_SESSION_ID = '{{ session()->getId() }}';
        const DISMISSED_WORKSHOP_KEY = 'dismissed_workshops_' + WS_SESSION_ID;

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

        // Run cleanup on load
        cleanupOldWorkshopKeys();

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

        // Save dismissed workshop ID to localStorage
        function saveDismissedWorkshop(workshopId) {
            const dismissed = getDismissedWorkshops();
            if (!dismissed.includes(workshopId)) {
                dismissed.push(workshopId);
                localStorage.setItem(DISMISSED_WORKSHOP_KEY, JSON.stringify(dismissed));
            }
        }

        // Check if workshop should be shown
        function shouldShowWorkshop(workshopId) {
            const dismissed = getDismissedWorkshops();
            return !dismissed.includes(workshopId);
        }

        // Dismiss current workshop and move to next or close modal
        function dismissCurrentWorkshop() {
            const activeSlide = document.querySelector('#workshopAnnouncementModal .workshop-slide.active');
            if (activeSlide) {
                const workshopId = activeSlide.dataset.workshopId;
                saveDismissedWorkshop(workshopId);

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

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

                if (nextIndex !== -1) {
                    // Move to next undismissed workshop
                    wsCurrentIndex = nextIndex;
                    updateWorkshopSlide();
                } else {
                    // Close modal if all workshops are dismissed
                    const modal = bootstrap.Modal.getInstance(document.getElementById('workshopAnnouncementModal'));
                    if (modal) modal.hide();
                }
            }
        }

        // Global variables for workshop carousel
        let wsCurrentIndex = 0;
        const wsTotalSlides = {{ $workshop_broadcasts->count() }};

        function openWorkshopImagePreview(imageSrc, imageAlt = 'Preview gambar workshop') {
            const lightbox = document.getElementById('workshopImageLightbox');
            const previewImage = document.getElementById('workshopImageLightboxPreview');

            if (!lightbox || !previewImage || !imageSrc) return;

            previewImage.src = imageSrc;
            previewImage.alt = imageAlt;
            lightbox.classList.add('active');
            lightbox.setAttribute('aria-hidden', 'false');
        }

        function closeWorkshopImagePreview() {
            const lightbox = document.getElementById('workshopImageLightbox');
            const previewImage = document.getElementById('workshopImageLightboxPreview');

            if (!lightbox || !previewImage) return;

            lightbox.classList.remove('active');
            lightbox.setAttribute('aria-hidden', 'true');
            previewImage.src = '';
        }

        function bindWorkshopImagePreviewHandlers() {
            document.querySelectorAll('#workshopAnnouncementModal .workshop-preview-image').forEach(function (imageEl) {
                if (imageEl.dataset.previewBound === '1') return;

                imageEl.dataset.previewBound = '1';

                imageEl.addEventListener('click', function () {
                    openWorkshopImagePreview(this.src, this.alt || 'Preview gambar workshop');
                });

                imageEl.addEventListener('keydown', function (event) {
                    if (event.key === 'Enter' || event.key === ' ') {
                        event.preventDefault();
                        openWorkshopImagePreview(this.src, this.alt || 'Preview gambar workshop');
                    }
                });
            });
        }

        // Update workshop slide display
        function updateWorkshopSlide() {
            const slides = document.querySelectorAll('#workshopAnnouncementModal .workshop-slide');
            const counter = document.getElementById('workshopAnnouncementCounter');
            const prevBtn = document.getElementById('workshopPrevSlide');
            const nextBtn = document.getElementById('workshopNextSlide');

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

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

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

        // Auto-show workshop modal on page load
        // IMPORTANT: This waits for any broadcast modal to close first before showing
        window.addEventListener('load', function () {
            // Check if there are any workshops to show (not dismissed)
            const allSlides = document.querySelectorAll('#workshopAnnouncementModal .workshop-slide');
            let hasUndismissed = false;
            let firstUndismissedIndex = -1;

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

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

            // Set first undismissed as active
            wsCurrentIndex = firstUndismissedIndex;

            // Function to show the workshop modal
            function showWorkshopModal() {
                const modalElement = document.getElementById('workshopAnnouncementModal');
                if (modalElement) {
                    updateWorkshopSlide();
                    const workshopModal = new bootstrap.Modal(modalElement);
                    workshopModal.show();
                    initWorkshopScrollIndicators();
                }
            }

            // Wait for broadcast modal to close first, then show workshop
            setTimeout(function () {
                const broadcastModal = document.getElementById('globalAnnouncementModal');
                if (broadcastModal && (broadcastModal.classList.contains('show') || document.body.classList.contains('modal-open'))) {
                    // Broadcast is showing, wait for it to close
                    broadcastModal.addEventListener('hidden.bs.modal', function () {
                        setTimeout(showWorkshopModal, 500);
                    }, { once: true });
                } else {
                    // No broadcast showing, show workshop after a delay
                    showWorkshopModal();
                }
            }, 3000);
        });

        // Navigation buttons for workshop carousel
        document.addEventListener('DOMContentLoaded', function () {
            const prevBtn = document.getElementById('workshopPrevSlide');
            const nextBtn = document.getElementById('workshopNextSlide');
            const workshopImageLightbox = document.getElementById('workshopImageLightbox');

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

            if (nextBtn) {
                nextBtn.addEventListener('click', function () {
                    if (wsCurrentIndex < wsTotalSlides - 1) {
                        wsCurrentIndex++;
                        updateWorkshopSlide();
                    }
                });
            }

            if (workshopImageLightbox) {
                workshopImageLightbox.addEventListener('click', function (event) {
                    if (event.target === workshopImageLightbox) {
                        closeWorkshopImagePreview();
                    }
                });
            }

            document.addEventListener('keydown', function (event) {
                if (event.key === 'Escape') {
                    closeWorkshopImagePreview();
                }
            });

            bindWorkshopImagePreviewHandlers();
        });

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

                const scrollLeftBtn = wrapper.querySelector('.ws-scroll-indicator-left');
                const scrollRightBtn = wrapper.querySelector('.ws-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 workshop message content
        function scrollWorkshopMessage(button, amount) {
            const wrapper = button.closest('.workshop-message-wrapper');
            if (wrapper) {
                const messageContent = wrapper.querySelector('.workshop-message-content');
                if (messageContent) {
                    if (messageContent.scrollWidth > messageContent.clientWidth) {
                        messageContent.scrollBy({ left: amount, behavior: 'smooth' });
                    } else {
                        messageContent.scrollBy({ top: amount, behavior: 'smooth' });
                    }
                }
            }
        }

        // Function to open workshop modal from notification icon (called from vendor dashboard)
        function openWorkshopModal() {
            const modalElement = document.getElementById('workshopAnnouncementModal');
            if (modalElement) {
                updateWorkshopSlide();
                const workshopModal = new bootstrap.Modal(modalElement);
                workshopModal.show();
                bindWorkshopImagePreviewHandlers();
            }
        }
    </script>
@endif