@extends('crm.layouts.master')
@section('title','Trades')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
    <style>
        .trade-search-wrap { position:relative; }
        .trade-search-results { position:absolute; z-index:1060; top:100%; left:0; right:0; max-height:260px; overflow-y:auto; margin-top:.25rem; background:#fff; border:1px solid var(--bs-border-color, #dee2e6); border-radius:.4rem; box-shadow:0 .5rem 1rem rgba(0,0,0,.12); }
        .trade-search-result { display:block; width:100%; padding:.7rem .85rem; border:0; border-bottom:1px solid var(--bs-border-color, #eee); background:#fff; color:inherit; text-align:left; }
        .trade-search-result:last-child { border-bottom:0; }
        .trade-search-result:hover, .trade-search-result:focus { background:var(--bs-light, #f6f7fb); }
        .trade-search-result strong, .trade-search-result small { display:block; }
        .trade-search-message { padding:.8rem; color:#8a969c; font-size:.82rem; }
        .paces-gradient-btn {
            border-radius: 0 !important;
            background-image: var(--theme-gradient, linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0))) !important;
            box-shadow: 0 .125rem .25rem rgba(16, 24, 40, .12);
            transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
        }
        .paces-gradient-btn:hover:not(:disabled) {
            filter: brightness(1.04);
            box-shadow: 0 .2rem .45rem rgba(16, 24, 40, .18);
            transform: translateY(-1px);
        }
        .paces-gradient-btn:active:not(:disabled) { transform: translateY(0); }
        .paces-gradient-side {
            border-radius: 0 !important;
            background-image: var(--theme-gradient, linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0))) !important;
            min-width: 58px;
            padding: .35rem .55rem;
            font-weight: 700;
            letter-spacing: .035em;
        }
    </style>
@endsection
@section('main-content')
<div class="breadcrumb d-flex align-items-center justify-content-between w-100">
    <h3>Trade Execution</h3>
    <button class="btn btn-primary bg-gradient paces-gradient-btn btn-sm ms-auto" data-toggle="modal" data-target="#trade_modal">
        <i class="fa fa-exchange-alt"></i> New Trade
    </button>
</div>
<div class="separator-breadcrumb border-top"></div>

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    {{ session('success') }}
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <strong>Trade rejected:</strong> {{ session('error') }}
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
@endif
@if($errors->any())
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <strong>Trade rejected:</strong> {{ $errors->first() }}
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
@endif


<div class="row">
    <div class="col-12 mb-4">
        <div class="card text-left">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="display table table-bordered" id="trades_table" style="width:100%">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Client</th>
                            <th>Symbol</th>
                            <th>Side</th>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>Total</th>
                            <th>P/L</th>
                            <th>Currency</th>
                            <th>Executed By</th>
                            <th>Open Date</th>
                            <th>Close Date</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($trades as $trade)
                        <tr>
                            <td>{{ $trade->id }}</td>
                            <td>
                                <a href="{{ route('trading.portfolio', $trade->lead->id ?? 0) }}" class="fw-bold">
                                    {{ $trade->lead->fname ?? '' }} {{ $trade->lead->lname ?? '' }}
                                </a>
                            </td>
                            <td>
                                <span class="fw-bold">{{ $trade->symbol->name ?? '—' }}</span>
                                <br><small class="text-muted">{{ $trade->symbol->tv_symbol ?? '' }}</small>
                            </td>
                            <td>
                                <span class="badge bg-{{ $trade->side === 'buy' ? 'success' : 'danger' }} bg-gradient paces-gradient-side">
                                    {{ strtoupper($trade->side) }}
                                </span>
                            </td>
                            <td>{{ rtrim(rtrim(number_format($trade->quantity, 8), '0'), '.') }}</td>
                            <td>{{ number_format($trade->price, 2) }}</td>
                            <td class="fw-bold">{{ number_format($trade->total_cost, 2) }}</td>
                            @if($trade->side === 'buy')
                                <td data-order="" class="text-muted" title="P/L is recorded when sold.">—</td>
                            @elseif($trade->realized_pnl === null)
                                <td data-order="" class="text-muted" title="Historical cost basis is unavailable for this sale.">Unavailable</td>
                            @else
                                @php
                                    $realizedPnl = (float) $trade->realized_pnl;
                                    $pnlClass = $realizedPnl > 0 ? 'text-success' : ($realizedPnl < 0 ? 'text-danger' : 'text-muted');
                                    $pnlSign = $realizedPnl > 0 ? '+' : ($realizedPnl < 0 ? '-' : '');
                                @endphp
                                <td data-order="{{ $realizedPnl }}" class="fw-bold {{ $pnlClass }}">
                                    {{ $pnlSign }}{{ $trade->currency }} {{ number_format(abs($realizedPnl), 2) }}
                                </td>
                            @endif
                            <td>{{ $trade->currency }}</td>
                            <td>{{ $trade->executor->name ?? '—' }}</td>
                            <td title="Earliest recorded BUY in this position cycle.">
                                @if($trade->position_opened_at)
                                    {{ $trade->position_opened_at->format('Y-m-d H:i') }}
                                @elseif($trade->side === 'sell')
                                    <span class="text-muted">Unavailable</span>
                                @else
                                    —
                                @endif
                            </td>
                            <td title="P/L becomes final when the position is sold.">
                                {{ $trade->side === 'sell' ? $trade->traded_at->format('Y-m-d H:i') : '—' }}
                            </td>
                            <td style="white-space:nowrap">
                                <button class="btn btn-xs btn-primary bg-gradient paces-gradient-btn me-1"
                                    onclick="openEditTrade(
                                        {{ $trade->id }},
                                        {{ $trade->price }},
                                        '{{ $trade->traded_at->format('Y-m-d\TH:i') }}',
                                        '{{ addslashes($trade->note ?? '') }}',
                                        '{{ addslashes($trade->symbol->name ?? '') }}',
                                        '{{ $trade->side }}'
                                    )">
                                    <i class="fa fa-pencil-alt"></i> Edit
                                </button>
                                <button class="btn btn-xs btn-danger bg-gradient paces-gradient-btn"
                                    onclick="deleteTrade({{ $trade->id }}, '{{ addslashes($trade->symbol->name ?? '') }}', '{{ $trade->side }}', {{ $trade->quantity }})">
                                    <i class="fa fa-trash"></i> Delete
                                </button>
                            </td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Trade Ticket Modal --}}
