@props([
    'clients',
    'copyTraders',
    'assetCatalog',
    'selectedUserId' => null,
])

@php
    $isOpening = old('_trade') === 'open';
    $selectedTraderId = $isOpening ? old('copy_trader_id') : null;
    $selectedPair = $isOpening ? old('pair') : null;
    $selectedUserIds = $isOpening
        ? array_map('strval', old('user_ids', $selectedUserId ? [(string) $selectedUserId] : []))
        : ($selectedUserId ? [(string) $selectedUserId] : []);
    $selectedTrader = $copyTraders->firstWhere('id', (int) $selectedTraderId);
    $selectedAsset = null;
    foreach ($assetCatalog as $assets) {
        $selectedAsset = collect($assets)->firstWhere('pair', $selectedPair);
        if ($selectedAsset) {
            break;
        }
    }
    $selectedClients = $clients->whereIn('id', array_map('intval', $selectedUserIds));
    $clientLabel = $selectedClients->isEmpty()
        ? 'Select your client(s)'
        : ($selectedClients->count() === 1
            ? $selectedClients->first()->name
            : $selectedClients->count().' clients selected');
@endphp

<dialog id="open-trade-dialog" class="vpm-dialog vpm-dialog--trader-form vpm-dialog--open-trade" aria-labelledby="open-trade-dialog-title">
    <form method="POST" action="{{ route('admin.trades.store') }}" class="vpm-dialog__panel" id="vpm-admin-open-trade-form" novalidate data-no-loading="true">
        @csrf
        <input type="hidden" name="_trade" value="open">
        <input type="hidden" name="status" value="open">
        <input type="hidden" name="order_type" value="market">
        <input type="hidden" name="pnl" value="0">
        <input type="hidden" name="side" id="open-trade-side" value="{{ $isOpening ? old('side') : '' }}">

        <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--open-trade">
            <div class="vpm-dialog__content vpm-dialog__content--open-trade">
                <header class="vpm-dialog__header vpm-dialog__header--form">
                    <h2 id="open-trade-dialog-title" class="vpm-dialog__title">Open a trade</h2>
                </header>

                <div class="vpm-open-trade-form">
                    <div class="vpm-open-trade-field" data-vpm-open-trade-field="copy_trader_id">
                        <span class="vpm-open-trade-field__label" id="open-trade-trader-label">Expert trader</span>
                        <button
                            type="button"
                            class="vpm-open-trade-combobox @if ($selectedTrader) vpm-open-trade-combobox--selected @endif"
                            data-vpm-dialog-open="open-trade-picker-trader"
                            aria-labelledby="open-trade-trader-label"
                        >
                            <span class="vpm-open-trade-combobox__value" data-vpm-open-trade-label="trader">
                                {{ $selectedTrader?->name ?? 'Select your trader' }}
                            </span>
                            <svg class="vpm-open-trade-combobox__chevron" 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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/>
                            </svg>
                        </button>
                        <input type="hidden" name="copy_trader_id" id="open-trade-trader-value" value="{{ $selectedTraderId }}">
                        @error('copy_trader_id')
                            <p class="vpm-open-trade-field__error" role="alert">{{ $message }}</p>
                        @else
                            <p class="vpm-open-trade-field__error" data-vpm-open-trade-error="copy_trader_id" hidden></p>
                        @enderror
                    </div>

                    <div class="vpm-open-trade-field" data-vpm-open-trade-field="user_ids">
                        <span class="vpm-open-trade-field__label" id="open-trade-clients-label">Client(s)</span>
                        <button
                            type="button"
                            class="vpm-open-trade-combobox @if ($selectedClients->isNotEmpty()) vpm-open-trade-combobox--selected @endif"
                            data-vpm-dialog-open="open-trade-picker-clients"
                            aria-labelledby="open-trade-clients-label"
                        >
                            <span class="vpm-open-trade-combobox__value" data-vpm-open-trade-label="clients">{{ $clientLabel }}</span>
                            <svg class="vpm-open-trade-combobox__chevron" 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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/>
                            </svg>
                        </button>
                        <div data-vpm-open-trade-client-inputs>
                            @foreach ($selectedUserIds as $userId)
                                <input type="hidden" name="user_ids[]" value="{{ $userId }}">
                            @endforeach
                        </div>
                        @error('user_ids')
                            <p class="vpm-open-trade-field__error" role="alert">{{ $message }}</p>
                        @else
                            <p class="vpm-open-trade-field__error" data-vpm-open-trade-error="user_ids" hidden></p>
                        @enderror
                        @error('user_ids.*')
                            <p class="vpm-open-trade-field__error" role="alert">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="vpm-open-trade-field" data-vpm-open-trade-field="pair">
                        <span class="vpm-open-trade-field__label" id="open-trade-asset-label">Asset</span>
                        <button
                            type="button"
                            class="vpm-open-trade-combobox @if ($selectedAsset) vpm-open-trade-combobox--selected @endif"
                            data-vpm-dialog-open="open-trade-picker-assets"
                            aria-labelledby="open-trade-asset-label"
                        >
                            <span class="vpm-open-trade-combobox__value vpm-open-trade-combobox__value--asset" data-vpm-open-trade-label="asset">
                                @if ($selectedAsset)
                                    <img src="{{ $selectedAsset['logo'] }}" alt="" class="vpm-open-trade-combobox__logo" width="20" height="20">
                                    <span>{{ $selectedAsset['symbol'] }}</span>
                                @else
                                    Select your asset
                                @endif
                            </span>
                            <svg class="vpm-open-trade-combobox__chevron" 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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/>
                            </svg>
                        </button>
                        <input type="hidden" name="pair" id="open-trade-asset-value" value="{{ $selectedPair }}">
                        @error('pair')
                            <p class="vpm-open-trade-field__error" role="alert">{{ $message }}</p>
                        @else
                            <p class="vpm-open-trade-field__error" data-vpm-open-trade-error="pair" hidden></p>
                        @enderror
                    </div>

                    <div class="vpm-open-trade-field" data-vpm-open-trade-field="amount">
                        <x-vpm.auth-field
                            id="open-trade-amount"
                            name="amount"
                            label="Size (USD)"
                            type="number"
                            :value="$isOpening ? old('amount') : ''"
                            min="0.01"
                            step="0.01"
                        />
                        @error('amount')
                            <p class="vpm-open-trade-field__error" role="alert">{{ $message }}</p>
                        @else
                            <p class="vpm-open-trade-field__error" data-vpm-open-trade-error="amount" hidden></p>
                        @enderror
                    </div>

                    <div class="vpm-open-trade-field" data-vpm-open-trade-field="leverage">
                        <x-vpm.auth-field
                            id="open-trade-leverage"
                            name="leverage"
                            label="Leverage"
                            type="number"
                            :value="$isOpening ? old('leverage') : ''"
                            min="1"
                            max="300"
                            step="1"
                        />
                        @error('leverage')
                            <p class="vpm-open-trade-field__error" role="alert">{{ $message }}</p>
                        @else
                            <p class="vpm-open-trade-field__error" data-vpm-open-trade-error="leverage" hidden></p>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <footer class="vpm-dialog__footer vpm-dialog__footer--trade-actions">
            <x-vpm.button type="button" variant="secondary" data-vpm-dialog-close>Cancel</x-vpm.button>
            <div class="vpm-open-trade-form__sides">
                <button type="button" data-vpm-open-trade-side="buy" class="vpm-btn vpm-btn--buy">BUY</button>
                <button type="button" data-vpm-open-trade-side="sell" class="vpm-btn vpm-btn--sell">SELL</button>
            </div>
            @error('side')
                <p class="vpm-open-trade-field__error vpm-open-trade-field__error--footer" role="alert">{{ $message }}</p>
            @else
                <p class="vpm-open-trade-field__error vpm-open-trade-field__error--footer" data-vpm-open-trade-error="side" hidden></p>
            @enderror
        </footer>
    </form>
