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

{% block title %}Subscription Successful{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-16">
    <div class="max-w-2xl mx-auto text-center">
        <!-- Success Icon -->
        <div class="mb-8">
            <div class="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
                <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
            </div>
        </div>

        <!-- Success Message -->
        <h1 class="text-3xl font-bold text-gray-900 mb-4">
            {% if subscription.is_trial %}
                Welcome! Your Free Trial Has Started
            {% else %}
                Subscription Successful!
            {% endif %}
        </h1>

        {% if subscription %}
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 class="text-xl font-semibold mb-4">Subscription Details</h2>
            
            <div class="space-y-3 text-left">
                <div class="flex justify-between">
                    <span class="text-gray-600">Plan:</span>
                    <span class="font-medium">{{ subscription.plan.name }}</span>
                </div>
                
                <div class="flex justify-between">
                    <span class="text-gray-600">Price:</span>
                    <span class="font-medium">${{ subscription.plan.price }}/{{ subscription.plan.get_billing_period_display|lower }}</span>
                </div>
                
                <div class="flex justify-between">
                    <span class="text-gray-600">Status:</span>
                    <span class="font-medium text-green-600">{{ subscription.get_status_display }}</span>
                </div>
                
                {% if subscription.is_trial %}
                <div class="flex justify-between">
                    <span class="text-gray-600">Trial Ends:</span>
                    <span class="font-medium">{{ subscription.trial_end|date:"M d, Y" }}</span>
                </div>
                {% endif %}
                
                <div class="flex justify-between">
                    <span class="text-gray-600">Next Billing:</span>
                    <span class="font-medium">{{ subscription.current_period_end|date:"M d, Y" }}</span>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Next Steps -->
        <div class="bg-blue-50 rounded-lg p-6 mb-8">
            <h3 class="text-lg font-semibold text-blue-900 mb-3">What's Next?</h3>
            <div class="text-blue-800 space-y-2">
                {% if subscription.is_trial %}
                <p>✓ Your {{ subscription.plan.trial_period_days }}-day free trial is now active</p>
                <p>✓ Explore all features with no restrictions</p>
                <p>✓ You'll be charged ${{ subscription.plan.price }} on {{ subscription.trial_end|date:"M d, Y" }}</p>
                {% else %}
                <p>✓ Your subscription is now active</p>
                <p>✓ Access all features immediately</p>
                <p>✓ Manage your subscription anytime</p>
                {% endif %}
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="space-y-4">
            <a href="{% url 'wagtail_subscriptions:customer_portal' %}" 
               class="inline-block bg-blue-600 hover:bg-blue-700 text-white py-3 px-8 rounded-md font-medium transition-colors">
                Go to Customer Portal
            </a>
            
            <div>
                <a href="/" class="text-blue-600 hover:text-blue-700 font-medium">
                    Continue to Dashboard
                </a>
            </div>
        </div>

        <!-- Support -->
        <div class="mt-12 pt-8 border-t">
            <p class="text-gray-600 mb-4">Need help getting started?</p>
            <div class="space-x-6">
                <a href="/help" class="text-blue-600 hover:text-blue-700">Help Center</a>
                <a href="/contact" class="text-blue-600 hover:text-blue-700">Contact Support</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}