@section('title', __('Wallet Transactions'))
<div>

    <x-baseview title="{{ __('Wallet Transactions') }}" :showNew="true"
        actionTitle="{{ __('Add/Minus Wallet Balance') }}">
        <div class="p-3 mb-3 text-sm border rounded-lg bg-blue-50 border-blue-200 text-blue-900">
            <p class="font-semibold">{{ __('How to read this table') }}</p>
            <p>{{ __('Credit adds money to the wallet. Debit removes money from the wallet.') }}</p>
            <p>{{ __('Reference is the internal system id. Submitted Code is what the user informed from the transfer receipt or external payment.') }}</p>
            <p>{{ __('Status "Successful" means the balance was applied. "Review/Pending" still needs validation.') }}</p>
            <p>{{ __('Method and Reason / Context should now help you identify whether the transaction is top-up, transfer, charge or manual adjustment.') }}</p>
        </div>
        <livewire:tables.wallet-transaction-table />
    </x-baseview>

    {{-- add or minus from user wallet balance  --}}
    <div x-data="{ open: @entangle('showCreate') }">
        <x-modal confirmText="{{ __('Save') }}" action="save">
            <p class="text-xl font-semibold">{{ __('Update User Wallet Balance') }}</p>
            {{-- Customer --}}
            <x-label for="customer_id" title="{{ __('Customer') }}">
                <livewire:select.user-select name="user_id" placeholder="{{ __('Select Customer') }}" :searchable="true" />
                <x-input-error message="{{ $errors->first('user_id') }}" />
            </x-label>
            {{-- current balance  --}}
            <x-details.item title="{{ __('Current Balance') }}"
                text="{{ currencyFormat($wallet->balance ?? '0.00') }}" />
            <x-select title="{{ __('Action') }}" :options='$actions' name="selectedAction" />
            <x-input title="{{ __('Amount') }}" name="amount" placeholder="" type="number" />
            <x-textarea title="{{ __('Note') }}" name="note" />
        </x-modal>
    </div>

    {{-- details modal --}}
    <div x-data="{ open: @entangle('showDetails') }">
        <x-modal>

            <p class="text-xl font-semibold">
                {{ __('Wallet Transactions Details') }}
            </p>
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                <x-details.item title="{{ __('Ref') }}" text="{{ $selectedModel->ref ?? '' }}" />
                <x-details.item title="{{ __('Transaction Code') }}" text="">
                    <p class="break-words">{{ $selectedModel->session_id ?? '' }}</p>
                </x-details.item>
                <x-details.item title="{{ __('User') }}" text="{{ $selectedModel->wallet->user->name ?? '' }}" />
                <x-details.item title="{{ __('Action') }}" text="{{ $selectedModel->type_label ?? '' }}" />
                <x-details.item title="{{ __('Amount') }}"
                    text="{{ currencyFormat($selectedModel->amount ?? 0.0) }}" />
                <x-details.item title="{{ __('Current Wallet Balance') }}"
                    text="{{ currencyFormat($selectedModel->wallet->balance ?? 0.0) }}" />
                <x-details.item title="{{ __('Payment Method') }}"
                    text="{{ $selectedModel->method_label ?? '' }}" />
                <x-details.item title="{{ __('Status') }}" text="{{ $selectedModel->status_label ?? '' }}" />
                <x-details.item title="{{ __('Date') }}" text="{{ $selectedModel->formatted_date_time ?? '' }}" />
                <x-details.item title="{{ __('Proof Status') }}" text="{{ $selectedModel->proof_status_label ?? '' }}" />
            </div>
            <hr class="mt-4" />
            <x-details.item title="{{ __('Reason') }}" text="{{ $selectedModel->reason_summary ?? ($selectedModel->reason ?? '') }}" />
            @if ($selectedModel != null && $selectedModel->photo && !str_contains($selectedModel->photo, 'default.png'))
                <img src="{{ $selectedModel->photo ?? '' }}" class="mt-6 border rounded-sm" />
            @endif
        </x-modal>
    </div>




</div>