@props(['wallet'])
<div class="p-5 my-1 bg-gray-100 dark:bg-bg rounded-xl">
    <div class="grid grid-cols-2 gap-4">
        <x-item.text-tile title="Invoice #">{{ env('WALLET_PREFIX') . $wallet->id }}</x-item.text-tile>
        <x-item.text-tile
            title="Date">{{ \Carbon\Carbon::parse($wallet->created_at)->format('jS M Y \a\t H:i') }}</x-item.text-tile>
        <x-item.text-tile title="Type">Deposit</x-item.text-tile>
        <x-item.text-tile title="Amount">GH&#8373; {{ number_format($wallet->amount_load, 2) }}</x-item.text-tile>
        <x-item.text-tile title="Current Balance">GH&#8373;
            {{ number_format($wallet->current_bal, 2) }}</x-item.text-tile>
        @if ($wallet->status == 'completed')
            <x-item.text-tile title="New Balance">GH&#8373; {{ number_format($wallet->new_bal, 2) }}</x-item.text-tile>
        @endif
        @role('Admin|SuperAdmin')
            <x-item.text-tile
                title="Agent">{{ $wallet->agent->name . ' - ' . env('AGENT_PREFIX') . $wallet->agent->id }}</x-item.text-tile>
        @endrole


        <x-item.text-tile title="Type">
            <span class="px-4 py-1 text-green-100 bg-green-600 rounded-full">
                {{ $wallet->load_type }}
            </span>
        </x-item.text-tile>

        <x-item.text-tile title="Channel">
            <span class="px-4 py-1 text-yellow-100 bg-yellow-600 rounded-full">
                {{ $wallet->paymentOption->account_provider }}
            </span>
        </x-item.text-tile>

        <x-item.text-tile title="Status">
            @if ($wallet->status == 'pending')
                <x-status.pending />
            @elseif($wallet->status == 'processing')
                <x-status.processing />
            @elseif($wallet->status == 'completed')
                <x-status.completed />
            @else
                <x-status.canceled />
            @endif
        </x-item.text-tile>

        <div class="grid grid-cols-2 col-span-2 gap-4">

            @if ($wallet->status == 'pending')
                @can('check payment')
                    <x-material-button name="Payment" icon="ri-refresh-line"
                        class="text-white bg-yellow-500 hover:bg-yellow-800"
                        wire:click="checkStatus({{ $wallet->id }})"></x-material-button>
                @endcan

                @can('approve wallet')
                    <x-material-button name="Approve" icon="ri-wallet-3-fill"
                        class="text-white bg-green-500 hover:bg-green-800"
                        wire:click="approveRequest({{ $wallet->id }})"></x-material-button>
                @endcan
                @can('decline wallet')
                    <x-material-button name="Decline" icon="ri-check-fill" class="text-white bg-red-500 hover:bg-red-800"
                        wire:click="declineRequest({{ $wallet->id }})"></x-material-button>
                @endcan
            @endif

        </div>
    </div>
</div>