@extends('layouts.user.account')

@section('page_title', __('labels.wallet'))

@section('page_content')
    <x-page-content pageTitle="{{ __('wallet.index-title') }}">
        <x-slot:pageCaption>
			{{ __('wallet.index-desc') }}
        </x-slot:pageCaption>
        <x-slot:pageTabs>
			@include('user.wallet.parts.tabs')
        </x-slot:pageTabs>
        <x-user.centered-content>
            <div class="mb-8">
				@if($walletData)
					<div class="mb-4 rounded-md bg-fill-qt">
						<div class="border-b border-fill-pr px-4 py-2">
							<span class="text-par-s text-lab-pr">
								{{ __('labels.balance') }}
							</span>
						</div>
						<div class="p-4">
							<div class="flex">
								<div class="flex-1 overflow-hidden">
									<h2 class="text-title-1 text-lab-pr tracking-tighter font-semibold leading-none">
										{{ currency_format($walletData->balance, $walletData->currency) }}
									</h2>
									<p class="text-par-s text-lab-sc opacity-80">
										{{ __('wallet.your-wallet-balance') }}
									</p>
								</div>
								<div class="flex-shrink-0">
									<x-icon-box bg="brand-gradient-pr">
										<span class="text-white">
											<x-ui-icon name="wallet-03" type="line"></x-ui-icon>
										</span>
									</x-icon-box>
								</div>
							</div>
						</div>
					</div>
					
					<div class="block mb-8">
						<div class="flex mb-2">
							<x-forms.button tag="a" href="{{ route('user.wallet.request-cashout') }}" text="{{ __('wallet.make-cashout-request') }}" type="button" classes="border border-dashed border-bord-pr"></x-forms.button>
						</div>
						<p class="text-cap-l text-lab-sc">
							@if($walletData->balance < config('payments.cashout.min_amount'))
								{!! __('wallet.can-request-cashout-desc', ['min_amount' => currency_format(config('payments.cashout.min_amount'))]) !!}
							@else
							   {{ __('wallet.can-request-cashout-desc') }}
							@endif
						</p>
					</div>
					<div class="mb-4">
						<div class="mb-4">
							<h2 class="text-par-n tracking-tighter font-semibold">
								{{ __('wallet.wallet-features.title') }}
							</h2>
						</div>
						<div class="block text-cap-l space-y-2">
							<div class="bg-green-50 p-3 rounded-md text-lab-pr border border-green-200">
								<h5 class="font-bold mb-1">
									✅ {{ __('wallet.wallet-features.cashout.title') }}
								</h5>
								<p>
									{{ __('wallet.wallet-features.cashout.desc') }}
								</p>
							</div>
							<div class="bg-green-50 p-3 rounded-md text-lab-pr border border-green-200">
								<h5 class="font-bold mb-1">
									✅ {{ __('wallet.wallet-features.earn.title') }}
								</h5>
								<p>
									{{ __('wallet.wallet-features.earn.desc') }}
								</p>
							</div>
							<div class="bg-green-50 p-3 rounded-md text-lab-pr border border-green-200">
								<h5 class="font-bold mb-1">
									✅ {{ __('wallet.wallet-features.purchase.title') }}
								</h5>
								<p>
									{{ __('wallet.wallet-features.purchase.desc') }}
								</p>
							</div>
						</div>
					</div>
				@endif
            </div>
        </x-user.centered-content>
    </x-page-content>
@endsection