@extends('layouts.user.account')

@section('page_content')
    <x-page-content>
        <div class="flex justify-center">
            <div class="max-w-sm">
                <div class="rounded-md bg-bg-pr border border-fill-pr mb-4">
                    <div class="block p-6">
                        <div class="mb-6">
                            <h4 class="text-par-m tracking-tighter font-semibold">
                                {{ __('payment.checkout') }}
                            </h4>
                        </div>
                        <div class="flex leading-none mb-4">
                            <div class="flex-1">
                                <h3 class="text-title-2 tracking-tighter font-semibold mb-1">
                                    {{ $creditPackage['name'] }}
                                </h3>
                                <p class="text-par-s text-lab-sc">
                                    {{ $creditPackage['credits'] }} additional credits
                                </p>
                            </div>
                            <div class="flex-shrink-0 text-right">
                                <h3 class="text-title-2 tracking-tighter font-semibold mb-1">
                                    {{ $creditPackage['price_format'] }}
                                </h3>
                                <p class="text-par-s text-lab-sc">
                                    {{ __('payment.one-time') }}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="block px-6">
                        <div class="mb-4">
                            <div class="flex justify-between py-2 border-b border-fill-pr">
                                <span class="text-par-s text-lab-sc">
                                    {{ __('payment.subtotal') }}:
                                </span>
                                <span class="text-par-s text-lab-sc font-medium">
                                    {{ $creditPackage['price_format'] }}
                                </span>
                            </div>
                            <div class="flex justify-between py-2 border-b border-fill-pr">
                                <span class="text-par-s text-lab-sc">
                                    {{ __('payment.discount') }}:
                                </span>
                                <span class="text-par-s text-lab-sc font-medium">
                                    {{ currency_format(0, $creditPackage['currency']) }}
                                </span>
                            </div>
                            <div class="flex justify-between pt-2">
                                <span class="text-par-s text-lab-sc">
                                    {{ __('payment.total') }}:
                                </span>
                                <span class="text-par-s text-lab-sc font-medium">
                                    {{ $creditPackage['price_format'] }}
                                </span>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="mb-2">
                                <h2 class="text-cap-l tracking-tighter text-lab-pr2">
                                    {{ __('payment.choose-payment-method') }}
                                </h2>
                            </div>
                            <div class="block">
                                @foreach($paymentMethods as $paymentMethod)
                                    <div x-data="{ active: true }" x-on:click="active = !active">
                                        <div class="block items-center mb-4 rounded-md bg-fill-qt hover:bg-fill-tr">
                                            <a x-show="active" href="{{ route('user.credits.make-payment', ['package_id' => $creditPackage['id'], 'payment_method_id' => $paymentMethod['id']]) }}" class="block">
                                                <div class="flex items-center h-12 gap-2 px-4">
                                                    <div class="flex-shrink-0">
                                                        <img class="size-6" src="{{ asset($paymentMethod['icon']) }}" alt="Image">
                                                    </div>
                                                    <div class="flex-1 leading-none">
                                                        <h3 class="text-par-m font-medium">
                                                            {{ $paymentMethod['name'] }}
                                                        </h3>
                                                    </div>
                                                    <div class="flex-shrink-0">
                                                        <div class="size-4 text-lab-sc overflow-hidden">
                                                            <x-ui-icon name="chevron-right" type="solid"></x-ui-icon>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                            <div x-show="!active" class="h-12 flex items-center justify-center">
                                                <span class="size-6 text-brand-900">
                                                    <x-spinner></x-spinner>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <p class="text-par-s text-lab-sc">
                                {{ __('payment.you-will-be-redirected') }}
                            </p>
                        </div>
                    </div>
                    <div class="block px-6 py-4 border-t border-fill-pr">
                        <p class="text-par-s text-lab-sc">
                            {!! __('labels.tos', [
                                'privpol_link' => route('document.privacy.index'),
                                'tos_link' => route('document.terms.index')    
                            ]) !!}
                        </p>
                    </div>
                </div>
                <x-forms.button tag="a" href="{{ route('user.credits.index') }}" width="w-full" text="{{ __('labels.go-back') }}" classes="border-dashed border border-bord-pr text-brand-900 w-full text-center"></x-forms.button>
            </div>
        </div>
    </x-page-content>
@endsection