@extends('livewire.giveaway.public.parts.modals.modal')

@section('modal_content')
	<div class="block">
		<div class="flex justify-between mb-4">
			<h3 class="text-par-l font-bold text-lab-pr2">
				<!-- {{ __('giveaway.paid-entry.title') }} -->
				{{ $actionData['title'] }}
			</h3>
			<button wire:click="closeUnlockEntryModal" class="text-par-s text-lab-sc smoothing hover:text-red-500">
				{{ __('labels.close') }}
			</button>
		</div>
		<div class="block">
			<div class="flex justify-center mb-2">
				<x-icon-box bg="brand-gradient-pr">
					<span class="text-white">
						<x-ui-icon name="lock-03" type="line"></x-ui-icon>
					</span>
				</x-icon-box>

			</div>
			<div class="text-center border-b border-fill-pr pb-3 mb-3">
				<h4 class="text-lab-pr text-par-m tracking-tighter font-semibold">
					{{ __('giveaway.paid-entry.unlock', ['fee_amount' => currency_format($actionData['amount'])]) }}
				</h4>
				<p class="text-lab-sc text-par-s">
					{{ __('giveaway.paid-entry.desc') }}
				</p>
			</div>
			@if ($errors->any())
				<div class="block mb-4 space-y-2">
					@foreach ($errors->all() as $error)
						<div class="p-3 bg-red-100 rounded-md">
							<x-forms.valerr>
								{{ $error }}
							</x-forms.valerr>
						</div>
					@endforeach
				</div>
			@endif

			<div class="block">
				<div class="mb-2">
					<h2 class="text-cap-l tracking-tighter text-lab-pr2">
						{{ __('payment.choose-payment-method') }}
					</h2>
				</div>
				@foreach($paymentMethods as $paymentMethod)
					<div x-data="{ active: true }"
						x-on:click="active = false; $wire.makeExtraItemFeePayment('{{ $paymentMethod['id'] }}', '{{ $actionData['id'] }}')">
						<div class="block items-center cursor-pointer mb-4 rounded-md border border-fill-pr hover:border-lab-sc">
							<button x-show="active" class="block outline-none" type="button">
								<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>
							</button>
							<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>

			<div class="block mb-4">
				<p class="text-par-s text-lab-sc">
					{{ __('payment.you-will-be-redirected') }}
				</p>
			</div>

			<div class="block pt-4 border-t border-fill-pr">
				<p class="text-cap-l text-lab-sc">
					{{ __('giveaway.paid-entry.unlock-tos') }}
				</p>
			</div>
		</div>
	</div>
@endsection