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

@section('title', 'Payment methods')

@section('content')
<div class="vpm-page vpm-admin-payment-methods-page">
    <x-vpm.page-intro
        title="Payment methods"
        description="Access, manage, and oversee deposit payment methods within the admin panel."
    />

    <button
        type="button"
        class="vpm-btn vpm-btn--primary vpm-admin-payment-methods-page__add"
        data-vpm-dialog-open="add-payment-method-dialog"
    >
        Add a payment method
    </button>

    @if ($methods->isEmpty())
        <x-vpm.state-empty
            title="No payment methods yet"
            description="Add your first payment method to show it during the user deposit flow."
            icon="payments"
        />
    @else
        <ul class="vpm-admin-payment-methods__grid">
            @foreach ($methods as $method)
                <x-vpm.admin-payment-method-card :method="$method" />
            @endforeach
        </ul>
    @endif
</div>

<x-vpm.admin-payment-method-add-dialog />

@if ($errors->any() && old('_payment_method') === 'add')
    @push('scripts')
        <script>document.body.dataset.vpmReopenDialog = 'add-payment-method-dialog';</script>
    @endpush
@elseif ($errors->any() && old('_payment_method'))
    @push('scripts')
        <script>document.body.dataset.vpmReopenDialog = 'update-payment-method-dialog-{{ old('_payment_method') }}';</script>
    @endpush
@endif
@endsection