{% extends 'base.html' %}
{% block title %}Picker Payouts — Admin{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 1000px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Picker Payouts</h1>
            </div>
            <a href="{% url 'accounts:admin_portal' %}" class="btn-small">&larr; Back to portal</a>
        </div>

        <p style="color: var(--muted); margin-bottom: 24px;">
            Earnings are recorded automatically (one per delivered order, equal to the delivery fee). Paying a
            picker marks all of their currently pending earnings as paid in one go — pay on the cadence they've
            chosen (daily or weekly).
        </p>

        <div class="admin-table-wrap">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Picker</th>
                        <th>Payout cadence</th>
                        <th>Pending</th>
                        <th>Already paid</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for p in pickers %}
                    <tr>
                        <td>{{ p.name }}<br><small style="color: var(--muted);">{{ p.email }}</small></td>
                        <td style="text-transform: capitalize;">{{ p.payout_frequency }}</td>
                        <td>
                            <strong>TSh {{ p.pending_amount|floatformat:0 }}</strong>
                            {% if p.pending_count %}<br><small style="color: var(--muted);">{{ p.pending_count }} deliver{{ p.pending_count|pluralize:"y,ies" }}</small>{% endif %}
                        </td>
                        <td>TSh {{ p.paid_amount|floatformat:0 }}</td>
                        <td>
                            {% if p.pending_amount > 0 %}
                            <form method="post" action="{% url 'accounts:admin_pay_picker' p.picker_id %}" onsubmit="return confirm('Mark TSh {{ p.pending_amount|floatformat:0 }} as paid to {{ p.name }}?');">
                                {% csrf_token %}
                                <button type="submit" class="btn-small" style="background: var(--blue);">Pay Now</button>
                            </form>
                            {% else %}
                            <span style="color: var(--muted); font-size: 0.85rem;">Nothing due</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="5">No picker earnings recorded yet.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</section>
{% endblock %}