{# KPI Bar - Fixed bottom bar showing live metrics #}

<div class="workspace-kpi-bar" id="workspaceKpiBar">
    {# Sales KPI #}
    <div class="kpi-item" id="kpiSales" title="Today's Sales">
        <i class="fa fa-dollar"></i>
        <span class="kpi-label">Sales</span>
        <span class="kpi-value" id="kpiSalesValue">--</span>
    </div>

    {# Items Processed KPI #}
    <div class="kpi-item" id="kpiItems" title="Items Processed Today">
        <i class="fa fa-tag"></i>
        <span class="kpi-label">Items</span>
        <span class="kpi-value" id="kpiItemsValue">--</span>
    </div>

    {# Buys Completed KPI #}
    <div class="kpi-item" id="kpiBuys" title="Buys Completed Today">
        <i class="fa fa-shopping-cart"></i>
        <span class="kpi-label">Buys</span>
        <span class="kpi-value" id="kpiBuysValue">--</span>
    </div>

    {# Average Process Time KPI #}
    <div class="kpi-item" id="kpiAvgTime" title="Average Process Time">
        <i class="fa fa-clock-o"></i>
        <span class="kpi-label">Avg Time</span>
        <span class="kpi-value" id="kpiAvgTimeValue">--</span>
    </div>

    {# Queue Count KPI #}
    <div class="kpi-item" id="kpiQueue" title="Currently in Queue">
        <i class="fa fa-users"></i>
        <span class="kpi-label">In Queue</span>
        <span class="kpi-value" id="kpiQueueValue">--</span>
    </div>

    {# Spacer to push time to the right #}
    <div class="kpi-bar-spacer"></div>

    {# Current Time #}
    <div class="kpi-bar-time" id="kpiBarTime">
        <i class="fa fa-clock-o"></i>
        <span id="kpiCurrentTime">--:--</span>
    </div>
</div>

{# KPI Bar JavaScript - Updates values in real-time #}
<script>
(function() {
    'use strict';

    // Update clock every second
    function updateClock() {
        var now = new Date();
        var timeStr = now.toLocaleTimeString('en-US', {
            hour: 'numeric',
            minute: '2-digit',
            hour12: true
        });
        var clockEl = document.getElementById('kpiCurrentTime');
        if (clockEl) {
            clockEl.textContent = timeStr;
        }
    }

    // Update KPIs from server (placeholder - will be implemented with actual API)
    function updateKPIs() {
        // This will be replaced with actual API calls in the KPI system implementation
        // For now, we'll leave the values as placeholders
    }

    // Initialize
    document.addEventListener('DOMContentLoaded', function() {
        updateClock();
        setInterval(updateClock, 1000);

        // Update KPIs every 30 seconds (when implemented)
        // setInterval(updateKPIs, 30000);
    });

    // Expose update function globally for real-time updates
    window.updateWorkspaceKPIs = function(data) {
        if (data.sales !== undefined) {
            document.getElementById('kpiSalesValue').textContent = '$' + data.sales.toLocaleString();
        }
        if (data.items !== undefined) {
            document.getElementById('kpiItemsValue').textContent = data.items.toLocaleString();
        }
        if (data.buys !== undefined) {
            document.getElementById('kpiBuysValue').textContent = data.buys;
        }
        if (data.avgTime !== undefined) {
            document.getElementById('kpiAvgTimeValue').textContent = data.avgTime + 'm';
        }
        if (data.queueCount !== undefined) {
            document.getElementById('kpiQueueValue').textContent = data.queueCount;
        }
    };
})();
</script>