<div class="modal" id="trade_modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Trade Ticket</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('trading.trades.store') }}" id="trade_form">
                    @csrf
                    <div class="form-group mb-3">
                        <label class="form-label">Position Type</label>
                        <select name="position_type" id="trade_position_type" class="form-control" required>
                            <option value="spot" @selected(old('position_type', 'spot') === 'spot')>Spot</option>
                            <option value="leveraged" @selected(old('position_type') === 'leveraged')>Leveraged</option>
                            <option value="binary" @selected(old('position_type') === 'binary')>Binary Option</option>
                        </select>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label" for="trade-client-search">Client</label>
                                <div class="trade-search-wrap">
                                    <input type="search" id="trade-client-search" class="form-control" value="{{ $selectedLead ? trim($selectedLead->fname.' '.$selectedLead->lname).'  #'.$selectedLead->id : '' }}" placeholder="Search name, email, phone, or ID" autocomplete="off" aria-autocomplete="list" aria-controls="trade-client-results" required>
                                    <input type="hidden" name="lead_id" id="trade_lead_id" value="{{ old('lead_id') }}">
                                    <div id="trade-client-results" class="trade-search-results d-none" role="listbox"></div>
                                </div>
                                <div class="form-text">Enter at least two characters and select a client.</div>
                            </div>
                            {{-- Client balances --}}
                            <div id="client_balances" class="mb-3" style="display:none">
                                <label class="form-label">Available USD</label>
                                <div id="balance_display" class="p-2 bg-light rounded" style="font-size:.85rem"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label" for="trade-symbol-search">Symbol</label>
                                <div class="trade-search-wrap">
                                    <input type="search" id="trade-symbol-search" class="form-control" value="{{ $selectedSymbol?->name ?? '' }}" placeholder="Search ticker, name, or category" autocomplete="off" aria-autocomplete="list" aria-controls="trade-symbol-results" required>
                                    <input type="hidden" name="symbol_id" id="trade_symbol_id" value="{{ old('symbol_id') }}">
                                    <div id="trade-symbol-results" class="trade-search-results d-none" role="listbox"></div>
                                </div>
                                <div class="form-text">Enter at least two characters and select a symbol.</div>
                            </div>
                            <div id="symbol_price_info" class="mb-3" style="display:none">
                                <label class="form-label">Latest Price</label>
                                <div id="symbol_price_display" class="p-2 bg-light rounded" style="font-size:.85rem"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row trade-product-fields" data-product="spot">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label class="form-label">Side</label>
                                <select name="side" id="trade_side" class="form-control" required>
                                    <option value="buy" @selected(old('side', 'buy') === 'buy')>BUY</option>
                                    <option value="sell" @selected(old('side') === 'sell')>SELL</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label class="form-label">Account Currency</label>
                                <input type="hidden" name="currency" id="trade_currency" value="USD">
                                <div class="form-control bg-light">USD</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label class="form-label">Quantity</label>
                                <input type="number" name="quantity" id="trade_qty" value="{{ old('quantity') }}" class="form-control" step="any" min="0.00000001" required>
                            </div>
                        </div>
                    </div>
                    <div class="trade-product-fields" data-product="leveraged" style="display:none">
                        <div class="row">
                            <div class="col-md-3"><div class="form-group mb-3"><label>Direction</label><select name="direction" class="form-control"><option value="up">UP</option><option value="down">DOWN</option></select></div></div>
                            <div class="col-md-3"><div class="form-group mb-3"><label>Input</label><select name="input_mode" class="form-control"><option value="margin">USD margin</option><option value="units">Units</option></select></div></div>
                            <div class="col-md-3 leveraged-margin"><div class="form-group mb-3"><label>Margin (USD)</label><input name="margin" type="number" step="any" min="0.00000001" class="form-control"></div></div>
                            <div class="col-md-3 leveraged-units" style="display:none"><div class="form-group mb-3"><label>Units</label><input name="units" type="number" step="any" min="0.00000001" class="form-control"></div></div>
                            <div class="col-md-3"><div class="form-group mb-3"><label>Leverage</label><select name="leverage" class="form-control">@foreach(\App\Services\LeveragedTradingService::LEVERAGES as $leverage)<option value="{{ $leverage }}">{{ $leverage }}×</option>@endforeach</select></div></div>
                        </div>
                        <div class="row"><div class="col-md-6"><div class="form-group mb-3"><label>Stop Loss</label><input name="stop_loss" type="number" step="any" min="0.00000001" class="form-control" placeholder="Optional"></div></div><div class="col-md-6"><div class="form-group mb-3"><label>Take Profit</label><input name="take_profit" type="number" step="any" min="0.00000001" class="form-control" placeholder="Optional"></div></div></div>
                    </div>
                    <div class="trade-product-fields" data-product="binary" style="display:none">
                        <div class="row"><div class="col-md-4"><div class="form-group mb-3"><label>Direction</label><select name="direction" class="form-control" disabled><option value="call">Higher</option><option value="put">Lower</option></select></div></div><div class="col-md-4"><div class="form-group mb-3"><label>Stake (USD)</label><input name="stake" type="number" step="any" min="1" class="form-control" disabled></div></div><div class="col-md-4"><div class="form-group mb-3"><label>Expiry</label><select name="expiry_key" class="form-control" disabled></select></div></div></div>
                        <div class="alert alert-info py-2 binary-summary">Select a symbol to see payout and potential return.</div>
                    </div>
                    <div class="trade-opening-price-field mb-3">
                        <label class="form-label" for="trade_price">Opening Price <small class="text-muted">(optional)</small></label>
                        <input type="number" name="price" id="trade_price" value="{{ old('price') }}" class="form-control" step="any" min="0.00000001" placeholder="Blank uses latest AST quote">
                        <div id="trade_price_context" class="form-text">Select a symbol to see the latest AST quote.</div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 trade-product-fields" data-product="spot">
                            <div class="form-group mb-3">
                                <label class="form-label">Fee</label>
                                <input type="number" name="fee" id="trade_fee" class="form-control" step="any" min="0" value="{{ old('fee', 0) }}">
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="form-group mb-3">
                                <label class="form-label">Note</label>
                                <input type="text" name="note" value="{{ old('note') }}" class="form-control" placeholder="Optional note">
                            </div>
                        </div>
                    </div>
                    {{-- Estimated cost --}}
                    <div id="estimated_cost" class="alert alert-info py-2 mb-3" style="display:none;font-size:.88rem"></div>

                    <button type="submit" id="trade_submit" class="btn btn-primary bg-gradient paces-gradient-btn w-100">Execute Trade</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-js')
