{% extends "base.html" %}
{% block title %}{% trans %}Create Account – OnlineConvert{% endtrans %}{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 py-10">
    <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white" data-testid="heading-register">{% trans %}Create Your Account{% endtrans %}</h1>
        <p class="mt-2 text-gray-500 dark:text-gray-400">{% trans %}Choose a plan and get started for free — upgrade anytime{% endtrans %}</p>
    </div>

    {% if errors %}
    <div class="mb-6 px-4 py-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 space-y-1" data-testid="text-register-errors">
        {% for e in errors %}
        <div class="text-sm text-red-700 dark:text-red-400"><i class="fa fa-exclamation-circle mr-1"></i> {{ e }}</div>
        {% endfor %}
    </div>
    {% endif %}

    <form method="POST" action="{{ full_url('/register') }}" id="register-form">
        <input type="hidden" name="preferred_months" id="preferred-months" value="{{ preferred_months or 1 }}">

        <!-- Step 1: Plan Selection -->
        <div class="mb-8">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 flex items-center gap-2">
                    <span class="w-7 h-7 rounded-full bg-primary text-white text-sm flex items-center justify-center font-bold">1</span>
                    {% trans %}Choose Your Plan{% endtrans %}
                </h2>
                <!-- Billing Period Toggle -->
                <div class="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded-xl p-1 self-start sm:self-auto" data-testid="billing-toggle">
                    <button type="button" id="toggle-monthly"
                        onclick="setBillingPeriod(1)"
                        class="px-4 py-1.5 rounded-lg text-sm font-semibold transition-all {% if (preferred_months or 1) == 1 %}bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm{% else %}text-gray-500 dark:text-gray-400{% endif %}"
                        data-testid="btn-billing-monthly">
                        {% trans %}Monthly{% endtrans %}
                    </button>
                    <button type="button" id="toggle-yearly"
                        onclick="setBillingPeriod(12)"
                        class="px-4 py-1.5 rounded-lg text-sm font-semibold transition-all flex items-center gap-1.5 {% if (preferred_months or 1) == 12 %}bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm{% else %}text-gray-500 dark:text-gray-400{% endif %}"
                        data-testid="btn-billing-yearly">
                        {% trans %}Yearly{% endtrans %}
                        <span id="yearly-badge" class="px-1.5 py-0.5 rounded-md bg-green-500 text-white text-xs font-bold leading-none">
                            {% trans %}Save{% endtrans %}&nbsp;{% trans %}up to{% endtrans %}&nbsp;<span id="yearly-max-discount">20</span>%
                        </span>
                    </button>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                {% for plan in plans %}
                {% set plan_periods = plan_periods_map.get(plan.id, []) %}
                {% set yearly_period = plan_periods | selectattr('months', 'equalto', 12) | first %}
                <label class="plan-card relative flex flex-col cursor-pointer rounded-2xl border-2 transition-all duration-200
                    {% if (selected_plan_id and plan.id == selected_plan_id) or (not selected_plan_id and plan.price_monthly == 0) %}
                        border-primary dark:border-primary-light bg-primary/5 dark:bg-primary/10 ring-2 ring-primary/30
                    {% else %}
                        border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-primary/50 dark:hover:border-primary-light/50
                    {% endif %}"
                    data-testid="card-plan-{{ plan.id }}"
                    data-plan-id="{{ plan.id }}"
                    data-monthly-price="{{ plan.price_monthly }}"
                    data-yearly-discount="{{ yearly_period.discount_percent if yearly_period else 0 }}"
                    for="plan_{{ plan.id }}">
                    <input type="radio" id="plan_{{ plan.id }}" name="plan_id" value="{{ plan.id }}" class="sr-only plan-radio"
                        {% if (selected_plan_id and plan.id == selected_plan_id) or (not selected_plan_id and plan.price_monthly == 0) %}checked{% endif %}
                        data-testid="radio-plan-{{ plan.id }}">

                    {% if plan.price_monthly > 0 and loop.index == 2 %}
                    <div class="absolute -top-3 left-1/2 -translate-x-1/2">
                        <span class="px-3 py-0.5 rounded-full bg-primary text-white text-xs font-bold">{% trans %}Popular{% endtrans %}</span>
                    </div>
                    {% endif %}

                    <div class="p-5 flex-1">
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center gap-2">
                                <div class="w-8 h-8 rounded-full flex items-center justify-center
                                    {% if plan.price_monthly == 0 %}bg-gray-100 dark:bg-gray-800
                                    {% elif plan.price_monthly < 15 %}bg-blue-100 dark:bg-blue-900/40
                                    {% else %}bg-yellow-100 dark:bg-yellow-900/40{% endif %}">
                                    <i class="fa fa-{% if plan.price_monthly == 0 %}user{% elif plan.price_monthly < 15 %}star{% else %}crown{% endif %}
                                        text-{% if plan.price_monthly == 0 %}gray-500{% elif plan.price_monthly < 15 %}blue-500{% else %}yellow-500{% endif %} text-sm"></i>
                                </div>
                                <span class="font-bold text-gray-900 dark:text-white">{{ plan.name }}</span>
                            </div>
                            <div class="w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600 plan-check flex items-center justify-center
                                {% if (selected_plan_id and plan.id == selected_plan_id) or (not selected_plan_id and plan.price_monthly == 0) %}
                                    border-primary dark:border-primary-light bg-primary dark:bg-primary-light
                                {% endif %}">
                                <i class="fa fa-check text-white text-xs {% if not ((selected_plan_id and plan.id == selected_plan_id) or (not selected_plan_id and plan.price_monthly == 0)) %}hidden{% endif %}"></i>
                            </div>
                        </div>

                        <div class="mb-1">
                            {% if plan.price_monthly == 0 %}
                            <span class="text-2xl font-bold text-gray-900 dark:text-white">{% trans %}Free{% endtrans %}</span>
                            {% else %}
                            <span class="text-2xl font-bold text-gray-900 dark:text-white plan-price" data-monthly="{{ plan.price_monthly }}" data-discount="{{ yearly_period.discount_percent if yearly_period else 0 }}">
                                ${{ "%.2f"|format(plan.price_monthly) }}
                            </span>
                            <span class="text-sm text-gray-400">{% trans %}/month{% endtrans %}</span>
                            {% endif %}
                        </div>
                        {% if plan.price_monthly > 0 %}
                        <div class="mb-3 text-xs text-green-600 dark:text-green-400 font-medium plan-yearly-note" style="display:none">
                            {% trans %}Billed ${% endtrans %}<span class="plan-yearly-total"></span>{% trans pct=(yearly_period.discount_percent|int if yearly_period else 20) %}/year · Save {{ pct }}%{% endtrans %}
                        </div>
                        {% else %}
                        <div class="mb-3"></div>
                        {% endif %}

                        <ul class="space-y-2 text-sm">
                            <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                                <i class="fa fa-check text-green-500 w-4 flex-shrink-0"></i>
                                {% if plan.max_files_per_day == -1 %}{% trans %}Unlimited{% endtrans %}{% else %}{{ plan.max_files_per_day }}{% endif %} {% trans %}files/day{% endtrans %}
                            </li>
                            <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                                <i class="fa fa-check text-green-500 w-4 flex-shrink-0"></i>
                                {% if plan.max_file_size_mb == -1 %}{% trans %}Up to unlimited per file{% endtrans %}{% else %}{% trans size=plan.max_file_size_mb|string + ' MB' %}Up to {{ size }} per file{% endtrans %}{% endif %}
                            </li>
                            <li class="flex items-center gap-2 {% if plan.auto_delete_hours == 0 %}text-gray-600 dark:text-gray-400{% else %}text-gray-500 dark:text-gray-500{% endif %}">
                                {% if plan.auto_delete_hours == 0 %}
                                <i class="fa fa-check text-green-500 w-4 flex-shrink-0"></i>
                                {% trans %}Files kept permanently{% endtrans %}
                                {% else %}
                                <i class="fa fa-clock text-yellow-500 w-4 flex-shrink-0"></i>
                                {% trans h=plan.auto_delete_hours %}Files deleted after {{ h }}h{% endtrans %}
                                {% endif %}
                            </li>
                            <li class="flex items-center gap-2 {% if plan.price_monthly > 0 %}text-green-600 dark:text-green-400 font-medium{% else %}text-gray-500 dark:text-gray-500{% endif %}">
                                {% if plan.price_monthly > 0 %}
                                <i class="fa fa-ban text-green-600 w-4 flex-shrink-0"></i>
                                {% trans %}No ads{% endtrans %}
                                {% else %}
                                <i class="fa fa-rectangle-ad text-gray-400 w-4 flex-shrink-0"></i>
                                {% trans %}Includes ads{% endtrans %}
                                {% endif %}
                            </li>
                        </ul>
                    </div>
                </label>
                {% endfor %}
            </div>
        </div>

        <!-- Step 2: Account Details -->
        <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-6">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-5 flex items-center gap-2">
                <span class="w-7 h-7 rounded-full bg-primary text-white text-sm flex items-center justify-center font-bold">2</span>
                {% trans %}Your Details{% endtrans %}
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="input-username">{% trans %}Username{% endtrans %}</label>
                    <input type="text" id="input-username" name="username" value="{{ username or '' }}" required minlength="3" autocomplete="username"
                        class="w-full px-4 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all text-sm"
                        placeholder="{% trans %}At least 3 characters{% endtrans %}" data-testid="input-username">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="input-email">{% trans %}Email Address{% endtrans %}</label>
                    <input type="email" id="input-email" name="email" value="{{ email or '' }}" required autocomplete="email"
                        class="w-full px-4 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all text-sm"
                        placeholder="{% trans %}you@example.com{% endtrans %}" data-testid="input-email">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="input-password">{% trans %}Password{% endtrans %}</label>
                    <input type="password" id="input-password" name="password" required minlength="8" autocomplete="new-password"
                        class="w-full px-4 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all text-sm"
                        placeholder="{% trans %}Min 8 chars, uppercase, number, symbol{% endtrans %}" data-testid="input-password">
                    <div id="pw-strength-bar" class="mt-2 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden hidden">
                        <div id="pw-strength-fill" class="h-full rounded-full transition-all duration-300" style="width:0%"></div>
                    </div>
                    <div id="pw-strength-label" class="mt-1 text-xs text-gray-400 hidden"></div>
                    <ul id="pw-requirements" class="mt-2 space-y-0.5 hidden">
                        <li id="req-len"  class="text-xs flex items-center gap-1.5 text-gray-400"><i class="fa fa-circle text-[8px]"></i> {% trans %}At least 8 characters{% endtrans %}</li>
                        <li id="req-upper" class="text-xs flex items-center gap-1.5 text-gray-400"><i class="fa fa-circle text-[8px]"></i> {% trans %}Uppercase letter{% endtrans %}</li>
                        <li id="req-lower" class="text-xs flex items-center gap-1.5 text-gray-400"><i class="fa fa-circle text-[8px]"></i> {% trans %}Lowercase letter{% endtrans %}</li>
                        <li id="req-num"  class="text-xs flex items-center gap-1.5 text-gray-400"><i class="fa fa-circle text-[8px]"></i> {% trans %}Number{% endtrans %}</li>
                        <li id="req-sym"  class="text-xs flex items-center gap-1.5 text-gray-400"><i class="fa fa-circle text-[8px]"></i> {% trans %}Special character{% endtrans %}</li>
                    </ul>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="input-confirm">{% trans %}Confirm Password{% endtrans %}</label>
                    <input type="password" id="input-confirm" name="confirm_password" required autocomplete="new-password"
                        class="w-full px-4 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all text-sm"
                        placeholder="{% trans %}Repeat password{% endtrans %}" data-testid="input-confirm-password">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="input-country">{% trans %}Country{% endtrans %} <span class="text-xs text-gray-400 font-normal">({% trans %}optional{% endtrans %})</span></label>
                    <input type="text" id="input-country" name="country" autocomplete="country-name"
                        class="w-full px-4 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all text-sm"
                        placeholder="{% trans %}Your country{% endtrans %}"
                        data-testid="input-country">
                </div>
            </div>

            <!-- Google Sign-Up -->
            <div class="mt-4 mb-2">
                <div class="flex items-center gap-3 mb-4">
                    <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
                    <span class="text-xs text-gray-400 dark:text-gray-500">{% trans %}or continue with{% endtrans %}</span>
                    <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
                </div>
                <div class="flex flex-col gap-2 mb-5">
               {% if site_settings is defined and site_settings.get('google_client_id') %}
                <a href="{{ full_url('/auth/google') }}" class="flex items-center justify-center gap-3 w-full py-2.5 px-4 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition-all" data-testid="btn-google-register">
                    <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9.1 3.2l6.8-6.8C35.8 2.4 30.2 0 24 0 14.7 0 6.7 5.4 2.7 13.3l7.9 6.1C12.5 13.1 17.8 9.5 24 9.5z"/><path fill="#4285F4" d="M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v8.5h12.7c-.6 3-2.3 5.5-4.8 7.2l7.6 5.9c4.4-4.1 7-10.2 7-17.1z"/><path fill="#FBBC05" d="M10.6 28.6A14.6 14.6 0 0 1 9.5 24c0-1.6.3-3.1.7-4.6l-7.9-6.1A23.9 23.9 0 0 0 0 24c0 3.9.9 7.5 2.7 10.7l7.9-6.1z"/><path fill="#34A853" d="M24 48c6.2 0 11.4-2 15.2-5.5l-7.6-5.9c-2 1.4-4.6 2.2-7.6 2.2-6.2 0-11.5-4.2-13.4-9.9l-7.9 6.1C6.7 42.6 14.7 48 24 48z"/></svg>
                    {% trans %}Sign up with Google{% endtrans %}
                </a>
                  {% endif %}
               {% if site_settings is defined and site_settings.get('microsoft_client_id') %}
                <a href="{{ full_url('/auth/microsoft') }}" class="flex items-center justify-center gap-3 w-full py-2.5 px-4 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition-all" data-testid="btn-microsoft-register">
                    <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>
                    {% trans %}Sign up with Microsoft{% endtrans %}
                </a>
                       {% endif %}
               {% if site_settings is defined and site_settings.get('apple_client_id') %}
                <a href="{{ full_url('/auth/apple') }}" class="flex items-center justify-center gap-3 w-full py-2.5 px-4 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-900 dark:bg-black text-white text-sm font-medium hover:bg-black dark:hover:bg-gray-900 transition-all" data-testid="btn-apple-register">
                    <svg class="w-5 h-5 flex-shrink-0 fill-current" viewBox="0 0 814 1000" xmlns="http://www.w3.org/2000/svg"><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76 0-103.7 40.8-165.9 40.8s-105-57.8-155.5-127.4C46 376.6 0 312 0 259C0 201 39.2 168.4 52.4 148c18-26.5 49.5-44 80.8-44 44 0 78 25.7 105.5 25.7C266.1 129.7 299.7 102 355 102c16.2 0 62.2 1.3 95.1 40.8c-18.7 18-95.8 61.1-95.8 165.6 0 121.4 100.6 161.2 109.4 164.4l-.1 3.2z"/></svg>
                    {% trans %}Sign up with Apple{% endtrans %}
                </a>
                       {% endif %}
            </div> </div>

            <!-- Promo Code -->
            <div class="mt-5">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="input-promo">
                    {% trans %}Promo Code{% endtrans %} <span class="text-xs text-gray-400 font-normal">({% trans %}optional{% endtrans %})</span>
                </label>
                <div class="flex gap-2">
                    <input type="text" id="input-promo" name="promo_code" value="{{ promo_code or '' }}"
                        class="flex-1 px-4 py-2.5 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/30"
                        placeholder="{% trans %}Enter promo code{% endtrans %}" data-testid="input-promo-code">
                    <button type="button" id="btn-validate-promo"
                        class="px-4 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 text-sm font-semibold text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all"
                        data-testid="btn-validate-promo">{% trans %}Apply{% endtrans %}</button>
                </div>
                <div id="promo-feedback" class="mt-1.5 text-xs hidden"></div>
            </div>

            <div class="mt-6 flex flex-col sm:flex-row sm:items-center gap-4">
                <button type="submit" class="px-8 py-3 rounded-xl bg-primary hover:bg-primary/90 text-white font-semibold text-sm transition-all" data-testid="btn-register">
                    <i class="fa fa-user-plus mr-2"></i>{% trans %}Create Account{% endtrans %}
                </button>
                <span class="text-sm text-gray-500 dark:text-gray-400">
                    {% trans %}Already have an account?{% endtrans %} <a href="{{ full_url('/login') }}" class="text-primary dark:text-primary-light font-medium hover:underline" data-testid="link-to-login">{% trans %}Sign in{% endtrans %}</a>
                </span>
            </div>
        </div>
    </form>
</div>

<script>
// Password strength meter
(function() {
    var pwInput = document.getElementById('input-password');
    if (!pwInput) return;
    var bar = document.getElementById('pw-strength-bar');
    var fill = document.getElementById('pw-strength-fill');
    var label = document.getElementById('pw-strength-label');
    var reqs = document.getElementById('pw-requirements');
    var reqLen = document.getElementById('req-len');
    var reqUpper = document.getElementById('req-upper');
    var reqLower = document.getElementById('req-lower');
    var reqNum = document.getElementById('req-num');
    var reqSym = document.getElementById('req-sym');
    var levels = [
        {pct:'20%', color:'#ef4444', text:'Very Weak'},
        {pct:'40%', color:'#f97316', text:'Weak'},
        {pct:'60%', color:'#eab308', text:'Fair'},
        {pct:'80%', color:'#22c55e', text:'Strong'},
        {pct:'100%',color:'#16a34a', text:'Very Strong'}
    ];
    function setReq(el, ok) {
        var icon = el.querySelector('i');
        if (ok) {
            el.classList.remove('text-gray-400'); el.classList.add('text-green-500');
            if (icon) { icon.className = 'fa fa-check-circle text-[8px]'; }
        } else {
            el.classList.add('text-gray-400'); el.classList.remove('text-green-500');
            if (icon) { icon.className = 'fa fa-circle text-[8px]'; }
        }
    }
    pwInput.addEventListener('focus', function() {
        bar.classList.remove('hidden'); label.classList.remove('hidden'); reqs.classList.remove('hidden');
    });
    pwInput.addEventListener('input', function() {
        var v = this.value;
        var checks = [v.length >= 8, /[A-Z]/.test(v), /[a-z]/.test(v), /[0-9]/.test(v), /[^A-Za-z0-9]/.test(v)];
        var score = checks.filter(Boolean).length;
        setReq(reqLen, checks[0]); setReq(reqUpper, checks[1]); setReq(reqLower, checks[2]);
        setReq(reqNum, checks[3]); setReq(reqSym, checks[4]);
        if (v.length === 0) { fill.style.width = '0%'; label.textContent = ''; return; }
        var lvl = levels[Math.max(0, score - 1)];
        fill.style.width = lvl.pct; fill.style.background = lvl.color;
        label.textContent = lvl.text; label.style.color = lvl.color;
    });
})();

(function() {
    var currentMonths = parseInt(document.getElementById('preferred-months').value) || 1;

    function selectCard(card) {
        document.querySelectorAll('.plan-card').forEach(function(c) {
            c.classList.remove('border-primary', 'dark:border-primary-light', 'bg-primary/5', 'dark:bg-primary/10', 'ring-2', 'ring-primary/30');
            c.classList.add('border-gray-200', 'dark:border-gray-700');
            var check = c.querySelector('.plan-check');
            if (check) {
                check.classList.remove('border-primary', 'dark:border-primary-light', 'bg-primary', 'dark:bg-primary-light');
                check.classList.add('border-gray-300', 'dark:border-gray-600');
                var icon = check.querySelector('i');
                if (icon) icon.classList.add('hidden');
            }
        });
        card.classList.add('border-primary', 'dark:border-primary-light', 'bg-primary/5', 'dark:bg-primary/10', 'ring-2', 'ring-primary/30');
        card.classList.remove('border-gray-200', 'dark:border-gray-700');
        var check = card.querySelector('.plan-check');
        if (check) {
            check.classList.add('border-primary', 'dark:border-primary-light', 'bg-primary', 'dark:bg-primary-light');
            check.classList.remove('border-gray-300', 'dark:border-gray-600');
            var icon = check.querySelector('i');
            if (icon) icon.classList.remove('hidden');
        }
        var radio = card.querySelector('.plan-radio');
        if (radio) radio.checked = true;
    }

    document.querySelectorAll('.plan-card').forEach(function(card) {
        card.addEventListener('click', function() { selectCard(card); });
    });

    window.setBillingPeriod = function(months) {
        currentMonths = months;
        document.getElementById('preferred-months').value = months;

        var btnMonthly = document.getElementById('toggle-monthly');
        var btnYearly = document.getElementById('toggle-yearly');
        var activeClass = ['bg-white', 'dark:bg-gray-700', 'text-gray-900', 'dark:text-white', 'shadow-sm'];
        var inactiveClass = ['text-gray-500', 'dark:text-gray-400'];

        if (months === 1) {
            activeClass.forEach(function(c) { btnMonthly.classList.add(c); });
            inactiveClass.forEach(function(c) { btnMonthly.classList.remove(c); });
            inactiveClass.forEach(function(c) { btnYearly.classList.add(c); });
            activeClass.forEach(function(c) { btnYearly.classList.remove(c); });
        } else {
            activeClass.forEach(function(c) { btnYearly.classList.add(c); });
            inactiveClass.forEach(function(c) { btnYearly.classList.remove(c); });
            inactiveClass.forEach(function(c) { btnMonthly.classList.add(c); });
            activeClass.forEach(function(c) { btnMonthly.classList.remove(c); });
        }

        document.querySelectorAll('.plan-price').forEach(function(el) {
            var monthly = parseFloat(el.getAttribute('data-monthly')) || 0;
            var discount = parseFloat(el.getAttribute('data-discount')) || 0;
            var noteEl = el.closest('.plan-card').querySelector('.plan-yearly-note');
            var totalSpan = noteEl ? noteEl.querySelector('.plan-yearly-total') : null;

            if (months === 12 && monthly > 0) {
                var yearlyTotal = Math.round(monthly * 12 * (1 - discount / 100) * 100) / 100;
                var perMonth = Math.round(yearlyTotal / 12 * 100) / 100;
                el.textContent = '$' + perMonth.toFixed(2);
                if (totalSpan) totalSpan.textContent = yearlyTotal.toFixed(2);
                if (noteEl) noteEl.style.display = '';
            } else {
                el.textContent = '$' + monthly.toFixed(2);
                if (noteEl) noteEl.style.display = 'none';
            }
        });
    };

    if (currentMonths !== 1) { setBillingPeriod(currentMonths); }
})();

// Promo code validation
document.getElementById('btn-validate-promo') && document.getElementById('btn-validate-promo').addEventListener('click', function() {
    var code = (document.getElementById('input-promo').value || '').trim();
    var fb = document.getElementById('promo-feedback');
    if (!code) { fb.className = 'mt-1.5 text-xs text-yellow-600 dark:text-yellow-400'; fb.textContent = 'Please enter a promo code.'; fb.classList.remove('hidden'); return; }
    this.disabled = true;
    this.textContent = '...';
    var self = this;
    fetch('/admin/promo-codes/validate', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({code: code})
    }).then(function(r){ return r.json(); }).then(function(d) {
        fb.classList.remove('hidden');
        if (d.valid) {
            fb.className = 'mt-1.5 text-xs text-green-600 dark:text-green-400';
            fb.innerHTML = '<i class="fa fa-check-circle mr-1"></i>' + d.discount_percent + '% discount applied' + (d.discount_type === 'first_time' ? ' (first payment)' : ' (every payment)');
        } else {
            fb.className = 'mt-1.5 text-xs text-red-600 dark:text-red-400';
            fb.innerHTML = '<i class="fa fa-times-circle mr-1"></i>' + (d.error || 'Invalid code');
        }
        self.disabled = false;
        self.textContent = 'Apply';
    }).catch(function() { self.disabled = false; self.textContent = 'Apply'; });
});
</script>
{% endblock %}