{% extends "base.html" %}
{% block title %}{% trans %}Complete Payment{% endtrans %} – OnlineConvert{% endblock %}
{% block content %}
<div class="max-w-lg mx-auto px-4 py-12">
    <div class="text-center mb-8">
        <div class="w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mx-auto mb-4">
            <i class="fa fa-check text-2xl text-green-600 dark:text-green-400"></i>
        </div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-checkout">
            {% if user %}{% trans %}Choose Your Plan{% endtrans %}{% else %}{% trans %}Account Created!{% endtrans %}{% endif %}
        </h1>
        <p class="mt-2 text-gray-500 dark:text-gray-400">
            {% if user %}{% trans %}Complete your payment to activate the{% endtrans %}{% else %}{% trans %}One last step — activate the{% endtrans %}{% endif %}
            <strong>{{ plan.name }}</strong> {% trans %}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 %}

    <!-- Billing Period Selector -->
    {% if periods_data and periods_data|length > 1 %}
    <div class="mb-6">
        <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">{% trans %}Billing Period{% endtrans %}</h2>
        <div class="grid grid-cols-{{ periods_data|length }} gap-2" id="period-selector">
            {% for pd in periods_data %}
            <button type="button"
                onclick="selectPeriod({{ pd.id }})"
                id="period-btn-{{ pd.id }}"
                data-period-id="{{ pd.id }}"
                data-months="{{ pd.months }}"
                data-label="{{ pd.label }}"
                data-total="{{ pd.pricing.total }}"
                data-per-month="{{ pd.pricing.per_month }}"
                data-discount="{{ pd.discount_percent }}"
                data-has-stripe="{{ 'true' if pd.has_stripe else 'false' }}"
                data-has-paypal="{{ 'true' if pd.has_paypal else 'false' }}"
                class="period-btn rounded-xl border-2 px-3 py-3 text-center transition-all
                    {% if selected_period and selected_period.id == pd.id %}border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20{% else %}border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-indigo-300 dark:hover:border-indigo-600{% endif %}"
                data-testid="btn-period-{{ pd.months }}">
                <div class="font-bold text-sm text-gray-900 dark:text-white">{{ pd.label }}</div>
                <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                    ${{ "%.2f"|format(pd.pricing.per_month) }}<span class="text-gray-400">{% trans %}/mo{% endtrans %}</span>
                </div>
                {% if pd.discount_percent > 0 %}
                <div class="text-xs text-green-600 dark:text-green-400 font-medium mt-0.5">
                    {% trans percent=pd.discount_percent|int %}Save {{ percent }}%{% endtrans %}
                </div>
                {% endif %}
            </button>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Plan Summary -->
    <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5 mb-6">
        <h2 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">{% trans %}Order Summary{% endtrans %}</h2>
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                    <i class="fa fa-star text-blue-500"></i>
                </div>
                <div>
                    <div class="font-bold text-gray-900 dark:text-white" data-testid="text-plan-name">{{ plan.name }}</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400" id="summary-period-label">
                        {% if selected_period %}{{ selected_period.label }}{% else %}{% trans %}Monthly{% endtrans %}{% endif %} {% trans %}billing{% endtrans %}
                    </div>
                </div>
            </div>
            <div class="text-right">
                <div class="text-xl font-bold text-gray-900 dark:text-white" data-testid="text-plan-price" id="summary-price">
                    {% if pricing %}
                    ${{ "%.2f"|format(pricing.per_month) }}<span class="text-sm font-normal text-gray-400">{% trans %}/mo{% endtrans %}</span>
                    {% else %}
                    ${{ "%.2f"|format(plan.price_monthly) }}<span class="text-sm font-normal text-gray-400">{% trans %}/mo{% endtrans %}</span>
                    {% endif %}
                </div>
                {% if selected_period and selected_period.months > 1 %}
                <div class="text-xs text-gray-500 dark:text-gray-400" id="summary-total">
                    {% trans total="%.2f"|format(pricing.total), months=selected_period.months %}${{ total }} billed every {{ months }} months{% endtrans %}
                </div>
                {% else %}
                <div class="text-xs text-gray-500 dark:text-gray-400 hidden" id="summary-total"></div>
                {% endif %}
            </div>
        </div>
        {% if pricing and pricing.discount_amount > 0 %}
        <div class="mt-3 pt-3 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between text-xs" id="summary-discount-row">
            <span class="text-green-600 dark:text-green-400 font-medium"><i class="fa fa-tag mr-1"></i>{% trans %}Discount applied{% endtrans %}</span>
            <span class="text-green-600 dark:text-green-400 font-medium" id="summary-discount">−${{ "%.2f"|format(pricing.discount_amount) }}</span>
        </div>
        {% else %}
        <div class="mt-3 pt-3 border-t border-gray-100 dark:border-gray-800 items-center justify-between text-xs hidden" id="summary-discount-row">
            <span class="text-green-600 dark:text-green-400 font-medium"><i class="fa fa-tag mr-1"></i>{% trans %}Discount applied{% endtrans %}</span>
            <span class="text-green-600 dark:text-green-400 font-medium" id="summary-discount"></span>
        </div>
        {% endif %}
    </div>

    <!-- Payment Options -->
    <div class="space-y-3" id="payment-options">
        <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">{% trans %}Select Payment Method{% endtrans %}</h2>

        <form method="POST" action="{{ full_url('/subscribe/stripe/' ~ plan.id) }}" id="stripe-form"
              class="{% if not has_stripe %}hidden{% endif %}">
            <input type="hidden" name="period_id" id="stripe-period-id"
                   value="{{ selected_period.id if selected_period else '' }}">
            <button type="submit" class="w-full flex items-center justify-between px-5 py-4 rounded-2xl bg-indigo-600 hover:bg-indigo-700 text-white font-semibold transition-all shadow-lg shadow-indigo-500/20 group" data-testid="btn-stripe">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
                        <i class="fa fa-credit-card text-lg"></i>
                    </div>
                    <div class="text-left">
                        <div class="font-bold">{% trans %}Pay with Card{% endtrans %}</div>
                        <div class="text-xs text-indigo-200">{% trans %}Secure checkout via Stripe{% endtrans %}</div>
                    </div>
                </div>
                <i class="fa fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
            </button>
        </form>

        <form method="POST" action="{{ full_url('/subscribe/paypal/' ~ plan.id) }}" id="paypal-form"
              class="{% if not has_paypal %}hidden{% endif %}">
            <input type="hidden" name="period_id" id="paypal-period-id"
                   value="{{ selected_period.id if selected_period else '' }}">
            <button type="submit" class="w-full flex items-center justify-between px-5 py-4 rounded-2xl bg-[#0070ba] hover:bg-[#005ea6] text-white font-semibold transition-all shadow-lg shadow-blue-500/20 group" data-testid="btn-paypal">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
                        <i class="fab fa-paypal text-lg"></i>
                    </div>
                    <div class="text-left">
                        <div class="font-bold">{% trans %}Pay with PayPal{% endtrans %}</div>
                        <div class="text-xs text-blue-200">{% trans %}Redirect to PayPal checkout{% endtrans %}</div>
                    </div>
                </div>
                <i class="fa fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
            </button>
        </form>

        <div id="no-payment-msg" class="{% if has_stripe or has_paypal %}hidden{% endif %} rounded-2xl border border-yellow-200 dark:border-yellow-800 bg-yellow-50 dark:bg-yellow-900/20 p-5 text-center">
            <i class="fa fa-triangle-exclamation text-yellow-500 text-2xl mb-2 block"></i>
            <p class="text-sm text-yellow-700 dark:text-yellow-400 font-medium">{% trans %}Payment methods are not configured yet.{% endtrans %}</p>
            <p class="text-xs text-yellow-600 dark:text-yellow-500 mt-1">{% trans %}The admin needs to configure Stripe or PayPal. Your account has been created on the Free plan for now.{% endtrans %}</p>
        </div>
    </div>

    <div class="mt-6 text-center">
        <a href="{{ full_url('/checkout/skip') }}" class="text-sm text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-all" data-testid="link-skip-payment">
            {% trans %}Skip for now — use the Free plan{% endtrans %}
        </a>
    </div>

    <div class="mt-6 flex items-center justify-center gap-4 text-xs text-gray-400 dark:text-gray-500">
        <span><i class="fa fa-lock mr-1"></i>{% trans %}Secure{% endtrans %}</span>
        <span>·</span>
        <span><i class="fa fa-rotate-left mr-1"></i>{% trans %}Cancel anytime{% endtrans %}</span>
        <span>·</span>
        <span><i class="fa fa-shield-halved mr-1"></i>{% trans %}Encrypted{% endtrans %}</span>
    </div>