<script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
<script>
$(document).ready(function () {
    $('#trades_table').DataTable({ order: [[0, 'DESC']] });
    let tradeBalances = {};
    let preserveSubmittedCurrency = @json(session()->hasOldInput('currency'));
    let tradeOverBudget = false;
    let tradeSymbolInfo = {};

    function updateProductFields() {
        const product = $('#trade_position_type').val();
        $('.trade-product-fields').hide().find(':input').prop('disabled', true);
        $('.trade-product-fields[data-product="' + product + '"]').show().find(':input').prop('disabled', false);
        $('.trade-opening-price-field').toggle(product !== 'binary').find(':input').prop('disabled', product === 'binary');
        if (product === 'leveraged') updateLeverageMode();
        updateOpeningPriceContext();
        updateEstimate();
    }
    function updateLeverageMode() {
        const units = $('#trade_form [name="input_mode"]').val() === 'units';
        $('#trade_form .leveraged-margin').toggle(!units).find(':input').prop('disabled', units);
        $('#trade_form .leveraged-units').toggle(units).find(':input').prop('disabled', !units);
    }
    $('#trade_position_type').on('change', updateProductFields);
    $('#trade_form [name="input_mode"]').on('change', function(){ updateLeverageMode(); updateEstimate(); });

    function setupTradeSearch(config) {
        var input = document.getElementById(config.inputId);
        var hidden = document.getElementById(config.hiddenId);
        var results = document.getElementById(config.resultsId);
        var timer;

        function message(text) {
            results.replaceChildren();
            var row = document.createElement('div');
            row.className = 'trade-search-message';
            row.textContent = text;
            results.appendChild(row);
            results.classList.remove('d-none');
        }

        input.addEventListener('input', function () {
            hidden.value = '';
            hidden.dispatchEvent(new Event('change', { bubbles: true }));
            input.setCustomValidity('Please select an item from the search results.');
            window.clearTimeout(timer);
            var term = input.value.trim();
            if (term.length < 2) { results.replaceChildren(); results.classList.add('d-none'); return; }

            timer = window.setTimeout(function () {
                message('Searching...');
                fetch(config.url + '?q=' + encodeURIComponent(term), { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' })
                    .then(function (response) { if (!response.ok) throw new Error(); return response.json(); })
                    .then(function (items) {
                        results.replaceChildren();
                        if (!items.length) { message('No matches found.'); return; }
                        items.forEach(function (item) {
                            var button = document.createElement('button');
                            button.type = 'button';
                            button.className = 'trade-search-result';
                            button.setAttribute('role', 'option');
                            var title = document.createElement('strong');
                            title.textContent = item.title;
                            var subtitle = document.createElement('small');
                            subtitle.className = 'text-muted';
                            subtitle.textContent = item.subtitle || 'No additional details';
                            button.append(title, subtitle);
                            button.addEventListener('click', function () {
                                hidden.value = item.id;
                                input.value = item.title;
                                input.setCustomValidity('');
                                results.classList.add('d-none');
                                hidden.dispatchEvent(new Event('change', { bubbles: true }));
                            });
                            results.appendChild(button);
                        });
                        results.classList.remove('d-none');
                    })
                    .catch(function () { message('Search is unavailable. Please try again.'); });
            }, 250);
        });

        return { input: input, hidden: hidden, results: results };
    }

    var clientSearch = setupTradeSearch({
        inputId: 'trade-client-search', hiddenId: 'trade_lead_id', resultsId: 'trade-client-results',
        url: @json(route('trading.trades.client_search'))
    });
    var symbolSearch = setupTradeSearch({
        inputId: 'trade-symbol-search', hiddenId: 'trade_symbol_id', resultsId: 'trade-symbol-results',
        url: @json(route('trading.trades.symbol_search'))
    });

    document.getElementById('trade_form').addEventListener('submit', function (event) {
        [clientSearch, symbolSearch].forEach(function (search) {
            if (!search.hidden.value) {
                event.preventDefault();
                search.input.setCustomValidity('Please select an item from the search results.');
            }
        });
        updateEstimate();
        if (tradeOverBudget) event.preventDefault();
        if (event.defaultPrevented) this.reportValidity();
        else $('#trade_submit').prop('disabled', true).text('Processing…');
    });

    document.addEventListener('click', function (event) {
        if (!event.target.closest('.trade-search-wrap')) {
            clientSearch.results.classList.add('d-none');
            symbolSearch.results.classList.add('d-none');
        }
    });

    // Load client balances when client changes
    $('#trade_lead_id').on('change', function () {
        const id = $(this).val();
        tradeBalances = {};
        if (!id) { $('#client_balances').hide(); updateEstimate(); return; }
        $.getJSON('{{ url("trading/trades/client-balances") }}/' + id, function (data) {
            const cash = Number(data.cash_usd || 0);
            const credit = Number(data.credit_usd || 0);
            const available = Number(data.available_usd || 0);
            tradeBalances = { USD: available };
            $('#balance_display').html(`<strong>USD ${available.toFixed(2)}</strong> <span class="text-muted ms-2">Cash ${cash.toFixed(2)} · Credit ${credit.toFixed(2)}</span>`);
            $('#client_balances').show();
            $('#trade_currency').val('USD');
            preserveSubmittedCurrency = false;
            updateEstimate();
        });
    });

    // Load latest price when symbol changes
    $('#trade_symbol_id').on('change', function () {
        const id = $(this).val();
        if (!id) { $('#symbol_price_info').hide(); return; }
        $.getJSON('{{ url("trading/trades/symbol-price") }}/' + id, function (data) {
            tradeSymbolInfo = data;
            if (data.price) {
                $('#symbol_price_display').html(`<strong>${parseFloat(data.price).toFixed(8)}</strong> <span class="text-muted">as of ${data.priced_at ?? 'N/A'}</span>`);
                $('#symbol_price_info').show();
            } else {
                $('#symbol_price_display').html('<span class="text-warning">No price set for this symbol.</span>');
                $('#symbol_price_info').show();
            }
            const expiry = $('#trade_form [name="expiry_key"]'); expiry.empty();
            (data.binary_expiries || []).forEach(function(key){ expiry.append(new Option((data.expiry_labels || {})[key] || key, key)); });
            updateOpeningPriceContext();
            updateEstimate();
        });
    });

    function updateOpeningPriceContext() {
        const latest = parseFloat(tradeSymbolInfo.price) || 0;
        const manual = parseFloat($('#trade_price').val()) || 0;
        const context = $('#trade_price_context');
        if (!latest) {
            context.text(manual ? `Manual opening price: ${manual.toFixed(8)} · A current AST quote is required for leveraged trades.` : 'Select a priced symbol or enter a Spot opening price.');
            return;
        }
        if (!manual) {
            context.text(`Latest AST quote: ${latest.toFixed(8)} · Blank uses this price.`);
            return;
        }
        const difference = ((manual - latest) / latest) * 100;
        context.text(`Latest AST quote: ${latest.toFixed(8)} · Manual opening price: ${manual.toFixed(8)} (${difference >= 0 ? '+' : ''}${difference.toFixed(2)}%).`);
    }

    // Estimated cost
    function updateEstimate() {
        const product = $('#trade_position_type').val();
        const availableUsd = tradeBalances.USD || 0;
        const livePrice = parseFloat(tradeSymbolInfo.price) || 0;
        const openingPrice = parseFloat($('#trade_price').val()) || livePrice;
        const priceLabel = $('#trade_price').val() ? 'manual' : 'latest';
        if (product === 'leveraged') {
            const leverage = parseInt($('#trade_form [name="leverage"]').val()) || 1;
            const unitsMode = $('#trade_form [name="input_mode"]').val() === 'units';
            const amount = unitsMode ? ((parseFloat($('#trade_form [name="units"]').val()) || 0) * openingPrice / leverage) : (parseFloat($('#trade_form [name="margin"]').val()) || 0);
            tradeOverBudget = amount > availableUsd;
            $('#estimated_cost').toggle(amount > 0).attr('class', 'alert py-2 mb-3 ' + (tradeOverBudget ? 'alert-danger' : 'alert-info')).text(`Margin: USD ${amount.toFixed(2)} · Exposure: USD ${(amount * leverage).toFixed(2)} · Opening: ${openingPrice ? openingPrice.toFixed(8) : 'unavailable'} (${priceLabel}) · Available: USD ${availableUsd.toFixed(2)}`);
            $('#trade_submit').prop('disabled', tradeOverBudget); return;
        }
        if (product === 'binary') {
            const stake = parseFloat($('#trade_form [name="stake"]').val()) || 0;
            const payout = parseFloat(tradeSymbolInfo.binary_payout_pct) || 80;
            tradeOverBudget = stake > availableUsd || tradeSymbolInfo.binary_enabled === false;
            $('#trade_form .binary-summary').attr('class', 'alert py-2 binary-summary ' + (tradeOverBudget ? 'alert-danger' : 'alert-info')).text(tradeSymbolInfo.binary_enabled === false ? 'Binary options are disabled for this symbol.' : `Payout: ${payout}% · Potential return: USD ${(stake * (1 + payout / 100)).toFixed(2)} · Available: USD ${availableUsd.toFixed(2)}`);
            $('#estimated_cost').hide(); $('#trade_submit').prop('disabled', tradeOverBudget); return;
        }
        const qty   = parseFloat($('#trade_qty').val()) || 0;
        const price = openingPrice;
        const fee = parseFloat($('#trade_fee').val()) || 0;
        const side = $('#trade_side').val();
        const currency = $('#trade_currency').val();
        const available = tradeBalances[currency] || 0;
        tradeOverBudget = false;

        if (qty && price) {
            const amount = side === 'buy' ? (qty * price) + fee : Math.max(0, (qty * price) - fee);
            const estimate = $('#estimated_cost');
            if (side === 'buy' && amount > available) {
                tradeOverBudget = true;
                estimate.removeClass('alert-info').addClass('alert-danger')
                    .text(`Insufficient ${currency} balance. Available: ${available.toFixed(2)} · Required: ${amount.toFixed(2)}`)
                    .show();
            } else {
                estimate.removeClass('alert-danger').addClass('alert-info')
                    .text(side === 'buy'
                        ? `Available: ${currency} ${available.toFixed(2)} · Estimated total: ${amount.toFixed(2)} (including fee) · Opening: ${price.toFixed(8)} (${priceLabel})`
                        : `Estimated proceeds: ${currency} ${amount.toFixed(2)} (after fee) · Opening: ${price.toFixed(8)} (${priceLabel})`)
                    .show();
            }
        } else {
            $('#estimated_cost').hide();
        }
        $('#trade_submit').prop('disabled', tradeOverBudget);
    }
    $('#trade_qty, #trade_price, #trade_fee').on('input', function () { updateOpeningPriceContext(); updateEstimate(); });
    $('#trade_currency, #trade_side').on('change', updateEstimate);
    $('#trade_form [name="margin"], #trade_form [name="units"], #trade_form [name="leverage"], #trade_form [name="stake"]').on('input change', updateEstimate);
    updateProductFields();

    if ($('#trade_lead_id').val()) $('#trade_lead_id').trigger('change');
    if ($('#trade_symbol_id').val()) $('#trade_symbol_id').trigger('change');

    @if(session('error') || $errors->any())
    $('#trade_modal').modal('show');
    @endif
});
</script>

{{-- Edit Trade Modal --}}
<div class="modal fade" id="edit_trade_modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-pencil-alt me-2"></i>Edit Trade — <span id="et_label">—</span></h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info py-2 mb-3" style="font-size:.83rem">
                    Quantity and side cannot be changed. Editing price recalculates the position's average cost.
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Price <span class="text-danger">*</span></label>
                    <input type="number" id="et_price" class="form-control" step="any" min="0.00000001">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Date &amp; Time <span class="text-danger">*</span></label>
                    <input type="datetime-local" id="et_traded_at" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Note</label>
                    <input type="text" id="et_note" class="form-control" placeholder="Optional note">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary bg-gradient paces-gradient-btn" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary bg-gradient paces-gradient-btn" id="et_save_btn">
                    <i class="fa fa-save me-1"></i> Save Changes
                </button>
            </div>
        </div>
    </div>
</div>

<script>
var _et_trade_id = null;
var CSRF_TOKEN   = document.querySelector('meta[name=csrf-token]').getAttribute('content');

function openEditTrade(id, price, tradedAt, note, symbolName, side) {
    _et_trade_id = id;
    document.getElementById('et_label').textContent    = side.toUpperCase() + ' — ' + symbolName + ' #' + id;
    document.getElementById('et_price').value          = price;
    document.getElementById('et_traded_at').value      = tradedAt;
    document.getElementById('et_note').value           = note;
    $('#edit_trade_modal').modal('show');
}

document.getElementById('et_save_btn').addEventListener('click', function () {
    var btn  = this;
    var price    = document.getElementById('et_price').value;
    var tradedAt = document.getElementById('et_traded_at').value;
    var note     = document.getElementById('et_note').value;

    if (!price || !tradedAt) { alert('Price and date are required.'); return; }

    btn.disabled = true;
    btn.innerHTML = '<i class="fa fa-spinner fa-spin me-1"></i> Saving…';

    fetch('{{ url("trading/trades") }}/' + _et_trade_id, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': CSRF_TOKEN,
            'Accept': 'application/json',
        },
        body: JSON.stringify({ price: price, traded_at: tradedAt, note: note }),
        credentials: 'same-origin',
    })
    .then(r => r.json())
    .then(d => {
        if (d.success) {
            $('#edit_trade_modal').modal('hide');
            location.reload();
        } else {
            alert(d.message || 'Update failed.');
            btn.disabled = false;
            btn.innerHTML = '<i class="fa fa-save me-1"></i> Save Changes';
        }
    })
    .catch(() => {
        alert('Network error. Please try again.');
        btn.disabled = false;
        btn.innerHTML = '<i class="fa fa-save me-1"></i> Save Changes';
    });
});

function deleteTrade(id, symbolName, side, qty) {
    if (!confirm('Delete this trade?\n\n' + side.toUpperCase() + ' ' + qty + ' ' + symbolName + ' #' + id + '\n\nThis will REVERSE the effect on the client\'s position and wallet. This cannot be undone.')) return;

    fetch('{{ url("trading/trades") }}/' + id, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': CSRF_TOKEN,
            'Accept': 'application/json',
        },
        credentials: 'same-origin',
    })
    .then(r => r.json())
    .then(d => {
        if (d.success) {
            location.reload();
        } else {
            alert(d.message || 'Delete failed.');
        }
    })
    .catch(() => alert('Network error. Please try again.'));
}
</script>
@endsection