{% extends "core/base.html" %}
{% load currency_filters %}
{% block title %}Subscription — SwiftPOS{% endblock %}
{% block topbar_title %}My Subscription{% endblock %}

{% block extra_css %}
<style>
.sub-hero {
    background: linear-gradient(135deg, #4c1d95, #7c3aed);
    border-radius: 18px; padding: 1.75rem 2rem; color: #fff;
    margin-bottom: 1.5rem;
}
.sub-hero h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.25rem; }
.sub-hero .badge-plan {
    display: inline-block; background: rgba(255,255,255,0.2);
    padding: 0.25rem 0.75rem; border-radius: 8px;
    font-size: 0.78rem; font-weight: 700; margin-bottom: 0.75rem;
}
.expiry-bar {
    background: rgba(255,255,255,0.15);
    border-radius: 10px; padding: 0.75rem 1rem;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem;
}
.expiry-bar .days-left { font-size: 1.5rem; font-weight: 900; }
.expiry-bar .expiry-label { font-size: 0.78rem; opacity: 0.85; }

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem; margin-bottom: 1.5rem;
}
.info-card {
    background: #fff; border-radius: 14px; padding: 1.25rem;
    border: 1px solid #e2e8f0;
}
.info-card .label { font-size: 0.72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
.info-card .value { font-size: 1.1rem; font-weight: 800; color: #0f172a; }

.feature-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.5rem; margin: 1rem 0;
}
.feature-pill {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; border-radius: 10px;
    font-size: 0.8rem; font-weight: 600;
}
.feat-enabled { background: #d1fae5; color: #065f46; }
.feat-disabled { background: #f1f5f9; color: #94a3b8; }

.txn-table th { font-size: 0.72rem; text-transform: uppercase; color: #94a3b8; font-weight: 700; letter-spacing: 0.05em; }
.txn-table td { font-size: 0.83rem; vertical-align: middle; }

.status-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.72rem; font-weight: 700; }
.status-paid { background: #d1fae5; color: #065f46; }
.status-pending { background: #fef3c7; color: #92400e; }
.status-failed { background: #fee2e2; color: #991b1b; }
.status-trial { background: #dbeafe; color: #1e40af; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-3" style="max-width: 900px;">

{% if current_sub %}
<div class="sub-hero">
    <div class="badge-plan"><i class="fas fa-star me-1"></i>{{ current_sub.plan.name }}</div>
    <h2>Your Subscription</h2>
    <div class="expiry-bar">
        <div>
            <div class="expiry-label">{{ current_sub.is_trial|yesno:"Free Trial,Active Plan" }}</div>
            {% if current_sub.is_expired %}
            <div class="days-left" style="color:#fca5a5;">Expired!</div>
            {% else %}
            <div class="days-left">{{ current_sub.days_remaining }} days left</div>
            {% endif %}
        </div>
        <div style="text-align:right;">
            <div class="expiry-label">Expires on</div>
            <div style="font-weight:700;">{{ current_sub.expiry_date|date:"d M Y" }}</div>
        </div>
    </div>
    {% if current_sub.pending_downgrade_plan %}
    <div style="margin-top:.75rem;font-size:.8rem;background:rgba(255,255,255,.15);border-radius:8px;padding:.5rem .75rem;">
        <i class="fas fa-arrow-down me-1"></i>
        Downgrade to <strong>{{ current_sub.pending_downgrade_plan.name }}</strong> scheduled at end of cycle.
    </div>
    {% endif %}
</div>

<div class="info-grid">
    <div class="info-card">
        <div class="label">Billing Cycle</div>
        <div class="value">{{ current_sub.get_billing_cycle_display }}</div>
    </div>
    <div class="info-card">
        <div class="label">Status</div>
        <div class="value">
            {% if current_sub.is_expired %}<span style="color:#ef4444;">Expired</span>
            {% elif current_sub.is_trial %}<span style="color:#3b82f6;">Trial</span>
            {% else %}<span style="color:#10b981;">Active</span>{% endif %}
        </div>
    </div>
    <div class="info-card">
        <div class="label">Start Date</div>
        <div class="value">{{ current_sub.start_date|date:"d M Y" }}</div>
    </div>
    <div class="info-card">
        <div class="label">Plan Price</div>
        <div class="value">₦{% fmt_currency current_sub.plan.price_monthly 0 %}/mo</div>
    </div>
</div>

<!-- Features -->
<h5 class="fw-bold mb-2">Plan Features</h5>
<div class="feature-grid">
    {% with plan=current_sub.plan %}
    <div class="feature-pill {% if plan.feature_pos_terminal_v1 %}feat-enabled{% else %}feat-disabled{% endif %}"><i class="fas fa-cash-register"></i> POS Terminal</div>
    <div class="feature-pill {% if plan.feature_barcode_pos %}feat-enabled{% else %}feat-disabled{% endif %}"><i class="fas fa-barcode"></i> Barcode POS</div>
    <div class="feature-pill {% if plan.feature_profit_loss %}feat-enabled{% else %}feat-disabled{% endif %}"><i class="fas fa-chart-line"></i> P&amp;L Reports</div>
    <div class="feature-pill {% if plan.feature_audit_logs %}feat-enabled{% else %}feat-disabled{% endif %}"><i class="fas fa-clipboard-check"></i> Audit Logs</div>
    <div class="feature-pill {% if plan.feature_multi_branch %}feat-enabled{% else %}feat-disabled{% endif %}"><i class="fas fa-code-branch"></i> Multi-Branch</div>
    <div class="feature-pill {% if plan.feature_bulk_import %}feat-enabled{% else %}feat-disabled{% endif %}"><i class="fas fa-file-import"></i> Bulk Import</div>
    <div class="feature-pill {% if plan.feature_export %}feat-enabled{% else %}feat-disabled{% endif %}"><i class="fas fa-file-export"></i> Data Export</div>
    <div class="feature-pill {% if plan.feature_credit_sales %}feat-enabled{% else %}feat-disabled{% endif %}"><i class="fas fa-credit-card"></i> Credit Sales</div>
    <div class="feature-pill {% if plan.feature_wholesale_price %}feat-enabled{% else %}feat-disabled{% endif %}"><i class="fas fa-tags"></i> Wholesale Pricing</div>
    <div class="feature-pill {% if plan.feature_android_app %}feat-enabled{% else %}feat-disabled{% endif %}"><i class="fab fa-android"></i> Android App</div>
    {% endwith %}
</div>

<!-- CTA -->
<div class="d-flex gap-2 mt-3 flex-wrap">
    <a href="{% url 'subscriptions:choose_plan' %}" class="btn btn-primary" style="border-radius:10px;">
        <i class="fas fa-arrow-up me-1"></i> Upgrade / Change Plan
    </a>
    <a href="{% url 'subscriptions:billing_history' %}" class="btn btn-outline-secondary" style="border-radius:10px;">
        <i class="fas fa-receipt me-1"></i> Billing History
    </a>
    <a href="https://wa.me/{{ whatsapp_number }}" target="_blank" class="btn btn-outline-success" style="border-radius:10px;">
        <i class="fab fa-whatsapp me-1"></i> Contact Support
    </a>
</div>

{% else %}
<div class="text-center py-5">
    <i class="fas fa-box-open" style="font-size:3rem;color:#cbd5e1;"></i>
    <h4 class="mt-3">No active subscription</h4>
    <p class="text-muted">Get started with a free trial or choose a plan.</p>
    <a href="{% url 'subscriptions:choose_plan' %}" class="btn btn-primary mt-2" style="border-radius:10px;">
        <i class="fas fa-bolt me-1"></i> Choose a Plan
    </a>
</div>
{% endif %}

<!-- Recent Transactions -->
{% if transactions %}
<h5 class="fw-bold mt-4 mb-2">Recent Transactions</h5>
<div style="overflow-x:auto;">
<table class="table txn-table">
    <thead><tr>
        <th>Reference</th><th>Plan</th><th>Amount</th><th>Status</th><th>Date</th>
    </tr></thead>
    <tbody>
    {% for txn in transactions %}
    <tr>
        <td><code style="font-size:.75rem;">{{ txn.payment_reference }}</code></td>
        <td>{{ txn.plan.name }}<br><small class="text-muted">{{ txn.get_billing_cycle_display }}</small></td>
        <td>₦{% fmt_currency txn.final_amount 0 %}</td>
        <td>
            <span class="status-badge status-{{ txn.status }}">
                {% if txn.status == 'paid' %}<i class="fas fa-check-circle"></i>
                {% elif txn.status == 'pending' %}<i class="fas fa-clock"></i>
                {% else %}<i class="fas fa-times-circle"></i>{% endif %}
                {{ txn.get_status_display }}
            </span>
        </td>
        <td>{{ txn.created_at|date:"d M Y" }}</td>
    </tr>
    {% endfor %}
    </tbody>
</table>
</div>
<a href="{% url 'subscriptions:billing_history' %}" class="btn btn-sm btn-outline-secondary" style="border-radius:8px;">View all transactions</a>
{% endif %}

</div>
{% endblock %}