</dialog>

<dialog id="open-trade-picker-trader" class="vpm-dialog vpm-dialog--picker" aria-labelledby="open-trade-picker-trader-title">
    <div class="vpm-dialog__panel">
        <header class="vpm-dialog__header vpm-dialog__header--form">
            <h2 id="open-trade-picker-trader-title" class="vpm-dialog__title">Expert trader</h2>
            <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>
        </header>
        <div class="vpm-dialog__scroll vpm-dialog__scroll--picker">
            <ul class="vpm-picker-list">
                @foreach ($copyTraders as $trader)
                    <li>
                        <button
                            type="button"
                            class="vpm-picker-list__option @if ((string) $selectedTraderId === (string) $trader->id) is-selected @endif"
                            data-vpm-open-trade-pick-trader
                            data-value="{{ $trader->id }}"
                            data-label="{{ $trader->name }}"
                        >
                            {{ $trader->name }}
                        </button>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</dialog>

<dialog id="open-trade-picker-clients" class="vpm-dialog vpm-dialog--picker" aria-labelledby="open-trade-picker-clients-title">
    <div class="vpm-dialog__panel">
        <header class="vpm-dialog__header vpm-dialog__header--form">
            <h2 id="open-trade-picker-clients-title" class="vpm-dialog__title">Client(s)</h2>
            <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>
        </header>
        <div class="vpm-dialog__scroll vpm-dialog__scroll--picker">
            <ul class="vpm-picker-list vpm-picker-list--check">
                @foreach ($clients as $client)
                    <li>
                        <label class="vpm-picker-list__check">
                            <input
                                type="checkbox"
                                value="{{ $client->id }}"
                                data-vpm-open-trade-pick-client
                                data-label="{{ $client->name }}"
                                @checked(in_array((string) $client->id, $selectedUserIds, true))
                            >
                            <span>{{ $client->name }}</span>
                        </label>
                    </li>
                @endforeach
            </ul>
        </div>
        <footer class="vpm-dialog__footer vpm-dialog__footer--form">
            <x-vpm.button type="button" variant="primary" data-vpm-open-trade-clients-done>Done</x-vpm.button>
        </footer>
    </div>