</div>

<script>
(function() {
    var periodsData = {{ periods_data | tojson }};
    var currentPeriodId = {{ selected_period.id if selected_period else 'null' }};

    function fmt(n) { return '$' + parseFloat(n).toFixed(2); }

    window.selectPeriod = function(periodId) {
        var pd = periodsData.find(function(p) { return p.id === periodId; });
        if (!pd) return;
        currentPeriodId = periodId;

        periodsData.forEach(function(p) {
            var btn = document.getElementById('period-btn-' + p.id);
            if (!btn) return;
            if (p.id === periodId) {
                btn.classList.add('border-indigo-500', 'bg-indigo-50', 'dark:bg-indigo-900/20');
                btn.classList.remove('border-gray-200', 'dark:border-gray-700', 'bg-white', 'dark:bg-gray-900', 'hover:border-indigo-300', 'dark:hover:border-indigo-600');
            } else {
                btn.classList.remove('border-indigo-500', 'bg-indigo-50', 'dark:bg-indigo-900/20');
                btn.classList.add('border-gray-200', 'dark:border-gray-700', 'bg-white', 'dark:bg-gray-900', 'hover:border-indigo-300', 'dark:hover:border-indigo-600');
            }
        });

        var perMonth = pd.pricing.per_month;
        var total = pd.pricing.total;
        var discount = pd.pricing.discount_amount;
        var months = pd.months;

        document.getElementById('summary-period-label').textContent = pd.label + ' billing';
        document.getElementById('summary-price').innerHTML = fmt(perMonth) + '<span class="text-sm font-normal text-gray-400">/mo</span>';

        var totalEl = document.getElementById('summary-total');
        if (months > 1) {
            totalEl.textContent = fmt(total) + ' billed every ' + months + ' months';
            totalEl.classList.remove('hidden');
        } else {
            totalEl.classList.add('hidden');
        }

        var discountRow = document.getElementById('summary-discount-row');
        if (discount > 0) {
            document.getElementById('summary-discount').textContent = '−' + fmt(discount);
            discountRow.classList.remove('hidden');
            discountRow.classList.add('flex');
        } else {
            discountRow.classList.add('hidden');
            discountRow.classList.remove('flex');
        }

        document.getElementById('stripe-period-id').value = periodId;
        document.getElementById('paypal-period-id').value = periodId;

        var stripeForm = document.getElementById('stripe-form');
        var paypalForm = document.getElementById('paypal-form');
        var noPayMsg = document.getElementById('no-payment-msg');

        if (pd.has_stripe) { stripeForm.classList.remove('hidden'); }
        else { stripeForm.classList.add('hidden'); }

        if (pd.has_paypal) { paypalForm.classList.remove('hidden'); }
        else { paypalForm.classList.add('hidden'); }

        var noneAvailable = !pd.has_stripe && !pd.has_paypal;
        if (noneAvailable) { noPayMsg.classList.remove('hidden'); }
        else { noPayMsg.classList.add('hidden'); }
    };

    if (currentPeriodId) { selectPeriod(currentPeriodId); }
})();
</script>
{% endblock %}