{% extends "core/base.html" %}

{% block title %}Subscription Plans - Inventory Management System{% endblock %}

{% block page_title %}Subscription Plans{% endblock %}

{% block header_actions %}
<a href="{% url 'business_dashboard' %}" class="btn btn-sm btn-outline-secondary">
    <i class="fas fa-arrow-left me-1"></i>Back to Dashboard
</a>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Current Plan -->
    {% if current_subscription %}
    <div class="row mb-4">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow border-primary">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="mb-0">
                        <i class="fas fa-crown me-2"></i>
                        Your Current Plan: {{ current_subscription.plan.name }}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h4 class="fw-bold mb-1">${{ current_subscription.plan.price }}
                                <small class="text-muted fs-6">/{{ current_subscription.plan.get_billing_cycle_display }}</small>
                            </h4>
                            <p class="text-muted mb-3">{{ current_subscription.plan.description }}</p>
                            
                            <div class="mb-3">
                                <h6 class="fw-semibold mb-2">Plan Details:</h6>
                                <ul class="list-unstyled">
                                    <li class="mb-2">
                                        <i class="fas fa-check text-success me-2"></i>
                                        Up to {{ current_subscription.plan.max_products }} products
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-check text-success me-2"></i>
                                        Up to {{ current_subscription.plan.max_users }} users
                                    </li>
                                    {% if current_subscription.plan.has_advanced_reports %}
                                    <li class="mb-2">
                                        <i class="fas fa-check text-success me-2"></i>
                                        Advanced analytics & reports
                                    </li>
                                    {% endif %}
                                    {% if current_subscription.plan.has_email_support %}
                                    <li class="mb-2">
                                        <i class="fas fa-check text-success me-2"></i>
                                        Priority email support
                                    </li>
                                    {% endif %}
                                    {% if current_subscription.plan.has_sms_notifications %}
                                    <li class="mb-2">
                                        <i class="fas fa-check text-success me-2"></i>
                                        SMS notifications
                                    </li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="fw-semibold mb-3">Subscription Status</h6>
                                    
                                    <div class="mb-3">
                                        <p class="mb-1">
                                            <strong>Status:</strong>
                                            <span class="badge {% if current_subscription.is_active %}bg-success{% else %}bg-danger{% endif %} ms-2">
                                                {% if current_subscription.is_active %}Active{% else %}Inactive{% endif %}
                                            </span>
                                        </p>
                                        <p class="mb-1">
                                            <strong>Started:</strong> {{ current_subscription.start_date|date:"M d, Y" }}
                                        </p>
                                        <p class="mb-1">
                                            <strong>Next Billing:</strong> {{ current_subscription.end_date|date:"M d, Y" }}
                                        </p>
                                        <p class="mb-0">
                                            <strong>Days Remaining:</strong> {{ current_subscription.days_remaining }} days
                                        </p>
                                    </div>
                                    
                                    <div class="progress mb-3" style="height: 10px;">
                                        <div class="progress-bar {% if current_subscription.days_remaining <= 7 %}bg-warning{% else %}bg-success{% endif %}" 
                                             role="progressbar" 
                                             style="width: {% widthratio current_subscription.days_remaining 30 100 %}%"
                                             aria-valuenow="{{ current_subscription.days_remaining }}" 
                                             aria-valuemin="0" 
                                             aria-valuemax="30">
                                        </div>
                                    </div>
                                    
                                    <div class="d-grid gap-2">
                                        <a href="{% url 'subscription_details' %}" class="btn btn-outline-primary">
                                            <i class="fas fa-eye me-2"></i>View Details
                                        </a>
                                        {% if current_subscription.is_active %}
                                        <a href="{% url 'cancel_subscription' %}" class="btn btn-outline-danger">
                                            <i class="fas fa-ban me-2"></i>Cancel Subscription
                                        </a>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
    
    <!-- Available Plans -->
    <div class="row">
        <div class="col-lg-10 mx-auto">
            <div class="text-center mb-5">
                <h3 class="fw-bold">Choose the Perfect Plan</h3>
                <p class="text-muted">Select a plan that fits your business needs</p>
                
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-primary active" data-billing="monthly">Monthly</button>
                    <button type="button" class="btn btn-outline-primary" data-billing="quarterly">Quarterly</button>
                    <button type="button" class="btn btn-outline-primary" data-billing="yearly">Yearly</button>
                </div>
            </div>
            
            <div class="row g-4">
                {% for plan in plans %}
                <div class="col-xl-3 col-md-6">
                    <div class="card shadow-lg border-{% if plan.plan_type == 'premium' %}warning{% elif plan.plan_type == 'enterprise' %}primary{% else %}light{% endif %} h-100">
                        {% if plan.plan_type == 'premium' or plan.plan_type == 'enterprise' %}
                        <div class="card-header text-center py-3 bg-{% if plan.plan_type == 'premium' %}warning{% elif plan.plan_type == 'enterprise' %}primary{% endif %} text-white">
                            <span class="badge bg-white text-{% if plan.plan_type == 'premium' %}warning{% elif plan.plan_type == 'enterprise' %}primary{% endif %}">
                                {{ plan.get_plan_type_display|upper }}
                            </span>
                        </div>
                        {% endif %}
                        
                        <div class="card-body text-center p-4">
                            <h5 class="card-title fw-bold mb-3">{{ plan.name }}</h5>
                            
                            <div class="mb-4">
                                <h2 class="fw-bold display-6">$<span class="monthly-price">{{ plan.monthly_price|floatformat:2 }}</span></h2>
                                <p class="text-muted">per month</p>
                                <p class="small text-muted">
                                    Billed <span class="billing-cycle">{{ plan.get_billing_cycle_display|lower }}</span> 
                                    at $<span class="actual-price">{{ plan.price }}</span>
                                </p>
                            </div>
                            
                            <p class="card-text mb-4">{{ plan.description }}</p>
                            
                            <ul class="list-unstyled mb-4">
                                <li class="mb-2">
                                    <i class="fas fa-check text-success me-2"></i>
                                    Up to {{ plan.max_products }} products
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-check text-success me-2"></i>
                                    Up to {{ plan.max_users }} users
                                </li>
                                {% if plan.has_advanced_reports %}
                                <li class="mb-2">
                                    <i class="fas fa-check text-success me-2"></i>
                                    Advanced reports
                                </li>
                                {% endif %}
                                {% if plan.has_bulk_operations %}
                                <li class="mb-2">
                                    <i class="fas fa-check text-success me-2"></i>
                                    Bulk operations
                                </li>
                                {% endif %}
                                {% if plan.has_sms_notifications %}
                                <li class="mb-2">
                                    <i class="fas fa-check text-success me-2"></i>
                                    SMS notifications
                                </li>
                                {% endif %}
                                {% if plan.has_email_support %}
                                <li class="mb-2">
                                    <i class="fas fa-check text-success me-2"></i>
                                    Email support
                                </li>
                                {% endif %}
                                {% if plan.has_phone_support %}
                                <li class="mb-2">
                                    <i class="fas fa-check text-success me-2"></i>
                                    Phone support
                                </li>
                                {% endif %}
                            </ul>
                            
                            <div class="mt-auto">
                                {% if current_subscription and current_subscription.plan.id == plan.id %}
                                <button class="btn btn-success w-100" disabled>
                                    <i class="fas fa-check me-2"></i>Current Plan
                                </button>
                                {% else %}
                                <a href="{% url 'subscribe_plan' plan.id %}" 
                                   class="btn btn-{% if plan.plan_type == 'premium' %}warning{% elif plan.plan_type == 'enterprise' %}primary{% else %}outline-primary{% endif %} w-100">
                                    {% if plan.plan_type == 'basic' and not current_subscription %}
                                        Start Free Trial
                                    {% else %}
                                        Choose Plan
                                    {% endif %}
                                </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="col-12 text-center py-5">
                    <i class="fas fa-crown fa-4x text-muted mb-3"></i>
                    <h4 class="text-muted">No Subscription Plans Available</h4>
                    <p class="text-muted">Please contact support for more information.</p>
                </div>
                {% endfor %}
            </div>
            
            <!-- Comparison Table -->
            {% if plans|length > 1 %}
            <div class="card shadow mt-5">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-bar me-2 text-primary"></i>
                        Plan Comparison
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Feature</th>
                                    {% for plan in plans %}
                                    <th class="text-center">{{ plan.name }}</th>
                                    {% endfor %}
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Monthly Price</td>
                                    {% for plan in plans %}
                                    <td class="text-center">${{ plan.monthly_price|floatformat:2 }}</td>
                                    {% endfor %}
                                </tr>
                                <tr>
                                    <td>Max Products</td>
                                    {% for plan in plans %}
                                    <td class="text-center">{{ plan.max_products }}</td>
                                    {% endfor %}
                                </tr>
                                <tr>
                                    <td>Max Users</td>
                                    {% for plan in plans %}
                                    <td class="text-center">{{ plan.max_users }}</td>
                                    {% endfor %}
                                </tr>
                                <tr>
                                    <td>Storage</td>
                                    {% for plan in plans %}
                                    <td class="text-center">{{ plan.max_storage_mb }} MB</td>
                                    {% endfor %}
                                </tr>
                                <tr>
                                    <td>Advanced Reports</td>
                                    {% for plan in plans %}
                                    <td class="text-center">
                                        {% if plan.has_advanced_reports %}
                                            <i class="fas fa-check text-success"></i>
                                        {% else %}
                                            <i class="fas fa-times text-danger"></i>
                                        {% endif %}
                                    </td>
                                    {% endfor %}
                                </tr>
                                <tr>
                                    <td>Bulk Operations</td>
                                    {% for plan in plans %}
                                    <td class="text-center">
                                        {% if plan.has_bulk_operations %}
                                            <i class="fas fa-check text-success"></i>
                                        {% else %}
                                            <i class="fas fa-times text-danger"></i>
                                        {% endif %}
                                    </td>
                                    {% endfor %}
                                </tr>
                                <tr>
                                    <td>SMS Notifications</td>
                                    {% for plan in plans %}
                                    <td class="text-center">
                                        {% if plan.has_sms_notifications %}
                                            <i class="fas fa-check text-success"></i>
                                        {% else %}
                                            <i class="fas fa-times text-danger"></i>
                                        {% endif %}
                                    </td>
                                    {% endfor %}
                                </tr>
                                <tr>
                                    <td>Email Support</td>
                                    {% for plan in plans %}
                                    <td class="text-center">
                                        {% if plan.has_email_support %}
                                            <i class="fas fa-check text-success"></i>
                                        {% else %}
                                            <i class="fas fa-times text-danger"></i>
                                        {% endif %}
                                    </td>
                                    {% endfor %}
                                </tr>
                                <tr>
                                    <td>Phone Support</td>
                                    {% for plan in plans %}
                                    <td class="text-center">
                                        {% if plan.has_phone_support %}
                                            <i class="fas fa-check text-success"></i>
                                        {% else %}
                                            <i class="fas fa-times text-danger"></i>
                                        {% endif %}
                                    </td>
                                    {% endfor %}
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {% endif %}
            
            <!-- FAQ Section -->
            <div class="card shadow mt-4">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0">
                        <i class="fas fa-question-circle me-2 text-primary"></i>
                        Frequently Asked Questions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                    Can I change plans anytime?
                                </button>
                            </h2>
                            <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Yes, you can upgrade or downgrade your plan at any time. When upgrading, you'll get prorated credit for your current plan. When downgrading, changes take effect at the next billing cycle.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                    Is there a free trial?
                                </button>
                            </h2>
                            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Yes! All new businesses start with a 14-day free trial of the Basic plan. No credit card is required to start your trial.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                    What payment methods do you accept?
                                </button>
                            </h2>
                            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and M-Pesa for Kenyan customers.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card.shadow-lg {
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s;
}

