@extends('layouts.vendor')

@section('title', 'Packages & Subscription')

@section('content')
<div class="space-y-6">
    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Packages & Subscription</h1>
            <p class="text-sm text-gray-500 mt-1">Choose a plan to boost your store visibility</p>
        </div>
        <a href="{{ route('vendor.packages.history') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition">
            <svg class="w-4 h-4" 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>
            Purchase History
        </a>
    </div>

    {{-- Current Subscription Status --}}
    @if($currentPurchase)
    <div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl p-6 text-white">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <p class="text-indigo-100 text-sm font-medium">Current Plan</p>
                <h2 class="text-2xl font-bold mt-1">{{ $currentPurchase->package->name }}</h2>
                <p class="text-indigo-100 text-sm mt-2">
                    Expires: <span class="font-semibold text-white">{{ $currentPurchase->expires_at->format('M d, Y') }}</span>
                    @if($currentPurchase->expires_at->isPast())
                        <span class="ml-2 px-2 py-0.5 bg-red-500 text-white text-xs rounded-full font-medium">Expired</span>
                    @elseif($currentPurchase->expires_at->diffInDays() <= 7)
                        <span class="ml-2 px-2 py-0.5 bg-yellow-500 text-white text-xs rounded-full font-medium">Expiring Soon</span>
                    @else
                        <span class="ml-2 px-2 py-0.5 bg-green-500 text-white text-xs rounded-full font-medium">Active</span>
                    @endif
                </p>
            </div>
            <div class="flex items-center gap-3">
                <div class="text-right">
                    <p class="text-indigo-100 text-sm">Product Limit</p>
                    <p class="text-xl font-bold">{{ auth()->user()->currentPackage->product_limit == 0 ? 'Unlimited' : auth()->user()->currentPackage->product_limit }}</p>
                </div>
                <div class="w-px h-10 bg-white/20"></div>
                <div class="text-right">
                    <p class="text-indigo-100 text-sm">Products Listed</p>
                    <p class="text-xl font-bold">{{ auth()->user()->product_count }}</p>
                </div>
            </div>
        </div>
        @if(auth()->user()->currentPackage->product_limit > 0)
        <div class="mt-4 bg-white/20 rounded-lg p-3">
            <div class="flex items-center justify-between text-sm mb-2">
                <span>Product Usage</span>
                <span>{{ auth()->user()->product_count }} / {{ auth()->user()->currentPackage->product_limit }}</span>
            </div>
            <div class="w-full bg-white/30 rounded-full h-2">
                <div class="bg-white h-2 rounded-full transition-all" style="width: {{ min(100, (auth()->user()->product_count / auth()->user()->currentPackage->product_limit) * 100) }}%"></div>
            </div>
        </div>
        @endif
    </div>
    @else
    <div class="bg-amber-50 border border-amber-200 rounded-2xl p-6">
        <div class="flex items-start gap-4">
            <div class="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
                <svg class="w-5 h-5 text-amber-600" 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-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
            </div>
            <div>
                <h3 class="font-semibold text-amber-800">No Active Subscription</h3>
                <p class="text-sm text-amber-700 mt-1">You need an active package to list products. Choose a plan below to get started.</p>
            </div>
        </div>
    </div>
    @endif

    {{-- Available Packages --}}
    <div>
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Available Plans</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($packages as $package)
            <div class="bg-white border-2 rounded-2xl overflow-hidden transition-all hover:shadow-lg {{ $currentPurchase && $currentPurchase->package_id == $package->id ? 'border-indigo-500 shadow-md' : 'border-gray-100' }}">
                @if($package->is_featured)
                <div class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white text-xs font-semibold text-center py-1.5">
                    FEATURED
                </div>
                @endif
                <div class="p-6">
                    @if($package->image_url)
                    <img src="{{ $package->image_url }}" alt="{{ $package->name }}" class="w-full h-40 object-cover rounded-xl mb-4">
                    @endif
                    <h3 class="text-xl font-bold text-gray-900">{{ $package->name }}</h3>
                    <p class="text-sm text-gray-500 mt-1">{{ $package->description }}</p>

                    <div class="mt-4 flex items-baseline gap-1">
                        <span class="text-3xl font-bold text-gray-900">${{ number_format($package->price, 2) }}</span>
                        <span class="text-gray-500 text-sm">/{{ $package->duration_days }} days</span>
                    </div>

                    <ul class="mt-4 space-y-2">
                        <li class="flex items-center gap-2 text-sm text-gray-600">
                            <svg class="w-4 h-4 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                            {{ $package->product_limit == 0 ? 'Unlimited' : $package->product_limit }} products
                        </li>
                        @if(is_array($package->features))
                            @foreach($package->features as $feature)
                            <li class="flex items-center gap-2 text-sm text-gray-600">
                                <svg class="w-4 h-4 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                                {{ $feature }}
                            </li>
                            @endforeach
                        @endif
                    </ul>

                    @if($currentPurchase && $currentPurchase->package_id == $package->id && $currentPurchase->isActive())
                        <button disabled class="mt-6 w-full py-2.5 bg-gray-100 text-gray-500 rounded-xl font-medium cursor-not-allowed">
                            Current Plan
                        </button>
                    @else
                        <button onclick="openPurchaseModal({{ $package->id }}, '{{ $package->name }}', {{ $package->price }})" class="mt-6 w-full py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-medium transition">
                            Purchase Now
                        </button>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>

