{# ========== EMPLOYEE SCHEDULE PANEL (Right Sidebar) ========== #}
        {# Show for supported scheduling providers (BuyerKiosk native or WhenIWork) #}
        {% if store.schedulingProvider in ['buyerkiosk', 'wheniwork'] or store.wiwEnable %}
            {% include 'workspace/partials/schedule-panel/schedule-panel.html' %}
            {% include 'workspace/partials/schedule-panel/quick-action-modal.html' %}
            {% include 'workspace/partials/schedule-panel/schedule-modal.html' %}
        {% endif %}

        {# ========== CLOSE LAYOUT WRAPPERS ========== #}
        </div> {# /.workspace-body #}
    </div> {# /.workspace-layout #}

    {# Modal container for dynamic modals #}
    <div class="modal fade" id="myModal"></div>

    {# ========== JAVASCRIPT LIBRARIES ========== #}
    {# Core Libraries (jQuery, Bootstrap, Popper) are loaded in workspace-head.html via vendor bundle #}

    {# Real-time Communication #}
    <script src="/view/common/js/autobahn.min.js"></script>
    <script src="https://cdn.ably.com/lib/ably.min-1.js"></script>

    {# UI Libraries #}
    <script src="/view/common/js/jquery-ui.min.js"></script>

    {# Fabric.js for Whiteboard Canvas #}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>

    {# Date/Time Libraries #}
    <script src="/js/moment/moment.js"></script>
    <script src="/view/common/js/moment/moment-tz.js"></script>
    <script src="/js/bootstrap-datetimepicker.min.js"></script>
    <script src="/view/common/js/datepicker/js/bootstrap-datepicker.min.js"></script>

    {# DataTables (for print log and completed buys) #}
    <script src="/view/common/js/datatables/jquery.dataTables.js"></script>
    <script src="/view/common/js/datatables/dataTables.bootstrap.js"></script>

    {# Form Libraries #}
    <script src="/js/bootstrap-select.min.js"></script>
    <script src="/js/parsley.min.js"></script>
    <script src="/js/raty.js"></script>
    <script src="/js/jquery-bootstrap-modal-steps.js"></script>

    {# Utilities #}
    <script src="/view/common/js/uuid.js"></script>
    <script src="/plugins/sweetalert/sweetalert.js"></script>

    {# Templating #}
    <script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.8/dist/handlebars.min.js"></script>

    {# TOAST UI Editor for Support Portal (Suggest Edit feature) #}
    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>

    {# KaTeX for LaTeX math rendering in support articles #}
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/contrib/auto-render.min.js" crossorigin="anonymous"></script>

    {# ========== WORKSPACE MODULES ========== #}
    {# Common utilities (loaded first) #}
    <script src="/js/workspace/modules/common/utils.js"></script>
    <script src="/js/workspace/modules/common/time.js"></script>
    <script src="/js/workspace/modules/common/api.js"></script>
    <script src="/js/workspace/modules/common/remote-modal.js"></script>

    {# Shared modules #}
    <script src="/js/workspace/modules/shared/WorkbookToast.js"></script>

    {# Queue modules #}
    <script src="/js/workspace/modules/queue/QueueManager.js"></script>
    <script src="/js/workspace/modules/queue/QueueRenderer.js"></script>
    <script src="/js/workspace/modules/queue/QueueAPI.js"></script>
    <script src="/js/workspace/modules/queue/QueueItemTemplate.js"></script>
    <script src="/js/workspace/modules/queue/QueueBridge.js"></script>
    <script src="/js/workspace/modules/queue/QueueAbly.js?v={{ css_version|default('1') }}"></script>
    <script src="/js/workspace/modules/queue/QueueKanban.js"></script>

    {# Print Log module #}
    <script src="/js/workspace/modules/print-log/PrintLogManager.js"></script>
    <script src="/js/workspace/modules/print-log/PrintLogAPI.js"></script>

    {# Completed Buys module #}
    <script src="/js/workspace/modules/completed/CompletedManager.js"></script>

    {# Workbook modules - loaded by workspace.html and workbook.html with cache busting #}
    <script src="/js/workspace/modules/backstock/backstock-pos-category.js"></script>

    {# Event Awareness - Shows active promotional events #}
    <script src="/js/workspace/modules/event-indicator.js"></script>

    {# ========== EMPLOYEE SCHEDULE PANEL MODULES ========== #}
    {# Only loaded when panel element exists (WhenIWork enabled) #}
    <script src="/js/workspace/modules/schedule-panel/SchedulePanel.js"></script>
    <script src="/js/workspace/modules/schedule-panel/QuickActionModal.js"></script>
    <script src="/js/workspace/modules/schedule-panel/ScheduleModal.js"></script>

    {# Note: workbook/ably-sync.js is loaded by the parent template (workspace.html or workbook.html) #}
    {# to avoid duplicate class declaration errors. Only schedule-ably-sync.js is loaded here. #}
    {# Schedule Panel Ably Sync - Bridges workbook events to schedule panel #}
    <script src="/js/workspace/modules/schedule-panel/schedule-ably-sync.js"></script>

    {# ========== TWO-WAY SMS CHAT MODULES ========== #}
    {# SMS Error Mapper - shared utility for friendly error labels (loaded before chat modules) #}
    <script src="/js/workspace/modules/chat/sms-error-mapper.js?v={{ css_version|default('1') }}"></script>
    {% if embedded_chat_enabled|default(false) %}
    {# Embedded Chat Panel mode (Spec 030) - new panel components #}
    <script src="/js/workspace/modules/chat/chat-panel.js?v={{ css_version|default('1') }}"></script>
    <script src="/js/workspace/modules/chat/chat-feed.js?v={{ css_version|default('1') }}"></script>
    <script src="/js/workspace/modules/chat/chat-segment-counter.js?v={{ css_version|default('1') }}"></script>
    <script src="/js/workspace/modules/chat/chat-badge-manager.js?v={{ css_version|default('1') }}"></script>
    <script src="/js/workspace/modules/completed/completed-buys-grid.js?v={{ css_version|default('1') }}"></script>
    {% else %}
    {# Legacy Chat Overlay mode - original overlay components #}
    <script src="/js/workspace/modules/chat/chat-overlay.js"></script>
    <script src="/js/workspace/modules/chat/chat-thread-list.js"></script>
    <script src="/js/workspace/modules/chat/chat-conversation.js"></script>
    <script src="/js/workspace/modules/chat/chat-composer.js"></script>
    <script src="/js/workspace/modules/chat/chat-templates.js"></script>
    {% endif %}
    {# Shared chat modules (used by both modes) #}
    <script src="/js/workspace/modules/chat/chat-ably-sync.js"></script>
    <script src="/js/workspace/modules/chat/chat-notifications.js"></script>
    <script src="/js/workspace/modules/chat/chat-buyqueue-badge.js"></script>
    <script src="/js/workspace/modules/chat/chat-manager.js"></script>

    {# ========== FIVESTARS LOYALTY MODULES ========== #}
    {% if fiveStarsEnabled|default(false) %}
    <script src="/js/workspace/modules/fivestars/fivestars-lookup.js"></script>
    <script src="/js/workspace/modules/fivestars/fivestars-queue-badge.js"></script>
    {% endif %}

    {# Main workspace entry point #}
    <script src="/js/workspace/workspace.js?v={{ css_version|default('1') }}"></script>

    {# ========== VITE BUNDLED SCRIPTS ========== #}
    {# Scripts load at end of body to ensure legacy scripts run first #}
    {{ vite_scripts('hello') }}
    {{ vite_scripts('syncfusion') }}

    {# ========== TWO-WAY SMS CHAT INITIALIZATION ========== #}
    {% if embedded_chat_enabled|default(false) %}
    {# Embedded Chat Panel (Spec 030) - HTML structure + initialization #}
    {% include 'workspace/partials/chat/chat-panel.html' %}
    {% include 'workspace/partials/chat/chat-panel-init.html' %}
    {% else %}
    {# Legacy Chat Overlay - Handlebars templates + overlay initialization #}
    {% include 'workspace/partials/chat-panel-content.html' %}
    {% endif %}

    {# ========== WORKSPACE SIDEBAR & NAVIGATION ========== #}
    <script type="text/javascript">
        (function() {
            'use strict';

            $(document).ready(function() {
                // ========== DARK MODE TOGGLE ==========
                var themeToggle = document.getElementById('themeToggle');
                var THEME_KEY = 'workspaceTheme';

                // Restore theme from localStorage
                var savedTheme = localStorage.getItem(THEME_KEY);
                if (savedTheme === 'dark') {
                    document.documentElement.setAttribute('data-theme', 'dark');
                }

                // Toggle theme on click
                if (themeToggle) {
                    themeToggle.addEventListener('click', function() {
                        var currentTheme = document.documentElement.getAttribute('data-theme');
                        var newTheme = currentTheme === 'dark' ? 'light' : 'dark';

                        if (newTheme === 'dark') {
                            document.documentElement.setAttribute('data-theme', 'dark');
                        } else {
                            document.documentElement.removeAttribute('data-theme');
                        }

                        localStorage.setItem(THEME_KEY, newTheme);
                    });
                }

                // ========== QUEUE COLOR SCHEME ==========
                var COLOR_SCHEME_KEY = 'workspaceColorScheme';
                var savedScheme = localStorage.getItem(COLOR_SCHEME_KEY) || 'buyerkiosk';

                // Apply saved color scheme on load
                if (savedScheme && savedScheme !== 'buyerkiosk') {
                    document.documentElement.setAttribute('data-color-scheme', savedScheme);
                } else {
                    document.documentElement.removeAttribute('data-color-scheme');
                }

                // Update active indicator to match saved scheme
                $('.color-scheme-option').removeClass('active');
                $('.color-scheme-option[data-scheme="' + savedScheme + '"]').addClass('active');

                // Handle color scheme selection
                $(document).on('click', '.color-scheme-option', function(e) {
                    e.preventDefault();
                    var scheme = $(this).data('scheme');

                    if (scheme === 'buyerkiosk') {
                        document.documentElement.removeAttribute('data-color-scheme');
                    } else {
                        document.documentElement.setAttribute('data-color-scheme', scheme);
                    }

                    localStorage.setItem(COLOR_SCHEME_KEY, scheme);

                    // Update active indicator
                    $('.color-scheme-option').removeClass('active');
                    $(this).addClass('active');
                });

                // ========== SIDEBAR TOGGLE ==========
                var sidebar = document.getElementById('workspaceSidebar');
                var sidebarToggle = document.getElementById('sidebarToggle');
                var SIDEBAR_COLLAPSED_KEY = 'workspaceSidebarCollapsed';

                // Restore sidebar state from localStorage
                var isCollapsed = localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === 'true';
                if (isCollapsed && sidebar) {
                    sidebar.classList.add('collapsed');
                    document.body.classList.add('sidebar-is-collapsed');
                    // Update icon to show expand direction
                    var icon = sidebarToggle ? sidebarToggle.querySelector('i') : null;
                    if (icon) {
                        icon.className = 'fa fa-chevron-right';
                    }
                }

                // Toggle sidebar on click
                if (sidebarToggle) {
                    sidebarToggle.addEventListener('click', function() {
                        if (sidebar) {
                            sidebar.classList.toggle('collapsed');
                            var nowCollapsed = sidebar.classList.contains('collapsed');
                            localStorage.setItem(SIDEBAR_COLLAPSED_KEY, nowCollapsed);

                            // Update body class for KPI bar styling
                            if (nowCollapsed) {
                                document.body.classList.add('sidebar-is-collapsed');
                            } else {
                                document.body.classList.remove('sidebar-is-collapsed');
                            }

                            // Update toggle icon
                            var icon = sidebarToggle.querySelector('i');
                            if (icon) {
                                icon.className = nowCollapsed ? 'fa fa-chevron-right' : 'fa fa-chevron-left';
                            }
                        }
                    });
                }

                // ========== MOBILE MENU TOGGLE ==========
                var mobileToggle = document.getElementById('mobileMenuToggle');
                var mobileOverlay = document.getElementById('mobileOverlay');

                function closeMobileMenu() {
                    if (sidebar) sidebar.classList.remove('mobile-open');
                    if (mobileOverlay) mobileOverlay.classList.remove('active');
                }

                function openMobileMenu() {
                    if (sidebar) sidebar.classList.add('mobile-open');
                    if (mobileOverlay) mobileOverlay.classList.add('active');
                }

                if (mobileToggle && sidebar) {
                    mobileToggle.addEventListener('click', function() {
                        if (sidebar.classList.contains('mobile-open')) {
                            closeMobileMenu();
                        } else {
                            openMobileMenu();
                        }
                    });

                    // Close mobile menu when clicking overlay
                    if (mobileOverlay) {
                        mobileOverlay.addEventListener('click', closeMobileMenu);
                    }

                    // Close mobile menu when clicking a nav item
                    var navItems = sidebar.querySelectorAll('.nav-item');
                    navItems.forEach(function(item) {
                        item.addEventListener('click', function() {
                            if (window.innerWidth <= 768) {
                                closeMobileMenu();
                            }
                        });
                    });
                }

                // ========== LEGACY TAB SUPPORT (for backwards compatibility) ==========
                // Store active tab in localStorage
                $('#workspaceTabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
                    var activeTab = $(e.target).attr('href').replace('#', '').replace('Tab', '');
                    localStorage.setItem('workspaceActiveTab', activeTab);
                });

                // Restore active tab from localStorage if available
                var savedTab = localStorage.getItem('workspaceActiveTab');
                var serverTab = '{{ activeTab|default("queue") }}';
                if (savedTab && savedTab !== serverTab) {
                    $('#workspaceTabs a[href="#' + savedTab + 'Tab"]').tab('show');
                }

                // Handle tab switching - ensure FAB is always visible
                $('#workspaceTabs a[data-bs-toggle="tab"]').on('show.bs.tab', function(e) {
                    // FAB should be visible on both tabs
                    $('#floating-button').show();
                });

                // ========== MOBILE QUEUE ITEM EXPAND/COLLAPSE ==========
                // Only on mobile (max-width: 768px), tapping the body area expands details
                $(document).on('click', '.queue-items-list .buyqueue-body', function(e) {
                    // Only handle on mobile
                    if (window.innerWidth > 768) return;

                    // Don't expand if clicking action button links
                    if ($(e.target).closest('.actionButton, .iconClick').length) return;

                    var $li = $(this).closest('li');

                    // Collapse any other expanded items
                    $('.queue-items-list > li.expanded').not($li).removeClass('expanded');

                    // Toggle this item
                    $li.toggleClass('expanded');
                });

                // Close expanded item when clicking elsewhere
                $(document).on('click', function(e) {
                    if (window.innerWidth > 768) return;
                    if (!$(e.target).closest('.queue-items-list li').length) {
                        $('.queue-items-list > li.expanded').removeClass('expanded');
                    }
                });
            });
        })();
    </script>

    {# ========== REAMAZE CHAT WIDGET ========== #}
    <script src="http://cdn.reamaze.com/assets/reamaze.js"></script>
    <script type="text/javascript">
        var _support = _support || { 'ui': {}, 'user': {} };
        _support['account'] = 'buyerkiosk';
        _support['ui']['contactMode'] = 'default';
        _support['ui']['enableKb'] = 'true';
        _support['ui']['styles'] = {
            widgetColor: 'rgba(72, 173, 200, 1)',
            gradient: true,
        };
        _support['ui']['shoutboxFacesMode'] = "brand-avatar";
        _support['ui']['shoutboxHeaderLogo'] = true;
        _support['ui']['widget'] = {
            icon: 'chat',
            displayOn: 'all',
            label: {
                text: 'Let us know if you have any questions or need assistance! &#128522;',
                mode: "prompt-3",
                delay: 3,
                duration: 30,
            },
            position: 'bottom-left',
            size: 60,
            mobilePosition: 'bottom-right'
        };
        _support['custom_fields'] = {
            'Store Number (ex. 80xxx)': {
                pos: 1633448391284,
                type: 'text',
                value: '',
                required: true,
                placeholder: '',
            },
            'City': {
                pos: 1633448472325,
                type: 'text',
                value: '',
                required: true,
                placeholder: '',
            },
            'State': {
                pos: 1633448478677,
                type: 'text',
                value: '',
                required: true,
                placeholder: '',
            }
        };
        _support['apps'] = {
            faq: {"enabled":true},
            recentConversations: {},
            orders: {}
        };
    </script>

</body>
</html>