<x-admin-app-layout>

    <div class="white-box grow">
        <x-admin::page-header :title="__('User Withdraw & Bank Transfer Information')" :isFilterable="false" :buttons="$buttons" />
        <div class="flex flex-col lg:flex-row">
            <ul class="s-text flex-1">
                <li
                    class="border-y border-neutral-30 flex justify-between items-center dark:border-neutral-500 md:border-r">
                    <span class="p-5 inline-block">{{ __('User Name') }}</span>
                    <span class="p-5 inline-block">{{ $withdrawal?->user?->full_name }}</span>
                </li>
                <li
                    class="border-b border-neutral-30 flex justify-between items-center dark:border-neutral-500 md:border-r">
                    <span class="p-5 inline-block">{{ __('Email') }}</span>
                    <span class="p-5 inline-block">{{ $withdrawal?->user?->email }}</span>
                </li>
                @foreach ($withdrawal->fields as $item)
                    <li
                        class="border-b border-neutral-30 flex justify-between items-center dark:border-neutral-500 md:border-r">
                        <span class="p-5 inline-block">{{ ucwords(str_replace('_', ' ', $item['label'])) }}</span>
                        <span class="p-5 inline-block">{{ $item['value'] }}</span>
                    </li>
                @endforeach
            </ul>
            <ul class="s-text flex-1">
                <li
                    class="max-lg:border-b lg:border-y border-neutral-30 flex justify-between items-center dark:border-neutral-500">
                    <span class="p-5 inline-block">{{ __('Coins') }}</span>
                    <span class="inline-block px-5">{{ Number::format($withdrawal->coins) }}</span>
                </li>
                <li
                    class="max-lg:border-b lg:border-y border-neutral-30 flex justify-between items-center dark:border-neutral-500">
                    <span class="p-5 inline-block">{{ __('Amount') }}</span>
                    <span class="inline-block px-5">{{ amountWithSymbol(Number::format($withdrawal->amount)) }}</span>
                </li>
                <li class="border-b border-neutral-30 flex justify-between items-center dark:border-neutral-500">
                    <span class="p-5 inline-block">{{ __('Transaction Number') }}</span>
                    <span class="p-5 inline-block">{{ $withdrawal->track }}</span>
                </li>
                <li class="border-b border-neutral-30 flex justify-between items-center dark:border-neutral-500">
                    <span class="p-5 inline-block">{{ __('Charge') }}</span>
                    <span class="p-5 inline-block">{{ amountWithSymbol(Number::format($withdrawal->charge)) }}</span>
                </li>
                <li class="border-b border-neutral-30 flex justify-between items-center dark:border-neutral-500">
                    <span class="p-5 inline-block">{{ __('Currency') }}</span>
                    <span class="p-5 inline-block">{{ $withdrawal->currency }}</span>
                </li>
                <li class="border-b border-neutral-30 flex justify-between items-center dark:border-neutral-500">
                    <span class="p-5 inline-block">{{ __('Rate') }}</span>
                    <span
                        class="p-5 inline-block">{{ amountWithSymbol(currencyRate($withdrawal->currency, defaultCurrency()->code), $withdrawal->currency) }}</span>
                </li>
                <li class="border-b border-neutral-30 flex justify-between items-center dark:border-neutral-500">
                    <span class="p-5 inline-block">{{ __('After Rate Conversion') }}</span>
                    <span
                        class="p-5 inline-block">{{ amountWithSymbol($withdrawal->converted_amount, $withdrawal->currency) }}</span>
                </li>
                <li class="border-b border-neutral-30 flex justify-between items-center dark:border-neutral-500">
                    <span class="p-5 inline-block">Status</span>
                    <span class="inline-block px-5">
                        <span
                            class="status {{ $withdrawal->status->color() }}">{{ $withdrawal->status->label() }}</span>
                    </span>
                </li>
            </ul>


        </div>
        @if ($withdrawal->isPending())
            <div class="flex justify-end mt-4 gap-4">
                <x-admin::primary-button type="button"
                    data-action="{{ route('admin.withdrawals.update', $withdrawal) }}"
                    data-status="{{ \App\Enums\WithdrawStatusEnum::APPROVED->value }}"
                    class="btn-success handle-action">
                    {{ __('Approve') }}
                </x-admin::primary-button>
                <x-admin::primary-button type="button"
                    data-action="{{ route('admin.withdrawals.update', $withdrawal) }}"
                    data-status="{{ \App\Enums\WithdrawStatusEnum::REJECTED->value }}" class="btn-error handle-action">
                    {{ __('Reject') }}
                </x-admin::primary-button>
            </div>
        @endif
    </div>
    @push('scripts')
        @vite('resources/admin/js/withdraw/details.js')
    @endpush
</x-admin-app-layout>