{{-- Purchase Modal --}}
<div id="purchaseModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closePurchaseModal()"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
                        <svg class="h-6 w-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                        <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Purchase <span id="modalPackageName"></span></h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-500">Amount: <span class="font-semibold text-gray-900">$<span id="modalPackagePrice"></span></span></p>
                        </div>

                        <form id="purchaseForm" method="POST" class="mt-4 space-y-4">
                            @csrf
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Payment Method</label>
                                <div class="space-y-3">
                                    <label class="flex items-center p-3 border rounded-xl cursor-pointer hover:bg-gray-50 transition">
                                        <input type="radio" name="payment_method" value="online" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
                                        <div class="ml-3">
                                            <span class="block text-sm font-medium text-gray-900">Online Payment</span>
                                            <span class="block text-xs text-gray-500">Pay via Stripe, Paystack, or Flutterwave</span>
                                        </div>
                                    </label>
                                    <label class="flex items-center p-3 border rounded-xl cursor-pointer hover:bg-gray-50 transition">
                                        <input type="radio" name="payment_method" value="wallet" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
                                        <div class="ml-3">
                                            <span class="block text-sm font-medium text-gray-900">Wallet Balance</span>
                                            <span class="block text-xs text-gray-500">Pay from your vendor wallet</span>
                                        </div>
                                    </label>
                                    <label class="flex items-center p-3 border rounded-xl cursor-pointer hover:bg-gray-50 transition">
                                        <input type="radio" name="payment_method" value="offline" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
                                        <div class="ml-3">
                                            <span class="block text-sm font-medium text-gray-900">Offline Payment</span>
                                            <span class="block text-xs text-gray-500">Bank transfer, pending admin approval</span>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button type="submit" form="purchaseForm" class="w-full inline-flex justify-center rounded-xl border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
                    Confirm Purchase
                </button>
                <button type="button" onclick="closePurchaseModal()" class="mt-3 w-full inline-flex justify-center rounded-xl border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let selectedPackageId = null;

function openPurchaseModal(packageId, packageName, price) {
    selectedPackageId = packageId;
    document.getElementById('modalPackageName').textContent = packageName;
    document.getElementById('modalPackagePrice').textContent = price.toFixed(2);
    document.getElementById('purchaseForm').action = `/vendor/packages/${packageId}/purchase`;
    document.getElementById('purchaseModal').classList.remove('hidden');
}

function closePurchaseModal() {
    document.getElementById('purchaseModal').classList.add('hidden');
    selectedPackageId = null;
}
</script>
@endsection