@props(['trader', 'pendingRequests'])

<dialog id="manage-pending-requests-dialog" class="vpm-dialog vpm-dialog--trader-form" aria-labelledby="manage-pending-requests-dialog-title" aria-describedby="manage-pending-requests-dialog-desc">
    <form method="POST" action="{{ route('admin.copy-traders.requests.approve', $trader) }}" class="vpm-dialog__panel">
        @csrf

        <button type="button" class="vpm-dialog__close vpm-dialog__close--corner" data-vpm-dialog-close aria-label="Close">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
            </svg>
        </button>

        <div class="vpm-dialog__scroll vpm-dialog__scroll--pending-requests">
            <div class="vpm-dialog__content">
                <header class="vpm-dialog__header vpm-dialog__header--form">
                    <h2 id="manage-pending-requests-dialog-title" class="vpm-dialog__title">Manage pending requests</h2>
                    <p id="manage-pending-requests-dialog-desc" class="vpm-dialog__description">
                        Review and select the clients to accept. This action is irreversible, and selected clients will gain access to copy the expert trader. Proceed only once you're sure.
                    </p>
                </header>

                <div class="vpm-dialog__fields">
                    <fieldset class="vpm-dialog__checkbox-fieldset">
                        <p class="vpm-field__label vpm-dialog__checkbox-legend">Requesting clients</p>

                        @if ($pendingRequests->isEmpty())
                            <p class="vpm-dialog__empty-hint">No pending requests for this trader.</p>
                        @else
                            <ul class="vpm-dialog__checkbox-list">
                                @foreach ($pendingRequests as $request)
                                    @php
                                        $checkboxId = 'pending-request-'.$request->id;
                                        $isChecked = in_array(
                                            (string) $request->id,
                                            array_map('strval', old('request_ids', $pendingRequests->pluck('id')->all())),
                                            true
                                        );
                                    @endphp
                                    <li class="vpm-dialog__checkbox-row">
                                        <label class="vpm-dialog__checkbox-label" for="{{ $checkboxId }}">
                                            <input
                                                type="checkbox"
                                                id="{{ $checkboxId }}"
                                                name="request_ids[]"
                                                value="{{ $request->id }}"
                                                {{ $isChecked ? 'checked' : '' }}
                                            >
                                            <span>{{ $request->user->name }}</span>
                                        </label>
                                    </li>
                                @endforeach
                            </ul>
                        @endif

                        @error('request_ids')
                            <p class="vpm-field__error">{{ $message }}</p>
                        @enderror
                        @error('request_ids.*')
                            <p class="vpm-field__error">{{ $message }}</p>
                        @enderror
                    </fieldset>
                </div>
            </div>
        </div>

        <footer class="vpm-dialog__footer vpm-dialog__footer--form">
            <x-vpm.button type="button" variant="secondary" data-vpm-dialog-close>Cancel</x-vpm.button>
            <x-vpm.button type="submit" variant="primary" :disabled="$pendingRequests->isEmpty()">Accept</x-vpm.button>
        </footer>
    </form>
</dialog>