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

@section('title', 'Place trade')
@section('page_title', 'Place trade')
@section('page_subtitle', 'Execute or record a trade on behalf of a client')
@section('parent_title', 'Trading')
@section('parent_url', route('admin.trading'))

@section('content')
<div class="vpm-action-page vpm-action-page--wide">
    <p class="vpm-action-back">
        <a href="{{ route('admin.trading') }}">&larr; Back to trading</a>
    </p>

    <x-vpm.action-hero
        title="Place trade for client"
        text="Closed trades apply realized P&L to the client balance immediately. Open trades can be closed later from the trading queue."
    />

    <section class="vpm-panel vpm-action-panel">
        <div class="vpm-panel__body">
            <form method="POST" action="{{ route('admin.trades.store') }}" class="vpm-wallet-form" id="vpm-admin-trade-form">
                @csrf
                <div class="vpm-wallet-form__grid">
                    <label class="vpm-field vpm-wallet-form__full">
                        <span class="vpm-field__label">Client</span>
                        <select name="user_id" class="vpm-input" required id="trade-user-id">
                            <option value="">Select client…</option>
                            @foreach ($clients as $client)
                                <option
                                    value="{{ $client->id }}"
                                    data-balance="{{ number_format((float) $client->balance, 2, '.', '') }}"
                                    data-currency="{{ $client->currency ?: $currency }}"
                                    @selected((string) $selectedUserId === (string) $client->id)
                                >
                                    {{ $client->name }} — {{ $client->email }} ({{ number_format((float) $client->balance, 2) }} {{ $client->currency ?: $currency }})
                                </option>
                            @endforeach
                        </select>
                    </label>

                    <label class="vpm-field vpm-wallet-form__full">
                        <span class="vpm-field__label">Copy trader (optional)</span>
                        <select name="copy_trader_id" class="vpm-input">
                            <option value="">Not a copy trade</option>
                            @foreach ($copyTraders as $trader)
                                <option value="{{ $trader->id }}" @selected((string) old('copy_trader_id') === (string) $trader->id)>
                                    {{ $trader->name }}
                                </option>
                            @endforeach
                        </select>
                    </label>

                    <label class="vpm-field">
                        <span class="vpm-field__label">Instrument</span>
                        <input type="text" name="pair" class="vpm-input" list="trade-pairs" value="{{ old('pair', 'BTC/USDT') }}" required maxlength="40" placeholder="BTC/USDT">
                        <datalist id="trade-pairs">
                            @foreach ($pairs as $pair)
                                <option value="{{ $pair }}"></option>
                            @endforeach
                        </datalist>
                    </label>

                    <label class="vpm-field">
                        <span class="vpm-field__label">Order type</span>
                        <select name="order_type" class="vpm-input" required>
                            <option value="market" @selected(old('order_type', 'market') === 'market')>Market</option>
                            <option value="limit" @selected(old('order_type') === 'limit')>Limit</option>
                        </select>
                    </label>

                    <label class="vpm-field">
                        <span class="vpm-field__label">Side</span>
                        <select name="side" class="vpm-input" required>
                            <option value="buy" @selected(old('side', 'buy') === 'buy')>Buy / Long</option>
                            <option value="sell" @selected(old('side') === 'sell')>Sell / Short</option>
                        </select>
                    </label>

                    <label class="vpm-field">
                        <span class="vpm-field__label">Status</span>
                        <select name="status" class="vpm-input" required id="trade-status">
                            <option value="closed" @selected(old('status', 'closed') === 'closed')>Closed (apply P&L now)</option>
                            <option value="open" @selected(old('status') === 'open')>Open (close later)</option>
                        </select>
                    </label>

                    <label class="vpm-field">
                        <span class="vpm-field__label">Price</span>
                        <input type="number" name="price" class="vpm-input" value="{{ old('price') }}" required min="0.00000001" step="any" inputmode="decimal">
                    </label>

                    <label class="vpm-field">
                        <span class="vpm-field__label">Amount</span>
                        <input type="number" name="amount" class="vpm-input" value="{{ old('amount') }}" required min="0.00000001" step="any" inputmode="decimal">
                    </label>

                    <label class="vpm-field">
                        <span class="vpm-field__label">Leverage</span>
                        <input type="number" name="leverage" class="vpm-input" value="{{ old('leverage', 1) }}" min="1" max="500" step="1" inputmode="numeric">
                    </label>

                    <label class="vpm-field" id="trade-pnl-field">
                        <span class="vpm-field__label">Realized P&L ({{ $currency }})</span>
                        <input type="number" name="pnl" class="vpm-input" value="{{ old('pnl', '0') }}" step="0.01" inputmode="decimal">
                        <span class="vpm-field__hint">Positive adds to balance; negative deducts.</span>
                    </label>

                    <label class="vpm-field vpm-wallet-form__full">
                        <span class="vpm-field__label">Notes (optional)</span>
                        <textarea name="notes" class="vpm-input" rows="2" maxlength="1000" placeholder="Internal note for this execution…">{{ old('notes') }}</textarea>
                    </label>
                </div>

                <div class="vpm-form-actions">
                    <x-vpm.button type="submit" variant="primary">Place trade</x-vpm.button>
                    <x-vpm.button variant="ghost" href="{{ route('admin.trading') }}">Cancel</x-vpm.button>
                </div>
            </form>
        </div>
    </section>
</div>

<script>
    (function () {
        const statusSelect = document.getElementById('trade-status');
        const pnlField = document.getElementById('trade-pnl-field');
        const pnlInput = pnlField?.querySelector('input[name="pnl"]');

        function syncPnlField() {
            const isOpen = statusSelect?.value === 'open';
            if (!pnlField || !pnlInput) return;
            pnlField.hidden = isOpen;
            pnlInput.required = !isOpen;
            if (isOpen) pnlInput.value = '0';
        }

        statusSelect?.addEventListener('change', syncPnlField);
        syncPnlField();
    })();
</script>
@endsection