{#
    Buyer/Employee Grid Component

    Displays a responsive grid of buyer buttons for queue actions.
    Used by start-buy, process-buy, start-sort, and end-sort modals.

    Variables:
    - buyers: Array of buyer objects with employeeID, employeeFirstName, employeeLastName (default display)
    - allBuyers: Array of all active employees (for toggle)
    - clockedInBuyers: Array of clocked-in employees only
    - wiwEnabled: Boolean indicating if WhenIWork is enabled
    - item: Queue item object with buyID
    - action: The action to perform (e.g., 'startBuy', 'processBuy')
#}

{# Set defaults for optional variables #}
{% set wiwEnabled = wiwEnabled|default(false) %}
{% set wiwTokenExpired = wiwTokenExpired|default(false) %}
{% set allBuyers = allBuyers|default([]) %}
{% set clockedInBuyers = clockedInBuyers|default([]) %}

{% if wiwTokenExpired %}
<div class="alert alert-warning d-flex align-items-start mb-3" role="alert">
    <i class="fa fa-exclamation-triangle me-2 mt-1"></i>
    <div>
        <strong>When I Work connection expired.</strong>
        Clock-in status is unavailable. Please re-connect on the
        <a href="/admin/{{ typeNum }}/store/wiw-setup/" class="alert-link">When I Work setup page</a>.
    </div>
</div>
{% endif %}

<div class="buyer-grid" data-wiw-enabled="{{ wiwEnabled ? 'true' : 'false' }}">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h6 class="text-muted mb-0">
            <i class="fa fa-user-circle"></i> Select Your Buyer ID:
        </h6>

        {% if wiwEnabled and allBuyers|length > clockedInBuyers|length %}
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="showAllEmployeesToggle">
            <label class="form-check-label small text-muted" for="showAllEmployeesToggle">
                Show all employees
            </label>
        </div>
        {% endif %}
    </div>

    {# Clocked-in count indicator when WIW is enabled #}
    {% if wiwEnabled and clockedInBuyers|length > 0 %}
    <div class="employee-status-indicator mb-3" id="employeeStatusIndicator">
        <span class="badge bg-success">
            <i class="fa fa-clock"></i>
            <span id="clockedInCount">{{ clockedInBuyers|length }}</span> working now
        </span>
        <span class="badge bg-secondary d-none" id="allEmployeesCount">
            <i class="fa fa-users"></i>
            {{ allBuyers|length }} total
        </span>
    </div>
    {% endif %}

    {% if buyers is empty %}
    <div class="alert alert-warning">
        <i class="fa fa-exclamation-triangle"></i>
        No buyers available. Please ensure employees are clocked in or buyers are configured.
    </div>
    {% else %}
    {#
        When WIW is enabled and clockedInBuyers has items, the initial 'buyers' list IS the clocked-in list.
        So all buttons should be primary (clocked-in style) on initial load.
    #}
    {% set initialListIsClockedIn = wiwEnabled and clockedInBuyers|length > 0 %}
    <div class="row g-2" id="buyerButtonsContainer">
        {# Initially show clocked-in employees (or all if WIW disabled) #}
        {% for buyer in buyers %}
        {% set isClockedIn = initialListIsClockedIn or (buyer.isClockedIn is defined and buyer.isClockedIn) %}
        <div class="col-6 col-md-4 buyer-item"
             data-clocked-in="{{ isClockedIn ? 'true' : 'false' }}"
             data-employee-id="{{ buyer.employeeID }}">
            <button type="button"
                    class="btn btn-lg buyer-button w-100 {% if isClockedIn or not wiwEnabled %}btn-primary{% else %}btn-outline-secondary{% endif %}"
                    data-employee-id="{{ buyer.employeeID }}"
                    data-buy-id="{{ item.buyID }}"
                    data-action="{{ action }}">
                {% if wiwEnabled and isClockedIn %}
                <i class="fa fa-circle text-success me-1" style="font-size: 0.5em; vertical-align: middle;"></i>
                {% endif %}
                {{ buyer.employeeFirstName }} {{ buyer.employeeLastName }}
            </button>
        </div>
        {% endfor %}
    </div>

    {# Hidden container with ALL employees for JS toggle #}
    {% if wiwEnabled and allBuyers|length > 0 %}
    <script type="text/template" id="allBuyersTemplate">
        {% for buyer in allBuyers %}
        {% set isClockedIn = buyer.isClockedIn is defined and buyer.isClockedIn %}
        <div class="col-6 col-md-4 buyer-item"
             data-clocked-in="{{ isClockedIn ? 'true' : 'false' }}"
             data-employee-id="{{ buyer.employeeID }}">
            <button type="button"
                    class="btn btn-lg buyer-button w-100 {% if isClockedIn %}btn-primary{% else %}btn-outline-secondary{% endif %}"
                    data-employee-id="{{ buyer.employeeID }}"
                    data-buy-id="{{ item.buyID }}"
                    data-action="{{ action }}">
                {% if isClockedIn %}
                <i class="fa fa-circle text-success me-1" style="font-size: 0.5em; vertical-align: middle;"></i>
                {% endif %}
                {{ buyer.employeeFirstName }} {{ buyer.employeeLastName }}
            </button>
        </div>
        {% endfor %}
    </script>

    {# Hidden container with CLOCKED-IN employees only for JS toggle #}
    <script type="text/template" id="clockedInBuyersTemplate">
        {% for buyer in clockedInBuyers %}
        <div class="col-6 col-md-4 buyer-item"
             data-clocked-in="true"
             data-employee-id="{{ buyer.employeeID }}">
            <button type="button"
                    class="btn btn-primary btn-lg buyer-button w-100"
                    data-employee-id="{{ buyer.employeeID }}"
                    data-buy-id="{{ item.buyID }}"
                    data-action="{{ action }}">
                <i class="fa fa-circle text-success me-1" style="font-size: 0.5em; vertical-align: middle;"></i>
                {{ buyer.employeeFirstName }} {{ buyer.employeeLastName }}
            </button>
        </div>
        {% endfor %}
    </script>
    {% endif %}
    {% endif %}
</div>

<style>
.buyer-grid .buyer-button {
    padding: 1rem 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.buyer-grid .buyer-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.buyer-grid .buyer-button:active {
    transform: translateY(0);
}

.buyer-grid .buyer-button.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Outline buttons for non-clocked-in employees */
.buyer-grid .buyer-button.btn-outline-secondary {
    border-style: dashed;
}

.buyer-grid .buyer-button.btn-outline-secondary:hover {
    background-color: var(--bs-secondary);
    color: white;
}

/* Status indicator styling */
.employee-status-indicator .badge {
    font-weight: 500;
    font-size: 0.8rem;
}

/* Toggle switch styling */
.buyer-grid .form-switch .form-check-input {
    cursor: pointer;
}

.buyer-grid .form-switch .form-check-label {
    cursor: pointer;
}

/* Animation for button appearance */
.buyer-item {
    animation: fadeInUp 0.2s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>

<script>
(function() {
    'use strict';

    var toggle = document.getElementById('showAllEmployeesToggle');
    var container = document.getElementById('buyerButtonsContainer');
    var allTemplate = document.getElementById('allBuyersTemplate');
    var clockedInTemplate = document.getElementById('clockedInBuyersTemplate');
    var statusIndicator = document.getElementById('employeeStatusIndicator');
    var allCountBadge = document.getElementById('allEmployeesCount');

    if (!toggle || !container) return;

    toggle.addEventListener('change', function() {
        var showAll = this.checked;

        if (showAll && allTemplate) {
            // Show all employees
            container.innerHTML = allTemplate.innerHTML;
            if (allCountBadge) {
                allCountBadge.classList.remove('d-none');
            }
        } else if (clockedInTemplate) {
            // Show only clocked-in employees
            container.innerHTML = clockedInTemplate.innerHTML;
            if (allCountBadge) {
                allCountBadge.classList.add('d-none');
            }
        }

        // Re-bind click handlers for new buttons
        bindBuyerButtons();
    });

    // Function to re-bind click handlers after toggle
    function bindBuyerButtons() {
        container.querySelectorAll('.buyer-button').forEach(function(btn) {
            // Remove existing listeners by cloning
            var newBtn = btn.cloneNode(true);
            btn.parentNode.replaceChild(newBtn, btn);
        });

        // Dispatch custom event so parent modal scripts can rebind
        document.dispatchEvent(new CustomEvent('buyerGridUpdated', {
            detail: { container: container }
        }));
    }
})();
</script>