{% extends 'core/base.html' %}
{% block title %}Staff Performance - SwiftPOS{% endblock %}
{% block topbar_title %}Staff Performance{% endblock %}

{% block content %}
<div class="container-fluid px-0">

    <!-- Header + Filters -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                <div>
                    <h5 class="mb-0 fw-bold">Staff Performance</h5>
                    <div class="small text-muted">Orders &amp; sales by staff member — filtered by date &amp; branch</div>
                </div>
                <form method="get" class="d-flex flex-wrap gap-2 align-items-center" id="perf-filter-form">
                    <div>
                        <label class="form-label small fw-semibold mb-0 me-1">Date</label>
                        <input type="date" name="date" class="form-control form-control-sm"
                               value="{{ filter_date|date:'Y-m-d' }}"
                               onchange="this.form.submit()">
                    </div>
                    {% if branches %}
                    <div>
                        <label class="form-label small fw-semibold mb-0 me-1">Branch</label>
                        <select name="branch" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">All Branches</option>
                            {% for b in branches %}
                            <option value="{{ b.id }}" {% if filter_branch_id == b.id|stringformat:"s" %}selected{% endif %}>{{ b.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    {% endif %}
                    <button type="submit" class="btn btn-sm btn-primary">
                        <i class="fas fa-filter me-1"></i>Filter
                    </button>
                    <a href="{% url 'sales:staff_performance' %}" class="btn btn-sm btn-outline-secondary">Reset</a>
                </form>
            </div>
        </div>
    </div>

    <!-- Active date banner -->
    <div class="alert alert-info py-2 mb-3 d-flex align-items-center gap-2">
        <i class="fas fa-calendar-day"></i>
        <span>Showing orders placed on <strong>{{ filter_date|date:"D, d M Y" }}</strong></span>
    </div>

    <!-- Staff Table -->
    <div class="card">
        <div class="card-body p-0">
            <div class="sp-table-container">
                <table class="table table-sm align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Staff</th>
                            <th>Branch</th>
                            <th>Role</th>
                            <th class="text-center">
                                Orders on {{ filter_date|date:"d M" }}
                            </th>
                            <th>Sales on {{ filter_date|date:"d M" }} ({{ currency_symbol }})</th>
                            <th>Total Orders (All Time)</th>
                            <th>Total Sales ({{ currency_symbol }})</th>
                            <th class="text-center">Unusual Txns</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in staff_stats %}
                        <tr {% if row.orders_on_date > 0 %}class="table-success-subtle"{% endif %}>
                            <td>{{ forloop.counter }}</td>
                            <td class="fw-semibold">{{ row.user.get_full_name|default:row.user.username }}</td>
                            <td>
                                {% if row.user.branch %}
                                    <span class="badge bg-light text-dark border">{{ row.user.branch.name }}</span>
                                {% else %}
                                    <span class="text-muted small">—</span>
                                {% endif %}
                            </td>
                            <td>
                                <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">
                                    {{ row.user.get_role_display }}
                                </span>
                            </td>
                            <td class="text-center">
                                {% if row.orders_on_date > 0 %}
                                    <span class="badge bg-primary rounded-pill fw-bold">{{ row.orders_on_date }}</span>
                                {% else %}
                                    <span class="text-muted small">0</span>
                                {% endif %}
                            </td>
                            <td>{{ currency_symbol }}{{ row.sales_on_date|floatformat:2 }}</td>
                            <td>{{ row.total_orders }}</td>
                            <td>{{ currency_symbol }}{{ row.total_sales|floatformat:2 }}</td>
                            <td class="text-center">
                                {% if row.unusual_transactions %}
                                    <span class="badge bg-danger">{{ row.unusual_transactions }}</span>
                                {% else %}
                                    <span class="badge bg-success-subtle text-success border border-success-subtle">0</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="9" class="text-center text-muted py-4">
                                <i class="fas fa-user-slash fa-2x mb-2 d-block opacity-25"></i>
                                No staff performance data yet.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
{% endblock %}