@extends('layouts.app')

@section('title', 'Subscriptions')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div>
        <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">Subscriptions</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">Manage customer subscription plans and billing</p>
    </div>

    <!-- Stats Summary -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
        <div class="card border-l-4 border-blue-500">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Active Subscriptions</p>
                    <h3 class="text-3xl font-bold text-blue-600 dark:text-blue-400">1,247</h3>
                </div>
                <svg class="w-8 h-8 text-blue-500 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
                </svg>
            </div>
        </div>

        <div class="card border-l-4 border-orange-500">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Expiring Soon</p>
                    <h3 class="text-3xl font-bold text-orange-600 dark:text-orange-400">23</h3>
                </div>
                <svg class="w-8 h-8 text-orange-500 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
        </div>

        <div class="card border-l-4 border-green-500">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Monthly Revenue</p>
                    <h3 class="text-3xl font-bold text-green-600 dark:text-green-400">$87,540</h3>
                </div>
                <svg class="w-8 h-8 text-green-500 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
        </div>

        <div class="card border-l-4 border-red-500">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Cancelled</p>
                    <h3 class="text-3xl font-bold text-red-600 dark:text-red-400">18</h3>
                </div>
                <svg class="w-8 h-8 text-red-500 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
        </div>
    </div>

    <!-- Subscription Plans Tabs -->
    <div class="card p-0 overflow-hidden">
        <div class="border-b border-gray-200 dark:border-gray-700">
            <nav class="flex -mb-px overflow-x-auto">
                <button class="px-6 py-4 text-sm font-medium border-b-2 border-blue-500 text-blue-600 dark:text-blue-400 whitespace-nowrap">
                    All Plans
                </button>
                <button class="px-6 py-4 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 whitespace-nowrap">
                    Premium
                </button>
                <button class="px-6 py-4 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 whitespace-nowrap">
                    Business
                </button>
                <button class="px-6 py-4 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 whitespace-nowrap">
                    Basic
                </button>
                <button class="px-6 py-4 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 whitespace-nowrap">
                    Expiring
                </button>
            </nav>
        </div>

        <div class="p-6">
            <!-- Subscription Cards Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Subscription Card 1 -->
                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition-all duration-200 bg-white dark:bg-gray-800">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h4 class="text-lg font-bold text-gray-900 dark:text-white">John Doe</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">john@email.com</p>
                        </div>
                        <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">Premium</span>
                    </div>
                    <div class="space-y-2 mb-4">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Started:</span>
                            <span class="font-medium text-gray-900 dark:text-white">Jan 15, 2023</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Expires:</span>
                            <span class="font-medium text-gray-900 dark:text-white">Jan 15, 2025</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Amount:</span>
                            <span class="font-bold text-green-600 dark:text-green-400">$299.99/mo</span>
                        </div>
                    </div>
                    <div class="flex gap-2">
                        <button class="flex-1 btn btn-primary text-sm py-2">Renew</button>
                        <button class="flex-1 btn btn-secondary text-sm py-2">Details</button>
                    </div>
                </div>

                <!-- Subscription Card 2 -->
                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition-all duration-200 bg-white dark:bg-gray-800">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h4 class="text-lg font-bold text-gray-900 dark:text-white">Sarah Johnson</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">sarah@email.com</p>
                        </div>
                        <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Business</span>
                    </div>
                    <div class="space-y-2 mb-4">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Started:</span>
                            <span class="font-medium text-gray-900 dark:text-white">Mar 10, 2023</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Expires:</span>
                            <span class="font-medium text-gray-900 dark:text-white">Mar 10, 2025</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Amount:</span>
                            <span class="font-bold text-green-600 dark:text-green-400">$199.99/mo</span>
                        </div>
                    </div>
                    <div class="flex gap-2">
                        <button class="flex-1 btn btn-primary text-sm py-2">Renew</button>
                        <button class="flex-1 btn btn-secondary text-sm py-2">Details</button>
                    </div>
                </div>

                <!-- Subscription Card 3 - Expiring Soon -->
                <div class="border border-orange-300 dark:border-orange-700 rounded-lg p-6 hover:shadow-lg transition-all duration-200 bg-orange-50 dark:bg-orange-900/20">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h4 class="text-lg font-bold text-gray-900 dark:text-white">Michael Chen</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">michael@email.com</p>
                        </div>
                        <span class="px-2 py-1 text-xs font-medium rounded-full bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200">Basic</span>
                    </div>
                    <div class="space-y-2 mb-4">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Started:</span>
                            <span class="font-medium text-gray-900 dark:text-white">Dec 20, 2023</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Expires:</span>
                            <span class="font-medium text-orange-600 dark:text-orange-400">Dec 25, 2024</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Amount:</span>
                            <span class="font-bold text-green-600 dark:text-green-400">$99.99/mo</span>
                        </div>
                    </div>
                    <div class="bg-orange-100 dark:bg-orange-900/40 border border-orange-300 dark:border-orange-700 rounded p-2 mb-3">
                        <p class="text-xs text-orange-800 dark:text-orange-200 flex items-center">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                            </svg>
                            Expires in 5 days
                        </p>
                    </div>
                    <div class="flex gap-2">
                        <button class="flex-1 btn btn-primary text-sm py-2">Renew Now</button>
                        <button class="flex-1 btn btn-secondary text-sm py-2">Details</button>
                    </div>
                </div>

                <!-- Subscription Card 4 -->
                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition-all duration-200 bg-white dark:bg-gray-800">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h4 class="text-lg font-bold text-gray-900 dark:text-white">Emily Brown</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">emily@email.com</p>
                        </div>
                        <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">Premium</span>
                    </div>
                    <div class="space-y-2 mb-4">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Started:</span>
                            <span class="font-medium text-gray-900 dark:text-white">Feb 05, 2023</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Expires:</span>
                            <span class="font-medium text-gray-900 dark:text-white">Feb 05, 2025</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Amount:</span>
                            <span class="font-bold text-green-600 dark:text-green-400">$299.99/mo</span>
                        </div>
                    </div>
                    <div class="flex gap-2">
                        <button class="flex-1 btn btn-primary text-sm py-2">Renew</button>
                        <button class="flex-1 btn btn-secondary text-sm py-2">Details</button>
                    </div>
                </div>

                <!-- Subscription Card 5 -->
                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition-all duration-200 bg-white dark:bg-gray-800">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h4 class="text-lg font-bold text-gray-900 dark:text-white">David Wilson</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">david@email.com</p>
                        </div>
                        <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Business</span>
                    </div>
                    <div class="space-y-2 mb-4">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Started:</span>
                            <span class="font-medium text-gray-900 dark:text-white">Apr 18, 2023</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Expires:</span>
                            <span class="font-medium text-gray-900 dark:text-white">Apr 18, 2025</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Amount:</span>
                            <span class="font-bold text-green-600 dark:text-green-400">$199.99/mo</span>
                        </div>
                    </div>
                    <div class="flex gap-2">
                        <button class="flex-1 btn btn-primary text-sm py-2">Renew</button>
                        <button class="flex-1 btn btn-secondary text-sm py-2">Details</button>
                    </div>
                </div>

                <!-- Subscription Card 6 -->
                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition-all duration-200 bg-white dark:bg-gray-800">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h4 class="text-lg font-bold text-gray-900 dark:text-white">Lisa Anderson</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">lisa@email.com</p>
                        </div>
                        <span class="px-2 py-1 text-xs font-medium rounded-full bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200">Basic</span>
                    </div>
                    <div class="space-y-2 mb-4">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Started:</span>
                            <span class="font-medium text-gray-900 dark:text-white">Jun 22, 2023</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Expires:</span>
                            <span class="font-medium text-gray-900 dark:text-white">Jun 22, 2025</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600 dark:text-gray-400">Amount:</span>
                            <span class="font-bold text-green-600 dark:text-green-400">$99.99/mo</span>
                        </div>
                    </div>
                    <div class="flex gap-2">
                        <button class="flex-1 btn btn-primary text-sm py-2">Renew</button>
                        <button class="flex-1 btn btn-secondary text-sm py-2">Details</button>
                    </div>
                </div>
            </div>

            <!-- Pagination -->
            <div class="mt-6 flex flex-col sm:flex-row justify-between items-center gap-4">
                <div class="text-sm text-gray-600 dark:text-gray-400">
                    Showing <strong>1-6</strong> of <strong>1,247</strong> subscriptions
                </div>
                <nav class="flex space-x-2">
                    <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700">Previous</button>
                    <button class="px-3 py-2 text-sm border border-blue-500 rounded-md text-white bg-blue-500">1</button>
                    <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">2</button>
                    <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">3</button>
                    <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">Next</button>
                </nav>
            </div>
        </div>
    </div>
</div>
@endsection