@section('title', __('Subscriptions'))
<div>

    <x-baseview title="{{ __('Subscriptions') }}">
        <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
            @foreach ($subscriptions as $subscription)
                <div
                    class="relative overflow-hidden bg-white border border-gray-200 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300">
                    <!-- Popular Badge (optional, can be conditional) -->
                    @if ($loop->index === 1)
                        <div class="absolute top-4 right-4 z-10">
                            <span
                                class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-yellow-400 to-orange-500 text-white shadow-lg">
                                {{ __('Popular') }}
                            </span>
                        </div>
                    @endif

                    <!-- Header with Gradient -->
                    <div
                        class="relative text-theme bg-gradient-to-br from-primary-500 via-primary-600 to-primary-700 px-8 py-8">
                        <div class="absolute inset-0 bg-primary-500 opacity-10"></div>
                        <div class="relative text-center">
                            <!-- Plan Name -->
                            <h3 class="text-2xl font-bold mb-2">{{ $subscription->name }}</h3>

                            <!-- Price -->
                            <div class="mb-4">
                                <span class="text-5xl font-extrabold">
                                    {{ currencyFormat($subscription->amount) }}
                                </span>
                            </div>

                            <!-- Duration -->
                            <div
                                class="inline-flex items-center px-4 py-2 bg-primary-500 bg-opacity-20 rounded-full backdrop-blur-sm">
                                <svg class="w-5 h-5 mr-2" 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"></path>
                                </svg>
                                <span class="text-lg font-semibold">{{ $subscription->days }} {{ __('Days') }}</span>
                            </div>
                        </div>

                        <!-- Decorative elements -->
                        <div class="absolute top-0 right-0 w-32 h-32 -mr-16 -mt-16 opacity-20">
                            <div class="w-full h-full bg-primary-500 rounded-full"></div>
                        </div>
                        <div class="absolute bottom-0 left-0 w-24 h-24 -ml-12 -mb-12 opacity-20">
                            <div class="w-full h-full bg-primary-500 rounded-full"></div>
                        </div>
                    </div>

                    <!-- Body Content -->
                    <div class="px-8 py-8">
                        <!-- Features List -->
                        <div class="space-y-4 mb-8">
                            @if (!empty($subscription->qty))
                                <div class="flex items-start">
                                    <div class="flex-shrink-0 mt-1">
                                        <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd"
                                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                                clip-rule="evenodd"></path>
                                        </svg>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-lg font-semibold text-gray-900">{{ $subscription->qty }}
                                            {{ __('Products/Services') }}</p>
                                        <p class="text-sm text-gray-500">{{ __('Maximum items allowed per vendor') }}
                                        </p>
                                    </div>
                                </div>
                            @endif

                            <div class="flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <p class="text-lg font-semibold text-gray-900">{{ __('Full Platform Access') }}</p>
                                    <p class="text-sm text-gray-500">{{ __('Access to all features and tools') }}</p>
                                </div>
                            </div>

                            <div class="flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <p class="text-lg font-semibold text-gray-900">{{ __('Priority Support') }}</p>
                                    <p class="text-sm text-gray-500">{{ __('Get help when you need it') }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Subscribe Button -->
                        <button
                            class="w-full py-4 px-6 bg-primary-500 hover:bg-primary-600 text-theme font-bold text-lg rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 ease-in-out focus:ring-4 focus:ring-primary-200 focus:outline-none"
                            wire:click="subscriptionSelected('{{ $subscription->id }}')">
                            <span class="flex items-center justify-center">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                </svg>
                                {{ __('Choose This Plan') }}
                            </span>
                        </button>
                    </div>
                </div>
            @endforeach
        </div>
    </x-baseview>

    {{-- payment selector model --}}
    <div x-data="{ open: @entangle('showCreate') }">
        <x-modal-lg :clickAway="false">

            <div class="text-center mb-6">
                <h2 class="text-2xl font-bold text-gray-900 mb-2">{{ __('Choose Payment Method') }}</h2>
                <p class="text-gray-600">{{ __('Select your preferred payment method to complete your subscription') }}
                </p>
            </div>

            <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
                @foreach ($paymentMethods as $paymentMethod)
                    <button wire:click='initPayment({{ $paymentMethod->id }})' class="group relative overflow-hidden">
                        <div
                            class="flex items-center p-6 border-2 border-gray-200 rounded-xl shadow-sm hover:shadow-md hover:border-primary-300 transition-all duration-200 group-hover:bg-primary-50 bg-white">
                            <!-- Payment Method Icon -->
                            <div
                                class="flex-shrink-0 w-16 h-12 mr-4 flex items-center justify-center bg-gray-50 rounded-lg group-hover:bg-white transition-colors duration-200">
                                <img src="{{ $paymentMethod->photo }}" alt="{{ $paymentMethod->name }}"
                                    class="max-w-full max-h-full object-contain" />
                            </div>

                            <!-- Payment Method Name -->
                            <div class="flex-1 text-left">
                                <h3
                                    class="font-semibold text-gray-900 group-hover:text-primary-700 transition-colors duration-200">
                                    {{ $paymentMethod->name }}
                                </h3>
                                <p class="text-sm text-gray-500 group-hover:text-primary-600 mt-1">
                                    {{ __('Secure payment processing') }}
                                </p>
                            </div>

                            <!-- Arrow Icon -->
                            <div class="flex-shrink-0 ml-4">
                                <svg class="w-5 h-5 text-gray-400 group-hover:text-primary-500 transform group-hover:translate-x-1 transition-all duration-200"
                                    fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 5l7 7-7 7"></path>
                                </svg>
                            </div>
                        </div>

                        <!-- Hover overlay -->
                        <div
                            class="absolute inset-0 bg-primary-500 opacity-0 group-hover:opacity-5 transition-opacity duration-200 rounded-xl">
                        </div>
                    </button>
                @endforeach
            </div>

            <!-- Security Notice -->
            <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
                <div class="flex items-center">
                    <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                            clip-rule="evenodd"></path>
                    </svg>
                    <p class="text-sm text-green-700 font-medium">
                        {{ __('All payments are secured with industry-standard encryption') }}
                    </p>
                </div>
            </div>

        </x-modal-lg>
    </div>

    {{-- payment processing model --}}
    <div x-data="{ open: @entangle('showEdit') }">
        <x-modal :withForm="false">
            @if (($selectedPaymentMethod->slug ?? '') == 'offline')
                @include('livewire.payment.offline.subscription')
            @elseif(($selectedPaymentMethod->slug ?? '') == 'paypal')
                <div id="paypal-button-container" class="py-12"></div>
            @endif
            {{-- paytm --}}
            @include('livewire.payment.gateways.paytm')
            {{-- payU --}}
            @include('livewire.payment.gateways.payu')


            @if (($selectedPaymentMethod->slug ?? '') != 'offline')
                <p class="w-full p-4 text-sm text-center text-gray-500">{{ __('Do not close this window') }}</p>
            @endif

        </x-modal>
    </div>


</div>

@push('scripts')
    <script src="https://js.stripe.com/v3/"></script>
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    {{-- <script src="https://checkout.flutterwave.com/v3.js"></script> --}}
    {{-- <script src="https://js.paystack.co/v1/inline.js"></script> --}}
    <script
        src="https://www.paypal.com/sdk/js?client-id={{ $paypalMethod->public_key ?? '' }}&currency={{ setting('currencyCode', 'USD') }}&intent=capture">
    </script>
    <script src="{{ asset('js/subscription.js') }}"></script>
    {{-- //custom payment  --}}
@endpush