<x-admin-app-layout>
    <div class="white-box grow">
        <x-admin::page-header :title="__('Deposit Details')" :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">{{ $deposit->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">{{ $deposit->user?->email }}</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">{{ __('Phone') }}</span>
                    <span class="p-5 inline-block">{{ $deposit->user?->phone }}</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">{{ __('Total Coins') }}</span>
                    <span class="p-5 inline-block">{{ $deposit->coins }}</span>
                </li>
            </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">{{ __('Amount') }}</span>
                    <span class="inline-block px-5">{{ amountWithSymbol($deposit->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">{{ __('Currency') }}</span>
                    <span class="p-5 inline-block">{{ $deposit->payment?->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">{{ __('Payment Gateway') }}</span>
                    <span class="p-5 inline-block">{{ $deposit->payment?->paymentMethod?->name }}</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 ID') }}</span>
                    <span class="p-5 inline-block">{{ $deposit->payment?->payment_identifier }}</span>
                </li>
                <li class="border-b border-neutral-30 flex justify-between items-center dark:border-neutral-500">
                    <span class="p-5 inline-block">{{ __('Deposit Method') }}</span>
                    <span class="p-5 inline-block">{{ $deposit->payment->paymentMethod?->name ?? '-' }}</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="p-5 inline-block">
                        <span class="status {{ $deposit->status->color() }}">
                            {{ $deposit->status->label() }}
                        </span>
                    </span>
                </li>
                <li class="border-b border-neutral-30 flex justify-between items-center dark:border-neutral-500">
                    <span class="p-5 inline-block">{{ __('Created At') }}</span>
                    <span class="p-5 inline-block">
                        {{ $deposit->created_at->format('Y-m-d H:i A') }} <br>
                        <small class="text-xs border-neutral-30">{{ $deposit->created_at->diffForHumans() }}</small>
                    </span>
                </li>
            </ul>
        </div>
    </div>
</x-admin-app-layout>
