

<?php $__env->startSection('title', 'Subscription - WedBooker'); ?>
<?php $__env->startSection('page-title', 'Subscription Plan'); ?>
<?php $__env->startSection('page-description', 'Manage your subscription'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-6">
    
    <!-- Quick Actions -->
    <div class="flex justify-end gap-3">
        <a href="<?php echo e(route('subscription.plans')); ?>" class="px-4 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition">
            <i class="fas fa-tag mr-2"></i>View All Plans
        </a>
        <a href="<?php echo e(route('subscription.invoice', 1)); ?>" class="px-4 py-2 bg-blue-600 rounded-lg text-white hover:bg-blue-700 transition">
            <i class="fas fa-file-invoice mr-2"></i>View Invoices
        </a>
        <a href="<?php echo e(route('subscription.payment-methods')); ?>" class="px-4 py-2 bg-green-600 rounded-lg text-white hover:bg-green-700 transition">
            <i class="fas fa-credit-card mr-2"></i>Payment Methods
        </a>
    </div>
    
    <!-- Current Plan -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold text-white">Current Plan</h3>
            <span class="badge badge-success">Active</span>
        </div>
        <div class="bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-xl p-6">
            <div class="flex justify-between items-start flex-wrap gap-4">
                <div>
                    <h2 class="text-3xl font-bold text-white">Pro Plan</h2>
                    <p class="text-gray-300 mt-2">£59/month • Billed monthly</p>
                    <p class="text-gray-400 text-sm mt-1">Next billing date: April 15, 2024</p>
                    <div class="mt-3">
                        <span class="text-sm text-gray-400">Subscription ID: SUB-2024-0012</span>
                    </div>
                </div>
                <div class="flex gap-3">
                    <a href="<?php echo e(route('subscription.plans')); ?>" class="px-6 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition">
                        <i class="fas fa-arrow-up mr-2"></i>Upgrade Plan
                    </a>
                    <button onclick="cancelSubscription()" class="px-6 py-2 bg-red-600/20 text-red-400 rounded-lg hover:bg-red-600/30 transition">
                        <i class="fas fa-ban mr-2"></i>Cancel Subscription
                    </button>
                </div>
            </div>
            
            <!-- Usage Stats -->
            <div class="mt-6 pt-4 border-t border-white/10">
                <h4 class="text-white font-semibold mb-3">Usage Statistics</h4>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <p class="text-gray-400 text-sm">Guests Used</p>
                        <div class="flex justify-between items-center">
                            <span class="text-white font-bold">156</span>
                            <span class="text-gray-400 text-sm">/ 500</span>
                        </div>
                        <div class="w-full h-2 bg-white/10 rounded-full mt-1 overflow-hidden">
                            <div class="h-full bg-green-400 rounded-full" style="width: 31%"></div>
                        </div>
                    </div>
                    <div>
                        <p class="text-gray-400 text-sm">Bookings</p>
                        <div class="flex justify-between items-center">
                            <span class="text-white font-bold">89</span>
                            <span class="text-gray-400 text-sm">Unlimited</span>
                        </div>
                    </div>
                    <div>
                        <p class="text-gray-400 text-sm">Invitations Sent</p>
                        <div class="flex justify-between items-center">
                            <span class="text-white font-bold">156</span>
                            <span class="text-gray-400 text-sm">Unlimited</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Features -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <h3 class="text-xl font-bold text-white mb-4">Plan Features</h3>
        <div class="grid md:grid-cols-2 gap-4">
            <div class="flex items-center gap-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition">
                <i class="fas fa-check-circle text-green-400"></i>
                <span class="text-gray-300">1 Wedding Page</span>
            </div>
            <div class="flex items-center gap-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition">
                <i class="fas fa-check-circle text-green-400"></i>
                <span class="text-gray-300">500 Guests Limit</span>
            </div>
            <div class="flex items-center gap-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition">
                <i class="fas fa-check-circle text-green-400"></i>
                <span class="text-gray-300">Full Booking Management</span>
            </div>
            <div class="flex items-center gap-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition">
                <i class="fas fa-check-circle text-green-400"></i>
                <span class="text-gray-300">Email Invitations</span>
            </div>
            <div class="flex items-center gap-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition">
                <i class="fas fa-check-circle text-green-400"></i>
                <span class="text-gray-300">CSV Export</span>
            </div>
            <div class="flex items-center gap-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition">
                <i class="fas fa-check-circle text-green-400"></i>
                <span class="text-gray-300">Priority Support</span>
            </div>
        </div>
    </div>
    
    <!-- Upgrade Options -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold text-white">Upgrade Options</h3>
            <a href="<?php echo e(route('subscription.plans')); ?>" class="text-purple-400 text-sm hover:text-purple-300 transition">Compare Plans →</a>
        </div>
        <div class="grid md:grid-cols-2 gap-6">
            <!-- Premium Plan -->
            <div class="p-6 bg-gradient-to-br from-purple-600/20 to-pink-600/20 rounded-xl hover:shadow-2xl transition-all duration-300">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <h4 class="text-xl font-bold text-white">Premium Plan</h4>
                        <p class="text-gray-400 text-sm">Best for large weddings</p>
                    </div>
                    <span class="badge badge-success">Recommended</span>
                </div>
                <p class="text-3xl font-bold text-purple-400 mt-2">£99<span class="text-sm text-gray-400">/month</span></p>
                <ul class="mt-4 space-y-2 text-sm text-gray-300">
                    <li><i class="fas fa-check-circle text-green-400 mr-2"></i>Unlimited Guests</li>
                    <li><i class="fas fa-check-circle text-green-400 mr-2"></i>Custom Domain</li>
                    <li><i class="fas fa-check-circle text-green-400 mr-2"></i>Advanced Analytics</li>
                    <li><i class="fas fa-check-circle text-green-400 mr-2"></i>API Access</li>
                    <li><i class="fas fa-check-circle text-green-400 mr-2"></i>Priority Support 24/7</li>
                </ul>
                <a href="<?php echo e(route('subscription.subscribe', 'premium')); ?>" class="block w-full mt-6 px-4 py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-white text-center font-semibold hover:shadow-2xl transition hover:scale-105">
                    Upgrade to Premium
                </a>
            </div>
            
            <!-- Annual Plan -->
            <div class="p-6 bg-white/5 rounded-xl hover:bg-white/10 transition-all duration-300">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <h4 class="text-xl font-bold text-white">Annual Plan</h4>
                        <p class="text-gray-400 text-sm">Save 17% with yearly billing</p>
                    </div>
                    <span class="badge badge-warning">Best Value</span>
                </div>
                <p class="text-3xl font-bold text-green-400 mt-2">£590<span class="text-sm text-gray-400">/year</span></p>
                <p class="text-green-400 text-sm mt-1">Save £118 compared to monthly</p>
                <ul class="mt-4 space-y-2 text-sm text-gray-300">
                    <li><i class="fas fa-check-circle text-green-400 mr-2"></i>All Pro Features</li>
                    <li><i class="fas fa-check-circle text-green-400 mr-2"></i>2 Months Free</li>
                    <li><i class="fas fa-check-circle text-green-400 mr-2"></i>Priority Support</li>
                    <li><i class="fas fa-check-circle text-green-400 mr-2"></i>Free Domain Setup</li>
                </ul>
                <a href="<?php echo e(route('subscription.subscribe', 'annual')); ?>" class="block w-full mt-6 px-4 py-3 bg-green-600 rounded-lg text-white text-center font-semibold hover:bg-green-700 transition hover:scale-105">
                    Switch to Annual
                </a>
            </div>
        </div>
    </div>
    
    <!-- Billing History -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold text-white">Billing History</h3>
            <a href="<?php echo e(route('subscription.invoice', 1)); ?>" class="text-purple-400 text-sm hover:text-purple-300 transition">View All →</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-white/10">
                        <th class="text-left py-3 px-4 text-gray-400">Date</th>
                        <th class="text-left py-3 px-4 text-gray-400">Description</th>
                        <th class="text-left py-3 px-4 text-gray-400">Amount</th>
                        <th class="text-left py-3 px-4 text-gray-400">Status</th>
                        <th class="text-left py-3 px-4 text-gray-400">Invoice</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="hover:bg-white/5 transition">
                        <td class="py-3 px-4 text-gray-300">Mar 15, 2024</td>
                        <td class="py-3 px-4 text-white">Pro Plan - Monthly Subscription</td>
                        <td class="py-3 px-4 text-white">£59.00</td>
                        <td class="py-3 px-4"><span class="badge badge-success">Paid</span></td>
                        <td class="py-3 px-4">
                            <a href="<?php echo e(route('subscription.invoice', 1)); ?>" class="text-purple-400 hover:text-purple-300">
                                <i class="fas fa-file-pdf"></i> View
                            </a>
                        </td>
                    </tr>
                    <tr class="hover:bg-white/5 transition">
                        <td class="py-3 px-4 text-gray-300">Feb 15, 2024</td>
                        <td class="py-3 px-4 text-white">Pro Plan - Monthly Subscription</td>
                        <td class="py-3 px-4 text-white">£59.00</td>
                        <td class="py-3 px-4"><span class="badge badge-success">Paid</span></td>
                        <td class="py-3 px-4">
                            <a href="<?php echo e(route('subscription.invoice', 2)); ?>" class="text-purple-400 hover:text-purple-300">
                                <i class="fas fa-file-pdf"></i> View
                            </a>
                        </td>
                    </tr>
                    <tr class="hover:bg-white/5 transition">
                        <td class="py-3 px-4 text-gray-300">Jan 15, 2024</td>
                        <td class="py-3 px-4 text-white">Basic Plan - Monthly Subscription</td>
                        <td class="py-3 px-4 text-white">£29.00</td>
                        <td class="py-3 px-4"><span class="badge badge-success">Paid</span></td>
                        <td class="py-3 px-4">
                            <a href="<?php echo e(route('subscription.invoice', 3)); ?>" class="text-purple-400 hover:text-purple-300">
                                <i class="fas fa-file-pdf"></i> View
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<form id="cancelSubscriptionForm" method="POST" style="display: none;">
    <?php echo csrf_field(); ?>
    <?php echo method_field('POST'); ?>
</form>

<?php $__env->startPush('scripts'); ?>
<script>
    function cancelSubscription() {
        if(confirm('Are you sure you want to cancel your subscription? You will lose access to premium features at the end of your billing period.')) {
            const form = document.getElementById('cancelSubscriptionForm');
            form.action = "<?php echo e(route('subscription.cancel')); ?>";
            form.submit();
        }
    }
    
    // Add animation to cards
    document.querySelectorAll('.glass-card').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\skietagency\wedding\code\resources\views/subscription/index.blade.php ENDPATH**/ ?>