{# Workbook Template - Configurable Layout System #}
{# Phase 13: Flexible, user-configurable grid layout for Workbook dashboard #}

{# Include the workspace head #}
{% include 'workspace/layouts/workspace-head.html' %}

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

{# ========== MAIN CONTENT AREA ========== #}
<main class="workspace-content">

    {# ========== 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 ========== #}
    {# Row-based layout: Each row can have two side-by-side columns or a single full-width panel #}
    <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="card-header" draggable="true">
                        <i class="fa fa-check-square-o"></i>
                        <span class="panel-title">Task List</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="card-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="card-header" draggable="true">
                        <i class="fa fa-sticky-note"></i>
                        <span class="panel-title">Notes</span>
                        <div class="panel-controls">
                            {% if user.checkAccess('task-lists') %}
                            <button class="panel-control-btn" id="addNoteBtn" title="Add Note">
                                <i class="fa fa-plus"></i>
                            </button>
                            {% endif %}
                            <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="card-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">
            <div class="workbook-panel" data-panel-id="daily-assignments">
                <div class="card-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="card-body" id="dailyAssignmentsPanelBody">
                    {% include 'workbook/partials/daily-assignment-panel.html' %}
                </div>
                <div class="panel-resize-handle"></div>
            </div>
        </div>
        {% endif %}

        {# ===== ROW 2: Schedule + Backstock side by side ===== #}
        <div class="workbook-row" data-row-id="row2">
            <div class="workbook-row-column" data-side="left">
                {# SCHEDULE PANEL #}
                <div class="workbook-panel" data-panel-id="schedule">
                    <div class="card-header" draggable="true">
                        <i class="fa fa-calendar"></i>
                        <span class="panel-title">Schedule</span>
                        <div class="panel-controls">
                            <button class="panel-control-btn" id="refreshScheduleBtn" title="Refresh schedule">
                                <i class="fa fa-refresh"></i>
                            </button>
                            <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="card-body" id="schedulePanelBody">
                        {% include 'workbook/partials/schedule-panel-content.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="card-header" draggable="true">
                        <i class="fa fa-archive"></i>
                        <span class="panel-title">Backstock</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="card-body" id="backstockPanelBody">
                        {% include 'workbook/partials/backstock-summary-content.html' %}
                    </div>
                    {# No resize handle for backstock - auto height #}
                </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="card-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="card-body" id="whiteboardPanelBody">
                    {% include 'workbook/partials/whiteboard-panel-content.html' %}
                </div>
                <div class="panel-resize-handle"></div>
            </div>
        </div>

        {# ===== ROW 4: Floor Plan (Full Width) ===== #}
        <div class="workbook-row full-width" data-row-id="row4">
            {# FLOOR PLAN PANEL #}
            <div class="workbook-panel" data-panel-id="floor-plan">
                <div class="card-header" draggable="true">
                    <i class="fa fa-map"></i>
                    <span class="panel-title">Floor</span>
                    <div class="panel-controls">
                        <button class="panel-control-btn" id="fp-refresh" title="Refresh">
                            <i class="fa fa-refresh"></i>
                        </button>
                        <a class="panel-control-btn" href="/admin/{{ typeNum }}/floor-plan" title="Open Designer">
                            <i class="fa fa-external-link"></i>
                        </a>
                        <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="card-body p-0" id="floorPlanPanelBody">
                    {% include 'workspace/partials/floor-plan/floor-panel.html' %}
                </div>
                <div class="panel-resize-handle"></div>
            </div>
        </div>

    </div>

</main>

{# KPI Bar at bottom #}
{% include 'workbook/partials/kpi-bar.html' %}

{# ========== 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 'workbook/modals/clock-in-modal.html' %}
{% include 'workbook/modals/backstock-bin-detail-modal.html' %}

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

{# ========== LAYOUT MANAGER (must load first) ========== #}
<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>

{# Hide Reamaze chat widget on Workbook page and restyle collapse button #}
<style>
/* Hide Reamaze widget on workbook */
#reamaze-widget,
.reamaze-widget,
[id^="reamaze"],
.shoutbox-container,
#reamaze_shoutbox {
    display: none !important;
    visibility: hidden !important;
}

/* Extend sidebar all the way to bottom on workbook page */
.workspace-sidebar {
    bottom: 0 !important;
}

/* Restyle sidebar collapse button - match KPI bar height exactly */
.sidebar-toggle {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--sidebar-width, 200px) !important;
    height: 60px !important; /* Match KPI bar height */
    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); /* Separator from KPI bar */
    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;
}

.sidebar-toggle:hover {
    background: var(--sidebar-hover, #2d3748);
}

.sidebar-toggle i {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.sidebar-toggle span {
    font-size: 13px;
    font-weight: 500;
}

/* When sidebar is collapsed, adjust toggle width */
.workspace-sidebar.collapsed .sidebar-toggle {
    width: var(--sidebar-collapsed-width, 60px) !important;
}

/* Fix expanded KPI bar - add dark background to left side */
.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.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) {
    .kpi-bar-expanded {
        background: var(--panel-bg, #fff) !important;
    }

    .sidebar-toggle {
        display: none !important;
    }
}
</style>

<script>
// Initialize Workbook when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    // Initialize layout manager first
    if (typeof WorkbookLayoutManager === 'function') {
        window.workbookLayout = new WorkbookLayoutManager('workbookGrid', {
            typeNum: '{{ typeNum }}'
        });
    }

    // Then 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 || {};
        _support.ui.widget.displayOn = 'none';
    }

    // Also try to remove any already-rendered Reamaze elements
    var reamazeElements = document.querySelectorAll('[id^="reamaze"], .reamaze-widget, .shoutbox-container');
    reamazeElements.forEach(function(el) {
        el.style.display = 'none';
        el.style.visibility = 'hidden';
    });
});
</script>