{% extends "base.html" %}
{% block title %}{{ _('Pay to Publish') }} – OnlineConvert{% endblock %}
{% block content %}
<div class="min-h-[60vh] flex items-center justify-center px-4 py-12">
    <div class="w-full max-w-lg">

        <div class="mb-6 flex items-center gap-3">
            <a href="{{ full_url('/dashboard/blogs') }}" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm"><i class="fa fa-arrow-left"></i></a>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-blog-pay">{{ _('Publish Your Blog Post') }}</h1>
        </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 %}

        <!-- Blog Summary -->
        <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden mb-6">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
                <div class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-1">{{ _('Blog Post') }}</div>
                <h2 class="font-bold text-gray-900 dark:text-white text-lg leading-snug" data-testid="text-blog-pay-title">{{ blog.title }}</h2>
                {% if blog.summary %}<p class="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">{{ blog.summary }}</p>{% endif %}
            </div>
            {% if blog.admin_note %}
            <div class="px-6 py-3 bg-yellow-50 dark:bg-yellow-900/20 border-b border-yellow-100 dark:border-yellow-800/50">
                <div class="text-xs font-semibold text-yellow-700 dark:text-yellow-400 mb-0.5"><i class="fa fa-message mr-1"></i>{{ _('Note from Admin') }}</div>
                <div class="text-sm text-yellow-700 dark:text-yellow-400">{{ blog.admin_note }}</div>
            </div>
            {% endif %}
            <div class="px-6 py-4 flex items-center justify-between">
                <div class="text-sm text-gray-600 dark:text-gray-400">{{ _('Publication Fee') }}</div>
                <div class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="text-blog-fee">${{ '%.2f'|format(blog.publish_fee) }}</div>
            </div>
        </div>

        <!-- Already requested manual -->
        {% if blog.payment_status == 'pending_manual' %}
        <div class="mb-6 rounded-2xl border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20 p-5 text-center">
            <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/40 flex items-center justify-center mx-auto mb-3">
                <i class="fa fa-clock text-blue-500 text-xl"></i>
            </div>
            <div class="font-bold text-blue-800 dark:text-blue-300 mb-1">{{ _('Manual Payment Requested') }}</div>
            <p class="text-sm text-blue-700 dark:text-blue-400">{{ _('Your manual payment request has been submitted. The admin will review and confirm it. Your post will be published once confirmed.') }}</p>
        </div>
        {% else %}

        <!-- After payment notice -->
        <div class="mb-6 rounded-2xl border border-green-200 dark:border-green-800/50 bg-green-50 dark:bg-green-900/20 p-4 flex items-start gap-3">
            <i class="fa fa-circle-check text-green-500 mt-0.5 flex-shrink-0"></i>
            <div class="text-sm text-green-700 dark:text-green-400">
                <strong>{{ _('After payment:') }}</strong> {{ _('Your blog post will be immediately published and visible to all visitors.') }}
            </div>
        </div>

        <!-- Payment options -->
        <div class="space-y-3 mb-4">
            {% if has_stripe %}
            <form method="POST" action="{{ full_url('/blog-payment/stripe/' ~ blog.rowid) }}">
                <button type="submit" class="w-full flex items-center justify-between px-6 py-4 rounded-2xl border-2 border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-primary/50 hover:shadow-lg transition-all group" data-testid="btn-pay-stripe">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl bg-indigo-50 dark:bg-indigo-900/30 flex items-center justify-center flex-shrink-0">
                            <i class="fa fa-credit-card text-indigo-600 dark:text-indigo-400"></i>
                        </div>
                        <div class="text-left">
                            <div class="font-bold text-gray-900 dark:text-white">{{ _('Pay with Card') }}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">{{ _('Visa, Mastercard, Amex via Stripe') }}</div>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="font-bold text-gray-900 dark:text-white">${{ '%.2f'|format(blog.publish_fee) }}</span>
                        <i class="fa fa-chevron-right text-gray-400 group-hover:text-primary transition-all"></i>
                    </div>
                </button>
            </form>
            {% endif %}

            {% if has_paypal %}
            <form method="POST" action="{{ full_url('/blog-payment/paypal/' ~ blog.rowid) }}">
                <button type="submit" class="w-full flex items-center justify-between px-6 py-4 rounded-2xl border-2 border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-blue-400/50 hover:shadow-lg transition-all group" data-testid="btn-pay-paypal">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl bg-blue-50 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0">
                            <i class="fa fa-paypal text-blue-600 dark:text-blue-400 text-lg"></i>
                        </div>
                        <div class="text-left">
                            <div class="font-bold text-gray-900 dark:text-white">{{ _('Pay with PayPal') }}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">{{ _('Secure PayPal checkout') }}</div>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="font-bold text-gray-900 dark:text-white">${{ '%.2f'|format(blog.publish_fee) }}</span>
                        <i class="fa fa-chevron-right text-gray-400 group-hover:text-blue-500 transition-all"></i>
                    </div>
                </button>
            </form>
            {% endif %}

            {% if not has_stripe and not has_paypal %}
            <div class="px-4 py-3 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 text-sm text-amber-700 dark:text-amber-400" data-testid="alert-no-online-payment">
                <i class="fa fa-triangle-exclamation mr-1"></i> {{ _('Online payment is not available right now. Please use the manual payment option below.') }}
            </div>
            {% endif %}
        </div>

        <!-- Manual payment option -->
        {% if manual_enabled %}
        <div class="rounded-2xl border-2 border-dashed border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 overflow-hidden">
            <button type="button" onclick="document.getElementById('manual-pay-section').classList.toggle('hidden')"
                class="w-full flex items-center justify-between px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all group" data-testid="btn-toggle-manual-pay">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center flex-shrink-0">
                        <i class="fa fa-money-bill-transfer text-gray-600 dark:text-gray-400"></i>
                    </div>
                    <div class="text-left">
                        <div class="font-bold text-gray-900 dark:text-white">{{ _('Pay Manually') }}</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ _('Bank transfer, cash, or other method') }}</div>
                    </div>
                </div>
                <i class="fa fa-chevron-down text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-all"></i>
            </button>

            <div id="manual-pay-section" class="hidden border-t border-gray-200 dark:border-gray-700 px-6 py-5">
                {% if manual_instructions %}
                <div class="mb-4 p-4 rounded-xl bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                    <div class="text-xs font-bold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-2">{{ _('Payment Instructions') }}</div>
                    <div class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{{ manual_instructions }}</div>
                </div>
                {% endif %}
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    {{ _('After completing your payment using the above instructions, click the button below to notify the admin. Your post will be published once your payment is confirmed.') }}
                </p>
                <form method="POST" action="{{ full_url('/dashboard/blogs/' ~ blog.rowid ~ '/request-manual-payment') }}">
                    <button type="submit" class="w-full py-3 rounded-xl bg-gray-800 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600 text-white font-bold transition-all" data-testid="btn-request-manual-payment"
                        onclick="return confirm('{{ _("Confirm that you have sent the payment of $%(fee)s and want to notify the admin?", fee="%.2f"|format(blog.publish_fee)) }}')">
                        <i class="fa fa-bell mr-2"></i>{{ _("I've Paid – Notify Admin") }}
                    </button>
                </form>
            </div>
        </div>
        {% endif %}
        {% endif %}

        <p class="mt-4 text-center text-xs text-gray-400 dark:text-gray-500">
            {{ _('Have questions?') }} <a href="{{ full_url('/contact') }}" class="text-primary dark:text-primary-light hover:underline">{{ _('Contact us') }}</a> &nbsp;·&nbsp;
            <a href="{{ full_url('/dashboard/blogs') }}" class="text-primary dark:text-primary-light hover:underline">{{ _('Back to my posts') }}</a>
        </p>
    </div>
</div>
{% endblock %}