{% extends "admin/layout.html" %}
{% block title %}Manual Payments – Admin{% endblock %}
{% block body %}
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-manual-payments">{% trans %}Manual Payments{% endtrans %}</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{% trans %}All manually recorded payments. Total:{% endtrans %} <strong>{{ total }}</strong></p>
    </div>
    <a href="{{ full_url('/admin/users') }}" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-primary hover:bg-primary/90 text-white text-sm font-semibold transition-all shadow-lg shadow-primary/20" data-testid="btn-go-users">
        <i class="fa fa-plus"></i> {% trans %}Record New Payment{% endtrans %}
    </a>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

<!-- Manual Payment Instructions Settings -->
<div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden mb-6">
    <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center gap-2">
        <i class="fa fa-gear text-gray-500"></i>
        <span class="font-semibold text-gray-900 dark:text-white">{% trans %}Manual Payment Settings{% endtrans %}</span>
        <span class="ml-auto text-xs text-gray-400">{% trans %}Shown to users on the payment page{% endtrans %}</span>
    </div>
    <form method="POST" action="{{ full_url('/admin/payments/settings') }}" class="p-5 space-y-4">
        <div class="flex items-center gap-3">
            <label class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" name="manual_payment_enabled" value="1" class="sr-only peer" data-testid="input-manual-enabled">
                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/25 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:border-gray-600 peer-checked:bg-primary"></div>
            </label>
            <div>
                <div class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Enable manual payment option{% endtrans %}</div>
                <div class="text-xs text-gray-400">{% trans %}Allow users to request manual payment for blog posts{% endtrans %}</div>
            </div>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{% trans %}Payment Instructions / Bank Details{% endtrans %}</label>
            <textarea name="manual_payment_instructions" rows="5"
                class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-y"
                placeholder="{% trans %}Bank name: XYZ Bank&#10;Account: 1234567890&#10;IBAN: XX00 0000 0000 0000&#10;Reference: Your username + blog title{% endtrans %}"
                data-testid="input-payment-instructions">{{ settings.get('manual_payment_instructions', '') if settings else '' }}</textarea>
            <p class="mt-1 text-xs text-gray-400">{% trans %}This text is shown to users when they choose manual payment for a blog post fee.{% endtrans %}</p>
        </div>
        <button type="submit" class="px-6 py-2.5 rounded-xl bg-primary hover:bg-primary/90 text-white text-sm font-semibold transition-all" data-testid="btn-save-payment-settings">{% trans %}Save Settings{% endtrans %}</button>
    </form>
</div>

<!-- Payments Table -->
<div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-800">
        <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-list mr-2 text-blue-500"></i>{% trans %}Payment History{% endtrans %}</h3>
    </div>
    {% if payments %}
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">#</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}User{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Plan{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Amount{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Method{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Notes{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Expires{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Date{% endtrans %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for p in payments %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors" data-testid="row-payment-{{ p.id }}">
                    <td class="px-4 py-3 text-gray-400 dark:text-gray-500 text-xs">{{ p.id }}</td>
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-800 dark:text-gray-200" data-testid="text-pay-user-{{ p.id }}">{{ p.username }}</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ p.email }}</div>
                    </td>
                    <td class="px-4 py-3">
                        <span class="px-2.5 py-1 rounded-full text-xs font-semibold bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400" data-testid="text-pay-plan-{{ p.id }}">{{ p.plan_name }}</span>
                    </td>
                    <td class="px-4 py-3 font-bold text-gray-900 dark:text-white" data-testid="text-pay-amount-{{ p.id }}">
                        {{ p.currency }} {{ '%.2f'|format(p.amount) }}
                    </td>
                    <td class="px-4 py-3">
                        <span class="px-2 py-0.5 rounded text-xs capitalize
                            {% if p.method == 'cash' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                            {% elif p.method == 'bank_transfer' %}bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400
                            {% elif p.method == 'crypto' %}bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400
                            {% else %}bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400{% endif %}"
                            data-testid="text-pay-method-{{ p.id }}">
                            {{ p.method|replace('_', ' ') }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 max-w-[180px] truncate" title="{{ p.notes }}" data-testid="text-pay-notes-{{ p.id }}">{{ p.notes or '–' }}</td>
                    <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400" data-testid="text-pay-expires-{{ p.id }}">{{ p.subscription_expires_at[:10] if p.subscription_expires_at else '–' }}</td>
                    <td class="px-4 py-3 text-xs text-gray-400" data-testid="text-pay-date-{{ p.id }}">{{ p.created_at[:10] if p.created_at else '' }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% if total_pages > 1 %}
    <div class="px-4 py-3 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between">
        <span class="text-sm text-gray-500 dark:text-gray-400">{% trans %}Page{% endtrans %} {{ page }} {% trans %}of{% endtrans %} {{ total_pages }}</span>
        <div class="flex gap-2">
            {% if page > 1 %}<a href="?page={{ page - 1 }}" class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">{% trans %}Previous{% endtrans %}</a>{% endif %}
            {% if page < total_pages %}<a href="?page={{ page + 1 }}" class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">{% trans %}Next{% endtrans %}</a>{% endif %}
        </div>
    </div>
    {% endif %}
    {% else %}
    <div class="px-6 py-16 text-center text-gray-400 dark:text-gray-500" data-testid="text-no-payments">
        <i class="fa fa-money-bill-transfer text-4xl mb-3 block opacity-40"></i>
        {% trans %}No manual payments recorded yet.{% endtrans %}
    </div>
    {% endif %}
</div>
{% endblock %}