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

{% block title %}Pricing Plans - 3ncount{% endblock %}

{% block extra_css %}
<style>
    .pricing-hero {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 4rem 0;
        margin: -2rem -1rem 3rem -1rem;
    }
    
    .pricing-card {
        border-radius: 12px;
        transition: all 0.3s ease;
        height: 100%;
        position: relative;
        overflow: hidden;
    }
    
    .pricing-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }
    
    .pricing-card.popular {
        border: 3px solid #667eea;
        box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
    }
    
    .popular-badge {
        position: absolute;
        top: 20px;
        right: -35px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 5px 40px;
        transform: rotate(45deg);
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    
    .price-amount {
        font-size: 3rem;
        font-weight: bold;
        color: #667eea;
    }
    
    .price-period {
        color: #6c757d;
        font-size: 1rem;
    }
    
    .feature-list {
        list-style: none;
        padding: 0;
        margin: 1.5rem 0;
    }
    
    .feature-list li {
        padding: 0.75rem 0;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
    }
    
    .feature-list li:last-child {
        border-bottom: none;
    }
    
    .feature-icon {
        color: #10b981;
        margin-right: 10px;
        font-size: 1.2rem;
    }
    
    .feature-icon.disabled {
        color: #d1d5db;
    }
    
    .cta-button {
        width: 100%;
        padding: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
    }
    
    .cta-button:hover {
        transform: scale(1.05);
    }
    
    .yearly-toggle {
        display: inline-flex;
        align-items: center;
        background: white;
        padding: 8px;
        border-radius: 50px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .toggle-option {
        padding: 8px 20px;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 500;
    }
    
    .toggle-option.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    
    .savings-badge {
        background: #10b981;
        color: white;
        padding: 4px 12px;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 600;
        margin-left: 8px;
    }
    
    .comparison-table {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    
    .comparison-table th {
        background: #f8f9fa;
        font-weight: 600;
        padding: 1rem;
        border-bottom: 2px solid #e9ecef;
    }
    
    .comparison-table td {
        padding: 1rem;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .faq-section {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 2rem;
        margin-top: 3rem;
    }
    
    .faq-item {
        background: white;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .faq-item:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    
    .faq-question {
        font-weight: 600;
        font-size: 1.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .faq-answer {
        margin-top: 1rem;
        color: #6c757d;
        line-height: 1.6;
    }
</style>
{% endblock %}

{% block content %}
<!-- Wrap everything in one x-data container for shared state -->
<div x-data="{ yearly: true, openFaq: null }">
    
    <!-- Hero Section -->
    <div class="pricing-hero">
        <div class="container-xl text-center">
            <h1 class="display-4 fw-bold mb-3">Choose Your Perfect Plan</h1>
            <p class="lead mb-4" style="font-size: 1.3rem;">
                Powerful accounting software for Malaysian SMEs. Start free, upgrade anytime.
            </p>
            
            <!-- Billing Toggle -->
            <div class="d-flex justify-content-center mb-4">
                <div class="yearly-toggle">
                    <div class="toggle-option" :class="!yearly && 'active'" @click="yearly = false">
                        Monthly
                    </div>
                    <div class="toggle-option" :class="yearly && 'active'" @click="yearly = true">
                        Yearly
                        <span class="savings-badge">Save up to 20%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pricing Cards -->
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mb-5">
        {% for plan in plans %}
        <div class="col">
            <div class="card pricing-card {% if plan.name == 'Professional' %}popular{% endif %}">
                {% if plan.name == 'Professional' %}
                <div class="popular-badge">Most Popular</div>
                {% endif %}
                
                <div class="card-body d-flex flex-column">
                    <!-- Plan Name -->
                    <div class="text-center mb-3">
                        <h3 class="card-title fw-bold mb-2">{{ plan.name }}</h3>
                        <p class="text-muted">{{ plan.description }}</p>
                    </div>
                    
                    <!-- Price -->
                    <div class="text-center mb-4">
                        <div x-show="!yearly">
                            <div class="price-amount">
                                RM {{ plan.price_monthly|floatformat:0 }}
                            </div>
                            <div class="price-period">per month</div>
                        </div>
                        <div x-show="yearly">
                            <div class="price-amount">
                                RM {{ plan.price_yearly|floatformat:0 }}
                            </div>
                            <div class="price-period">per year</div>
                            {% if plan.price_monthly > 0 and plan.price_yearly > 0 %}
                            <div class="text-success mt-2">
                                <small>
                                    💰 Save RM {{ plan.price_monthly|floatformat:0|add:"0"|floatformat:0 }}/month
                                </small>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Features -->
                    <ul class="feature-list flex-grow-1">
                        <li>
                            <i class="ti ti-check feature-icon"></i>
                            <span><strong>{{ plan.max_users }}</strong> user{% if plan.max_users > 1 %}s{% endif %}</span>
                        </li>
                        <li>
                            <i class="ti ti-check feature-icon"></i>
                            <span>Core accounting features</span>
                        </li>
                        <li>
                            <i class="ti ti-check {% if not plan.ai_accounting_enabled %}feature-icon disabled{% else %}feature-icon{% endif %}"></i>
                            <span>AI Accounting Assistant</span>
                        </li>
                        <li>
                            <i class="ti ti-check {% if not plan.pos_enabled %}feature-icon disabled{% else %}feature-icon{% endif %}"></i>
                            <span>POS System</span>
                        </li>
                        <li>
                            <i class="ti ti-check {% if not plan.lhdn_borang_b_enabled %}feature-icon disabled{% else %}feature-icon{% endif %}"></i>
                            <span>LHDN Tax Filing (Borang B)</span>
                        </li>
                        <li>
                            <i class="ti ti-check feature-icon"></i>
                            <span>Email support</span>
                        </li>
                        {% if plan.name == 'Enterprise' %}
                        <li>
                            <i class="ti ti-check feature-icon"></i>
                            <span>Priority support</span>
                        </li>
                        <li>
                            <i class="ti ti-check feature-icon"></i>
                            <span>Custom integrations</span>
                        </li>
                        {% endif %}
                    </ul>
                    
                    <!-- CTA Button -->
                    {% if user.is_authenticated %}
                        {% if organization and organization.current_plan.id == plan.id %}
                            <button class="btn btn-outline-primary cta-button" disabled>
                                <i class="ti ti-check me-2"></i>Current Plan
                            </button>
                        {% else %}
                            <form method="post" action="{% url 'tenants:upgrade_plan' plan.id %}" class="upgrade-form" style="margin: 0;">
                                {% csrf_token %}
                                <input type="hidden" name="billing_cycle" x-bind:value="yearly ? 'YEARLY' : 'MONTHLY'">
                                <button type="submit" class="btn {% if plan.name == 'Professional' %}btn-primary{% else %}btn-outline-primary{% endif %} cta-button">
                                    <i class="ti ti-arrow-up me-2"></i>Upgrade Now
                                </button>
                            </form>
                        {% endif %}
                    {% else %}
                        <a href="{% url 'accounts:login' %}?next=/organization/pricing/" class="btn {% if plan.name == 'Professional' %}btn-primary{% else %}btn-outline-primary{% endif %} cta-button">
                            Get Started
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Feature Comparison Table -->
    <div class="mb-5">
        <h2 class="text-center mb-4">Detailed Feature Comparison</h2>
        <div class="table-responsive comparison-table">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Feature</th>
                        {% for plan in plans %}
                        <th class="text-center">{{ plan.name }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>Users</strong></td>
                        {% for plan in plans %}
                        <td class="text-center">{{ plan.max_users }}{% if plan.max_users >= 999 %} (Unlimited){% endif %}</td>
                        {% endfor %}
                    </tr>
                    <tr>
                        <td><strong>Invoicing & Billing</strong></td>
                        {% for plan in plans %}
                        <td class="text-center"><i class="ti ti-check text-success" style="font-size: 1.5rem;"></i></td>
                        {% endfor %}
                    </tr>
                    <tr>
                        <td><strong>Expense Tracking</strong></td>
                        {% for plan in plans %}
                        <td class="text-center"><i class="ti ti-check text-success" style="font-size: 1.5rem;"></i></td>
                        {% endfor %}
                    </tr>
                    <tr>
                        <td><strong>Financial Reports</strong></td>
                        {% for plan in plans %}
                        <td class="text-center"><i class="ti ti-check text-success" style="font-size: 1.5rem;"></i></td>
                        {% endfor %}
                    </tr>
                    <tr>
                        <td><strong>Bank Reconciliation</strong></td>
                        {% for plan in plans %}
                        <td class="text-center"><i class="ti ti-check text-success" style="font-size: 1.5rem;"></i></td>
                        {% endfor %}
                    </tr>
                    <tr>
                        <td><strong>AI Accounting Assistant</strong></td>
                        {% for plan in plans %}
                        <td class="text-center">
                            {% if plan.ai_accounting_enabled %}
                            <i class="ti ti-check text-success" style="font-size: 1.5rem;"></i>
                            {% else %}
                            <i class="ti ti-x text-muted" style="font-size: 1.5rem;"></i>
                            {% endif %}
                        </td>
                        {% endfor %}
                    </tr>
                    <tr>
                        <td><strong>POS System</strong></td>
                        {% for plan in plans %}
                        <td class="text-center">
                            {% if plan.pos_enabled %}
                            <i class="ti ti-check text-success" style="font-size: 1.5rem;"></i>
                            {% else %}
                            <i class="ti ti-x text-muted" style="font-size: 1.5rem;"></i>
                            {% endif %}
                        </td>
                        {% endfor %}
                    </tr>
                    <tr>
                        <td><strong>LHDN Tax Filing (Borang B)</strong></td>
                        {% for plan in plans %}
                        <td class="text-center">
                            {% if plan.lhdn_borang_b_enabled %}
                            <i class="ti ti-check text-success" style="font-size: 1.5rem;"></i>
                            {% else %}
                            <i class="ti ti-x text-muted" style="font-size: 1.5rem;"></i>
                            {% endif %}
                        </td>
                        {% endfor %}
                    </tr>
                    <tr>
                        <td><strong>Priority Support</strong></td>
                        {% for plan in plans %}
                        <td class="text-center">
                            {% if plan.name == 'Enterprise' %}
                            <i class="ti ti-check text-success" style="font-size: 1.5rem;"></i>
                            {% else %}
                            <i class="ti ti-x text-muted" style="font-size: 1.5rem;"></i>
                            {% endif %}
                        </td>
                        {% endfor %}
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- FAQ Section -->
    <div class="faq-section">
        <h2 class="text-center mb-4">Frequently Asked Questions</h2>
        
        <div class="faq-item" @click="openFaq = openFaq === 1 ? null : 1">
            <div class="faq-question">
                <span>Can I change plans later?</span>
                <i class="ti" :class="openFaq === 1 ? 'ti-chevron-up' : 'ti-chevron-down'"></i>
            </div>
            <div class="faq-answer" x-show="openFaq === 1" x-collapse>
                Yes! You can upgrade or downgrade your plan at any time. Upgrades take effect immediately with prorated billing, while downgrades take effect at your next billing cycle.
            </div>
        </div>
        
        <div class="faq-item" @click="openFaq = openFaq === 2 ? null : 2">
            <div class="faq-question">
                <span>What payment methods do you accept?</span>
                <i class="ti" :class="openFaq === 2 ? 'ti-chevron-up' : 'ti-chevron-down'"></i>
            </div>
            <div class="faq-answer" x-show="openFaq === 2" x-collapse>
                We accept all major credit cards (Visa, Mastercard) and FPX online banking through our secure payment partner Stripe.
            </div>
        </div>
        
        <div class="faq-item" @click="openFaq = openFaq === 3 ? null : 3">
            <div class="faq-question">
                <span>How do AI credits work?</span>
                <i class="ti" :class="openFaq === 3 ? 'ti-chevron-up' : 'ti-chevron-down'"></i>
            </div>
            <div class="faq-answer" x-show="openFaq === 3" x-collapse>
                AI credits are used for AI-powered features like document extraction and financial analysis. Each plan includes a monthly allocation of credits, and you can purchase additional credits anytime if needed.
            </div>
        </div>
        
        <div class="faq-item" @click="openFaq = openFaq === 4 ? null : 4">
            <div class="faq-question">
                <span>Is there a setup fee?</span>
                <i class="ti" :class="openFaq === 4 ? 'ti-chevron-up' : 'ti-chevron-down'"></i>
            </div>
            <div class="faq-answer" x-show="openFaq === 4" x-collapse">
                No setup fees! You only pay the monthly or yearly subscription cost for your chosen plan. Start using 3ncount immediately after signing up.
            </div>
        </div>
        
        <div class="faq-item" @click="openFaq = openFaq === 5 ? null : 5">
            <div class="faq-question">
                <span>Can I cancel my subscription?</span>
                <i class="ti" :class="openFaq === 5 ? 'ti-chevron-up' : 'ti-chevron-down'"></i>
            </div>
            <div class="faq-answer" x-show="openFaq === 5" x-collapse>
                Yes, you can cancel anytime. Your account will remain active until the end of your current billing period. No refunds for partial months, but you'll keep access until the paid period ends.
            </div>
        </div>
    </div>

    <!-- CTA Banner -->
    <div class="text-center mt-5 p-5" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white;">
        <h2 class="mb-3">Ready to streamline your accounting?</h2>
        <p class="lead mb-4">Join thousands of Malaysian SMEs using 3ncount</p>
        {% if user.is_authenticated %}
            <a href="{% url 'tenants:subscription' %}" class="btn btn-light btn-lg">
                <i class="ti ti-dashboard me-2"></i>Go to Dashboard
            </a>
        {% else %}
            <a href="{% url 'accounts:login' %}" class="btn btn-light btn-lg">
                <i class="ti ti-rocket me-2"></i>Get Started Free
            </a>
        {% endif %}
    </div>

</div><!-- End of x-data wrapper -->

{% endblock %}

{% block extra_js %}
<script>
    // Handle upgrade form submissions with AJAX
    document.addEventListener('DOMContentLoaded', function() {
        const upgradeForms = document.querySelectorAll('.upgrade-form');
        
        upgradeForms.forEach(form => {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const button = form.querySelector('button[type="submit"]');
                const originalText = button.innerHTML;
                
                // Disable button and show loading
                button.disabled = true;
                button.innerHTML = '<i class="ti ti-loader ti-spin me-2"></i>Processing...';
                
                // Get CSRF token
                const csrfToken = form.querySelector('[name="csrfmiddlewaretoken"]').value;
                
                // Submit via fetch
                fetch(form.action, {
                    method: 'POST',
                    body: new FormData(form),
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': csrfToken
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        if (data.redirect_url) {
                            // Redirect to Stripe Checkout
                            window.location.href = data.redirect_url;
                        } else {
                            // Direct payment success - redirect to subscription page
                            window.location.href = '/organization/subscription/';
                        }
                    } else {
                        // Show error
                        alert(data.error || 'An error occurred. Please try again.');
                        button.disabled = false;
                        button.innerHTML = originalText;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred. Please try again.');
                    button.disabled = false;
                    button.innerHTML = originalText;
                });
            });
        });
    });
</script>
{% endblock %}