<x-app-layout>
    <x-slot name="header">
        <div class="rounded-2xl border border-sky-200/70 bg-gradient-to-r from-sky-50 to-emerald-50 px-5 py-4">
            <h2 class="font-semibold text-xl text-sky-900 leading-tight">
                {{ __('Complete Your Payment') }}
            </h2>
            <p class="mt-1 text-sm text-sky-700">{{ __('Review your selected package and confirm the payment method for secure checkout.') }}</p>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-2xl mx-auto space-y-6 sm:px-6 lg:px-8">
            <div class="portal-card p-6">
                <h3 class="mb-4 text-lg font-semibold text-slate-900">{{ __('Order Summary') }}</h3>

                <div class="mb-4 space-y-3 border-b border-sky-100 pb-4">
                    <div class="flex justify-between text-slate-700"><span>{{ __('Package') }}</span><span class="font-semibold text-slate-900">{{ $subscription->package->name }}</span></div>
                    <div class="flex justify-between text-slate-700"><span>{{ __('Drivers') }}</span><span class="font-semibold text-slate-900">{{ $subscription->package->driver_limit }}</span></div>
                    <div class="flex justify-between text-slate-700"><span>{{ __('Trucks') }}</span><span class="font-semibold text-slate-900">{{ $subscription->package->truck_limit }}</span></div>
                    <div class="flex justify-between text-slate-700"><span>{{ __('Billing Cycle') }}</span><span class="font-semibold capitalize text-slate-900">{{ $subscription->package->billing_cycle }}</span></div>
                </div>

                <div class="flex items-baseline justify-between">
                    <span class="text-xl font-semibold text-slate-900">{{ __('Total Amount') }}</span>
                    <span class="text-3xl font-bold text-[#003D7A]">${{ number_format($subscription->getNextBillingAmount(), 2) }}</span>
                </div>

                @if ($subscription->isOnTrial())
                    <div class="mt-4 rounded-2xl border border-emerald-200 bg-emerald-50 p-4 text-emerald-900">
                        <p class="font-semibold">{{ __('7-Day Free Trial Active') }}</p>
                        <p class="text-sm">
                            {{ __('You can use the service until :date. After that, we will automatically bill your saved card based on your current driver count.', ['date' => $subscription->trial_ends_at->format('M j, Y')]) }}
                        </p>
                    </div>
                @endif
            </div>

            @if ($message = Session::get('error'))
                <div class="rounded-xl border border-red-200 bg-red-50 p-4 text-red-700 shadow-sm">
                    {{ $message }}
                </div>
            @endif

            <div class="portal-card p-6">
                <h3 class="mb-4 text-lg font-semibold text-slate-900">{{ __('Select Payment Method') }}</h3>

                @if (count($paymentMethods) > 0)
                    <form action="{{ route('payments.process') }}" method="POST" class="space-y-4">
                        @csrf

                        <input type="hidden" name="subscription_id" value="{{ $subscription->id }}" />

                        <div class="space-y-3">
                            @forelse ($paymentMethods as $method)
                                <label class="flex cursor-pointer items-start rounded-xl border border-sky-200 bg-white/80 p-4 transition hover:bg-sky-50 hover:border-sky-300"
                                    onclick="selectPaymentMethod({{ $method->id }})">
                                    <input type="radio" name="payment_method_id" value="{{ $method->id }}"
                                        class="mt-1 mr-4"
                                        {{ $loop->first ? 'checked' : '' }} />
                                    <div class="flex-1">
                                        <h4 class="font-semibold text-slate-900">{{ $method->name }}</h4>
                                        <p class="text-sm text-slate-600">{{ $method->description ?? ucfirst($method->provider) }}</p>
                                    </div>
                                    <div class="text-right">
                                        <span class="inline-block rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold capitalize text-sky-800">
                                            {{ $method->provider }}
                                        </span>
                                    </div>
                                </label>
                            @empty
                                <div class="rounded-xl border border-yellow-200 bg-yellow-50 p-4 text-yellow-800">
                                    {{ __('No payment methods are currently available. Please contact support.') }}
                                </div>
                            @endforelse
                        </div>

                        <div class="mt-6 border-t border-sky-100 pt-6">
                            <div class="flex flex-col gap-3 sm:flex-row">
                                <button type="submit"
                                    class="portal-primary-btn flex-1 rounded-xl px-4 py-3 font-semibold transition {{ count($paymentMethods) === 0 ? 'opacity-50 cursor-not-allowed' : '' }}"
                                    {{ count($paymentMethods) === 0 ? 'disabled' : '' }}>
                                    {{ __('Continue to Payment') }}
                                </button>
                                <a href="{{ route('subscriptions.index') }}"
                                    class="portal-secondary-btn flex-1 rounded-xl px-4 py-3 text-center font-semibold transition">
                                    {{ __('Cancel') }}
                                </a>
                            </div>
                        </div>
                    </form>
                @else
                    <div class="rounded-xl border border-red-200 bg-red-50 p-6">
                        <p class="text-red-800">
                            {{ __('No payment methods are currently configured. Please contact the administrator.') }}
                        </p>
                    </div>
                @endif
            </div>

            <div class="portal-note p-4 text-sm">
                <p class="flex items-start">
                    <svg class="mr-2 mt-0.5 h-5 w-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M6.707 6.707a1 1 0 010 1.414L5.414 9l1.293 1.293a1 1 0 01-1.414 1.414L4 10.414l-1.293 1.293a1 1 0 01-1.414-1.414L2.586 9 1.293 7.707a1 1 0 011.414-1.414L4 7.586l1.293-1.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                    {{ __('Your payment information is secure and encrypted. We never store your full credit card details.') }}
                </p>
            </div>
        </div>
    </div>

    <script>
        function selectPaymentMethod(methodId) {
            document.querySelector(`input[value="${methodId}"]`).checked = true;
        }
    </script>
</x-app-layout>
