@props(['trade'])

@php
    $dialogId = 'update-trade-dialog-'.$trade->id;
    $pickerId = 'update-trade-picker-type-'.$trade->id;
    $isEditing = (string) old('_trade') === (string) $trade->id;
    $selectedType = strtolower((string) ($isEditing ? old('pnl_type', 'profit') : 'profit'));
    $selectedType = in_array($selectedType, ['profit', 'loss'], true) ? $selectedType : 'profit';
    $typeLabel = $selectedType === 'loss' ? 'Loss' : 'Profit';
@endphp

<dialog id="{{ $dialogId }}" class="vpm-dialog vpm-dialog--trader-form vpm-dialog--open-trade" aria-labelledby="{{ $dialogId }}-title">
    <form
        method="POST"
        action="{{ route('admin.trades.update', $trade) }}"
        class="vpm-dialog__panel"
        id="update-trade-form-{{ $trade->id }}"
        novalidate
        data-no-loading="true"
        data-vpm-update-trade-form
    >
        @csrf
        @method('PUT')
        <input type="hidden" name="_trade" value="{{ $trade->id }}">

        <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="{{ $dialogId }}-title" class="vpm-dialog__title">Add Profit/Loss</h2>
                </header>

                <div class="vpm-open-trade-form">
                    <div class="vpm-open-trade-field" data-vpm-update-trade-field="pnl_type">
                        <span class="vpm-open-trade-field__label" id="{{ $dialogId }}-type-label">Type</span>
                        <button
                            type="button"
                            class="vpm-open-trade-combobox vpm-open-trade-combobox--selected"
                            data-vpm-dialog-open="{{ $pickerId }}"
                            aria-labelledby="{{ $dialogId }}-type-label"
                        >
                            <span class="vpm-open-trade-combobox__value" data-vpm-update-trade-type-label>{{ $typeLabel }}</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="pnl_type" id="{{ $dialogId }}-type-value" value="{{ $selectedType }}">
                        @error('pnl_type')
                            <p class="vpm-open-trade-field__error" role="alert">{{ $message }}</p>
                        @else
                            <p class="vpm-open-trade-field__error" data-vpm-update-trade-error="pnl_type" hidden></p>
                        @enderror
                    </div>

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

        <footer class="vpm-dialog__footer vpm-dialog__footer--form vpm-dialog__footer--trade-actions">
            <x-vpm.button type="button" variant="secondary" data-vpm-dialog-close>Cancel</x-vpm.button>
            <x-vpm.button type="submit" variant="primary">Update</x-vpm.button>
        </footer>
    </form>
</dialog>

<dialog id="{{ $pickerId }}" class="vpm-dialog vpm-dialog--picker" aria-labelledby="{{ $pickerId }}-title">
    <div class="vpm-dialog__panel">
        <header class="vpm-dialog__header vpm-dialog__header--form">
            <h2 id="{{ $pickerId }}-title" class="vpm-dialog__title">Type</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">
                <li>
                    <button
                        type="button"
                        class="vpm-picker-list__option @if ($selectedType === 'profit') is-selected @endif"
                        data-vpm-update-trade-pick-type
                        data-form="{{ $dialogId }}"
                        data-value="profit"
                        data-label="Profit"
                    >
                        Profit
                    </button>
                </li>
                <li>
                    <button
                        type="button"
                        class="vpm-picker-list__option @if ($selectedType === 'loss') is-selected @endif"
                        data-vpm-update-trade-pick-type
                        data-form="{{ $dialogId }}"
                        data-value="loss"
                        data-label="Loss"
                    >
                        Loss
                    </button>
                </li>
            </ul>
        </div>
    </div>
</dialog>