@extends('layouts.user.account')

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

@section('page_content')
    <x-page-content pageTitle="{{ __('credit.index-title') }}">
        <x-slot:pageCaption>
            {{ __('credit.index-desc') }}
        </x-slot:pageCaption>
        <x-slot:pageTabs>
            @include('user.credit.parts.tabs')
        </x-slot:pageTabs>

        <x-user.centered-content>
            <div class="mb-8">
                <div class="mb-8 rounded-md bg-fill-qt">
                    <div class="border-b border-b-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">
                                    {{ me()->credits_balance }}
                                </h2>
                                <p class="text-par-s text-lab-sc opacity-80">
                                    {{ __('labels.your-credits') }}
                                </p>
                            </div>
                            <div class="flex-shrink-0">
                                <x-icon-box bg="brand-gradient-pr">
                                    <span class="text-white">
                                        <x-ui-icon name="coins-01"></x-ui-icon>
                                    </span>
                                </x-icon-box>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mb-4">
                    <h2 class="text-par-m tracking-tighter font-semibold">
                        {{ __('credit.purchase-credits') }}
                    </h2>
                    <p class="text-par-s text-lab-sc">
                        {{ __('credit.purchase-credits-helper') }}
                    </p>
                </div>
                <div class="block">
                    @foreach($creditPackages as $creditPackage)
                        <a href="{{ route('user.credits.purchase', ['package_id' => $creditPackage['id']]) }}">
                            <div class="border border-fill-pr border-dashed p-1 mb-2 rounded-md smoothing hover:border-brand-900 cursor-pointer">
                                <div class="bg-fill-qt p-4 rounded-sm">
                                    <div class="flex">
                                        <div class="flex-shrink-0 leading-tight self-center">
                                            <div class="size-9 rounded-full inline-flex-center" style="background-color: {{ $creditPackage['color'] }};">
                                                <span class="size-4 text-white">
                                                    <x-ui-icon name="coins-01"></x-ui-icon>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="flex-shrink-0 leading-tight flex-1 ml-4">
                                            <h4 class="font-bold text-title-3">
                                                {{ $creditPackage['credits'] }} 
                                            </h4>
                                            <p class="text-lab-sc text-par-s">{{ __('labels.additional-credits') }}</p>
                                        </div>
                                        <div class="text-right leading-tight">
                                            <h4 class="font-bold text-par-m">{{ $creditPackage['price'] }} {{ $creditPackage['currency'] }}</h4>
                                            <p class="text-lab-sc text-par-s">
                                                {{ __('labels.one-time-payment') }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </x-user.centered-content>
    </x-page-content>
@endsection