@extends('layouts.app')

@section('title', 'Subscription Plans')

@php
    $isVerified = auth()->user()->vendor && auth()->user()->vendor->is_verified === 1;
@endphp

@section('content')
<div class="min-h-screen bg-gradient-to-br from-[#BF6679]/10 to-[#A34E5D]/10 py-8">
    <!-- Background decoration -->
    <div class="absolute inset-0 overflow-hidden">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-[#BF6679]/20 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-[#A34E5D]/20 rounded-full blur-3xl"></div>
    </div>
    
    <div class="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header -->
        <div class="text-center mb-12">
            <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-gradient-to-r from-[#BF6679] to-[#A34E5D] shadow-lg mb-4">
                <i class="fas fa-crown text-white text-2xl"></i>
            </div>
            <h1 class="text-4xl font-bold text-gray-900 mb-4">Choose Your Plan</h1>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto">
                Simple, transparent pricing that grows with your business
            </p>
        </div>

        <!-- Subscription Plans -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
            <!-- Starter Plan -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-lg">
                <div class="p-6">
                    <div class="text-center mb-4">
                        <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-rocket text-gray-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-1">Starter</h3>
                        <p class="text-sm text-gray-600 mb-3">Perfect for small businesses</p>
                        <div class="text-3xl font-bold text-gray-900 mb-1">
                            RM129
                        </div>
                        <p class="text-sm text-gray-600">
                            per month
                        </p>
                    </div>
                    
                    <div class="space-y-2 mb-6">
                        <div class="flex items-center text-sm">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span class="text-gray-700">50 Credits</span>
                        </div>
                        <div class="flex items-center text-sm">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span class="text-gray-700">10 Projects/month</span>
                        </div>
                        <div class="flex items-center text-sm">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span class="text-gray-700">50 Bids/month</span>
                        </div>
                        <div class="flex items-center text-sm">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span class="text-gray-700">Basic Support</span>
                        </div>
                    </div>
                    
                    <form action="/vendor/subscriptions/1/purchase" method="POST" class="w-full">
                        @csrf
                        @if($isVerified)
                            <button type="submit" class="w-full py-2 px-4 rounded-lg font-semibold bg-gray-800 hover:bg-gray-900 text-white transition-all duration-200 text-sm"
                                    onclick="return confirm('Are you sure you want to purchase Starter plan for RM129/month?')">
                                Get Started
                            </button>
                        @else
                            <button type="button" disabled class="w-full py-2 px-4 rounded-lg font-semibold bg-gray-400 text-gray-600 cursor-not-allowed text-sm relative"
                                    title="Complete KYC verification to subscribe">
                                Get Started
                                <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 hover:opacity-100 transition-opacity whitespace-nowrap">
                                    Complete KYC verification first
                                </span>
                            </button>
                        @endif
                    </form>
                </div>
            </div>

            <!-- Professional Plan (Featured) -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl border-2 border-[#BF6679] relative">
                <div class="absolute top-0 left-0 right-0 bg-gradient-to-r from-[#BF6679] to-[#A34E5D] text-white text-center py-1 text-xs font-bold">
                    ⭐ MOST POPULAR
                </div>
                
                <div class="p-6 pt-8">
                    <div class="text-center mb-4">
                        <div class="w-12 h-12 bg-gradient-to-r from-[#BF6679] to-[#A34E5D] rounded-full flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-star text-white text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-1">Professional</h3>
                        <p class="text-sm text-gray-600 mb-3">Ideal for growing businesses</p>
                        <div class="text-3xl font-bold text-[#BF6679] mb-1">
                            RM349
                        </div>
                        <p class="text-sm text-gray-600">
                            per month
                            <span class="block text-xs text-green-600 font-semibold">Save 20% annually!</span>
                        </p>
                    </div>
                    
                    <div class="space-y-2 mb-6">
                        <div class="flex items-center text-sm">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span class="text-gray-700">200 Credits</span>
                        </div>
                        <div class="flex items-center text-sm">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span class="text-gray-700">Unlimited Projects</span>
                        </div>
                        <div class="flex items-center text-sm">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span class="text-gray-700">Unlimited Bids</span>
                        </div>
                        <div class="flex items-center text-sm">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span class="text-gray-700">Priority Support</span>
                        </div>
                        <div class="flex items-center text-sm">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span class="text-gray-700">Advanced Analytics</span>
                        </div>
                    </div>
                    
                    <form action="/vendor/subscriptions/2/purchase" method="POST" class="w-full">
                        @csrf
                        @if($isVerified)
                            <button type="submit" class="w-full py-2 px-4 rounded-lg font-semibold bg-gradient-to-r from-[#BF6679] to-[#A34E5D] hover:from-[#A34E5D] hover:to-[#BF6679] text-white shadow-md transition-all duration-200 text-sm"
                                    onclick="return confirm('Are you sure you want to purchase Professional plan for RM349/month?')">
                                Get Started Now
                            </button>
                        @else
                            <button type="button" disabled class="w-full py-2 px-4 rounded-lg font-semibold bg-gray-400 text-gray-600 cursor-not-allowed text-sm relative"
                                    title="Complete KYC verification to subscribe">
                                Get Started Now
                                <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 hover:opacity-100 transition-opacity whitespace-nowrap">
                                    Complete KYC verification first
                                </span>
                            </button>
                        @endif
                    </form>
                </div>
            </div>

            <!-- Enterprise Plan -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-lg">
                <div class="p-6">
                    <div class="text-center mb-4">
                        <div class="w-12 h-12 bg-gray-900 rounded-full flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-building text-white text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-1">Enterprise</h3>
                        <p class="text-sm text-gray-600 mb-3">For large-scale operations</p>
                        <div class="text-3xl font-bold text-gray-900 mb-1">
                            RM899
                        </div>
                        <p class="text-sm text-gray-600">
                            per month
                            <span class="block text-xs text-green-600 font-semibold">Save 25% annually!</span>
                        </p>
                    </div>
                    
                    <div class="space-y-2 mb-6">
                        <div class="flex items-center text-sm">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span class="text-gray-700">Unlimited Credits</span>
                        </div>
                        <div class="flex items-center text-sm">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span class="text-gray-700">Unlimited Projects</span>
                        </div>
                        <div class="flex items-center text-sm">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span class="text-gray-700">Unlimited Bids</span>
                        </div>
                        <div class="flex items-center text-sm">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span class="text-gray-700">24/7 Support</span>
                        </div>
                        <div class="flex items-center text-sm">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span class="text-gray-700">API Access</span>
                        </div>
                    </div>
                    
                    <form action="/vendor/subscriptions/3/purchase" method="POST" class="w-full">
                        @csrf
                        @if($isVerified)
                            <button type="submit" class="w-full py-2 px-4 rounded-lg font-semibold bg-gray-900 hover:bg-black text-white transition-all duration-200 text-sm"
                                    onclick="return confirm('Are you sure you want to purchase Enterprise plan for RM899/month?')">
                                Contact Sales
                            </button>
                        @else
                            <button type="button" disabled class="w-full py-2 px-4 rounded-lg font-semibold bg-gray-400 text-gray-600 cursor-not-allowed text-sm relative"
                                    title="Complete KYC verification to subscribe">
                                Contact Sales
                                <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 hover:opacity-100 transition-opacity whitespace-nowrap">
                                    Complete KYC verification first
                                </span>
                            </button>
                        @endif
                    </form>
                </div>
            </div>
        </div>

        <!-- Current Subscription Info -->
        @if (auth()->user()->vendor && auth()->user()->vendor->subscription && auth()->user()->vendor->subscription->exists())
            <div class="bg-gradient-to-r from-[#BF6679]/10 to-[#A34E5D]/10 rounded-2xl p-8 border border-[#BF6679]/20">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-2xl font-bold text-[#BF6679] mb-2">Your Current Plan</h3>
                        <p class="text-[#BF6679] font-semibold text-lg">{{ auth()->user()->vendor->subscription->name }}</p>
                        <p class="text-[#BF6679]/80">Valid until {{ auth()->user()->vendor->subscription->expires_at->format('F d, Y') }}</p>
                    </div>
                    <div class="text-center">
                        <p class="text-3xl font-bold text-[#BF6679] mb-1">{{ auth()->user()->vendor->credits }} Credits</p>
                        <p class="text-[#BF6679]/80">Available Balance</p>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection