@extends('layouts.vpm-dashboard', ['active' => 'withdrawals', 'area' => 'admin'])

@section('title', 'Withdrawals')

@section('content')
<div class="vpm-page">
    <x-vpm.page-intro
        title="Withdrawals"
        description="View and manage client withdrawal requests from the admin panel."
    />

    <div class="vpm-admin-deposits" data-vpm-admin-withdrawals>
        <label class="vpm-expert-traders__search-wrap">
            <span class="sr-only">Search by withdrawal ID</span>
            <input
                type="search"
                class="vpm-input vpm-expert-traders__search"
                placeholder="Search by withdrawal ID"
                autocomplete="off"
                spellcheck="false"
                data-vpm-withdrawal-search
            >
        </label>

        @if ($withdrawals->isEmpty())
            <x-vpm.state-empty
                title="No withdrawals yet"
                description="Client withdrawal requests will appear here once submitted."
                icon="payments"
            />
        @else
            <ul class="vpm-admin-deposits__list" data-vpm-withdrawal-list>
                @foreach ($withdrawals as $withdrawal)
                    <x-vpm.admin-withdrawal-row :withdrawal="$withdrawal" />
                @endforeach
            </ul>

            <p class="vpm-expert-traders__empty-search" data-vpm-withdrawal-empty hidden>
                No withdrawals match your search.
            </p>
        @endif
    </div>
</div>

@if ($errors->any() && old('_withdrawal'))
    @push('scripts')
        <script>document.body.dataset.vpmReopenDialog = 'withdrawal-dialog-{{ old('_withdrawal') }}';</script>
    @endpush
@endif
@endsection