{# Workspace Template - Combined Queue + Workbook with SPA Navigation #}

{# Include the workspace head (CSS, meta tags, slim header, opens body/sidebar wrappers) #}
{% include 'workspace/layouts/workspace-head.html' %}

{# Sidebar Navigation #}
{% include 'workspace/partials/sidebar-nav.html' %}

{# Event Awareness Banner - Shows active events for staff #}
{% include 'workspace/partials/event-indicator.html' %}

{# ========== QUEUE VIEW ========== #}
<main class="workspace-content workspace-view {{ activePage == 'queue' ? 'active' : '' }}" id="queueView" data-view="queue">

    {# ========== QUEUE PAGE HEADER (with wait time controls) ========== #}
    <div class="workspace-page-header">
        <div class="page-title">
            <h1><i class="fa fa-list"></i> Queue</h1>
            <span class="store-info">{{ store.city }}</span>
        </div>

        <div class="page-controls">
            {# Wait Time Display #}
            <div class="wait-time-display" id="waitTime">
                <i class="fa fa-spinner fa-spin" id="waitLoading"></i>
            </div>

            {# Wait Time Buttons - MPC Controls #}
            <div class="wait-time-buttons">
                {% include 'workspace/partials/queue/mpc-buttons.html' %}
            </div>

            {# Resync DRS - publishes "Resync DRS" over Ably, waits for "DRS Synced" #}
            <button type="button" class="btn btn-sm btn-outline-secondary" id="resyncDrsBtn" title="Resync DRS data from the register">
                <i class="fa fa-rotate" id="resyncDrsIcon"></i>
                <span id="resyncDrsLabel">Resync DRS</span>
            </button>

            {# Queue Layout Selector - 3-icon compact button group #}
            <div class="btn-group btn-group-sm" id="queueLayoutToggle" role="group" aria-label="Queue layout selector">
                <button type="button" class="btn btn-outline-secondary active" data-view-mode="classic" title="Classic List View">
                    <i class="fa-solid fa-list"></i>
                </button>
                <button type="button" class="btn btn-outline-secondary" data-view-mode="enhanced" title="Tabbed View">
                    <i class="fa-solid fa-layer-group"></i>
                </button>
                <button type="button" class="btn btn-outline-secondary" data-view-mode="kanban" title="Kanban Board View">
                    <i class="fa-solid fa-table-columns"></i>
                </button>
            </div>
        </div>
    </div>

    {# ========== QUEUE CONTENT ========== #}
    <div class="content-card workspace-content-area">
        <div id="buyqueue_load"></div>

        {# Classic Queue View - 5 UL lists #}
        {% include 'workspace/partials/queue/queue-classic.html' %}

        {# Enhanced Panel View - Bootstrap tabs #}
        {% include 'workspace/partials/queue/queue-enhanced.html' %}

        {# Kanban Board View - Horizontal columns #}
        {% include 'workspace/partials/queue/queue-kanban.html' %}
    </div>

</main>

{# ========== WORKBOOK VIEW ========== #}
<main class="workspace-content workspace-view {{ activePage == 'workbook' ? 'active' : '' }}" id="workbookView" data-view="workbook">

    {# ========== WORKBOOK PAGE HEADER ========== #}
    <div class="workspace-page-header">
        <div class="page-title">
            <h1><i class="fa fa-book"></i> Workbook</h1>
            <span class="store-info">{{ store.city }}</span>
        </div>

        <div class="page-controls">
            {# Date Navigation #}
            <div class="workbook-date-nav">
                <button class="btn btn-secondary btn-sm" id="workbookPrevDay" title="Previous day">
                    <i class="fa fa-chevron-left"></i>
                </button>
                <span class="workbook-current-date" id="workbookCurrentDate">
                    {# Will be populated by JS #}
                </span>
                <button class="btn btn-secondary btn-sm" id="workbookNextDay" title="Next day">
                    <i class="fa fa-chevron-right"></i>
                </button>
                <button class="btn btn-secondary btn-sm" id="workbookToday" title="Go to today">
                    Today
                </button>
            </div>

            {# Layout Controls #}
            <div class="layout-controls">
                <button class="btn btn-secondary btn-sm" id="resetLayoutBtn" title="Reset layout to default">
                    <i class="fa fa-th-large"></i> Reset Layout
                </button>
            </div>

            {# Connection Status #}
            <div class="workbook-connection-status" id="workbook-connection-indicator" title="Real-time sync status">
                <i class="fa fa-circle"></i>
            </div>
        </div>
    </div>

    {# ========== CONFIGURABLE LAYOUT CONTAINER ========== #}
    <div class="workbook-grid" id="workbookGrid">

        {# ===== ROW 1: Tasks + Notes side by side ===== #}
        <div class="workbook-row" data-row-id="row1">
            <div class="workbook-row-column" data-side="left">
                {# TASKS PANEL #}
                <div class="workbook-panel" data-panel-id="tasks">
                    <div class="panel-header" draggable="true">
                        <i class="fa fa-square-check"></i>
                        <span class="panel-title">Today's Tasks</span>
                        <div class="panel-header-actions">
                            <a href="#" class="progress-pill" id="viewCompletedTasksLink" title="View completed tasks">
                                <div class="progress-bar-mini">
                                    <div class="fill" id="progressBarFill" style="width: 0%;"></div>
                                </div>
                                <span><span id="tasksCompletedCount">0</span>/<span id="tasksTotalCount">0</span></span>
                                <i class="fa fa-eye"></i>
                            </a>
                        </div>
                        <div class="panel-controls">
                            <button class="panel-control-btn toggle-colspan" title="Toggle width">
                                <i class="fa fa-columns"></i>
                            </button>
                            <button class="panel-control-btn toggle-collapse" title="Collapse/Expand">
                                <i class="fa fa-chevron-up"></i>
                            </button>
                        </div>
                    </div>
                    <div class="panel-body" id="tasksPanelBody">
                        {% include 'workbook/partials/task-list-content.html' %}
                    </div>
                    <div class="panel-resize-handle"></div>
                </div>
            </div>
            <div class="workbook-row-column" data-side="right">
                {# NOTES PANEL #}
                <div class="workbook-panel" data-panel-id="notes">
                    <div class="panel-header" draggable="true">
                        <i class="fa fa-sticky-note"></i>
                        <span class="panel-title">Notes</span>
                        <div class="panel-header-actions">
                            <div class="btn-group btn-group-sm me-2" id="notesViewToggle" role="group" aria-label="Notes view">
                                <button type="button" class="btn btn-outline-secondary" data-view="today">Today</button>
                                <button type="button" class="btn btn-outline-secondary active" data-view="all">All</button>
                            </div>
                            {% if user.checkAccess('task-lists') %}
                            <button class="btn-add-note" id="addNoteBtn">
                                <i class="fa fa-plus"></i> Add Note
                            </button>
                            {% endif %}
                        </div>
                        <div class="panel-controls">
                            <button class="panel-control-btn toggle-colspan" title="Toggle width">
                                <i class="fa fa-columns"></i>
                            </button>
                            <button class="panel-control-btn toggle-collapse" title="Collapse/Expand">
                                <i class="fa fa-chevron-up"></i>
                            </button>
                        </div>
                    </div>
                    <div class="panel-body" id="notesPanelBody">
                        {% include 'workbook/partials/notes-feed-content.html' %}
                    </div>
                    <div class="panel-resize-handle"></div>
                </div>
            </div>
        </div>

        {# ===== ROW 1.5: Daily Task Assignments (Spec 039, Phase 8) ===== #}
        {# Only visible for managers with workbook_manage_tasks and BuyerKiosk native scheduling #}
        {% if user.checkAccess('workbook_manage_tasks') and store.schedulingProvider == 'buyerkiosk' %}
        <div class="workbook-row full-width" data-row-id="row-assignments">
            {# DAILY ASSIGNMENTS PANEL #}
            <div class="workbook-panel" data-panel-id="daily-assignments">
                <div class="panel-header" draggable="true">
                    <i class="fa fa-users-gear"></i>
                    <span class="panel-title">Task Assignments</span>
                    <div class="panel-controls">
                        <button class="panel-control-btn toggle-colspan" title="Toggle width">
                            <i class="fa fa-columns"></i>
                        </button>
                        <button class="panel-control-btn toggle-collapse" title="Collapse/Expand">
                            <i class="fa fa-chevron-up"></i>
                        </button>
                    </div>
                </div>
                <div class="panel-body" id="dailyAssignmentsPanelBody">
                    {% include 'workbook/partials/daily-assignment-panel.html' %}
                </div>
                <div class="panel-resize-handle"></div>
            </div>
        </div>
        {% endif %}

        {# ===== ROW 2: Rack Maintenance + Backstock side by side ===== #}
        <div class="workbook-row" data-row-id="row2">
            <div class="workbook-row-column" data-side="left">
                {# RACK MAINTENANCE PANEL #}
                <div class="workbook-panel" data-panel-id="floorplan">
                    <div class="panel-header" draggable="true">
                        <i class="fa fa-wrench"></i>
                        <span class="panel-title">Rack Maintenance</span>
                        <div class="panel-header-actions">
                            <a href="/admin/{{ store.typeNum }}/floor-plan" class="panel-control-btn" title="View Floor Plan">
                                <i class="fa fa-external-link"></i>
                            </a>
                        </div>
                        <div class="panel-controls">
                            <button class="panel-control-btn toggle-colspan" title="Toggle width">
                                <i class="fa fa-columns"></i>
                            </button>
                            <button class="panel-control-btn toggle-collapse" title="Collapse/Expand">
                                <i class="fa fa-chevron-up"></i>
                            </button>
                        </div>
                    </div>
                    <div class="panel-body" id="floorplanPanelBody">
                        {% include 'workspace/partials/floor-plan/floor-panel.html' %}
                    </div>
                    <div class="panel-resize-handle"></div>
                </div>
            </div>
            <div class="workbook-row-column" data-side="right">
                {# BACKSTOCK PANEL #}
                <div class="workbook-panel" data-panel-id="backstock">
                    <div class="panel-header" draggable="true">
                        <i class="fa fa-boxes-stacked"></i>
                        <span class="panel-title">Backstock</span>
                        <div class="panel-header-actions backstock-header-actions">
                            <div class="backstock-quick-search">
                                <i class="fa fa-search"></i>
                                <input type="text"
                                       id="backstockQuickSearch"
                                       placeholder="Search bins..."
                                       autocomplete="off">
                                <div id="backstockSearchResults" class="backstock-search-results" style="display: none;"></div>
                            </div>
                            <a href="/{{ store.typeNum }}/backstock/" class="backstock-external-btn" title="View full backstock">
                                <i class="fa fa-external-link"></i>
                            </a>
                        </div>
                        <div class="panel-controls">
                            <button class="panel-control-btn toggle-colspan" title="Toggle width">
                                <i class="fa fa-columns"></i>
                            </button>
                            <button class="panel-control-btn toggle-collapse" title="Collapse/Expand">
                                <i class="fa fa-chevron-up"></i>
                            </button>
                        </div>
                    </div>
                    <div class="panel-body" id="backstockPanelBody">
                        {% include 'workbook/partials/backstock-summary-content.html' %}
                    </div>
                    <div class="panel-resize-handle"></div>
                </div>
            </div>
        </div>

        {# ===== ROW 3: Whiteboard (Full Width) ===== #}
        <div class="workbook-row full-width" data-row-id="row3">
            {# WHITEBOARD PANEL #}
            <div class="workbook-panel" data-panel-id="whiteboard">
                <div class="panel-header" draggable="true">
                    <i class="fa fa-paint-brush"></i>
                    <span class="panel-title">Whiteboard</span>
                    <div class="panel-controls">
                        <button class="panel-control-btn toggle-colspan" title="Toggle width">
                            <i class="fa fa-columns"></i>
                        </button>
                        <button class="panel-control-btn toggle-collapse" title="Collapse/Expand">
                            <i class="fa fa-chevron-up"></i>
                        </button>
                    </div>
                </div>
                <div class="panel-body" id="whiteboardPanelBody">
                    {% include 'workbook/partials/whiteboard-panel-content.html' %}
                </div>
                <div class="panel-resize-handle"></div>
            </div>
        </div>

    </div>

</main>

{# ========== COMPLETED BUYS VIEW ========== #}
<main class="workspace-content workspace-view {{ activePage == 'completed' ? 'active' : '' }}" id="completedView" data-view="completed">

    {# ========== COMPLETED BUYS PAGE HEADER ========== #}
    <div class="workspace-page-header">
        <div class="page-title">
            <h1><i class="fa fa-check-circle"></i> Completed Buys</h1>
            <span class="store-info">{{ store.city }}</span>
        </div>

        <div class="page-controls">
            {# Customer search — find anyone who sold in the last 30 days and pull up their record. #}
            <div class="position-relative d-inline-flex align-items-center mb-0 me-2" id="completedCustomerSearchWrap" style="width: 260px;">
                <i class="fa fa-search position-absolute" style="left: 10px; color: var(--gray-500, #6c757d); pointer-events: none;"></i>
                <input type="text" id="completedCustomerSearch" class="form-control form-control-sm" autocomplete="off"
                       placeholder="Search customers (last 30 days)" style="padding-left: 30px;">
                <div id="completedCustomerSearchResults" class="list-group shadow-sm position-absolute w-100"
                     style="top: 100%; left: 0; z-index: 1080; max-height: 320px; overflow-y: auto; display: none;"></div>
            </div>
            <div class="form-check form-switch d-inline-flex align-items-center mb-0 me-2">
                <input class="form-check-input" type="checkbox" role="switch" id="hidePaidOutToggle">
                <label class="form-check-label ms-2" for="hidePaidOutToggle">Hide paid out</label>
            </div>
            {# Date Picker — view a past day's completed buys. Defaults to today. #}
            <div class="d-inline-flex align-items-center mb-0 me-2">
                <label for="completedBuysDate" class="mb-0 me-2"><i class="fa fa-calendar"></i></label>
                <input type="text" id="completedBuysDate" class="form-control form-control-sm" style="width: 150px;">
                <button type="button" class="btn btn-link btn-sm p-1 ms-1" id="completedBuysToday" title="Jump to today" style="display:none;">Today</button>
            </div>
            {# Refresh Button #}
            <button class="btn btn-secondary btn-sm" id="refreshCompletedBtn" title="Refresh completed buys">
                <i class="fa fa-refresh"></i> Refresh
            </button>
        </div>
    </div>

    {# Hide paid-out rows in the legacy DataTable when the toggle is on #}
    <style>
        #completedTable.hide-paid-out tbody tr.checkedOut { display: none; }
        /* Mute paid-out rows in the new Syncfusion grid (matches legacy .checkedOut styling) */
        #completedBuysGrid .e-row.checked-out-row { background-color: #f0f0f0; }
        #completedBuysGrid .e-row.checked-out-row .e-rowcell { color: #6c757d; }
        #completedBuysGrid .e-row.checked-out-row:hover { background-color: #e6e6e6; }
    </style>

    {# ========== COMPLETED BUYS CONTENT ========== #}
    {% if embedded_chat_enabled|default(false) %}
    {# Syncfusion Grid for completed buys with SMS status column (Spec 030) #}
    <div class="content-card workspace-content-area" id="completedContentArea">
        <div id="completedBuysGrid"></div>
    </div>
    {% else %}
    {# Legacy DataTable for completed buys #}
    <div class="content-card">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Today's Processed Buys</h3>
            </div>
            <div class="box-body table-responsive">
                <table id="completedTable" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th><i class="fa fa-check"></i></th>
                        <th>Buy #</th>
                        <th>Name</th>
                        <th># Bins</th>
                        <th>Dropped Off</th>
                        <th>Sort Completed</th>
                        <th>Processed</th>
                        <th>Sorter</th>
                        <th>Buyer</th>
                    </tr>
                    </thead>
                    <tbody id="completedBuysBody">
                    {% for buy in completedBuys %}
                    {% if buy.checkedOut == false %}
                    <tr>
                        <td><button class="btn btn-sm btn-primary buyCheckOutButton" id="{{ buy.buyID }}"><i class="fa fa-check"></i></button></td>
                    {% else %}
                    <tr class="checkedOut">
                        <td></td>
                    {% endif %}
                        {% if buy.wasToday == false %}
                        <td>{{ buy.buyNumber }}</td>
                        {% else %}
                        <td>{{ buy.buyNumber }}</td>
                        {% endif %}
                        <td>{{ buy.customerFullName }}</td>
                        <td>{{ buy.numContainers }}</td>
                        {% if buy.wasToday == false %}
                        <td><strong>{{ buy.timeDroppedOff }}**</strong></td>
                        {% else %}
                        <td>{{ buy.timeDroppedOff }}</td>
                        {% endif %}
                        <td>{{ buy.sortCompleted }}</td>
                        <td>{{ buy.timeCompleted }}</td>
                        <td>{{ buy.sorterFullName }}</td>
                        <td>{{ buy.buyerFullName }}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <strong>** Denotes a buy from a previous day</strong>
            </div>
        </div>
    </div>
    {% endif %}

</main>

{# ========== PRINT LOG VIEW ========== #}
<main class="workspace-content workspace-view {{ activePage == 'printlog' ? 'active' : '' }}" id="printlogView" data-view="printlog">

    {# ========== PRINT LOG PAGE HEADER ========== #}
    <div class="workspace-page-header">
        <div class="page-title">
            <h1><i class="fa fa-print"></i> Buy Log</h1>
            <span class="store-info">{{ store.city }}</span>
        </div>

        <div class="page-controls">
            {# Date Display #}
            <span class="printlog-date-display" id="printlogDateDisplay"></span>

            {# Date Picker Button #}
            <button class="btn btn-secondary btn-sm" id="printlogDatePicker" title="Select date">
                <i class="fa fa-calendar"></i> Date
            </button>

            {# Print Button #}
            <button class="btn btn-success btn-sm" id="printlogPrintBtn" onclick="window.print();" title="Print">
                <i class="fa fa-print"></i> Print
            </button>
        </div>
    </div>

    {# ========== PRINT LOG CONTENT ========== #}
    <div class="content-card printlog-content">
        {# Today's Buyers/Sorters Summary #}
        <div class="row printlog-summary noprint">
            <div class="col-sm-4">
                <ul class="list-unstyled" id="printlogTodaysBuyers">
                    <strong>Today's Buyers</strong>
                </ul>
            </div>
            <div class="col-sm-4"></div>
            <div class="col-sm-4">
                <ul class="list-unstyled text-right" id="printlogTodaysSorters">
                    <strong>Today's Sorters</strong>
                </ul>
            </div>
        </div>

        <hr class="noprint">

        {# Buy Log Table #}
        <div class="box">
            <div class="box-body table-responsive">
                <table class="table table-striped" id="printlogTable">
                    <thead>
                    <tr>
                        <th>Buy #</th>
                        <th>Name</th>
                        <th># Bins</th>
                        <th>Dropped Off</th>
                        <th>Sorter</th>
                        <th>Buyer</th>
                        <th><span data-bs-toggle="tooltip" title="Start Delay">SD</span></th>
                        <th><span data-bs-toggle="tooltip" title="Sort Time">ST</span></th>
                        <th><span data-bs-toggle="tooltip" title="Process Time">PT</span></th>
                        <th><span data-bs-toggle="tooltip" title="Process Time per Container">PT/C</span></th>
                        <th class="noprint">Resend SMS</th>
                    </tr>
                    </thead>
                    <tbody id="printlogTableBody">
                    </tbody>
                </table>
                <strong>** Denotes a buy from a previous day</strong>
            </div>
        </div>

        <hr>

        {# Buyer Stats #}
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Buyer Stats</h3>
            </div>
            <div class="box-body table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>Buyer Name</th>
                        <th>Average Process Time</th>
                        <th>Average Per Container</th>
                        <th>Buys Processed</th>
                        <th>Bins Processed</th>
                    </tr>
                    </thead>
                    <tbody id="printlogBuyerStats">
                    </tbody>
                </table>
            </div>
        </div>

        {# Sorter Stats #}
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Sorter Stats</h3>
            </div>
            <div class="box-body table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>Sorter Name</th>
                        <th>Average Sort Time</th>
                        <th>Average Per Container</th>
                        <th>Buys Sorted</th>
                        <th>Bins Sorted</th>
                    </tr>
                    </thead>
                    <tbody id="printlogSorterStats">
                    </tbody>
                </table>
            </div>
        </div>

        {# Store Info (for print) #}
        <div class="row noscreen">
            <div class="col-xs-6">
                <div class="bg-light border rounded p-3">
                    <address>
                        <strong>{{ breadcrumb.storeType }} - {{ store.city }}</strong><br>
                        {{ store.address }}<br>
                        {{ store.city }}, {{ store.state }} {{ store.zipcode }}<br>
                        <strong>P:</strong> {{ store.phone }}
                    </address>
                </div>
            </div>
        </div>
    </div>

</main>

{# ========== SUPPORT/HELP CENTER VIEW ========== #}
<main class="workspace-content workspace-view {{ activePage == 'support' ? 'active' : '' }}" id="supportView" data-view="support">

    {# ========== SUPPORT PAGE HEADER ========== #}
    <div class="workspace-page-header">
        <div class="page-title">
            <h1><i class="fa fa-question-circle"></i> Help Center</h1>
            <span class="store-info">{{ store.city }}</span>
        </div>

        <div class="page-controls">
            {# Search within help center #}
            <div class="support-header-search">
                <input type="text" id="supportHeaderSearch" class="form-control" placeholder="Search help articles...">
                <button class="btn btn-primary" id="supportHeaderSearchBtn">
                    <i class="fa fa-search"></i>
                </button>
            </div>
        </div>
    </div>

    {# ========== SUPPORT CONTENT ========== #}
    <div class="support-container" id="supportContainer">
        {# Main support portal content - loaded dynamically #}
        <div class="support-main-view" id="supportMainView">
            {# Hero Search Section #}
            <div class="support-hero">
                <h2>How can we help you?</h2>
                <p>Search our knowledge base or browse categories below</p>
                <div class="support-search-box">
                    <input type="text" id="supportSearchInput" class="form-control" placeholder="Search for articles, guides, and help...">
                    <button class="btn btn-primary" id="supportSearchBtn">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>

            {# Categories Grid #}
            <div class="support-section">
                <h3 class="support-section-title"><i class="fa fa-folder-open"></i> Browse by Category</h3>
                <div class="support-categories-grid" id="supportCategoriesGrid">
                    {# Categories loaded via JS #}
                    <div class="loading-spinner"><i class="fa fa-spinner fa-spin"></i> Loading categories...</div>
                </div>
            </div>

            {# Featured Articles #}
            <div class="support-section">
                <h3 class="support-section-title"><i class="fa fa-star"></i> Featured Articles</h3>
                <div class="support-articles-list" id="supportFeaturedArticles">
                    {# Featured articles loaded via JS #}
                    <div class="loading-spinner"><i class="fa fa-spinner fa-spin"></i> Loading articles...</div>
                </div>
            </div>

            {# Recent Articles #}
            <div class="support-section">
                <h3 class="support-section-title"><i class="fa fa-clock-o"></i> Recently Updated</h3>
                <div class="support-articles-list" id="supportRecentArticles">
                    {# Recent articles loaded via JS #}
                </div>
            </div>
        </div>

        {# Article Detail View (hidden by default) #}
        <div class="support-article-view" id="supportArticleView" style="display: none;">
            {# Breadcrumb #}
            <div class="support-breadcrumb">
                <a href="#" class="back-to-support" id="backToSupport"><i class="fa fa-home"></i> Help Center</a>
                <span class="breadcrumb-separator">/</span>
                <a href="#" class="breadcrumb-category-link" id="articleCategoryLink"></a>
                <span class="breadcrumb-separator">/</span>
                <span class="breadcrumb-current" id="articleTitle"></span>
            </div>

            {# Article Content #}
            <div class="support-article-content" id="supportArticleContent">
                {# Article loaded via JS #}
            </div>

            {# Article Footer (reactions, comments) #}
            <div class="support-article-footer" id="supportArticleFooter">
                {# Reactions and comments loaded via JS #}
            </div>
        </div>

        {# Category View (hidden by default) #}
        <div class="support-category-view" id="supportCategoryView" style="display: none;">
            {# Breadcrumb #}
            <div class="support-breadcrumb">
                <a href="#" class="back-to-support" id="backToSupportFromCategory"><i class="fa fa-home"></i> Help Center</a>
                <span class="breadcrumb-separator">/</span>
                <span class="breadcrumb-current" id="categoryName"></span>
            </div>

            {# Category Header #}
            <div class="support-category-header" id="supportCategoryHeader">
                {# Category info loaded via JS #}
            </div>

            {# Category Articles #}
            <div class="support-articles-list" id="supportCategoryArticles">
                {# Articles loaded via JS #}
            </div>
        </div>

        {# Search Results View (hidden by default) #}
        <div class="support-search-view" id="supportSearchView" style="display: none;">
            {# Breadcrumb #}
            <div class="support-breadcrumb">
                <a href="#" class="back-to-support" id="backToSupportFromSearch"><i class="fa fa-arrow-left"></i> Back to Help Center</a>
            </div>

            {# Search Results Header #}
            <div class="support-search-header">
                <h3>Search Results for "<span id="searchQueryDisplay"></span>"</h3>
                <span class="search-result-count" id="searchResultCount"></span>
            </div>

            {# Search Results #}
            <div class="support-articles-list" id="supportSearchResults">
                {# Results loaded via JS #}
            </div>
        </div>
    </div>

</main>

{# ========== BACKSTOCK VIEW ========== #}
{% if workbook_backstock_enabled|default(false) %}
<main class="workspace-content workspace-view {{ activePage == 'backstock' ? 'active' : '' }}" id="backstockView" data-view="backstock">
    {% include 'workspace/partials/backstock/backstock-view.html' %}
</main>
{% endif %}

{# ========== COMEBACK CASH VIEW REMOVED ========== #}
{# Comeback Cash management has been moved to Admin panel: /admin/{typeNum}/comeback-cash/ #}
{# Workspace users can use Quick Redeem popup via sidebar button #}

{# KPI Bar at bottom - shown for all views - use workbook KPI bar with expand/collapse #}
{% include 'workbook/partials/kpi-bar.html' %}

{# ========== HANDLEBARS TEMPLATES ========== #}
{% include 'workspace/partials/queue/queue-item-template.html' %}

{# ========== QUEUE MODALS ========== #}
{% include 'workspace/partials/modals/add-buy-modal.html' %}
{% include 'workspace/partials/modals/clock-in-modal.html' %}
{% include 'workspace/partials/modals/schedule-modal.html' %}

{# ========== WORKBOOK MODALS ========== #}
{% include 'workbook/modals/add-note-modal.html' %}
{% include 'workbook/modals/task-detail-modal.html' %}
{% include 'workbook/modals/employee-selector-modal.html' %}
{% include 'workbook/modals/completed-tasks-modal.html' %}
{% include 'backstock/modals/manageBin.html' %}

{# ========== FLOOR PLAN MODALS ========== #}
{% include 'workspace/partials/floor-plan/rack-detail-modal.html' %}

{# ========== COMEBACK CASH MODALS ========== #}
{% if user.checkAccess('uri_comeback_cash') %}
{% include 'modals/comeback-cash-redeem-modal.html' %}
{% endif %}

{# ========== FIVESTARS MODAL ========== #}
{% if fiveStarsEnabled|default(false) %}
{% include 'workspace/partials/modals/fivestars-modal.html' %}
{% endif %}

{# ========== COMPLETED BUYS CUSTOMER RECORD MODAL ========== #}
<div class="modal fade" id="customerRecordModal" tabindex="-1" role="dialog" aria-labelledby="customerRecordModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="customerRecordModalLabel"><i class="fa fa-user me-2"></i>Customer Record</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {# Loading / error / content states swapped by JS #}
                <div id="customerRecordLoading" class="text-center text-muted py-4" style="display:none;">
                    <i class="fa fa-spinner fa-spin fa-2x"></i>
                    <div class="mt-2">Loading record…</div>
                </div>
                <div id="customerRecordError" class="alert alert-danger" style="display:none;"></div>
                <div id="customerRecordContent" style="display:none;">
                    <h4 class="mb-1" id="crName"></h4>
                    <div class="mb-3 text-muted small" id="crMemberSince"></div>

                    <dl class="row mb-3">
                        <dt class="col-4 text-muted small">Phone</dt>
                        <dd class="col-8" id="crPhone"></dd>
                        <dt class="col-4 text-muted small">Email</dt>
                        <dd class="col-8" id="crEmail"></dd>
                        <dt class="col-4 text-muted small">Address</dt>
                        <dd class="col-8" id="crAddress"></dd>
                        <dt class="col-4 text-muted small">Contact</dt>
                        <dd class="col-8" id="crContactPrefs"></dd>
                    </dl>

                    <h6 class="text-muted text-uppercase small mb-2" id="crBuysHeader">Recent buys (last 30 days)</h6>
                    <div class="table-responsive">
                        <table class="table table-sm table-striped mb-0">
                            <thead>
                                <tr>
                                    <th>Buy #</th>
                                    <th>Finished</th>
                                    <th class="text-center"># Bins</th>
                                    <th>Status</th>
                                    <th class="text-end">Receipt</th>
                                </tr>
                            </thead>
                            <tbody id="crBuysBody"></tbody>
                        </table>
                    </div>
                    <div id="crNoBuys" class="text-muted text-center py-3" style="display:none;">No completed buys in the last 30 days.</div>
                </div>
            </div>
        </div>
    </div>
</div>

{# Include the workspace foot (JS libraries, closes wrappers) #}
{% include 'workspace/layouts/workspace-foot.html' %}

{# ========== SYSTEM ALERT NOTIFICATIONS (Spec 040 T6) ========== #}
<script src="/js/workspace/modules/notifications/NotificationManager.js?v={{ css_version|default('1') }}"></script>
<script src="/js/workspace/modules/notifications/BannerRenderer.js?v={{ css_version|default('1') }}"></script>
<script src="/js/workspace/modules/notifications/ToastRenderer.js?v={{ css_version|default('1') }}"></script>
<script src="/js/workspace/modules/notifications/AlertAblySync.js?v={{ css_version|default('1') }}"></script>
<script src="/js/workspace/modules/notifications/AlertBellDropdown.js?v={{ css_version|default('1') }}"></script>

{# ========== WORKBOOK LAYOUT MANAGER ========== #}
<script src="/js/workspace/modules/workbook/layout-manager.js?v={{ css_version|default('1') }}"></script>

{# ========== WORKBOOK JAVASCRIPT ========== #}
<script src="/js/workspace/modules/workbook/ably-sync.js?v={{ css_version|default('1') }}"></script>
<script src="/js/workspace/modules/workbook/employee-selector.js?v={{ css_version|default('1') }}"></script>
<script src="/js/workspace/modules/workbook/daily-assignment-view.js?v={{ css_version|default('1') }}"></script>
<script src="/js/workspace/modules/workbook/workbook.js?v={{ css_version|default('1') }}"></script>
<script src="/js/workspace/modules/workbook/task-manager.js?v={{ css_version|default('1') }}"></script>
<script src="/js/workspace/modules/workbook/notes-manager.js?v={{ css_version|default('1') }}"></script>
<script src="/js/workspace/modules/workbook/schedule-display.js?v={{ css_version|default('1') }}"></script>
<script src="/js/workspace/modules/workbook/kpi-display.js?v={{ css_version|default('1') }}"></script>
<script src="/js/workspace/modules/workbook/whiteboard-display.js?v={{ css_version|default('1') }}"></script>
<script src="/js/workspace/modules/workbook/backstock-display.js?v={{ css_version|default('1') }}"></script>
<script src="/js/workspace/modules/workbook/time-punch.js?v={{ css_version|default('1') }}"></script>

{# ========== BACKSTOCK MANAGE BIN MODAL JS ========== #}
<script>
{% include 'backstock/js/manageBin.js' %}
</script>

{# ========== SPA NAVIGATION MANAGER ========== #}
<script src="/js/workspace/modules/common/spa-navigation.js"></script>

{# ========== SUPPORT/HELP CENTER JAVASCRIPT ========== #}
<script src="/js/workspace/modules/support/support-portal.js?v=20260215"></script>

{# ========== COMEBACK CASH JAVASCRIPT ========== #}
{# Note: comeback-cash.js module will be created separately - placeholder for now #}
{# <script src="/js/workspace/modules/comeback-cash/comeback-cash.js"></script> #}

{# ========== COMBINED VIEW STYLES ========== #}
<style>
/* Hide inactive views - !important to override Bootstrap's main element reset */
.workspace-view {
    display: none !important;
}

.workspace-view.active {
    display: block !important;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar for workspace views */
.workspace-view.active::-webkit-scrollbar {
    width: 8px;
}
.workspace-view.active::-webkit-scrollbar-track {
    background: var(--neutral-100, #f1f5f9);
}
.workspace-view.active::-webkit-scrollbar-thumb {
    background: var(--neutral-400, #94a3b8);
    border-radius: 4px;
}
.workspace-view.active::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-500, #64748b);
}

/* Dark mode scrollbar */
[data-theme="dark"] .workspace-view.active::-webkit-scrollbar-track {
    background: var(--neutral-800, #1e293b);
}
[data-theme="dark"] .workspace-view.active::-webkit-scrollbar-thumb {
    background: var(--neutral-600, #475569);
}
[data-theme="dark"] .workspace-view.active::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-500, #64748b);
}

/* Workbook view - ensure it fits within the content area without overflow */
#workbookView {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

#workbookView .workbook-grid {
    padding: 16px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/* Ensure rows don't overflow */
#workbookView .workbook-row {
    max-width: 100%;
    box-sizing: border-box;
}

#workbookView .workbook-row-column {
    min-width: 0; /* Allow flex items to shrink below content size */
}

/* Hide Reamaze widget on Workbook view */
body[data-active-view="workbook"] #reamaze-widget,
body[data-active-view="workbook"] .reamaze-widget,
body[data-active-view="workbook"] [id^="reamaze"],
body[data-active-view="workbook"] .shoutbox-container,
body[data-active-view="workbook"] #reamaze_shoutbox {
    display: none !important;
    visibility: hidden !important;
}

/* Extend sidebar all the way to bottom on workbook view */
body[data-active-view="workbook"] .workspace-sidebar {
    bottom: 0 !important;
}

/* Restyle sidebar collapse button for workbook - match KPI bar height */
body[data-active-view="workbook"] .sidebar-toggle {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--sidebar-width, 200px) !important;
    height: 60px !important;
    padding: 0 20px !important;
    background: var(--sidebar-bg, #1a202c);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.3s ease, width 0.3s ease;
    z-index: 1021;
    box-sizing: border-box;
}

body[data-active-view="workbook"] .sidebar-toggle:hover {
    background: var(--sidebar-hover, #2d3748);
}

body[data-active-view="workbook"] .workspace-sidebar.collapsed .sidebar-toggle {
    width: var(--sidebar-collapsed-width, 60px) !important;
}

/* Fix expanded KPI bar for workbook - add dark background to left side */
body[data-active-view="workbook"] .kpi-bar-expanded {
    background: linear-gradient(to right, var(--sidebar-bg, #1a202c) var(--sidebar-width, 200px), var(--panel-bg, #fff) var(--sidebar-width, 200px)) !important;
}

body[data-active-view="workbook"].sidebar-is-collapsed .kpi-bar-expanded {
    background: linear-gradient(to right, var(--sidebar-bg, #1a202c) var(--sidebar-collapsed-width, 60px), var(--panel-bg, #fff) var(--sidebar-collapsed-width, 60px)) !important;
}

@media (max-width: 768px) {
    body[data-active-view="workbook"] .kpi-bar-expanded {
        background: var(--panel-bg, #fff) !important;
    }

    body[data-active-view="workbook"] .sidebar-toggle {
        display: none !important;
    }
}

/* ========== COMPLETED BUYS VIEW STYLES ========== */
#completedView .content-card {
    background: var(--panel-bg, #fff);
    border-radius: 8px;
    padding: 20px;
    margin: 16px;
}

#completedView .box {
    margin: 0;
    border: none;
    box-shadow: none;
}

#completedView .box-header {
    padding: 0 0 15px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}

#completedView .box-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

#completedView .table {
    margin-bottom: 15px;
}

#completedView .table thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
}

#completedView .table tbody tr.checkedOut {
    opacity: 0.6;
    background-color: #f0f0f0;
}

#completedView .buyCheckOutButton {
    padding: 4px 8px;
}

/* Hide Reamaze widget on Completed view */
body[data-active-view="completed"] #reamaze-widget,
body[data-active-view="completed"] .reamaze-widget,
body[data-active-view="completed"] [id^="reamaze"],
body[data-active-view="completed"] .shoutbox-container,
body[data-active-view="completed"] #reamaze_shoutbox {
    display: none !important;
    visibility: hidden !important;
}

/* Extend sidebar all the way to bottom on completed view (like workbook) */
body[data-active-view="completed"] .workspace-sidebar {
    bottom: 0 !important;
}

/* Restyle sidebar collapse button for completed - match KPI bar height */
body[data-active-view="completed"] .sidebar-toggle {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--sidebar-width, 200px) !important;
    height: 60px !important;
    padding: 0 20px !important;
    background: var(--sidebar-bg, #1a202c);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.3s ease, width 0.3s ease;
    z-index: 1021;
    box-sizing: border-box;
}

body[data-active-view="completed"] .sidebar-toggle:hover {
    background: var(--sidebar-hover, #2d3748);
}

body[data-active-view="completed"] .workspace-sidebar.collapsed .sidebar-toggle {
    width: var(--sidebar-collapsed-width, 60px) !important;
}

/* ========== PRINT LOG VIEW STYLES ========== */
#printlogView .content-card {
    background: var(--panel-bg, #fff);
    border-radius: 8px;
    padding: 20px;
    margin: 16px;
}

#printlogView .printlog-date-display {
    font-size: 16px;
    font-style: italic;
    margin-right: 15px;
    color: #666;
}

#printlogView .printlog-summary {
    margin-bottom: 15px;
}

#printlogView .printlog-summary ul {
    margin: 0;
    padding: 0;
}

#printlogView .printlog-summary .badge {
    background-color: #5cb85c;
}

#printlogView .box {
    margin: 0 0 20px 0;
    border: none;
    box-shadow: none;
}

#printlogView .box-header {
    padding: 0 0 10px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

#printlogView .box-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

#printlogView .table thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
    font-size: 14px;
}

#printlogView .table tbody td {
    vertical-align: middle;
}

#printlogView .resend-sms-btn {
    padding: 2px 6px;
    font-size: 12px;
}

#printlogView .resend-sms-btn img {
    width: 20px;
    height: auto;
}

/* Hide Reamaze widget on Print Log view */
body[data-active-view="printlog"] #reamaze-widget,
body[data-active-view="printlog"] .reamaze-widget,
body[data-active-view="printlog"] [id^="reamaze"],
body[data-active-view="printlog"] .shoutbox-container,
body[data-active-view="printlog"] #reamaze_shoutbox {
    display: none !important;
    visibility: hidden !important;
}

/* Extend sidebar all the way to bottom on printlog view */
body[data-active-view="printlog"] .workspace-sidebar {
    bottom: 0 !important;
}

/* Restyle sidebar collapse button for printlog */
body[data-active-view="printlog"] .sidebar-toggle {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--sidebar-width, 200px) !important;
    height: 60px !important;
    padding: 0 20px !important;
    background: var(--sidebar-bg, #1a202c);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.3s ease, width 0.3s ease;
    z-index: 1021;
    box-sizing: border-box;
}

body[data-active-view="printlog"] .sidebar-toggle:hover {
    background: var(--sidebar-hover, #2d3748);
}

body[data-active-view="printlog"] .workspace-sidebar.collapsed .sidebar-toggle {
    width: var(--sidebar-collapsed-width, 60px) !important;
}

/* Print styles */
@media print {
    .noprint {
        display: none !important;
    }

    /* Remove viewport constraints so content flows across print pages */
    .workspace-view.active {
        max-height: none !important;
        overflow: visible !important;
    }

    .workspace-body {
        display: block !important;
        min-height: auto !important;
    }

    .workspace-layout {
        display: block !important;
        min-height: auto !important;
    }

    #printlogView .content-card {
        margin: 0;
        padding: 10px;
        box-shadow: none;
    }

    .workspace-sidebar,
    .workspace-page-header,
    .kpi-bar {
        display: none !important;
    }

    #printlogView {
        margin-left: 0 !important;
    }
}

@media screen {
    .noscreen {
        display: none !important;
    }
}

/* ========== SUPPORT/HELP CENTER VIEW STYLES ========== */
#supportView .support-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

#supportView .support-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 30px;
}

#supportView .support-hero h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
}

#supportView .support-hero p {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 20px;
}

#supportView .support-search-box {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    gap: 10px;
}

#supportView .support-search-box input {
    flex: 1;
    height: 44px;
    border-radius: 22px;
    border: none;
    padding: 0 20px;
    font-size: 15px;
}

#supportView .support-search-box button {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    border: none;
    background: rgba(255,255,255,0.2);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
    padding: 0px;
}

#supportView .support-search-box button:hover {
    background: rgba(255,255,255,0.3);
}

/* Autocomplete dropdown */
#supportView .search-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-height: 360px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 6px;
}

#supportView .search-autocomplete-dropdown .autocomplete-item {
    padding: 12px 18px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s ease;
}

#supportView .search-autocomplete-dropdown .autocomplete-item:last-child {
    border-bottom: none;
}

#supportView .search-autocomplete-dropdown .autocomplete-item:hover,
#supportView .search-autocomplete-dropdown .autocomplete-item.active {
    background: #f5f7ff;
}

#supportView .search-autocomplete-dropdown .autocomplete-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
}

#supportView .search-autocomplete-dropdown .autocomplete-title strong {
    color: #667eea;
    font-weight: 700;
}

#supportView .search-autocomplete-dropdown .autocomplete-category {
    font-size: 12px;
    color: #999;
}

#supportView .search-autocomplete-dropdown .autocomplete-empty {
    padding: 16px 18px;
    color: #999;
    text-align: center;
    font-size: 13px;
}

#supportView .search-autocomplete-dropdown .autocomplete-empty i {
    margin-right: 6px;
}

#supportView .support-section {
    margin-bottom: 30px;
}

#supportView .support-section-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e7eaec;
}

#supportView .support-section-title i {
    margin-right: 8px;
    color: #667eea;
}

#supportView .support-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

#supportView .support-category-card {
    background: var(--panel-bg, #fff);
    border: 1px solid #e7eaec;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
}

#supportView .support-category-card:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    text-decoration: none;
}

#supportView .support-category-card .category-icon {
    font-size: 36px;
    color: #667eea;
    margin-bottom: 12px;
}

#supportView .support-category-card .category-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

#supportView .support-category-card .category-description {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

#supportView .support-category-card .category-count {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
}

#supportView .support-articles-list {
    background: var(--panel-bg, #fff);
    border-radius: 8px;
    border: 1px solid #e7eaec;
}

#supportView .support-article-item {
    display: flex;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid #e7eaec;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    color: inherit;
}

#supportView .support-article-item:last-child {
    border-bottom: none;
}

#supportView .support-article-item:hover {
    background: #f8f9fa;
    text-decoration: none;
}

#supportView .support-article-item .article-icon {
    font-size: 20px;
    color: #667eea;
    margin-right: 15px;
    margin-top: 2px;
}

#supportView .support-article-item .article-info {
    flex: 1;
}

#supportView .support-article-item .article-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

#supportView .support-article-item .article-excerpt {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 6px;
}

#supportView .support-article-item .article-meta {
    font-size: 12px;
    color: #999;
    display: flex;
    gap: 15px;
}

#supportView .support-article-item .article-meta i {
    margin-right: 4px;
}

#supportView .support-article-item .featured-badge {
    background: #f0ad4e;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    font-weight: 600;
}

#supportView .support-breadcrumb {
    margin-bottom: 20px;
    font-size: 14px;
}

#supportView .support-breadcrumb a {
    color: #667eea;
    text-decoration: none;
}

#supportView .support-breadcrumb a:hover {
    text-decoration: underline;
}

#supportView .support-breadcrumb .breadcrumb-separator {
    margin: 0 10px;
    color: #999;
}

#supportView .support-article-content {
    background: var(--panel-bg, #fff);
    border-radius: 8px;
    border: 1px solid #e7eaec;
    padding: 30px;
    margin-bottom: 20px;
}

#supportView .support-article-content h1 {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

#supportView .support-article-content .article-meta-header {
    font-size: 13px;
    color: #666;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e7eaec;
}

#supportView .support-article-content .article-share-link {
    margin-bottom: 20px;
    padding: 10px 15px;
    background: #f0f4ff;
    border: 1px solid #d4daf0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

#supportView .support-article-content .article-share-link label {
    font-weight: 600;
    color: #555;
    white-space: nowrap;
    margin: 0;
}

#supportView .support-article-content .article-share-link input {
    flex: 1;
    border: 1px solid #d4daf0;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 13px;
    color: #333;
    background: #fff;
    font-family: monospace;
}

#supportView .support-article-content .article-share-link input:focus {
    outline: none;
    border-color: #667eea;
}

#supportView .support-article-content .article-share-link .btn-copy-link {
    padding: 5px 12px;
    font-size: 13px;
    border: 1px solid #667eea;
    background: #fff;
    color: #667eea;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

#supportView .support-article-content .article-share-link .btn-copy-link:hover {
    background: #667eea;
    color: #fff;
}

#supportView .support-article-content .article-body {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}

#supportView .support-article-content .article-body h2 {
    font-size: 22px;
    margin-top: 30px;
    margin-bottom: 15px;
}

#supportView .support-article-content .article-body h3 {
    font-size: 18px;
    margin-top: 25px;
    margin-bottom: 12px;
}

#supportView .support-article-content .article-body ul,
#supportView .support-article-content .article-body ol {
    margin-bottom: 15px;
    padding-left: 25px;
}

#supportView .support-article-content .article-body li {
    margin-bottom: 8px;
}

#supportView .support-article-content .article-body code {
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
}

#supportView .support-article-content .article-body pre {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 15px 0;
}

#supportView .support-article-content .article-body pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

#supportView .support-article-footer {
    background: var(--panel-bg, #fff);
    border-radius: 8px;
    border: 1px solid #e7eaec;
    padding: 20px 30px;
}

#supportView .support-reactions {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e7eaec;
    margin-bottom: 15px;
}

#supportView .support-reactions .reactions-label {
    font-size: 14px;
    color: #666;
}

#supportView .support-reactions .reaction-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    transition: all 0.2s;
}

#supportView .support-reactions .reaction-btn:hover {
    border-color: #667eea;
    color: #667eea;
}

#supportView .support-reactions .reaction-btn.active {
    background: #667eea;
    border-color: #667eea;
    color: #fff;
}

#supportView .support-reactions .reaction-btn i {
    margin-right: 5px;
}

#supportView .support-comments-section h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
}

#supportView .support-comment {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

#supportView .support-comment:last-child {
    border-bottom: none;
}

#supportView .support-comment .comment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

#supportView .support-comment .comment-author {
    font-weight: 600;
    color: #333;
}

#supportView .support-comment .comment-date {
    font-size: 12px;
    color: #999;
}

#supportView .support-comment .comment-body {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}

#supportView .support-add-comment {
    margin-top: 15px;
}

#supportView .support-add-comment textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px;
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
    margin-bottom: 10px;
}

#supportView .support-header-search {
    display: flex;
    gap: 8px;
}

#supportView .support-header-search input {
    width: 200px;
    height: 34px;
    border-radius: 17px;
    border: 1px solid #ddd;
    padding: 0 15px;
    font-size: 13px;
}

#supportView .support-header-search button {
    width: 34px;
    height: 34px;
    border-radius: 17px;
    border: none;
    background: #667eea;
    color: #fff;
    cursor: pointer;
    padding: 0px;
}

#supportView .loading-spinner {
    text-align: center;
    padding: 40px;
    color: #999;
}

#supportView .empty-state {
    text-align: center;
    padding: 40px;
    color: #999;
}

#supportView .empty-state i {
    font-size: 48px;
    margin-bottom: 15px;
    color: #ddd;
}

/* Hide Reamaze widget on Support view */
body[data-active-view="support"] #reamaze-widget,
body[data-active-view="support"] .reamaze-widget,
body[data-active-view="support"] [id^="reamaze"],
body[data-active-view="support"] .shoutbox-container,
body[data-active-view="support"] #reamaze_shoutbox {
    display: none !important;
    visibility: hidden !important;
}

/* Extend sidebar all the way to bottom on support view */
body[data-active-view="support"] .workspace-sidebar {
    bottom: 0 !important;
}

body[data-active-view="support"] .sidebar-toggle {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--sidebar-width, 200px) !important;
    height: 60px !important;
    padding: 0 20px !important;
    background: var(--sidebar-bg, #1a202c);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.3s ease, width 0.3s ease;
    z-index: 1021;
    box-sizing: border-box;
}

body[data-active-view="support"] .sidebar-toggle:hover {
    background: var(--sidebar-hover, #2d3748);
}

body[data-active-view="support"] .workspace-sidebar.collapsed .sidebar-toggle {
    width: var(--sidebar-collapsed-width, 60px) !important;
}

/* ========== COMEBACK CASH VIEW STYLES ========== */
#comebackCashView .content-card {
    background: var(--panel-bg, #fff);
    border-radius: 8px;
    padding: 20px;
    margin: 16px;
}

/* Tab Navigation */
.comeback-cash-tabs {
    margin-bottom: 20px;
    border-bottom: 2px solid #e7eaec;
}

.comeback-cash-tabs > li > a {
    border: none;
    color: #666;
    padding: 12px 20px;
    font-weight: 500;
}

.comeback-cash-tabs > li.active > a,
.comeback-cash-tabs > li.active > a:focus,
.comeback-cash-tabs > li.active > a:hover {
    border: none;
    border-bottom: 3px solid #5cb85c;
    color: #5cb85c;
    background: transparent;
}

.comeback-cash-tabs > li > a:hover {
    background: rgba(0,0,0,0.03);
    border: none;
}

.comeback-cash-tabs > li > a i {
    margin-right: 6px;
}

/* Events List */
.events-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.events-list-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.event-type-filter {
    margin-bottom: 20px;
}

.events-grid {
    min-height: 200px;
}

.events-loading,
.events-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.events-empty i {
    color: #ddd;
    margin-bottom: 15px;
}

.events-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* Event Card */
.event-card {
    background: var(--panel-bg, #fff);
    border: 1px solid #e7eaec;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}

.event-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.event-card-header {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e7eaec;
}

.event-side-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

.event-side-badge.buy-badge {
    background: #e3f2fd;
    color: #1976d2;
}

.event-side-badge.sales-badge {
    background: #fff3e0;
    color: #f57c00;
}

.event-status-badge {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
}

.event-status-badge.status-draft {
    background: #f5f5f5;
    color: #757575;
}

.event-status-badge.status-active {
    background: #e8f5e9;
    color: #388e3c;
}

.event-status-badge.status-scheduled {
    background: #e3f2fd;
    color: #1976d2;
}

.event-status-badge.status-ended {
    background: #ffebee;
    color: #d32f2f;
}

.event-card-body {
    padding: 15px;
}

.event-name {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.event-details {
    margin-bottom: 15px;
}

.event-detail-row {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.event-detail-row i {
    width: 20px;
    color: #999;
    margin-right: 8px;
}

.event-detail-row .detail-label {
    font-weight: 500;
    margin-right: 6px;
}

.event-stats {
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
    border-top: 1px solid #e7eaec;
    margin-top: 15px;
}

.event-stats .stat-item {
    text-align: center;
}

.event-stats .stat-value {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.event-stats .stat-label {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
}

.event-card-footer {
    display: flex;
    gap: 8px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-top: 1px solid #e7eaec;
}

/* Event Form Modal */
#eventFormModal .form-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e7eaec;
}

#eventFormModal .form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

#eventFormModal .form-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

#eventFormModal .form-section-title i {
    margin-right: 8px;
    color: #5cb85c;
}

.event-side-toggle .btn {
    min-width: 120px;
}

.tier-row {
    margin-bottom: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
}

/* Redemption Panel */
.redemption-panel {
    max-width: 800px;
    margin: 0 auto;
}

.redemption-header {
    text-align: center;
    margin-bottom: 30px;
}

.redemption-header h3 {
    margin-bottom: 10px;
}

.redemption-input-section {
    margin-bottom: 30px;
}

.coupon-code-input {
    font-size: 24px !important;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.redemption-result-section {
    text-align: center;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 30px;
}

.result-icon {
    margin-bottom: 20px;
}

.result-icon.success { color: #5cb85c; }
.result-icon.error { color: #d9534f; }
.result-icon.warning { color: #f0ad4e; }

.result-title {
    margin-bottom: 15px;
    font-size: 24px;
}

.result-title.error-title { color: #d9534f; }
.result-title.warning-title { color: #f0ad4e; }

.coupon-info-card {
    display: inline-block;
    background: #fff;
    border: 2px solid #5cb85c;
    border-radius: 8px;
    padding: 20px 40px;
    margin: 15px 0;
}

.coupon-value {
    margin-bottom: 15px;
}

.coupon-value .value-label {
    display: block;
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
}

.coupon-value .value-amount {
    font-size: 48px;
    font-weight: 700;
    color: #5cb85c;
}

.coupon-meta .meta-item {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.coupon-meta .meta-item i {
    width: 20px;
    margin-right: 8px;
    color: #999;
}

.min-purchase-check {
    max-width: 400px;
    margin: 20px auto;
    text-align: left;
}

.redemption-actions {
    margin-top: 20px;
}

.redemption-actions .btn {
    min-width: 150px;
    margin: 0 5px;
}

.redemption-confirmed {
    text-align: center;
    padding: 40px;
}

.confirmation-icon {
    color: #5cb85c;
    margin-bottom: 20px;
}

.confirmation-title {
    color: #5cb85c;
    font-size: 24px;
    margin-bottom: 15px;
}

.recent-redemptions {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e7eaec;
}

.recent-redemptions h4 {
    margin-bottom: 15px;
}

/* Reports Panel */
.reports-header {
    margin-bottom: 25px;
}

.reports-header h3 {
    margin-bottom: 20px;
}

.reports-filters {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.reports-summary {
    margin-bottom: 25px;
}

.stat-card {
    display: flex;
    align-items: center;
    background: var(--panel-bg, #fff);
    border: 1px solid #e7eaec;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
}

.stat-card .stat-icon {
    font-size: 32px;
    width: 60px;
    text-align: center;
}

.stat-card.stat-issued .stat-icon { color: #5bc0de; }
.stat-card.stat-redeemed .stat-icon { color: #5cb85c; }
.stat-card.stat-rate .stat-icon { color: #f0ad4e; }
.stat-card.stat-value .stat-icon { color: #337ab7; }

.stat-card .stat-content {
    flex: 1;
}

.stat-card .stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

.stat-card .stat-label {
    font-size: 13px;
    color: #999;
}

.reports-metrics {
    margin-bottom: 25px;
}

.metric-card {
    background: #f8f9fa;
    padding: 15px 20px;
    border-radius: 6px;
    text-align: center;
}

.metric-card .metric-label {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
}

.metric-card .metric-value {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.reports-table-section {
    margin-bottom: 25px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-header h4 {
    margin: 0;
}

.section-actions {
    display: flex;
    gap: 8px;
}

.reports-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.reports-loading,
.reports-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.event-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.event-badge.event-buy {
    background: #e3f2fd;
    color: #1976d2;
}

.event-badge.event-sales {
    background: #fff3e0;
    color: #f57c00;
}

/* Quick Redeem Modal */
#comebackCashRedeemModal .result-icon-sm {
    margin-bottom: 15px;
}

#comebackCashRedeemModal .coupon-value-display {
    font-size: 36px;
    font-weight: 700;
    color: #5cb85c;
    margin: 10px 0;
}

#comebackCashRedeemModal .coupon-details-compact {
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 6px;
    margin: 15px 0;
}

#comebackCashRedeemModal .detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 5px;
}

#comebackCashRedeemModal .detail-row:last-child {
    margin-bottom: 0;
}

#comebackCashRedeemModal .detail-label {
    color: #999;
}

#comebackCashRedeemModal .detail-value {
    font-weight: 500;
    color: #333;
}

#comebackCashRedeemModal .redeem-amount {
    font-size: 18px;
    font-weight: 500;
    color: #5cb85c;
}

#comebackCashRedeemModal .footer-state {
    display: none;
}

#comebackCashRedeemModal .footer-state:first-child {
    display: block;
}

/* Hide Reamaze widget on Comeback Cash view */
body[data-active-view="comeback-cash"] #reamaze-widget,
body[data-active-view="comeback-cash"] .reamaze-widget,
body[data-active-view="comeback-cash"] [id^="reamaze"],
body[data-active-view="comeback-cash"] .shoutbox-container,
body[data-active-view="comeback-cash"] #reamaze_shoutbox {
    display: none !important;
    visibility: hidden !important;
}

/* Extend sidebar all the way to bottom on comeback-cash view */
body[data-active-view="comeback-cash"] .workspace-sidebar {
    bottom: 0 !important;
}

body[data-active-view="comeback-cash"] .sidebar-toggle {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--sidebar-width, 200px) !important;
    height: 60px !important;
    padding: 0 20px !important;
    background: var(--sidebar-bg, #1a202c);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.3s ease, width 0.3s ease;
    z-index: 1021;
    box-sizing: border-box;
}

body[data-active-view="comeback-cash"] .sidebar-toggle:hover {
    background: var(--sidebar-hover, #2d3748);
}

body[data-active-view="comeback-cash"] .workspace-sidebar.collapsed .sidebar-toggle {
    width: var(--sidebar-collapsed-width, 60px) !important;
}

/* Mobile responsive for Comeback Cash */
@media (max-width: 768px) {
    .events-cards {
        grid-template-columns: 1fr;
    }

    .event-card-footer {
        flex-wrap: wrap;
    }

    .event-card-footer .btn {
        flex: 1;
        min-width: 100px;
    }

    .redemption-actions .btn {
        display: block;
        width: 100%;
        margin: 5px 0;
    }

    .stat-card {
        padding: 15px;
    }

    .stat-card .stat-value {
        font-size: 22px;
    }

    .coupon-code-input {
        font-size: 18px !important;
    }

    .coupon-value .value-amount {
        font-size: 36px;
    }
}
</style>

{# ========== WORKBOOK INITIALIZATION ========== #}
<script>
(function() {
    'use strict';

    var workbookInitialized = false;

    // Initialize workbook when switching to workbook view
    function initWorkbookOnce() {
        if (workbookInitialized) return;

        console.log('[Workspace] Initializing Workbook...');

        // Initialize layout manager
        if (typeof WorkbookLayoutManager === 'function') {
            window.workbookLayout = new WorkbookLayoutManager('workbookGrid', {
                typeNum: '{{ typeNum }}'
            });
        }

        // Initialize workbook app
        if (typeof initWorkbookApp === 'function') {
            initWorkbookApp();
        }

        // Hide Reamaze widget
        if (typeof _support !== 'undefined') {
            _support.ui = _support.ui || {};
            _support.ui.widget = _support.ui.widget || {};
        }

        workbookInitialized = true;
        console.log('[Workspace] Workbook initialized');
    }

    // Listen for view changes
    document.addEventListener('viewChanged', function(e) {
        if (e.detail && e.detail.view === 'workbook') {
            initWorkbookOnce();
        }
    });

    // Check if workbook is active on page load
    document.addEventListener('DOMContentLoaded', function() {
        var activeView = document.querySelector('.workspace-view.active');
        if (activeView && activeView.dataset.view === 'workbook') {
            initWorkbookOnce();
        }
    });
})();
</script>

{# ========== COMPLETED BUYS INITIALIZATION ========== #}
{% if embedded_chat_enabled|default(false) %}
{# Syncfusion Grid mode (Spec 030) — data loaded from /api/:typeNum/chat/completed-data #}
<script>
(function() {
    'use strict';

    var completedInitialized = false;
    var completedGrid = null;

    // Forward reference to the customer-record opener defined inside
    // initCustomerSearch() below; the grid's name-click handler calls it.
    var openCustomerRecordModal = null;

    window.initCompletedBuysTable = function() {
        if (completedInitialized) return;

        console.log('[Workspace] Initializing Completed Buys (Syncfusion Grid)...');

        // Create CompletedBuysGrid instance
        completedGrid = new CompletedBuysGrid({
            containerSelector: '#completedBuysGrid',
            typeNum: '{{ store.typeNum }}',
            csrfToken: (function() {
                var meta = document.querySelector('meta[name="csrf_token"]');
                return meta ? meta.content : '{{ token|default('')|e('js') }}';
            })(),
            onRowSelect: function(rowData) {
                // Open chat panel for this buy's SMS thread
                if (!window.chatManager) return;

                var sms = rowData.smsStatus || {};
                if (sms.hasThread && sms.threadId) {
                    // Open existing thread in chat panel
                    window.chatManager.show();
                    window.chatManager.openThread(sms.threadId);
                } else {
                    // No thread yet — just open the chat panel feed
                    window.chatManager.show();
                }
            },
            onCheckout: function(buyId) {
                console.log('[Completed] Buy checked out via grid:', buyId);
            },
            onCustomerNameClick: function(customerId, buyId) {
                // Open the customer record modal, highlighting the clicked buy so
                // it's clear which receipt the Reprint button refers to.
                if (typeof openCustomerRecordModal === 'function') {
                    openCustomerRecordModal(customerId, buyId);
                }
            }
        });

        completedGrid.init().catch(function(err) {
            console.error('[Completed] Grid init failed:', err);
        });

        // Expose grid instance for chat panel integration
        window.completedBuysGrid = completedGrid;

        // Bind refresh button to grid refresh
        $('#refreshCompletedBtn').off('click').on('click', function() {
            var $btn = $(this);
            var $icon = $btn.find('i');

            $btn.prop('disabled', true);
            $icon.addClass('fa-spin');

            completedGrid.refresh()
                .then(function() {
                    $btn.prop('disabled', false);
                    $icon.removeClass('fa-spin');
                })
                .catch(function(err) {
                    console.error('[Completed] Refresh failed:', err);
                    $btn.prop('disabled', false);
                    $icon.removeClass('fa-spin');
                });
        });

        // Date picker — defaults to today, lets users browse any past day.
        // Uses Syncfusion DatePicker (already loaded on this page) for
        // visual consistency with the grid above.
        (function initDatePicker() {
            var dateInput = document.getElementById('completedBuysDate');
            var todayBtn = document.getElementById('completedBuysToday');
            if (!dateInput || !window.ej || !window.ej.calendars || !window.ej.calendars.DatePicker) {
                return;
            }

            var today = new Date();
            today.setHours(0, 0, 0, 0);

            function ymd(d) {
                var y = d.getFullYear();
                var m = String(d.getMonth() + 1).padStart(2, '0');
                var day = String(d.getDate()).padStart(2, '0');
                return y + '-' + m + '-' + day;
            }

            function isSameDay(a, b) {
                return a.getFullYear() === b.getFullYear()
                    && a.getMonth() === b.getMonth()
                    && a.getDate() === b.getDate();
            }

            var picker = new ej.calendars.DatePicker({
                value: today,
                max: today,                  // no future days
                format: 'EEE, MMM d, yyyy',  // "Tue, Mar 4, 2026"
                allowEdit: false,            // type-in confuses non-power users; pick from popup
                showClearButton: false,
                placeholder: 'Pick a day',
                change: function(args) {
                    if (!completedGrid) return;
                    var picked = args.value || today;
                    var viewingToday = isSameDay(picked, today);
                    if (todayBtn) todayBtn.style.display = viewingToday ? 'none' : '';
                    completedGrid.setSelectedDate(viewingToday ? null : ymd(picked))
                        .catch(function(err) {
                            console.error('[Completed] Date change refresh failed:', err);
                        });
                }
            });
            picker.appendTo('#completedBuysDate');

            if (todayBtn) {
                todayBtn.addEventListener('click', function() {
                    picker.value = today;
                    todayBtn.style.display = 'none';
                    if (completedGrid) {
                        completedGrid.setSelectedDate(null).catch(function(err) {
                            console.error('[Completed] Jump-to-today refresh failed:', err);
                        });
                    }
                });
            }
        })();

        // Customer search — type a name or phone, get customers who sold in the
        // last 30 days, click one to open their full record in a modal.
        (function initCustomerSearch() {
            var typeNum = '{{ store.typeNum }}';
            var input = document.getElementById('completedCustomerSearch');
            var results = document.getElementById('completedCustomerSearchResults');
            var wrap = document.getElementById('completedCustomerSearchWrap');
            var modalEl = document.getElementById('customerRecordModal');
            if (!input || !results || !modalEl) return;

            var debounceTimer = null;
            var searchSeq = 0;

            function esc(s) {
                if (s === null || s === undefined) return '';
                return String(s)
                    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;').replace(/'/g, '&#039;');
            }

            function fmtPhone(raw) {
                if (!raw) return '';
                var d = String(raw).replace(/\D/g, '');
                if (d.length === 11 && d.charAt(0) === '1') d = d.slice(1);
                if (d.length === 10) return '(' + d.slice(0, 3) + ') ' + d.slice(3, 6) + '-' + d.slice(6);
                return esc(String(raw));
            }

            function fmtDate(iso) {
                if (!iso) return '-';
                var dt = new Date(iso);
                if (isNaN(dt.getTime())) return '-';
                return dt.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            }

            function fmtDateTime(iso) {
                if (!iso) return '-';
                var dt = new Date(iso);
                if (isNaN(dt.getTime())) return '-';
                return dt.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ', ' +
                    dt.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
            }

            function statusBadge(buy) {
                if (buy.checkedOut && buy.checkoutStatus === 'paid') {
                    return '<span class="badge bg-success-subtle text-success-emphasis border border-success-subtle">Paid</span>';
                }
                if (buy.checkoutStatus === 'voided') {
                    return '<span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle">Voided</span>';
                }
                if (buy.checkoutStatus === 'stranded') {
                    return '<span class="badge bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle">Auto-closed</span>';
                }
                return '<span class="badge bg-light text-dark border">Open</span>';
            }

            function hideResults() {
                results.style.display = 'none';
                results.innerHTML = '';
            }

            function renderResults(customers) {
                if (!customers.length) {
                    results.innerHTML = '<div class="list-group-item text-muted small">No customers found in the last 30 days.</div>';
                    results.style.display = 'block';
                    return;
                }
                results.innerHTML = customers.map(function(c) {
                    var buyLabel = c.buyCount === 1 ? '1 buy' : (c.buyCount + ' buys');
                    return '<button type="button" class="list-group-item list-group-item-action py-2" data-customer-id="' + c.customerID + '">' +
                        '<div class="d-flex justify-content-between align-items-center">' +
                            '<span class="fw-semibold">' + esc(c.name) + '</span>' +
                            '<small class="text-muted">' + buyLabel + '</small>' +
                        '</div>' +
                        '<div class="small text-muted">' + (fmtPhone(c.phone) || '<em>no phone</em>') +
                            ' &middot; last ' + fmtDate(c.lastBuy) + '</div>' +
                    '</button>';
                }).join('');
                results.style.display = 'block';
            }

            function doSearch(q) {
                var seq = ++searchSeq;
                fetch('/api/' + typeNum + '/chat/customer-search?q=' + encodeURIComponent(q))
                    .then(function(r) { return r.json(); })
                    .then(function(data) {
                        if (seq !== searchSeq) return; // drop stale
                        if (!data.success) throw new Error(data.message || 'search failed');
                        renderResults(data.customers || []);
                    })
                    .catch(function(err) {
                        console.error('[Completed] Customer search failed:', err);
                        hideResults();
                    });
            }

            input.addEventListener('input', function() {
                var q = input.value.trim();
                clearTimeout(debounceTimer);
                if (q.length < 2) { hideResults(); return; }
                debounceTimer = setTimeout(function() { doSearch(q); }, 250);
            });

            // Click a result → open the record modal
            results.addEventListener('click', function(e) {
                var btn = e.target.closest('[data-customer-id]');
                if (!btn) return;
                var customerId = btn.getAttribute('data-customer-id');
                hideResults();
                openCustomerRecord(customerId);
            });

            // Expose the opener so the completed-buys grid's customer-name click
            // (see initCompletedBuysTable above) can open this same modal.
            openCustomerRecordModal = openCustomerRecord;

            // Reprint receipt — delegated handler for the per-buy buttons rendered
            // in the recent-buys table. Uses the same flow as the Buy Queue:
            // POST /api/socket.php { action: 'reprint', store, buyID }, which
            // publishes the Ably reprint event to the store's receipt printer.
            document.getElementById('crBuysBody').addEventListener('click', function(e) {
                var btn = e.target.closest('.crReprintBtn');
                if (!btn || btn.disabled) return;

                var buyId = btn.getAttribute('data-buy-id');
                var original = btn.innerHTML;
                btn.disabled = true;
                btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';

                var body = new URLSearchParams();
                body.append('action', 'reprint');
                body.append('store', typeNum);
                body.append('buyID', buyId);

                fetch('/api/socket.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: body.toString()
                })
                .then(function(r) { return r.json().catch(function() { return {}; }).then(function(j) { return { ok: r.ok, j: j }; }); })
                .then(function(res) {
                    if (!res.ok || (res.j && res.j.status === 'error')) {
                        throw new Error((res.j && res.j.message) || 'Reprint failed');
                    }
                    btn.innerHTML = '<i class="fa fa-check"></i> Sent';
                    if (window.toastr) {
                        toastr.success('Receipt sent to printer', 'Reprint', { preventDuplicates: true });
                    } else if (window.showToast) {
                        window.showToast('Receipt sent to printer', 'success');
                    }
                    setTimeout(function() { btn.disabled = false; btn.innerHTML = original; }, 2500);
                })
                .catch(function(err) {
                    console.error('[Completed] Reprint failed:', err);
                    btn.disabled = false;
                    btn.innerHTML = original;
                    if (window.toastr) {
                        toastr.error('Could not reprint the receipt. Please try again.', 'Reprint');
                    } else {
                        alert('Could not reprint the receipt. Please try again.');
                    }
                });
            });

            // Close the dropdown when clicking outside the search widget
            document.addEventListener('click', function(e) {
                if (wrap && !wrap.contains(e.target)) hideResults();
            });

            function setState(state) {
                document.getElementById('customerRecordLoading').style.display = state === 'loading' ? 'block' : 'none';
                document.getElementById('customerRecordError').style.display = state === 'error' ? 'block' : 'none';
                document.getElementById('customerRecordContent').style.display = state === 'content' ? 'block' : 'none';
            }

            function openCustomerRecord(customerId, highlightBuyId) {
                var modal = bootstrap.Modal.getOrCreateInstance(modalEl);
                setState('loading');
                modal.show();

                fetch('/api/' + typeNum + '/chat/customer-record?customerID=' + encodeURIComponent(customerId))
                    .then(function(r) { return r.json(); })
                    .then(function(data) {
                        if (!data.success || !data.customer) {
                            throw new Error(data.error || 'Customer not found');
                        }
                        renderRecord(data.customer, data.buys || [], highlightBuyId);
                        setState('content');
                    })
                    .catch(function(err) {
                        console.error('[Completed] Customer record failed:', err);
                        document.getElementById('customerRecordError').textContent =
                            'Could not load this customer record. Please try again.';
                        setState('error');
                    });
            }

            function renderRecord(c, buys, highlightBuyId) {
                document.getElementById('crName').textContent = c.name || 'Unknown Customer';
                document.getElementById('crMemberSince').textContent =
                    c.memberSince ? ('Customer since ' + fmtDate(c.memberSince)) : '';

                document.getElementById('crPhone').innerHTML = c.phone ? fmtPhone(c.phone) : '<span class="text-muted">—</span>';
                document.getElementById('crEmail').innerHTML = c.email ? esc(c.email) : '<span class="text-muted">—</span>';

                var addrParts = [];
                if (c.address) addrParts.push(c.address);
                var cityLine = [c.city, c.state].filter(Boolean).join(', ');
                if (c.zipcode) cityLine = (cityLine ? cityLine + ' ' : '') + c.zipcode;
                if (cityLine) addrParts.push(cityLine);
                document.getElementById('crAddress').innerHTML =
                    addrParts.length ? esc(addrParts.join(' · ')) : '<span class="text-muted">—</span>';

                var prefs = [];
                prefs.push(c.onSMS ? '<span class="badge bg-success-subtle text-success-emphasis border border-success-subtle">SMS opted in</span>'
                                   : '<span class="badge bg-light text-dark border">No SMS</span>');
                prefs.push(c.onEmail ? '<span class="badge bg-success-subtle text-success-emphasis border border-success-subtle">Email opted in</span>'
                                     : '<span class="badge bg-light text-dark border">No email</span>');
                document.getElementById('crContactPrefs').innerHTML = prefs.join(' ');

                var body = document.getElementById('crBuysBody');
                var noBuys = document.getElementById('crNoBuys');
                if (!buys.length) {
                    body.innerHTML = '';
                    noBuys.style.display = 'block';
                } else {
                    noBuys.style.display = 'none';
                    body.innerHTML = buys.map(function(b) {
                        var isHighlight = highlightBuyId && Number(b.id) === Number(highlightBuyId);
                        return '<tr' + (isHighlight ? ' class="table-primary"' : '') + '>' +
                            '<td>' + esc(b.buyNumber == null ? '—' : b.buyNumber) + '</td>' +
                            '<td>' + fmtDateTime(b.timeCompleted) + '</td>' +
                            '<td class="text-center">' + (b.bins || 0) + '</td>' +
                            '<td>' + statusBadge(b) + '</td>' +
                            '<td class="text-end">' +
                                '<button type="button" class="btn btn-sm btn-outline-primary crReprintBtn" ' +
                                    'data-buy-id="' + esc(b.id) + '" title="Reprint this receipt">' +
                                    '<i class="fa fa-print"></i> Reprint' +
                                '</button>' +
                            '</td>' +
                        '</tr>';
                    }).join('');
                }
            }
        })();

        completedInitialized = true;
        console.log('[Workspace] Completed Buys (Syncfusion Grid) initialized');
    };

    // Listen for view changes — refresh data every time we switch to completed
    document.addEventListener('viewChanged', function(e) {
        if (e.detail && e.detail.view === 'completed') {
            if (completedInitialized && completedGrid) {
                completedGrid.refresh().catch(function(err) {
                    console.error('[Completed] Auto-refresh failed:', err);
                });
            } else {
                initCompletedBuysTable();
            }
        }
    });

    // Check if completed is active on page load
    document.addEventListener('DOMContentLoaded', function() {
        var activeView = document.querySelector('.workspace-view.active');
        if (activeView && activeView.dataset.view === 'completed') {
            initCompletedBuysTable();
        }
    });
})();
</script>
{% else %}
{# Legacy DataTable mode #}
<script>
(function() {
    'use strict';

    var completedInitialized = false;
    var dataTableInstance = null;

    window.initCompletedBuysTable = function() {
        if (completedInitialized) return;

        console.log('[Workspace] Initializing Completed Buys (Legacy DataTable)...');

        // Initialize DataTable if jQuery DataTables is available
        if (typeof $.fn.DataTable !== 'undefined') {
            var $table = $('#completedView #completedTable');
            if ($table.length && !$.fn.DataTable.isDataTable($table)) {
                dataTableInstance = $table.DataTable({
                    paging: false,
                    lengthChange: false,
                    searching: true,
                    ordering: true,
                    info: true,
                    autoWidth: true
                });
            }
        }

        // Bind checkout button clicks (using delegation for dynamic content)
        $('#completedView').off('click', '.buyCheckOutButton').on('click', '.buyCheckOutButton', function() {
            var $btn = $(this);
            var buyID = $btn.attr('id');
            var storeCode = '{{ store.typeNum }}';
            var $row = $btn.closest('tr');
            var $cell = $btn.closest('td');

            $btn.prop('disabled', true);

            $.ajax({
                url: '/api/socket.php',
                type: 'POST',
                data: {
                    buyID: buyID,
                    action: 'checkOutBuy',
                    store: storeCode
                },
                success: function(data) {
                    console.log('[Completed] Buy checked out:', buyID);
                    $row.addClass('checkedOut');
                    $cell.html('');
                },
                error: function(xhr, status, error) {
                    console.error('[Completed] Checkout failed:', error);
                    $btn.prop('disabled', false);
                    alert('Failed to check out buy. Please try again.');
                }
            });
        });

        // Refresh button disabled in legacy mode (no endpoint)
        $('#refreshCompletedBtn').off('click').on('click', function() {
            location.reload();
        });

        completedInitialized = true;
        console.log('[Workspace] Completed Buys (Legacy) initialized');
    };

    // Listen for view changes
    document.addEventListener('viewChanged', function(e) {
        if (e.detail && e.detail.view === 'completed') {
            initCompletedBuysTable();
        }
    });

    // Check if completed is active on page load
    document.addEventListener('DOMContentLoaded', function() {
        var activeView = document.querySelector('.workspace-view.active');
        if (activeView && activeView.dataset.view === 'completed') {
            initCompletedBuysTable();
        }
    });
})();
</script>
{% endif %}

{# ========== PRINT LOG INITIALIZATION ========== #}
<script>
(function() {
    'use strict';

    var printlogInitialized = false;
    var currentDate = null;
    var storeCode = '{{ store.typeNum }}';

    // Initialize Print Log functionality
    window.initPrintLog = function() {
        if (printlogInitialized) return;

        console.log('[Workspace] Initializing Print Log...');

        // Set initial date to today
        currentDate = moment().startOf('day').add(5, 'hours');
        updateDateDisplay();

        // Load initial data
        loadPrintLog(currentDate.format('YYYY-MM-DD 05:00:00'));

        // Initialize date picker
        // Set date BEFORE binding changeDate to avoid triggering a duplicate
        // loadPrintLog (we already called it above).
        var $datePicker = $('#printlogDatePicker');
        if ($datePicker.length && typeof $datePicker.datepicker === 'function') {
            $datePicker.datepicker({
                format: 'mm-dd-yyyy',
                endDate: moment().format('MM/DD/YYYY'),
                todayBtn: true,
                clearBtn: true,
                todayHighlight: true,
                autoclose: true
            });
            $datePicker.datepicker('setDate', moment().format('MM/DD/YYYY'));
            $datePicker.on('changeDate', function(e) {
                currentDate = moment(e.date).startOf('day').add(5, 'hours');
                updateDateDisplay();
                loadPrintLog(currentDate.format('YYYY-MM-DD 05:00:00'));
            });
        }

        // Initialize tooltips
        $('#printlogView [data-bs-toggle="tooltip"]').tooltip();

        printlogInitialized = true;
        console.log('[Workspace] Print Log initialized');
    };

    // Update the date display
    function updateDateDisplay() {
        $('#printlogDateDisplay').text('- ' + currentDate.format('MM/DD/YYYY'));
    }

    // Load print log data via AJAX
    function loadPrintLog(date) {
        var printJSON = {
            store: storeCode,
            date: date
        };

        console.log('[PrintLog] Loading data for:', date);

        // Clear existing data
        $('#printlogTableBody').html('');
        $('#printlogBuyerStats').html('');
        $('#printlogSorterStats').html('');
        $('#printlogTodaysBuyers').html('<strong>Today\'s Buyers</strong><br>');
        $('#printlogTodaysSorters').html('<strong>Today\'s Sorters</strong><br>');

        $.ajax({
            url: '/api/printLog.php',
            type: 'post',
            data: { printJSON: JSON.stringify(printJSON) },
            success: function(result) {
                try {
                    var obj = JSON.parse(result);
                    console.log('[PrintLog] Data loaded:', obj);
                    renderPrintLog(obj);
                } catch (e) {
                    console.error('[PrintLog] Parse error:', e);
                }
            },
            error: function(xhr, status, error) {
                console.error('[PrintLog] Load failed:', error);
            }
        });
    }

    // Render print log data
    function renderPrintLog(data) {
        var $tableBody = $('#printlogTableBody');
        var $buyerStats = $('#printlogBuyerStats');
        var $sorterStats = $('#printlogSorterStats');
        var $todaysBuyers = $('#printlogTodaysBuyers');
        var $todaysSorters = $('#printlogTodaysSorters');

        // Render buy log rows
        if (data.printLog) {
            $.each(data.printLog, function(i, val) {
                var html = '<tr>';

                // Buy number (with ** for previous day)
                if (val.wasToday === 'false') {
                    html += '<td><strong>' + val.buyNumber + '**</strong></td>';
                } else {
                    html += '<td>' + val.buyNumber + '</td>';
                }

                html += '<td>' + val.customerFullName + '</td>';
                html += '<td>' + val.containers + '</td>';

                // Dropped off (bold if previous day)
                if (val.wasToday === 'false') {
                    html += '<td><strong>' + val.timeDroppedOff + '</strong></td>';
                } else {
                    html += '<td>' + val.timeDroppedOff + '</td>';
                }

                // Sorter
                if (val.wasSorted == 1) {
                    html += '<td>' + val.sorterFullName + '</td>';
                } else {
                    html += '<td> - </td>';
                }

                html += '<td>' + val.buyerFullName + '</td>';
                html += '<td>' + val.startDelay + '</td>';

                // Sort time
                if (val.wasSorted == 1) {
                    html += '<td>' + val.sortTime + '</td>';
                } else {
                    html += '<td> - </td>';
                }

                html += '<td>' + val.processTime + '</td>';
                html += '<td>' + val.processTimePerContainer + '</td>';
                html += '<td class="noprint"><a href="#" class="resend-sms-btn" data-buyid="' + val.buyID + '"><img src="/images/icons/resendsms.png" alt="Resend SMS"></a></td>';
                html += '</tr>';

                $tableBody.append(html);
            });

            // Add store averages row
            if (data.storeStats) {
                var statsHtml = '<tr class="info"><th colspan="6" style="text-align: right;">Store Averages:</th>';
                statsHtml += '<th>' + data.storeStats.storeStartDelay + '</th>';
                statsHtml += '<th>' + (data.storeStats.storeSortTime !== '00s' ? data.storeStats.storeSortTime : ' - ') + '</th>';
                statsHtml += '<th>' + data.storeStats.storeProcessAvg + '</th>';
                statsHtml += '<th>' + data.storeStats.storePTC + '</th>';
                statsHtml += '<th class="noprint"></th></tr>';
                $tableBody.append(statsHtml);
            }
        }

        // Render buyer stats
        if (data.buyerStats) {
            $.each(data.buyerStats, function(i, val) {
                $todaysBuyers.append('<li>' + val.buyerFullName + ' <span class="badge">' + val.numBuys + '</span></li>');
                $buyerStats.append(
                    '<tr><td>' + val.buyerFullName + '</td>' +
                    '<td>' + val.averageProcessTime + '</td>' +
                    '<td>' + val.processTimePerContainer + '</td>' +
                    '<td>' + val.numBuys + '</td>' +
                    '<td>' + val.totalContainers + '</td></tr>'
                );
            });
        }

        // Render sorter stats
        if (data.sorterStats) {
            $.each(data.sorterStats, function(i, val) {
                $todaysSorters.append('<li><span class="badge">' + val.numBuys + '</span> ' + val.sorterFullName + '</li>');
                $sorterStats.append(
                    '<tr><td>' + val.sorterFullName + '</td>' +
                    '<td>' + val.averageSortTime + '</td>' +
                    '<td>' + val.sortTimePerContainer + '</td>' +
                    '<td>' + val.numBuys + '</td>' +
                    '<td>' + val.totalContainers + '</td></tr>'
                );
            });
        }

        // Bind resend SMS buttons
        bindResendSMS();
    }

    // Bind resend SMS click handlers
    function bindResendSMS() {
        $('#printlogView .resend-sms-btn').off('click').on('click', function(e) {
            e.preventDefault();
            var buyID = $(this).data('buyid');

            if (typeof swal === 'function') {
                swal({
                    title: 'Are you sure?',
                    text: 'This will resend the SMS to the customer.',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#DD6B55',
                    confirmButtonText: 'Yes, resend it!',
                    closeOnConfirm: false
                }, function() {
                    resendSMS(buyID);
                });
            } else if (confirm('Are you sure you want to resend the SMS?')) {
                resendSMS(buyID);
            }
        });
    }

    // Resend SMS API call
    function resendSMS(buyID) {
        $.ajax({
            url: '/api/sms/' + storeCode + '/resendSMS/' + buyID,
            type: 'post',
            success: function(result) {
                if (typeof swal === 'function') {
                    swal('Resent!', 'The SMS has been resent.', 'success');
                } else {
                    alert('SMS has been resent.');
                }
            },
            error: function(xhr, status, error) {
                if (typeof swal === 'function') {
                    swal('Error!', 'There was an error resending the SMS. Please contact support.', 'error');
                } else {
                    alert('Error resending SMS. Please try again.');
                }
            }
        });
    }

    // Listen for view changes
    document.addEventListener('viewChanged', function(e) {
        if (e.detail && e.detail.view === 'printlog') {
            initPrintLog();
        }
    });

    // Check if printlog is active on page load
    document.addEventListener('DOMContentLoaded', function() {
        var activeView = document.querySelector('.workspace-view.active');
        if (activeView && activeView.dataset.view === 'printlog') {
            initPrintLog();
        }
    });
})();
</script>

{# ========== COMEBACK CASH INITIALIZATION ========== #}
{% if user.checkAccess('uri_comeback_cash') %}
<script>
(function() {
    'use strict';

    var comebackCashInitialized = false;
    var storeCode = '{{ store.typeNum }}';
    var apiBase = '/api/comeback-cash/' + storeCode;

    // Initialize Comeback Cash module
    window.initComebackCash = function() {
        if (comebackCashInitialized) return;

        console.log('[Workspace] Initializing Comeback Cash...');

        // Initialize tab switching
        initTabs();

        // Initialize event list
        loadEvents();

        // Initialize event form
        initEventForm();

        // Initialize redemption panel
        initRedemptionPanel();

        // Initialize reports
        initReports();

        // Bind refresh button
        $('#refreshComebackCashBtn').off('click').on('click', function() {
            var $icon = $(this).find('i');
            $icon.addClass('fa-spin');
            loadEvents().always(function() {
                $icon.removeClass('fa-spin');
            });
        });

        comebackCashInitialized = true;
        console.log('[Workspace] Comeback Cash initialized');
    };

    // Tab switching
    function initTabs() {
        $('.comeback-cash-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
            var target = $(e.target).attr('href');
            console.log('[ComebackCash] Switched to tab:', target);

            // Load data for the selected tab
            if (target === '#ccReportsTab') {
                loadReportData();
            }
        });
    }

    // Load events from API
    function loadEvents() {
        var $loading = $('#eventsLoading');
        var $empty = $('#eventsEmpty');
        var $cards = $('#eventsCards');

        $loading.show();
        $empty.hide();
        $cards.html('');

        return $.ajax({
            url: apiBase + '/events',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                $loading.hide();

                if (!response.data || response.data.length === 0) {
                    $empty.show();
                    return;
                }

                // Render event cards using Handlebars template
                var template = Handlebars.compile($('#event-card-template').html());
                response.data.forEach(function(event) {
                    $cards.append(template(event));
                });

                // Bind event card actions
                bindEventActions();
            },
            error: function(xhr, status, error) {
                console.error('[ComebackCash] Failed to load events:', error);
                $loading.hide();
                $empty.show();
                $empty.find('h4').text('Error Loading Events');
                $empty.find('p').text('Could not load events. Please try again.');
            }
        });
    }

    // Bind event card action buttons
    function bindEventActions() {
        // Edit event
        $('.btn-edit-event').off('click').on('click', function() {
            var eventId = $(this).data('event-id');
            loadEventForEdit(eventId);
        });

        // Activate event
        $('.btn-activate-event').off('click').on('click', function() {
            var eventId = $(this).data('event-id');
            activateEvent(eventId);
        });

        // Delete event
        $('.btn-delete-event').off('click').on('click', function() {
            var eventId = $(this).data('event-id');
            deleteEvent(eventId);
        });

        // End event
        $('.btn-end-event').off('click').on('click', function() {
            var eventId = $(this).data('event-id');
            endEvent(eventId);
        });

        // View event report
        $('.btn-view-event').off('click').on('click', function() {
            var eventId = $(this).data('event-id');
            viewEventReport(eventId);
        });

        // Filter by type
        $('#eventTypeFilter a').off('click').on('click', function(e) {
            e.preventDefault();
            var filter = $(this).data('filter');
            $('#eventTypeFilter li').removeClass('active');
            $(this).parent().addClass('active');
            filterEvents(filter);
        });
    }

    // Filter events by type
    function filterEvents(type) {
        if (type === 'all') {
            $('.event-card').show();
        } else {
            $('.event-card').hide();
            $('.event-card[data-event-side="' + type + '"]').show();
        }
    }

    // Initialize event form
    function initEventForm() {
        // Earning type change handler
        $('#earningType').on('change', function() {
            var type = $(this).val();
            $('.earning-config').hide();

            if (type === 'flat') {
                $('#flatConfig').show();
            } else if (type === 'percentage') {
                $('#percentageConfig').show();
            } else if (type === 'tiered') {
                $('#tieredConfig').show();
                if ($('#tieredRows .tier-row').length === 0) {
                    addTierRow();
                }
            }
        });

        // Side toggle handler (show/hide min transaction for sales side)
        $('input[name="side"]').on('change', function() {
            var side = $(this).val();
            $('#sideHelpText span').hide();
            if (side === 'buy') {
                $('#buyHelp').show();
                $('#minTransactionGroup').hide();
            } else {
                $('#salesHelp').show();
                $('#minTransactionGroup').show();
            }
        });

        // Add tier button
        $('#addTierBtn').on('click', addTierRow);

        // Remove tier button (delegated)
        $('#tieredRows').on('click', '.btn-remove-tier', function() {
            $(this).closest('.tier-row').remove();
            reindexTiers();
        });

        // Save event button
        $('#saveEventBtn').on('click', function() {
            saveEvent(false);
        });

        // Save and activate button
        $('#saveActivateBtn').on('click', function() {
            saveEvent(true);
        });

        // Reset form on modal close
        $('#eventFormModal').on('hidden.bs.modal', function() {
            resetEventForm();
        });
    }

    // Add tier row
    function addTierRow(threshold, value) {
        var index = $('#tieredRows .tier-row').length;
        var template = Handlebars.compile($('#tier-row-template').html());
        var html = template({
            index: index,
            threshold: threshold || '',
            value: value || ''
        });
        $('#tieredRows').append(html);
    }

    // Reindex tiers after removal
    function reindexTiers() {
        $('#tieredRows .tier-row').each(function(index) {
            $(this).attr('data-tier-index', index);
            $(this).find('input').each(function() {
                var name = $(this).attr('name');
                $(this).attr('name', name.replace(/\[\d+\]/, '[' + index + ']'));
            });
        });
    }

    // Save event
    function saveEvent(activate) {
        var form = $('#eventForm');
        var data = {
            name: $('#eventName').val(),
            side: $('input[name="side"]:checked').val(),
            earning_type: $('#earningType').val(),
            earning_start: $('#earningStart').val(),
            earning_end: $('#earningEnd').val(),
            redemption_start: $('#redemptionStart').val(),
            redemption_end: $('#redemptionEnd').val(),
            min_purchase: $('#minPurchase').val() || 0,
            expiration_days: $('#expirationDays').val() || 30,
            print_coupon: $('#printCoupon').is(':checked'),
            sms_coupon: $('#smsCoupon').is(':checked'),
            stackable: $('#stackable').is(':checked'),
            activate: activate
        };

        // Add earning value based on type
        if (data.earning_type === 'flat') {
            data.earning_value = $('#flatValue').val();
        } else if (data.earning_type === 'percentage') {
            data.earning_value = $('#percentageValue').val();
        } else if (data.earning_type === 'tiered') {
            data.tiers = [];
            $('#tieredRows .tier-row').each(function() {
                data.tiers.push({
                    threshold: $(this).find('.tier-threshold').val(),
                    value: $(this).find('.tier-value').val()
                });
            });
        }

        // Add min transaction for sales side
        if (data.side === 'sales') {
            data.min_transaction = $('#minTransaction').val() || 0;
        }

        var eventId = $('#eventId').val();
        var url = eventId ? apiBase + '/events/' + eventId : apiBase + '/events';
        var method = eventId ? 'PUT' : 'POST';

        $.ajax({
            url: url,
            type: method,
            data: JSON.stringify(data),
            contentType: 'application/json',
            success: function(response) {
                $('#eventFormModal').modal('hide');
                loadEvents();

                if (activate) {
                    showNotification('Event created and activated successfully!', 'success');
                } else {
                    showNotification('Event saved as draft.', 'success');
                }
            },
            error: function(xhr, status, error) {
                console.error('[ComebackCash] Failed to save event:', error);
                var message = xhr.responseJSON && xhr.responseJSON.message
                    ? xhr.responseJSON.message
                    : 'Failed to save event. Please try again.';
                showNotification(message, 'error');
            }
        });
    }

    // Reset event form
    function resetEventForm() {
        $('#eventForm')[0].reset();
        $('#eventId').val('');
        $('#eventFormTitle').text('Create Event');
        $('#saveEventBtnText').text('Save as Draft');
        $('#tieredRows').empty();
        $('.earning-config').hide();
        $('#flatConfig').show();
        $('#sideHelpText span').hide();
        $('#buyHelp').show();
        $('#minTransactionGroup').hide();
    }

    // Initialize redemption panel
    function initRedemptionPanel() {
        // Validate coupon on button click
        $('#validateCouponBtn').on('click', validateCoupon);

        // Validate on Enter key
        $('#couponCode').on('keypress', function(e) {
            if (e.which === 13) {
                e.preventDefault();
                validateCoupon();
            }
        });

        // Redeem coupon
        $('#redeemCouponBtn').on('click', redeemCoupon);

        // Cancel/reset
        $('#cancelRedemptionBtn, #tryAgainBtn, #tryAgainBtn2, #tryAgainBtn3, #tryAgainBtn4').on('click', resetRedemptionPanel);

        // Redeem another
        $('#redeemAnotherBtn').on('click', function() {
            $('#redemptionConfirmed').hide();
            resetRedemptionPanel();
        });

        // Load today's redemptions
        loadTodayRedemptions();
    }

    // Validate coupon code
    function validateCoupon() {
        var code = $('#couponCode').val().trim().toUpperCase();
        if (!code) {
            showNotification('Please enter a coupon code', 'warning');
            return;
        }

        var $btn = $('#validateCouponBtn');
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Validating...');

        $.ajax({
            url: apiBase + '/coupons/' + code + '/validate',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                $btn.prop('disabled', false).html('<i class="fa fa-search"></i> Validate');
                showCouponResult(response);
            },
            error: function(xhr, status, error) {
                $btn.prop('disabled', false).html('<i class="fa fa-search"></i> Validate');
                var response = xhr.responseJSON || {};
                showCouponError(response);
            }
        });
    }

    // Show coupon validation result
    function showCouponResult(data) {
        $('#redemptionResult').show();

        // Hide all result states
        $('#resultSuccess, #resultError, #resultAlreadyUsed, #resultExpired, #resultNotYet').hide();

        if (data.valid) {
            $('#resultSuccess').show();
            $('#couponValue').text(data.coupon.value.toFixed(2));
            $('#couponCustomer').text(data.coupon.customer_name);
            $('#couponExpiry').text(data.coupon.expires_at);
            $('#couponEvent').text(data.coupon.event_name);

            // Check for minimum purchase requirement
            if (data.coupon.min_purchase > 0) {
                $('#minPurchaseCheck').show();
                $('#minPurchaseAmount').text(data.coupon.min_purchase.toFixed(2));
            } else {
                $('#minPurchaseCheck').hide();
            }

            // Store coupon data for redemption
            $('#redeemCouponBtn').data('coupon', data.coupon);
        }
    }

    // Show coupon error
    function showCouponError(response) {
        $('#redemptionResult').show();
        $('#resultSuccess').hide();

        switch (response.error_code) {
            case 'ALREADY_REDEEMED':
                $('#resultAlreadyUsed').show();
                $('#redeemedDate').text(response.redeemed_at || '--');
                $('#redeemedBy').text(response.redeemed_by || '--');
                break;

            case 'EXPIRED':
                $('#resultExpired').show();
                $('#expiredDate').text(response.expired_at || '--');
                break;

            case 'NOT_YET_VALID':
                $('#resultNotYet').show();
                $('#validFromDate').text(response.valid_from || '--');
                break;

            default:
                $('#resultError').show();
                $('#errorTitle').text(response.title || 'Invalid Coupon');
                $('#errorMessage').text(response.message || 'This coupon code is not valid.');
        }
    }

    // Redeem coupon
    function redeemCoupon() {
        var coupon = $('#redeemCouponBtn').data('coupon');
        if (!coupon) return;

        // Check minimum purchase if required
        if (coupon.min_purchase > 0) {
            var txAmount = parseFloat($('#transactionAmount').val()) || 0;
            if (txAmount < coupon.min_purchase) {
                showNotification('Transaction amount does not meet minimum purchase requirement.', 'warning');
                return;
            }
        }

        var $btn = $('#redeemCouponBtn');
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Redeeming...');

        $.ajax({
            url: apiBase + '/coupons/' + coupon.code + '/redeem',
            type: 'POST',
            data: JSON.stringify({
                transaction_amount: parseFloat($('#transactionAmount').val()) || 0
            }),
            contentType: 'application/json',
            success: function(response) {
                $btn.prop('disabled', false).html('<i class="fa fa-check"></i> Redeem Coupon');

                // Show success confirmation
                $('#redemptionResult').hide();
                $('#redemptionConfirmed').show();
                $('#redeemedAmount').text(coupon.value.toFixed(2));
                $('#redemptionTxId').text(response.transaction_id || '--');

                // Reload today's redemptions
                loadTodayRedemptions();
            },
            error: function(xhr, status, error) {
                $btn.prop('disabled', false).html('<i class="fa fa-check"></i> Redeem Coupon');
                var message = xhr.responseJSON && xhr.responseJSON.message
                    ? xhr.responseJSON.message
                    : 'Failed to redeem coupon. Please try again.';
                showNotification(message, 'error');
            }
        });
    }

    // Reset redemption panel
    function resetRedemptionPanel() {
        $('#couponCode').val('').focus();
        $('#redemptionResult').hide();
        $('#redemptionConfirmed').hide();
        $('#transactionAmount').val('');
        $('#redeemCouponBtn').data('coupon', null);
    }

    // Load today's redemptions
    function loadTodayRedemptions() {
        $.ajax({
            url: apiBase + '/redemptions/today',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                var $tbody = $('#recentRedemptionsBody');
                $tbody.html('');

                if (!response.data || response.data.length === 0) {
                    $tbody.html('<tr class="no-redemptions"><td colspan="5" class="text-center text-muted"><i class="fa fa-inbox"></i> No redemptions today</td></tr>');
                    return;
                }

                var template = Handlebars.compile($('#redemption-row-template').html());
                response.data.forEach(function(redemption) {
                    $tbody.append(template(redemption));
                });
            },
            error: function(xhr, status, error) {
                console.error('[ComebackCash] Failed to load today redemptions:', error);
            }
        });
    }

    // Initialize reports
    function initReports() {
        // Load events for dropdown
        loadEventOptions();

        // Apply filters button
        $('#applyReportFilters').on('click', loadReportData);

        // Export button
        $('#exportReportBtn').on('click', exportReport);

        // Refresh button
        $('#refreshReportBtn').on('click', loadReportData);
    }

    // Load event options for report dropdown
    function loadEventOptions() {
        $.ajax({
            url: apiBase + '/events',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                var $select = $('#reportEventSelect');
                $select.find('option:not(:first)').remove();

                if (response.data) {
                    response.data.forEach(function(event) {
                        $select.append('<option value="' + event.id + '">' + event.name + ' (' + event.status + ')</option>');
                    });
                }
            }
        });
    }

    // Load report data
    function loadReportData() {
        var eventId = $('#reportEventSelect').val();
        var startDate = $('#reportStartDate').val();
        var endDate = $('#reportEndDate').val();

        var params = {};
        if (eventId) params.event_id = eventId;
        if (startDate) params.start_date = startDate;
        if (endDate) params.end_date = endDate;

        $('#reportsLoading').show();
        $('#reportsEmpty').hide();

        $.ajax({
            url: apiBase + '/reports/summary',
            type: 'GET',
            data: params,
            dataType: 'json',
            success: function(response) {
                $('#reportsLoading').hide();

                if (!response.data) {
                    $('#reportsEmpty').show();
                    return;
                }

                // Update summary stats
                $('#statCouponsIssued').text(response.data.coupons_issued || 0);
                $('#statCouponsRedeemed').text(response.data.coupons_redeemed || 0);
                $('#statRedemptionRate').text((response.data.redemption_rate || 0).toFixed(1) + '%');
                $('#statTotalValue').text('$' + (response.data.total_value || 0).toFixed(2));

                // Update metrics
                $('#metricAvgValue').text('$' + (response.data.avg_value || 0).toFixed(2));
                $('#metricOutstanding').text(response.data.outstanding_coupons || 0);
                $('#metricOutstandingValue').text('$' + (response.data.outstanding_value || 0).toFixed(2));

                // Load redemption history
                loadRedemptionHistory(params);
            },
            error: function(xhr, status, error) {
                console.error('[ComebackCash] Failed to load report:', error);
                $('#reportsLoading').hide();
                $('#reportsEmpty').show();
            }
        });
    }

    // Load redemption history for report
    function loadRedemptionHistory(params) {
        $.ajax({
            url: apiBase + '/reports/redemptions',
            type: 'GET',
            data: params,
            dataType: 'json',
            success: function(response) {
                var $tbody = $('#redemptionsReportBody');
                $tbody.html('');

                if (!response.data || response.data.length === 0) {
                    $tbody.html('<tr><td colspan="7" class="text-center text-muted">No redemptions found</td></tr>');
                    return;
                }

                var template = Handlebars.compile($('#report-row-template').html());
                response.data.forEach(function(item) {
                    $tbody.append(template(item));
                });

                // Update pagination info
                $('#paginationInfo').text('Showing ' + response.data.length + ' of ' + (response.total || response.data.length) + ' records');
            }
        });
    }

    // Export report as CSV
    function exportReport() {
        var eventId = $('#reportEventSelect').val();
        var startDate = $('#reportStartDate').val();
        var endDate = $('#reportEndDate').val();

        var params = [];
        if (eventId) params.push('event_id=' + eventId);
        if (startDate) params.push('start_date=' + startDate);
        if (endDate) params.push('end_date=' + endDate);
        params.push('format=csv');

        window.location.href = apiBase + '/reports/export?' + params.join('&');
    }

    // Helper functions
    function loadEventForEdit(eventId) {
        $.ajax({
            url: apiBase + '/events/' + eventId,
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response.data) {
                    populateEventForm(response.data);
                    $('#eventFormModal').modal('show');
                }
            }
        });
    }

    function populateEventForm(event) {
        $('#eventId').val(event.id);
        $('#eventFormTitle').text('Edit Event');
        $('#saveEventBtnText').text('Save Changes');
        $('#eventName').val(event.name);
        $('input[name="side"][value="' + event.side + '"]').prop('checked', true).trigger('change');
        $('#earningType').val(event.earning_type).trigger('change');

        if (event.earning_type === 'flat') {
            $('#flatValue').val(event.earning_value);
        } else if (event.earning_type === 'percentage') {
            $('#percentageValue').val(event.earning_value);
        } else if (event.earning_type === 'tiered' && event.tiers) {
            $('#tieredRows').empty();
            event.tiers.forEach(function(tier) {
                addTierRow(tier.threshold, tier.value);
            });
        }

        $('#earningStart').val(event.earning_start);
        $('#earningEnd').val(event.earning_end);
        $('#redemptionStart').val(event.redemption_start);
        $('#redemptionEnd').val(event.redemption_end);
        $('#minPurchase').val(event.min_purchase);
        $('#expirationDays').val(event.expiration_days);
        $('#minTransaction').val(event.min_transaction || 0);
        $('#printCoupon').prop('checked', event.print_coupon);
        $('#smsCoupon').prop('checked', event.sms_coupon);
        $('#stackable').prop('checked', event.stackable);
    }

    function activateEvent(eventId) {
        if (!confirm('Are you sure you want to activate this event?')) return;

        $.ajax({
            url: apiBase + '/events/' + eventId + '/activate',
            type: 'POST',
            success: function() {
                loadEvents();
                showNotification('Event activated successfully!', 'success');
            },
            error: function() {
                showNotification('Failed to activate event.', 'error');
            }
        });
    }

    function deleteEvent(eventId) {
        if (!confirm('Are you sure you want to delete this event? This cannot be undone.')) return;

        $.ajax({
            url: apiBase + '/events/' + eventId,
            type: 'DELETE',
            success: function() {
                loadEvents();
                showNotification('Event deleted successfully.', 'success');
            },
            error: function() {
                showNotification('Failed to delete event.', 'error');
            }
        });
    }

    function endEvent(eventId) {
        if (!confirm('Are you sure you want to end this event early? Active coupons will remain valid until their expiration.')) return;

        $.ajax({
            url: apiBase + '/events/' + eventId + '/end',
            type: 'POST',
            success: function() {
                loadEvents();
                showNotification('Event ended successfully.', 'success');
            },
            error: function() {
                showNotification('Failed to end event.', 'error');
            }
        });
    }

    function viewEventReport(eventId) {
        // Switch to reports tab and filter by event
        $('a[href="#ccReportsTab"]').tab('show');
        $('#reportEventSelect').val(eventId);
        loadReportData();
    }

    function showNotification(message, type) {
        if (typeof toastr !== 'undefined') {
            toastr[type](message);
        } else if (typeof swal === 'function') {
            swal(type === 'success' ? 'Success' : 'Error', message, type);
        } else {
            alert(message);
        }
    }

    // Register Handlebars helpers
    if (typeof Handlebars !== 'undefined') {
        Handlebars.registerHelper('eq', function(a, b) {
            return a === b;
        });

        Handlebars.registerHelper('or', function(a, b) {
            return a || b;
        });

        Handlebars.registerHelper('formatDate', function(date) {
            if (!date) return '--';
            return moment(date).format('MMM D, YYYY');
        });

        Handlebars.registerHelper('formatDateTime', function(date) {
            if (!date) return '--';
            return moment(date).format('MMM D, YYYY h:mm A');
        });

        Handlebars.registerHelper('formatTime', function(date) {
            if (!date) return '--';
            return moment(date).format('h:mm A');
        });

        Handlebars.registerHelper('formatMoney', function(value) {
            return parseFloat(value || 0).toFixed(2);
        });
    }

    // ========== QUICK REDEEM MODAL HANDLERS ==========
    var quickRedeemCouponData = null;

    // Initialize Quick Redeem modal
    function initQuickRedeemModal() {
        var $modal = $('#comebackCashRedeemModal');
        if (!$modal.length) return;

        // Reset modal on show
        $modal.on('show.bs.modal', function() {
            resetQuickRedeemModal();
        });

        // Focus input when modal is shown
        $modal.on('shown.bs.modal', function() {
            $('#quickCouponCode').focus();
        });

        // Validate button
        $('#quickValidateBtn').on('click', quickValidateCoupon);

        // Enter key on input
        $('#quickCouponCode').on('keypress', function(e) {
            if (e.which === 13) {
                e.preventDefault();
                quickValidateCoupon();
            }
        });

        // Redeem button
        $('#quickRedeemBtn').on('click', quickRedeemCoupon);

        // Back/Cancel button
        $('#quickCancelBtn').on('click', resetQuickRedeemModal);

        // Try Again button
        $('#quickTryAgainBtn').on('click', resetQuickRedeemModal);

        // Redeem Another button
        $('#quickRedeemAnotherBtn').on('click', function() {
            resetQuickRedeemModal();
            $('#quickCouponCode').focus();
        });

        console.log('[ComebackCash] Quick Redeem modal initialized');
    }

    // Reset Quick Redeem modal to initial state
    function resetQuickRedeemModal() {
        $('#quickCouponCode').val('');
        $('#quickRedeemInput').show();
        $('#quickRedeemResult').hide();
        $('#quickResultValid, #quickResultError, #quickResultSuccess').hide();
        $('#footerInitial').show();
        $('#footerValid, #footerError, #footerSuccess').hide();
        $('#quickMinPurchase').hide();
        $('#quickTransactionAmount').val('');
        quickRedeemCouponData = null;
    }

    // Validate coupon in Quick Redeem modal
    function quickValidateCoupon() {
        var code = $('#quickCouponCode').val().trim().toUpperCase().replace(/-/g, '');
        if (!code) {
            showQuickError('No Code Entered', 'Please enter or scan a coupon code.');
            return;
        }

        var $btn = $('#quickValidateBtn');
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Validating...');

        $.ajax({
            url: apiBase + '/coupons/' + code + '/validate',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                $btn.prop('disabled', false).html('<i class="fa fa-search"></i> Validate');

                if (response.valid) {
                    showQuickValid(response.coupon);
                } else {
                    showQuickError('Invalid Coupon', response.message || 'This coupon code is not valid.');
                }
            },
            error: function(xhr) {
                $btn.prop('disabled', false).html('<i class="fa fa-search"></i> Validate');
                var response = xhr.responseJSON || {};
                handleQuickError(response);
            }
        });
    }

    // Show valid coupon state
    function showQuickValid(coupon) {
        quickRedeemCouponData = coupon;

        $('#quickRedeemInput').hide();
        $('#quickRedeemResult').show();
        $('#quickResultValid').show();
        $('#quickResultError, #quickResultSuccess').hide();

        $('#quickCouponValue').text(coupon.value.toFixed(2));
        $('#quickCouponCustomer').text(coupon.customer_name || 'Customer');
        $('#quickCouponEvent').text(coupon.event_name || '--');
        $('#quickCouponExpiry').text(coupon.expires_at ? moment(coupon.expires_at).format('MMM D, YYYY') : '--');

        // Check for minimum purchase requirement
        if (coupon.min_purchase && coupon.min_purchase > 0) {
            $('#quickMinPurchase').show();
            $('#quickMinAmount').text(coupon.min_purchase.toFixed(2));
        } else {
            $('#quickMinPurchase').hide();
        }

        $('#footerInitial, #footerError, #footerSuccess').hide();
        $('#footerValid').show();
    }

    // Handle error response
    function handleQuickError(response) {
        var title = 'Invalid Coupon';
        var message = 'This coupon code is not valid.';

        switch (response.error_code) {
            case 'ALREADY_REDEEMED':
                title = 'Already Redeemed';
                message = 'This coupon was redeemed on ' + (response.redeemed_at || 'a previous date') + '.';
                break;
            case 'EXPIRED':
                title = 'Coupon Expired';
                message = 'This coupon expired on ' + (response.expired_at || 'a previous date') + '.';
                break;
            case 'NOT_YET_VALID':
                title = 'Not Yet Valid';
                message = 'This coupon is valid from ' + (response.valid_from || 'a future date') + '.';
                break;
            case 'NOT_FOUND':
                title = 'Coupon Not Found';
                message = 'This coupon code does not exist.';
                break;
            default:
                title = response.title || 'Invalid Coupon';
                message = response.message || 'This coupon code is not valid.';
        }

        showQuickError(title, message);
    }

    // Show error state
    function showQuickError(title, message) {
        $('#quickRedeemInput').hide();
        $('#quickRedeemResult').show();
        $('#quickResultError').show();
        $('#quickResultValid, #quickResultSuccess').hide();

        $('#quickErrorTitle').text(title);
        $('#quickErrorMessage').text(message);

        $('#footerInitial, #footerValid, #footerSuccess').hide();
        $('#footerError').show();
    }

    // Redeem the validated coupon
    function quickRedeemCoupon() {
        if (!quickRedeemCouponData) return;

        // Check minimum purchase if required
        if (quickRedeemCouponData.min_purchase && quickRedeemCouponData.min_purchase > 0) {
            var txAmount = parseFloat($('#quickTransactionAmount').val()) || 0;
            if (txAmount < quickRedeemCouponData.min_purchase) {
                showNotification('Transaction amount must be at least $' + quickRedeemCouponData.min_purchase.toFixed(2), 'warning');
                return;
            }
        }

        var $btn = $('#quickRedeemBtn');
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Redeeming...');

        $.ajax({
            url: apiBase + '/coupons/' + quickRedeemCouponData.code + '/redeem',
            type: 'POST',
            data: JSON.stringify({
                transaction_amount: parseFloat($('#quickTransactionAmount').val()) || 0
            }),
            contentType: 'application/json',
            success: function(response) {
                $btn.prop('disabled', false).html('<i class="fa fa-check"></i> Redeem');

                // Show success state
                $('#quickResultValid, #quickResultError').hide();
                $('#quickResultSuccess').show();
                $('#quickRedeemedAmount').text(quickRedeemCouponData.value.toFixed(2));

                $('#footerInitial, #footerValid, #footerError').hide();
                $('#footerSuccess').show();

                // Refresh today's redemptions if visible
                if (typeof loadTodayRedemptions === 'function') {
                    loadTodayRedemptions();
                }
            },
            error: function(xhr) {
                $btn.prop('disabled', false).html('<i class="fa fa-check"></i> Redeem');
                var message = xhr.responseJSON && xhr.responseJSON.message
                    ? xhr.responseJSON.message
                    : 'Failed to redeem coupon. Please try again.';
                showNotification(message, 'error');
            }
        });
    }

    // ========== BARCODE SCANNER AUTO-DETECTION ==========
    // Coupon charset: ABCDEFGHJKMNPQRSTUVWXYZ23456789 (no I, L, O, 0, 1)
    var COUPON_CHARSET = 'ABCDEFGHJKMNPQRSTUVWXYZ23456789';
    var COUPON_LENGTH = 8;
    var SCANNER_MAX_INTERVAL = 100; // Max ms between keystrokes for scanner detection
    var SCANNER_MIN_SPEED = 50;     // Min ms for total scan to be considered scanner

    var scannerBuffer = '';
    var scannerLastKey = 0;
    var scannerStartTime = 0;

    // Initialize barcode scanner listener
    function initBarcodeScannerListener() {
        document.addEventListener('keypress', handleScannerKeypress);
        console.log('[ComebackCash] Barcode scanner listener initialized');
    }

    function handleScannerKeypress(e) {
        // Ignore if user is typing in an input field (except our coupon input)
        var activeEl = document.activeElement;
        var tagName = activeEl ? activeEl.tagName.toLowerCase() : '';
        var isInputField = (tagName === 'input' || tagName === 'textarea' || tagName === 'select');
        var isCouponInput = activeEl && activeEl.id === 'quickCouponCode';

        // Allow typing in coupon input, but still handle scanner detection
        if (isInputField && !isCouponInput) {
            resetScannerBuffer();
            return;
        }

        var now = Date.now();
        var char = String.fromCharCode(e.which).toUpperCase();

        // Check if Enter key (end of scan)
        if (e.which === 13) {
            if (isCompleteCouponCode(scannerBuffer)) {
                e.preventDefault();
                openQuickRedeemWithCode(scannerBuffer);
            }
            resetScannerBuffer();
            return;
        }

        // Skip dash character (scanner might include it in XXXX-XXXX format)
        if (char === '-') {
            return;
        }

        // Check if character is in valid coupon charset
        if (COUPON_CHARSET.indexOf(char) === -1) {
            resetScannerBuffer();
            return;
        }

        // Check timing - if too slow, reset buffer
        if (scannerBuffer.length > 0 && (now - scannerLastKey) > SCANNER_MAX_INTERVAL) {
            resetScannerBuffer();
        }

        // Start new scan or continue
        if (scannerBuffer.length === 0) {
            scannerStartTime = now;
        }

        scannerBuffer += char;
        scannerLastKey = now;

        // Check if we have a complete coupon code
        if (scannerBuffer.length === COUPON_LENGTH) {
            var scanDuration = now - scannerStartTime;

            // If typed fast enough to be a scanner (or we're not in an input field)
            if (scanDuration < (COUPON_LENGTH * SCANNER_MAX_INTERVAL) || !isInputField) {
                // Prevent the character from appearing in any input
                if (!isCouponInput) {
                    e.preventDefault();
                }

                // Small delay to ensure any trailing Enter is captured
                var code = scannerBuffer;
                setTimeout(function() {
                    openQuickRedeemWithCode(code);
                }, 50);
            }

            resetScannerBuffer();
        }
    }

    function isCompleteCouponCode(code) {
        if (!code || code.length !== COUPON_LENGTH) {
            return false;
        }
        // Check all characters are in valid charset
        for (var i = 0; i < code.length; i++) {
            if (COUPON_CHARSET.indexOf(code[i]) === -1) {
                return false;
            }
        }
        return true;
    }

    function resetScannerBuffer() {
        scannerBuffer = '';
        scannerLastKey = 0;
        scannerStartTime = 0;
    }

    function openQuickRedeemWithCode(code) {
        var $modal = $('#comebackCashRedeemModal');
        if (!$modal.length) {
            console.warn('[ComebackCash] Quick Redeem modal not found');
            return;
        }

        // Format code as XXXX-XXXX for display
        var formattedCode = code.substring(0, 4) + '-' + code.substring(4);

        // Reset and populate the modal
        resetQuickRedeemModal();
        $('#quickCouponCode').val(formattedCode);

        // Show modal if not already visible
        var bsModal = bootstrap.Modal.getOrCreateInstance($modal[0]);
        if (!$modal.hasClass('show')) {
            bsModal.show();
        }

        // Auto-validate after a short delay
        setTimeout(function() {
            quickValidateCoupon();
        }, 100);

        console.log('[ComebackCash] Scanner detected coupon: ' + formattedCode);
    }

    // Initialize on DOM ready
    document.addEventListener('DOMContentLoaded', function() {
        initQuickRedeemModal();
        initBarcodeScannerListener();
    });

    // Listen for view changes
    document.addEventListener('viewChanged', function(e) {
        if (e.detail && e.detail.view === 'comeback-cash') {
            initComebackCash();
        }
    });

    // Check if comeback-cash is active on page load
    document.addEventListener('DOMContentLoaded', function() {
        var activeView = document.querySelector('.workspace-view.active');
        if (activeView && activeView.dataset.view === 'comeback-cash') {
            initComebackCash();
        }
    });
})();
</script>
{% endif %}

{# ========== FIVESTARS LOYALTY INTEGRATION ========== #}
{% if fiveStarsEnabled|default(false) %}
<style>
/* FiveStars Modal - Progress Bar */
.fs-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-bottom: 1px solid #e5e7eb;
    gap: 0;
}

.fs-progress-step {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.fs-progress-step.active {
    opacity: 1;
}

.fs-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}

.fs-progress-step.active .fs-step-number {
    background: var(--primary-600, #7c3aed);
    color: #fff;
}

.fs-step-label {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

.fs-progress-step.active .fs-step-label {
    color: #1f2937;
}

.fs-progress-connector {
    width: 40px;
    height: 2px;
    background: #e5e7eb;
    margin: 0 8px;
}

/* FiveStars Points Badge */
.fs-points-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fef9c3;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #fde047;
}

.fs-points-value {
    font-size: 20px;
    font-weight: 700;
    color: #b45309;
}

.fs-points-label {
    font-size: 12px;
    color: #92400e;
    font-weight: 500;
}

/* FiveStars Reward Item */
.fs-reward-item {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: background-color 0.3s ease;
}

.fs-reward-item.bg-success-subtle {
    border-color: #86efac;
}

/* FiveStars Queue Badge */
.fs-member-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Dark mode support */
[data-theme="dark"] .fs-progress {
    border-bottom-color: #374151;
}

[data-theme="dark"] .fs-step-number {
    background: #374151;
    color: #9ca3af;
}

[data-theme="dark"] .fs-progress-step.active .fs-step-number {
    background: var(--primary-500, #8b5cf6);
}

[data-theme="dark"] .fs-step-label {
    color: #9ca3af;
}

[data-theme="dark"] .fs-progress-step.active .fs-step-label {
    color: #f3f4f6;
}

[data-theme="dark"] .fs-progress-connector {
    background: #374151;
}

[data-theme="dark"] .fs-points-badge {
    background: #422006;
    border-color: #92400e;
}

[data-theme="dark"] .fs-points-value {
    color: #fcd34d;
}

[data-theme="dark"] .fs-points-label {
    color: #fbbf24;
}

[data-theme="dark"] .fs-reward-item {
    border-color: #374151;
}
</style>

<script>
(function() {
    'use strict';
    $(document).ready(function() {
        // Initialize FiveStars Lookup Modal
        if (typeof FiveStarsLookup !== 'undefined') {
            window.fiveStarsLookup = new FiveStarsLookup({
                typeNum: '{{ store.typeNum }}',
                csrfToken: '{{ token }}'
            });
            window.fiveStarsLookup.init();
        }

        // Initialize FiveStars Queue Badge (delayed to ensure queue data loads)
        if (typeof FiveStarsQueueBadge !== 'undefined') {
            setTimeout(function() {
                window.fiveStarsQueueBadge = new FiveStarsQueueBadge({
                    typeNum: '{{ store.typeNum }}',
                    csrfToken: '{{ token }}'
                });
                window.fiveStarsQueueBadge.init();
            }, 2000);
        }
    });
})();
</script>
{% endif %}