{% extends "core/base.html" %}
{% load static %}
{% load currency_filters %}

{% block title %}Choose Your Plan — SwiftPOS{% endblock %}
{% block topbar_title %}Choose Plan{% endblock %}

{% block extra_css %}
<style>
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.plan-card {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.75rem;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.1); }
.plan-card.current { border-color: #10b981; background: #f0fdf4; }
.plan-card.recommended { border-color: #7c3aed; }

.plan-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    color: #fff;
    font-size: 0.68rem; font-weight: 700;
    padding: 0.25rem 0.9rem;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.04em;
}
.current-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: #10b981;
    color: #fff;
    font-size: 0.68rem; font-weight: 700;
    padding: 0.25rem 0.9rem;
    border-radius: 20px;
    white-space: nowrap;
}

.plan-name { font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: 0.4rem; }
.plan-price { font-size: 2rem; font-weight: 900; color: #0f172a; }
.plan-price .sym { font-size: 1.1rem; vertical-align: top; margin-top: 0.4rem; display: inline-block; }
.plan-price .per { font-size: 0.78rem; color: #64748b; font-weight: 500; }

.plan-features-list { list-style: none; margin: 1rem 0 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.plan-features-list li { font-size: 0.8rem; display: flex; align-items: center; gap: 0.5rem; }
.feat-on { color: #10b981; }
.feat-off { color: #cbd5e1; }
.feat-off-label { color: #94a3b8; }

.btn-choose {
    display: block; width: 100%;
    padding: 0.75rem; border-radius: 12px;
    font-size: 0.88rem; font-weight: 700; text-align: center;
    text-decoration: none; border: none; cursor: pointer;
    font-family: inherit; transition: all 0.2s;
}
.btn-choose-primary {
    background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff;
}
.btn-choose-primary:hover { opacity: 0.9; color: #fff; }
.btn-choose-success {
    background: linear-gradient(135deg, #059669, #10b981); color: #fff;
}
.btn-choose-success:hover { opacity: 0.9; color: #fff; }
.btn-choose-outline {
    background: transparent; border: 1.5px solid #e2e8f0; color: #0f172a;
}
.btn-choose-outline:hover { border-color: #7c3aed; color: #7c3aed; }
.btn-choose-down {
    background: #f1f5f9; color: #64748b; border: 1.5px solid #e2e8f0;
}

.trial-warning {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
    border-radius: 14px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.trial-warning .icon { font-size: 1.8rem; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-3">

    <!-- Trial/Expiry Banner -->
    {% if current_sub %}
    {% if current_sub.is_trial %}
    <div class="trial-warning">
        <div class="icon">⏳</div>
        <div>
            <strong>Trial Active</strong> — Your free trial expires in <strong>{{ current_sub.days_remaining }} day{{ current_sub.days_remaining|pluralize }}</strong>
            ({{ current_sub.expiry_date|date:"d M Y" }}).
            Choose a plan to continue using SwiftPOS.
        </div>
    </div>
    {% elif current_sub.is_expired %}
    <div class="trial-warning" style="background: linear-gradient(135deg,#fee2e2,#fecaca); border-color: #ef4444;">
        <div class="icon">🔴</div>
        <div>
            <strong>Subscription Expired</strong> — Your {{ current_sub.plan.name }} plan expired on {{ current_sub.expiry_date|date:"d M Y" }}.
            Please renew to restore full access.
        </div>
    </div>
    {% endif %}
    {% endif %}

    <h1 class="fw-bold fs-4 mb-1">Choose Your Plan</h1>
    <p class="text-muted mb-4" style="font-size:.9rem;">Select the plan that fits your business. All prices in Nigerian Naira.</p>

    <!-- Cycle selector -->
    <div class="d-flex gap-2 mb-4 flex-wrap" id="cycleSelector">
        {% for cycle_key, cycle_label in cycle_choices|default:"" %}{% endfor %}
        <button class="btn btn-sm btn-primary cycle-btn" data-cycle="monthly">Monthly</button>
        <button class="btn btn-sm btn-outline-secondary cycle-btn" data-cycle="bimonthly">2 Months</button>
        <button class="btn btn-sm btn-outline-secondary cycle-btn" data-cycle="trimonthly">3 Months</button>
        <button class="btn btn-sm btn-outline-secondary cycle-btn" data-cycle="yearly">Yearly</button>
    </div>

    <div class="plan-grid">
        {% for plan in plans %}
        <div class="plan-card {% if current_sub and current_sub.plan_id == plan.id %}current{% elif forloop.counter == 2 %}recommended{% endif %}">
            {% if current_sub and current_sub.plan_id == plan.id %}
            <div class="current-badge">✓ Current Plan</div>
            {% elif forloop.counter == 2 %}
            <div class="plan-badge">⭐ Recommended</div>
            {% endif %}

            <div class="plan-name">{{ plan.name }}</div>
            <div class="plan-price"
                 data-plan="{{ plan.id }}"
                 data-monthly="{{ plan.price_monthly }}"
                 data-bimonthly="{{ plan.price_bimonthly }}"
                 data-trimonthly="{{ plan.price_trimonthly }}"
                 data-yearly="{{ plan.price_yearly }}">
                <span class="sym">₦</span><span class="amount">{{ plan.price_monthly|currency:0 }}</span>
                <span class="per">/month</span>
            </div>

            <ul class="plan-features-list">
                {% if plan.max_orders_per_day %}<li><i class="fas fa-check feat-on"></i> {{ plan.max_orders_per_day }} orders/day</li>
                {% else %}<li><i class="fas fa-check feat-on"></i> Unlimited orders</li>{% endif %}
                {% if plan.max_products %}<li><i class="fas fa-check feat-on"></i> {{ plan.max_products }} products</li>
                {% else %}<li><i class="fas fa-check feat-on"></i> Unlimited products</li>{% endif %}
                {% if plan.feature_barcode_pos %}<li><i class="fas fa-check feat-on"></i> Barcode POS{% else %}<li><i class="fas fa-times feat-off"></i> <span class="feat-off-label">Barcode POS</span>{% endif %}</li>
                {% if plan.feature_profit_loss %}<li><i class="fas fa-check feat-on"></i> P&amp;L Reports{% else %}<li><i class="fas fa-times feat-off"></i> <span class="feat-off-label">P&amp;L Reports</span>{% endif %}</li>
                {% if plan.feature_audit_logs %}<li><i class="fas fa-check feat-on"></i> Audit Logs{% else %}<li><i class="fas fa-times feat-off"></i> <span class="feat-off-label">Audit Logs</span>{% endif %}</li>
                {% if plan.feature_multi_branch %}<li><i class="fas fa-check feat-on"></i> Multi-Branch{% else %}<li><i class="fas fa-times feat-off"></i> <span class="feat-off-label">Multi-Branch</span>{% endif %}</li>
            </ul>

            {% if current_sub and current_sub.plan_id == plan.id and plan.price_monthly == 0 %}
                <button disabled title="You are currently on a free trial" class="btn-choose btn-choose-outline" style="cursor: not-allowed; opacity: 0.6;">
                    <i class="fas fa-check"></i> Active Free Trial
                </button>
            {% else %}
                <a href="{% url 'subscriptions:checkout' plan.id %}" class="btn-choose
                    {% if current_sub and current_sub.plan_id == plan.id %}btn-choose-outline
                    {% elif current_sub and plan.price_monthly > current_sub.plan.price_monthly %}btn-choose-success
                    {% elif current_sub and plan.price_monthly < current_sub.plan.price_monthly %}btn-choose-down
                    {% else %}btn-choose-primary{% endif %}">

                    {% if current_sub and current_sub.plan_id == plan.id %}
                        <i class="fas fa-redo"></i> Renew Plan
                    {% elif current_sub and plan.price_monthly > current_sub.plan.price_monthly %}
                        <i class="fas fa-arrow-up"></i> Upgrade Now
                    {% elif current_sub and plan.price_monthly < current_sub.plan.price_monthly %}
                        <i class="fas fa-arrow-down"></i> Downgrade
                    {% else %}
                        <i class="fas fa-bolt"></i> Get Started
                    {% endif %}
                </a>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <p class="text-center text-muted mt-4" style="font-size:.8rem;">
        <i class="fab fa-whatsapp text-success"></i>
        Need help choosing? <a href="https://wa.me/{% if whatsapp_number %}{{ whatsapp_number }}{% endif %}" target="_blank">Chat with us on WhatsApp</a>
    </p>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
    const priceData = {};
    document.querySelectorAll('.plan-price[data-plan]').forEach(el => {
        priceData[el.dataset.plan] = {
            monthly: parseFloat(el.dataset.monthly) || 0,
            bimonthly: parseFloat(el.dataset.bimonthly) || 0,
            trimonthly: parseFloat(el.dataset.trimonthly) || 0,
            yearly: parseFloat(el.dataset.yearly) || 0,
        };
    });
    const cycleLabels = { monthly:'/month', bimonthly:'/2 mo', trimonthly:'/3 mo', yearly:'/year' };

    function fmt(n) {
        return n.toLocaleString('en-NG', {minimumFractionDigits:0, maximumFractionDigits:0});
    }

    document.querySelectorAll('.cycle-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            const cycle = this.dataset.cycle;
            document.querySelectorAll('.cycle-btn').forEach(b => {
                b.classList.toggle('btn-primary', b === this);
                b.classList.toggle('btn-outline-secondary', b !== this);
            });
            document.querySelectorAll('.plan-price[data-plan]').forEach(el => {
                const d = priceData[el.dataset.plan];
                const p = d[cycle] || d.monthly;
                el.querySelector('.amount').textContent = fmt(p);
                el.querySelector('.per').textContent = cycleLabels[cycle];
            });
        });
    });
})();
</script>
{% endblock %}