{# Backstock Panel Content - Tabbed Interface Design #}
{# Search and external link are in the panel-header (workspace.html) #}
{# Content starts directly with tabs for a cohesive one-unit feel #}

{# Event Banner (shown when there's an active or preparing event) #}
<div class="backstock-event-banner" id="backstockEventBanner" style="display: none;">
    {# Populated by Handlebars template #}
</div>

{# Tabs #}
<div class="backstock-tabs">
    <button class="backstock-tab active" data-tab="bins" id="backstockTabBins">
        <i class="fa fa-arrow-up-from-bracket"></i>
        Bins to Pull
        <span class="backstock-tab-badge" id="backstockBinsCount">0</span>
    </button>
    <button class="backstock-tab" data-tab="activity" id="backstockTabActivity">
        <i class="fa fa-history"></i>
        Activity
        <span class="backstock-tab-badge" id="activityCount">0</span>
    </button>
</div>

{# Main content container #}
<div id="backstockContainer" class="backstock-content">
    {# Loading state #}
    <div class="backstock-loading" id="backstockLoadingState">
        <i class="fa fa-spinner fa-spin"></i> Loading backstock...
    </div>

    {# Bins to Pull Tab Content #}
    <div class="backstock-tab-content active" id="backstockBinsToPull" data-tab="bins">
        {# On-Site Section #}
        <div class="backstock-location-section" id="onSiteSection">
            <div class="backstock-location-divider collapsible" id="onSiteDivider" data-target="onSiteBinsList">
                <i class="fa fa-store"></i>
                <span>On-Site</span>
                <span class="backstock-location-count" id="onSiteBinsCount">0</span>
                <i class="fa fa-chevron-down backstock-collapse-icon"></i>
            </div>
            <div id="onSiteBinsList" class="backstock-bin-list">
                {# Populated by Handlebars template #}
            </div>
        </div>

        {# Off-Site Section (only shown when off-site bins exist) #}
        <div class="backstock-location-section" id="offSiteSection" style="display: none;">
            <div class="backstock-location-divider collapsible" id="offSiteDivider" data-target="offSiteBinsList">
                <i class="fa fa-warehouse"></i>
                <span>Off-Site</span>
                <span class="backstock-location-count" id="offSiteBinsCount">0</span>
                <i class="fa fa-chevron-down backstock-collapse-icon"></i>
            </div>
            <div id="offSiteBinsList" class="backstock-bin-list">
                {# Populated by Handlebars template #}
            </div>
        </div>
    </div>

    {# Activity Tab Content #}
    <div class="backstock-tab-content" id="backstockTodayActivity" data-tab="activity" style="display: none;">
        <div id="todayActivityList" class="backstock-activity-list">
            {# Populated by Handlebars template #}
        </div>
    </div>

    {# Empty state #}
    <div class="backstock-empty" id="backstockEmptyState" style="display: none;">
        <i class="fa fa-box-open"></i>
        <p>No bins to pull today</p>
    </div>
</div>

{# ========== HANDLEBARS TEMPLATES FOR BACKSTOCK ========== #}

{# Template for Event Banner - Streamlined design #}
{% raw %}
<script id="backstock-event-banner-template" type="text/x-handlebars-template">
    <div class="backstock-event {{phase}}" data-event-id="{{id}}">
        <div class="backstock-event-info">
            <div class="backstock-event-icon">
                {{#ifEquals phase "preparing"}}
                <i class="fa fa-calendar"></i>
                {{else}}
                <i class="fa fa-bolt"></i>
                {{/ifEquals}}
            </div>
            <div class="backstock-event-details">
                <h4>{{name}}</h4>
                <span>
                    {{#ifEquals phase "preparing"}}
                    <i class="fa fa-clock"></i> Starts in {{daysRemaining}} days
                    {{else}}
                    <i class="fa fa-fire"></i> Active Now
                    {{/ifEquals}}
                </span>
            </div>
        </div>
        <div class="backstock-event-progress">
            {{#ifEquals phase "preparing"}}
            <div class="backstock-event-target">Daily: {{dailyTarget}} bins</div>
            {{/ifEquals}}
            {{#if totalBins}}
            <div class="backstock-event-count">{{completedBins}}/{{totalBins}}</div>
            {{/if}}
        </div>
    </div>
</script>
{% endraw %}

{# Template for Bin Card - New streamlined design #}
{% raw %}
<script id="backstock-bin-card-template" type="text/x-handlebars-template">
    <div class="backstock-bin" data-bin-id="{{id}}" data-bin-name="{{name}}">
        <div class="backstock-bin-avatar {{#ifEquals ageColor 'red'}}urgent{{/ifEquals}}">
            {{shortName name}}
        </div>
        <div class="backstock-bin-info">
            <div class="backstock-bin-name">{{name}}{{#if mainCategory}} ({{mainCategory.name}}){{/if}}</div>
            <div class="backstock-bin-meta">
                <span class="backstock-age-badge age-{{ageColor}}">
                    <i class="fa fa-clock"></i> {{age}}d
                </span>
                {{#if location}}
                <span class="backstock-location">
                    <i class="fa fa-map-marker-alt"></i> {{location}}
                </span>
                {{/if}}
            </div>
        </div>
        <i class="fa fa-chevron-right backstock-bin-arrow"></i>
    </div>
</script>
{% endraw %}

{# Template for Activity Item - New streamlined design #}
{% raw %}
<script id="backstock-activity-template" type="text/x-handlebars-template">
    <div class="backstock-activity" data-bin-id="{{binId}}" data-action-id="{{id}}">
        <div class="backstock-activity-icon {{actionType}}">
            {{#ifEquals actionType "pulled"}}
            <i class="fa fa-arrow-up"></i>
            {{else ifEquals actionType "stored"}}
            <i class="fa fa-arrow-down"></i>
            {{else ifEquals actionType "emptied"}}
            <i class="fa fa-trash"></i>
            {{else}}
            <i class="fa fa-circle"></i>
            {{/ifEquals}}
        </div>
        <div class="backstock-activity-info">
            <div class="backstock-activity-title"><strong>{{binName}}</strong> {{actionType}}</div>
            <div class="backstock-activity-meta">
                <span><i class="fa fa-user"></i> {{employeeFirstName}}</span>
                <span><i class="fa fa-clock"></i> {{formatTime timestamp}}</span>
            </div>
        </div>
    </div>
</script>
{% endraw %}

{# Tab switching and collapse script #}
<script>
(function() {
    // Tab switching
    document.addEventListener('click', function(e) {
        var tab = e.target.closest('.backstock-tab');
        if (!tab) return;

        var tabId = tab.dataset.tab;
        var panel = tab.closest('.card-body') || tab.closest('.workbook-panel');
        if (!panel) return;

        // Update tab buttons
        panel.querySelectorAll('.backstock-tab').forEach(function(t) {
            t.classList.toggle('active', t.dataset.tab === tabId);
        });

        // Update tab content
        panel.querySelectorAll('.backstock-tab-content').forEach(function(content) {
            var isActive = content.dataset.tab === tabId;
            content.classList.toggle('active', isActive);
            content.style.display = isActive ? 'block' : 'none';
        });
    });

    // Location section collapse/expand
    document.addEventListener('click', function(e) {
        var divider = e.target.closest('.backstock-location-divider.collapsible');
        if (!divider) return;

        e.preventDefault();
        e.stopPropagation();

        var targetId = divider.dataset.target;
        var targetList = document.getElementById(targetId);
        if (targetList) {
            divider.classList.toggle('collapsed');
            targetList.classList.toggle('collapsed');
        }
    });

    // Register shortName helper if Handlebars exists
    if (typeof Handlebars !== 'undefined' && !Handlebars.helpers.shortName) {
        Handlebars.registerHelper('shortName', function(name) {
            if (!name) return '?';
            // Extract letters and numbers from bin name (e.g., "A-12" -> "A12")
            var match = name.match(/([A-Za-z])[-\s]?(\d+)/);
            if (match) {
                return match[1].toUpperCase() + match[2];
            }
            // Fallback: first 3 chars
            return name.substring(0, 3).toUpperCase();
        });
    }
})();
</script>