{% extends 'core/base.html' %}
{% load static %}

{% block title %}Feature Locked — SwiftPOS{% endblock %}
{% block topbar_title %}Feature Locked{% endblock %}

{% block extra_css %}
<style>
.upgrade-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.upgrade-card {
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 28px;
    padding: 3rem 2.5rem;
    max-width: 560px;
    width: 100%;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
}
.upgrade-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(116,75,162,0.3) 0%, transparent 70%);
}
.lock-icon-wrap {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f093fb, #f5576c);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 10px 30px rgba(240,93,198,0.3);
    animation: pulse-lock 2s ease-in-out infinite;
}
@keyframes pulse-lock {
    0%, 100% { box-shadow: 0 10px 30px rgba(240,93,198,0.3); transform: scale(1); }
    50% { box-shadow: 0 15px 40px rgba(240,93,198,0.5); transform: scale(1.04); }
}
.upgrade-title { color: #fff; font-weight: 700; font-size: 1.7rem; text-align: center; }
.upgrade-sub { color: rgba(255,255,255,0.65); text-align: center; font-size: 0.95rem; line-height: 1.7; }
.feature-badge {
    display: inline-block;
    background: rgba(116,75,162,0.25);
    border: 1px solid rgba(116,75,162,0.5);
    color: #c89eff;
    border-radius: 50px;
    padding: 0.35rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 1.2rem;
}
.plan-badge {
    display: inline-block;
    background: linear-gradient(90deg, #f093fb, #f5576c);
    color: #fff;
    border-radius: 50px;
    padding: 0.3rem 0.9rem;
    font-weight: 600;
    font-size: 0.8rem;
}
.plan-row {
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    margin: 1.2rem 0;
    border: 1px solid rgba(255,255,255,0.07);
}
.btn-upgrade {
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 0.9rem 2rem;
    font-weight: 700;
    font-size: 1rem;
    width: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transition: all 0.2s ease;
    box-shadow: 0 8px 24px rgba(37,211,102,0.3);
}
.btn-upgrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(37,211,102,0.4);
    color: #fff;
}
.btn-back {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 0.85rem;
    display: block;
    text-align: center;
    margin-top: 1rem;
    transition: color 0.2s;
}
.btn-back:hover { color: rgba(255,255,255,0.9); }
</style>
{% endblock %}

{% block content %}
<div class="upgrade-hero">
    <div class="upgrade-card text-center">
        <div class="lock-icon-wrap">
            <i class="fas fa-lock fa-2x text-white"></i>
        </div>

        <div class="mb-3">
            <span class="feature-badge">
                🔒 {{ feature_name|default:"This Feature" }}
            </span>
        </div>

        <h1 class="upgrade-title mb-2">Upgrade Required</h1>
        <p class="upgrade-sub mb-3">
            <strong>{{ feature_name|default:"This feature" }}</strong> is not available on your current plan.
            Upgrade to unlock it and get the most out of SwiftPOS.
        </p>

        <div class="plan-row d-flex align-items-center justify-content-between">
            <div class="text-start">
                <div class="small" style="color:rgba(255,255,255,0.5);">Required Plan</div>
                <div class="fw-bold text-white mt-1">{{ required_plan|default:"Standard" }} Plan</div>
            </div>
            <span class="plan-badge">{{ required_plan|default:"Standard" }}</span>
        </div>

        <a href="https://wa.me/2349164601810?text=Hi%2C+I+want+to+upgrade+my+SwiftPOS+plan+to+{{ required_plan|default:'Standard' }}+to+unlock+{{ feature_name|default:'a+feature' }}"
           target="_blank"
           class="btn-upgrade">
            <i class="fab fa-whatsapp fa-lg"></i>
            Upgrade via WhatsApp
        </a>

        <a href="javascript:history.back()" class="btn-back">
            <i class="fas fa-arrow-left me-1"></i> Go Back
        </a>
    </div>
</div>
{% endblock %}