.card.shadow-lg:hover {
    transform: translateY(-10px);
}

.badge {
    font-size: 0.75em;
    padding: 0.5em 1em;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(67, 97, 238, 0.1);
    color: #4361ee;
}

.accordion-button:focus {
    border-color: #4361ee;
    box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25);
}

.table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.btn-group .btn.active {
    background-color: #4361ee;
    border-color: #4361ee;
    color: white;
}

.display-6 {
    font-size: 2.5rem;
}

.card.border-warning {
    border-width: 2px;
}

.card.border-primary {
    border-width: 2px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Billing cycle toggle
    const billingButtons = document.querySelectorAll('[data-billing]');
    const monthlyPrices = document.querySelectorAll('.monthly-price');
    const actualPrices = document.querySelectorAll('.actual-price');
    const billingCycles = document.querySelectorAll('.billing-cycle');
    
    billingButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Update active button
            billingButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            
            const cycle = this.dataset.billing;
            
            // Update all plan cards
            document.querySelectorAll('.card').forEach((card, index) => {
                const planData = JSON.parse(card.dataset.plan || '{}');
                if (planData[cycle]) {
                    const monthlyPrice = monthlyPrices[index];
                    const actualPrice = actualPrices[index];
                    const billingCycle = billingCycles[index];
                    
                    if (monthlyPrice) monthlyPrice.textContent = planData[cycle].monthly_price;
                    if (actualPrice) actualPrice.textContent = planData[cycle].price;
                    if (billingCycle) billingCycle.textContent = cycle;
                }
            });
        });
    });
    
    // Initialize plan data
    document.querySelectorAll('.card').forEach((card, index) => {
        const planId = card.querySelector('a')?.href?.match(/\/subscribe\/(\d+)\//)?.[1];
        if (planId) {
            // In a real application, you would fetch this data from an API
            // For now, we'll simulate it
            const planData = {
                monthly: { monthly_price: '9.99', price: '9.99' },
                quarterly: { monthly_price: '8.99', price: '26.97' },
                yearly: { monthly_price: '7.99', price: '95.88' }
            };
            card.dataset.plan = JSON.stringify(planData);
        }
    });
    
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
{% endblock %}