{% extends "admin/layout.html" %}
{% block title %}Payment Gateways – Admin{% endblock %}

{% block body %}
<div class="max-w-4xl mx-auto px-4 py-8">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white"><i class="fa fa-credit-card mr-2 text-indigo-500"></i>{% trans %}Payment Gateways{% endtrans %}</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{% trans %}Configure Stripe, PayPal, and manual payment options. Set yearly discounts per plan.{% endtrans %}</p>
    </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 %}

    <form method="POST" action="{{ full_url('/admin/payment-gateways/save') }}" class="space-y-6">

        <!-- Stripe -->
        <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center">
                        <i class="fa fa-stripe text-indigo-600 dark:text-indigo-400"></i>
                    </div>
                    <h2 class="text-base font-bold text-gray-900 dark:text-white">{% trans %}Stripe{% endtrans %}</h2>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" name="stripe_enabled" value="1" class="sr-only peer"
                        {% if settings.get('stripe_enabled', '1') != '0' %}checked{% endif %}
                        data-testid="toggle-stripe-enabled">
                    <div class="w-11 h-6 bg-gray-200 dark:bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-400 rounded-full peer 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 peer-checked:bg-indigo-500"></div>
                    <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">{% trans %}Enabled{% endtrans %}</span>
                </label>
            </div>
            <div class="px-6 py-5 grid grid-cols-1 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Publishable Key{% endtrans %}</label>
                    <input type="text" name="stripe_publishable_key" value="{{ settings.get('stripe_publishable_key', '') }}"
                        placeholder="{% trans %}pk_live_...{% endtrans %}" autocomplete="off"
                        class="w-full px-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 outline-none transition"
                        data-testid="input-stripe-publishable-key">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Secret Key{% endtrans %}</label>
                    <input type="password" name="stripe_secret_key" value="{{ settings.get('stripe_secret_key', '') }}"
                        placeholder="{% trans %}sk_live_...{% endtrans %}" autocomplete="new-password"
                        class="w-full px-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 outline-none transition"
                        data-testid="input-stripe-secret-key">
                    <p class="text-xs text-gray-400 mt-1">{% trans %}Stored encrypted in the database. Never shown in plaintext.{% endtrans %}</p>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Webhook Secret{% endtrans %} <span class="text-gray-400 font-normal">{% trans %}(optional){% endtrans %}</span></label>
                    <input type="password" name="stripe_webhook_secret" value="{{ settings.get('stripe_webhook_secret', '') }}"
                        placeholder="{% trans %}whsec_...{% endtrans %}" autocomplete="new-password"
                        class="w-full px-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 outline-none transition"
                        data-testid="input-stripe-webhook-secret">
                    <p class="text-xs text-gray-400 mt-1">{% trans %}Used to verify incoming webhook events from Stripe. Endpoint:{% endtrans %} <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded">{% trans %}/webhook/stripe{% endtrans %}</code></p>
                </div>
            </div>
        </div>

        <!-- PayPal -->
        <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                        <i class="fab fa-paypal text-blue-600 dark:text-blue-400"></i>
                    </div>
                    <h2 class="text-base font-bold text-gray-900 dark:text-white">{% trans %}PayPal{% endtrans %}</h2>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" name="paypal_enabled" value="1" class="sr-only peer"
                        {% if settings.get('paypal_enabled', '1') != '0' %}checked{% endif %}
                        data-testid="toggle-paypal-enabled">
                    <div class="w-11 h-6 bg-gray-200 dark:bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-400 rounded-full peer 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 peer-checked:bg-blue-500"></div>
                    <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">{% trans %}Enabled{% endtrans %}</span>
                </label>
            </div>
            <div class="px-6 py-5 grid grid-cols-1 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Client ID{% endtrans %}</label>
                    <input type="text" name="paypal_client_id" value="{{ settings.get('paypal_client_id', '') }}"
                        placeholder="{% trans %}AXxx...{% endtrans %}" autocomplete="off"
                        class="w-full px-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 outline-none transition"
                        data-testid="input-paypal-client-id">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Client Secret{% endtrans %}</label>
                    <input type="password" name="paypal_client_secret" value="{{ settings.get('paypal_client_secret', '') }}"
                        placeholder="{% trans %}Exx...{% endtrans %}" autocomplete="new-password"
                        class="w-full px-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 outline-none transition"
                        data-testid="input-paypal-client-secret">
                </div>
            </div>
        </div>

        <!-- Manual Payments -->
        <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center">
                        <i class="fa fa-hand-holding-dollar text-yellow-600 dark:text-yellow-400"></i>
                    </div>
                    <h2 class="text-base font-bold text-gray-900 dark:text-white">{% trans %}Manual / Bank Transfer{% endtrans %}</h2>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" name="manual_payment_enabled" value="1" class="sr-only peer"
                        {% if settings.get('manual_payment_enabled', '1') == '1' %}checked{% endif %}
                        data-testid="toggle-manual-enabled">
                    <div class="w-11 h-6 bg-gray-200 dark:bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-yellow-400 rounded-full peer 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 peer-checked:bg-yellow-500"></div>
                    <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">{% trans %}Enabled{% endtrans %}</span>
                </label>
            </div>
            <div class="px-6 py-5">
                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Payment Instructions{% endtrans %} <span class="text-gray-400 font-normal">{% trans %}(shown to users){% endtrans %}</span></label>
                <textarea name="manual_payment_instructions" rows="4"
                    placeholder="{% trans %}Bank account details, Bitcoin address, or any other payment instructions...{% endtrans %}"
                    class="w-full px-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-yellow-500/50 focus:border-yellow-500 outline-none transition resize-none"
                    data-testid="textarea-manual-instructions">{{ settings.get('manual_payment_instructions', '') }}</textarea>
            </div>
        </div>

        <div class="flex justify-end">
            <button type="submit" class="px-6 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm transition-all shadow-md shadow-indigo-500/20" data-testid="btn-save-gateways">
                <i class="fa fa-save mr-2"></i>{% trans %}Save Gateway Settings{% endtrans %}
            </button>
        </div>
    </form>

    <!-- Yearly Discounts per Plan -->
    <div class="mt-8 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800">
            <h2 class="text-base font-bold text-gray-900 dark:text-white"><i class="fa fa-percent mr-2 text-green-500"></i>{% trans %}Yearly Subscription Discounts{% endtrans %}</h2>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{% trans %}Set the discount % applied when users choose the yearly billing period for each paid plan.{% endtrans %}</p>
        </div>
        {% if plans %}
        <div class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for plan in plans %}
            {% set periods = plan_periods.get(plan.id, []) %}
            {% set yearly = periods | selectattr('months', 'equalto', 12) | list %}
            {% set yearly_period = yearly[0] if yearly else None %}
            <form method="POST" action="{{ full_url('/admin/payment-gateways/plan-discount') }}" class="px-6 py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <input type="hidden" name="plan_id" value="{{ plan.id }}">
                <div>
                    <div class="text-sm font-semibold text-gray-800 dark:text-gray-200">{{ plan.name }}</div>
                    <div class="text-xs text-gray-400">${{ "%.2f"|format(plan.price_monthly) }}/{% trans %}mo{% endtrans %} · {% trans %}Yearly total without discount:{% endtrans %} ${{ "%.2f"|format(plan.price_monthly * 12) }}</div>
                    {% if yearly_period %}
                    <div class="text-xs text-green-600 dark:text-green-400 mt-0.5">
                        {% trans %}Current:{% endtrans %} {{ yearly_period.discount_percent|int }}% {% trans %}off{% endtrans %} →
                        ${{ "%.2f"|format(plan.price_monthly * 12 * (1 - yearly_period.discount_percent / 100)) }}/{% trans %}year{% endtrans %}
                        (${{ "%.2f"|format(plan.price_monthly * 12 * (1 - yearly_period.discount_percent / 100) / 12) }}/{% trans %}mo{% endtrans %})
                    </div>
                    {% endif %}
                </div>
                <div class="flex items-center gap-3">
                    <div class="flex items-center gap-2">
                        <input type="number" name="yearly_discount"
                            value="{{ yearly_period.discount_percent|int if yearly_period else 20 }}"
                            min="0" max="80" step="1"
                            class="w-20 px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm text-center focus:ring-2 focus:ring-green-500/50 focus:border-green-500 outline-none"
                            data-testid="input-yearly-discount-{{ plan.id }}">
                        <span class="text-sm text-gray-500">%</span>
                    </div>
                    <button type="submit" class="px-4 py-2 rounded-lg bg-green-600 hover:bg-green-700 text-white text-sm font-semibold transition-all" data-testid="btn-save-discount-{{ plan.id }}">
                        {% trans %}Save{% endtrans %}
                    </button>
                </div>
            </form>
            {% endfor %}
        </div>
        {% else %}
        <div class="px-6 py-8 text-center text-gray-500 dark:text-gray-400 text-sm">{% trans %}No paid plans found. Create a paid plan first.{% endtrans %}</div>
        {% endif %}
    </div>

</div>
{% endblock %}