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

        <p style="color: var(--muted); margin-bottom: 18px;">
            Orders still awaiting payment after a long time, likely abandoned. Only <strong>pending payment</strong>
            orders ever show up here — confirmed, in-progress, or delivered orders are never touched. Review each
            one and delete individually; nothing here is deleted automatically.
        </p>

        <form method="get" class="user-filter-row">
            <label for="days" style="align-self: center; font-size: 0.88rem; color: var(--muted);">Older than</label>
            <select id="days" name="days" onchange="this.form.submit()">
                <option value="1" {% if days == 1 %}selected{% endif %}>1 day</option>
                <option value="3" {% if days == 3 %}selected{% endif %}>3 days</option>
                <option value="7" {% if days == 7 %}selected{% endif %}>7 days</option>
                <option value="14" {% if days == 14 %}selected{% endif %}>14 days</option>
                <option value="30" {% if days == 30 %}selected{% endif %}>30 days</option>
            </select>
        </form>

        <div class="admin-table-wrap">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Order</th>
                        <th>Customer</th>
                        <th>Placed</th>
                        <th>Age</th>
                        <th>Total</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for order in orders %}
                    <tr>
                        <td>#{{ order.id }}</td>
                        <td>{{ order.customer_name }}<br><small style="color: var(--muted);">{{ order.customer_email }}</small></td>
                        <td>{{ order.created_at|slice:":10" }}</td>
                        <td>{{ order.age_days }} day{{ order.age_days|pluralize }}</td>
                        <td>TSh {{ order.total_amount|floatformat:0 }}</td>
                        <td>
                            <form method="post" action="{% url 'accounts:admin_delete_stale_order' order.id %}" onsubmit="return confirm('Delete Order #{{ order.id }} (TSh {{ order.total_amount|floatformat:0 }}, {{ order.age_days }} days old, unpaid)? This cannot be undone.');">
                                {% csrf_token %}
                                <button type="submit" class="btn-small" style="background: #b3261e;">Delete</button>
                            </form>
                        </td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="6">No pending-payment orders older than {{ days }} day{{ days|pluralize }} &mdash; nothing to clean up.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</section>
{% endblock %}