</dialog>

<dialog id="open-trade-picker-assets" class="vpm-dialog vpm-dialog--picker vpm-dialog--picker-wide" aria-labelledby="open-trade-picker-assets-title">
    <div class="vpm-dialog__panel">
        <header class="vpm-dialog__header vpm-dialog__header--form">
            <h2 id="open-trade-picker-assets-title" class="vpm-dialog__title">Asset</h2>
            <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>
        </header>
        <div class="vpm-picker-search-wrap">
            <input type="search" class="vpm-input vpm-picker-search" placeholder="Search assets…" data-vpm-open-trade-asset-filter autocomplete="off">
        </div>
        <div class="vpm-dialog__scroll vpm-dialog__scroll--picker">
            <ul class="vpm-picker-list">
                @foreach ($assetCatalog as $category => $assets)
                    @foreach ($assets as $asset)
                        <li data-vpm-open-trade-asset-item data-search="{{ strtolower($asset['symbol'].' '.$asset['name'].' '.$asset['pair'].' '.\App\Support\MarketsCatalog::categoryLabel($category)) }}">
                            <button
                                type="button"
                                class="vpm-picker-list__option vpm-picker-list__option--asset @if ($selectedPair === $asset['pair']) is-selected @endif"
                                data-vpm-open-trade-pick-asset
                                data-value="{{ $asset['pair'] }}"
                                data-label="{{ $asset['symbol'] }}"
                                data-logo="{{ $asset['logo'] }}"
                            >
                                <img src="{{ $asset['logo'] }}" alt="" class="vpm-open-trade-combobox__logo" width="20" height="20" loading="lazy">
                                <span>{{ $asset['symbol'] }}</span>
                                <span class="vpm-picker-list__meta">{{ $asset['name'] }}</span>
                            </button>
                        </li>
                    @endforeach
                @endforeach
            </ul>
        </div>
    </div>
</dialog>