@props(['trader'])

@php
    $profitShare = rtrim(rtrim(number_format((float) $trader->profit_share, 2, '.', ''), '0'), '.');

    // Mirrors the controller cap, which is clamped to PHP's upload limit.
    $photoMaxKb = \App\Support\PublicStorage::maxUploadKb(5120);
    $photoMaxLabel = $photoMaxKb >= 1024
        ? round($photoMaxKb / 1024, 1).' MB'
        : $photoMaxKb.' KB';
@endphp

<dialog id="update-trader-dialog" class="vpm-dialog vpm-dialog--trader-form" aria-labelledby="update-trader-dialog-title">
    <form
        method="POST"
        action="{{ route('admin.copy-traders.update', $trader) }}"
        class="vpm-dialog__panel"
        enctype="multipart/form-data"
    >
        @csrf
        @method('PUT')

        <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">
            <div class="vpm-dialog__content">
                <header class="vpm-dialog__header vpm-dialog__header--form">
                    <h2 id="update-trader-dialog-title" class="vpm-dialog__title">Update expert trader</h2>
                </header>

                <div class="vpm-dialog__fields">
                    <div class="vpm-trader-photo-field">
                        <span class="vpm-field__label">Profile photo</span>

                        <div class="vpm-trader-photo-field__row">
                            @if ($trader->photoUrl())
                                <img
                                    src="{{ $trader->photoUrl() }}"
                                    alt=""
                                    class="vpm-trader-photo-field__preview"
                                    width="64"
                                    height="64"
                                >
                            @else
                                <div class="vpm-trader-photo-field__preview vpm-trader-photo-field__preview--fallback" aria-hidden="true">
                                    {{ $trader->initials() }}
                                </div>
                            @endif

                            <div class="vpm-trader-photo-field__controls">
                                <input
                                    type="file"
                                    name="photo"
                                    id="update-trader-photo"
                                    class="vpm-input vpm-input--file"
                                    accept="image/jpeg,image/png,image/webp"
                                >
                                <span class="vpm-field__hint">
                                    JPG, PNG, or WebP — max {{ $photoMaxLabel }}. Leave empty to keep the current photo.
                                </span>
                            </div>
                        </div>

                        @error('photo')
                            <span class="vpm-field__error" role="alert">{{ $message }}</span>
                        @enderror

                        @if ($trader->photoUrl())
                            <label class="vpm-trader-photo-field__remove">
                                <input type="checkbox" name="remove_photo" value="1">
                                <span>Remove current photo</span>
                            </label>
                        @endif
                    </div>

                    <x-vpm.auth-field
                        name="name"
                        label="Name"
                        :value="$trader->name"
                        required
                        maxlength="120"
                    />
                    <x-vpm.auth-field
                        name="trades"
                        label="Trades"
                        type="number"
                        :value="$trader->trades"
                        required
                        min="0"
                    />
                    <x-vpm.auth-field
                        name="total_wins"
                        label="Total Wins"
                        type="number"
                        :value="$trader->total_wins"
                        required
                        min="0"
                    />
                    <x-vpm.auth-field
                        name="total_losses"
                        label="Total Losses"
                        type="number"
                        :value="$trader->total_losses"
                        required
                        min="0"
                    />
                    <x-vpm.auth-field
                        name="min_copy_amount"
                        label="Minimum"
                        type="number"
                        :value="$trader->min_copy_amount"
                        min="0"
                    />
                    <x-vpm.auth-field
                        name="profit_share"
                        label="Profit Share"
                        type="number"
                        :value="$profitShare"
                        required
                        min="0"
                        max="100"
                        step="0.01"
                    />
                    <x-vpm.auth-field
                        name="followers"
                        label="Followers"
                        type="number"
                        :value="$trader->followers"
                        min="0"
                    />
                </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">Update</x-vpm.button>
        </footer>
    </form>
</dialog>