<div>
    <div class="card-header">
        <h4 class="card-title">Withdrawals Filter</h4>
    </div>

    <div class="card-body">
        <div class="row">
            <div class="col-md-3">
                <label class="form-label" for="transaction_type">Type</label>
                <select wire:model="transaction_type" id="transaction_type"
                        class="form-select text-capitalize mb-md-0 mb-2">
                    <option value="0" class="text-capitalize">All</option>
                    <option value="pending" class="text-capitalize">Pending</option>
                    <option value="approved" class="text-capitalize">Paid</option>
                    <option value="rejected" class="text-capitalize">Rejected</option>
                </select>
            </div>

            <div class="col-md-3">
                <label class="form-label" for="search">Search</label>
                <input wire:model="transaction_search" id="search" type="search" class="form-control">
            </div>
            <div class="col-md-3">
                <label class="form-label">Bulk action</label>
                <select wire:model.defer="bulkAction" class="form-select">
                    <option value="">Bulk actions</option>
                    <option value="approve">Approve pending</option>
                    <option value="reject">Reject pending and refund</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label d-block">&nbsp;</label>
                <button type="button" class="btn btn-outline-light w-100" wire:click="applyBulkAction">
                    Apply to selected
                </button>
            </div>
            <div class="col-12 mt-1">
                @if(session('success'))
                    <div class="alert alert-success mb-1">{{ session('success') }}</div>
                @endif
                @if(session('error'))
                    <div class="alert alert-danger mb-1">{{ session('error') }}</div>
                @endif
                <span class="loot-muted">{{ count($selectedWithdrawals) }} selected on this page</span>
                <a class="btn btn-sm btn-outline-light ms-1" href="{{ route('admin.export.withdrawals', ['search' => $transaction_search, 'status' => $transaction_type !== '0' ? $transaction_type : null]) }}">
                    <i data-feather="download" class="me-50"></i>Export CSV
                </a>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
            <tr class="text-truncate">
                <th>
                    <input class="form-check-input" type="checkbox" wire:model="selectPage" aria-label="Select all cashout requests on this page">
                </th>
                <th>User</th>
                <th>Method</th>
                <th>Amount</th>
                <th>Destination</th>
                <th>Status</th>
                <th>Requested on</th>
                <th>Responded on</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            @foreach($withdrawals as $withdrawal)
                <tr class="text-truncate">
                    <td>
                        <input class="form-check-input" type="checkbox" wire:model="selectedWithdrawals" value="{{ $withdrawal->id }}" aria-label="Select cashout request {{ $withdrawal->id }}">
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="avatar" style="margin-right: 1.5rem; font-size: calc(12.8px);">
                                <img src="{{ $withdrawal->user->avatar() }}"
                                     alt="Avatar" height="30" width="30">
                            </div>
                            <div>
                                <div class="font-weight-bolder">{{ $withdrawal->user->name() }}</div>
                                <div class="font-small-2 text-muted">
                                    {{ $withdrawal->user->email }}
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>{{ $withdrawal->method }}</td>
                    <td><strong>{{ format_coins_as_usd($withdrawal->amount) }}</strong><small class="d-block loot-muted" title="Stored reward amount">{{ number_format($withdrawal->amount, 0) }} coins</small></td>
                    <td>{{ $withdrawal->account }}</td>
                    <td>
                        @if($withdrawal->status == 'pending')
                            <span class="badge badge-light-warning">Pending</span>
                        @elseif($withdrawal->status == 'approved')
                            <span class="badge badge-light-success">Approved</span>
                        @elseif($withdrawal->status == 'rejected')
                            <span class="badge badge-light-danger">Rejected</span>
                        @endif
                    </td>
                    <td>{{ $withdrawal->created_at->diffForHumans() }}</td>
                    <td>{{ $withdrawal->updated_at->diffForHumans() }}</td>
                    <td>
                        @if($withdrawal->faceVerifications->count())
                            <span class="badge badge-light-info mb-50 d-inline-block">Face captured</span>
                        @endif
                        <button type="button" class="btn btn-sm btn-block btn-primary"
                                wire:click="model({{ $withdrawal->id }})"
                                wire:loading.attr="disabled" wire:target="model({{ $withdrawal->id }})">
                            <span wire:loading.remove wire:target="model({{ $withdrawal->id }})">View</span>
                            <span wire:loading wire:target="model({{ $withdrawal->id }})">Loading...</span>
                        </button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

    <!-- Modal -->
    <div wire:ignore.self class="modal fade text-start" id="inlineForm" tabindex="-1" aria-labelledby="myModalLabel33"
         aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered loot-withdrawal-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel33">Withdrawal</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>


                <div class="modal-body">
                    @if(session('success'))
                        <div class="alert alert-success" role="alert" style="opacity: 1;">
                            <div class="alert-body">
                                {{ session('success') }}
                            </div>
                        </div>
                    @endif
                    @if(session('error'))
                        <div class="alert alert-danger" role="alert" style="opacity: 1;">
                            <div class="alert-body">
                                {{ session('error') }}
                            </div>
                        </div>
                    @endif

                    @if($selectedWithdrawal)
                        <div class="row g-1">
                            <div class="col-md-6">
                                <div class="loot-action-card h-100">
                                    <h5 class="loot-section-title mb-1">Request details</h5>
                                    <p class="mb-50"><strong>User:</strong> {{ $selectedWithdrawal->user?->username }} ({{ $selectedWithdrawal->user?->email }})</p>
                                    <p class="mb-50"><strong>Method:</strong> {{ $selectedWithdrawal->method }}</p>
                                    <p class="mb-50"><strong>Destination:</strong> {{ $selectedWithdrawal->account }}</p>
                                    <p class="mb-50"><strong>Requested:</strong> {{ format_coins_as_usd($selectedWithdrawal->amount) }} <small class="loot-muted">({{ number_format($selectedWithdrawal->amount, 0) }} coins)</small></p>
                                    <p class="mb-0"><strong>IP:</strong> {{ $selectedWithdrawal->ip ?: 'Unknown' }}</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="loot-action-card h-100">
                                    <h5 class="loot-section-title mb-1">Decision</h5>
                                    <label class="form-label">Final amount in USD</label>
                                    <div class="input-group mb-50"><span class="input-group-text">$</span><input type="number" min="0" step="0.001" class="form-control" wire:model.defer="decision_usd"></div>
                                    <small class="d-block loot-muted mb-1">{{ number_format((float) ($decision_usd ?? 0) * coins_per_usd(), 0) }} coins at {{ number_format(coins_per_usd()) }} coins = $1</small>
                                    <label class="form-label">Admin note</label>
                                    <textarea class="form-control" rows="3" wire:model.defer="note" placeholder="Optional internal note"></textarea>
                                    <small class="loot-muted">Approving a lower amount refunds the difference. Rejecting refunds the original deducted request amount.</small>
                                </div>
                            </div>
                        </div>

                        <div class="loot-action-card mt-1">
                            <h5 class="loot-section-title mb-1">Face captures for this cashout</h5>
                            <div class="row">
                                @forelse($selectedWithdrawal->faceVerifications as $verification)
                                    <div class="col-md-4 mb-1">
                                        <div class="loot-face-status h-100">
                                            <img class="img-fluid rounded mb-1" src="{{ route('face-verifications.image', $verification) }}" alt="Cashout face capture">
                                            <span class="loot-status {{ $verification->status === 'approved' ? 'success' : ($verification->status === 'duplicate_review' ? 'warning' : '') }}">
                                                {{ ucfirst(str_replace('_', ' ', $verification->status)) }}
                                            </span>
                                            <p class="loot-muted mb-0 mt-50">{{ $verification->created_at->diffForHumans() }}</p>
                                            @if($verification->duplicateOfUser)
                                                <p class="text-warning mb-0">Exact image replay matched {{ $verification->duplicateOfUser->username }}.</p>
                                            @endif
                                        </div>
                                    </div>
                                @empty
                                    <div class="col-12"><p class="loot-muted mb-0">No face capture is linked to this withdrawal.</p></div>
                                @endforelse
                            </div>
                        </div>
                    @else
                        <p class="loot-muted mb-0">Select a withdrawal to review details.</p>
                    @endif
                </div>

                <div class="modal-footer">
                    <div class="col-12 text-center mb-1 pt-50">
                        @if($selectedWithdrawal)
                            <button type="button" class="btn btn-sm btn-success me-1"
                                    wire:click="approve()">Approve
                            </button>

                            <button type="button" class="btn btn-sm btn-danger me-1"
                                    wire:click="reject()">Reject
                            </button>
                        @endif

                        {{--                        <button type="button" class="btn btn-sm btn-danger me-1"--}}
                        {{--                                data-bs-dismiss="modal" wire:click="refund()">Refund--}}
                        {{--                        </button>--}}
                    </div>
                </div>

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


    <div class="h-100 d-flex align-items-center justify-content-center">

        <div class="row mt-1" style="margin: auto;">
            <div class="col align-self-center">
                {{ $withdrawals->onEachSide(0)->links() }}
            </div>
        </div>
    </div>

</div>

@once
    @push('scripts')
        <script>
            window.addEventListener('open-withdrawal-modal', function () {
                const element = document.getElementById('inlineForm');
                if (element && window.bootstrap) {
                    bootstrap.Modal.getOrCreateInstance(element).show();
                }
            });
        </script>
    @endpush
@endonce
