@extends('portal.layouts.master')
@section('title', $symbol->name . ' — Trade')
@section('page-title', $symbol->name)

@section('extra-css')
.trade-layout { display: grid; grid-template-columns: 220px 1fr 340px; gap: 1rem; }
@media (max-width: 1200px) { .trade-layout { grid-template-columns: 1fr 340px; } .watchlist-sidebar { display: none; } }
@media (max-width: 992px) { .trade-layout { grid-template-columns: 1fr; } }
.watchlist-sidebar { display: flex; flex-direction: column; }
.wl-list { overflow-y: auto; max-height: calc(12 * 53px); }
.wl-list::-webkit-scrollbar { width: 4px; }
.wl-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.trade-popular-row {
    display: flex; align-items: center; gap: .15rem; padding: .45rem .35rem .45rem .45rem;
    border-bottom: 1px solid var(--border); color: inherit;
}
.trade-popular-row:hover { background: rgba(59,130,246,.06); }
.trade-popular-row.wl-active { background: rgba(59,130,246,.1); border-left: 2px solid var(--accent); }
.wl-item-main {
    flex: 1; min-width: 0; display: flex; align-items: center;
    justify-content: space-between; gap: .5rem; text-decoration: none; color: inherit;
    padding: .1rem 0;
}
.trade-popular-row .wl-pair-actions { flex-shrink: 0; display: flex; align-items: center; gap: .1rem; }
.trade-popular-row .wl-pair-act {
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); font-size: .72rem; text-decoration: none;
}
.trade-popular-row .wl-pair-act:hover { color: var(--text-primary); background: rgba(255,255,255,.06); }
.trade-popular-row .pair-avatar-stack { position: relative; width: 40px; height: 30px; flex-shrink: 0; }
.trade-popular-row .pair-avatar-stack--single { width: 32px; }
.trade-popular-row .pair-avatar {
    position: absolute; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg-card); box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.trade-popular-row .pair-avatar--base { left: 0; top: 1px; z-index: 2; }
.trade-popular-row .pair-avatar--quote { left: 11px; top: 3px; z-index: 1; }
.trade-popular-row .pair-avatar-stack--single .pair-avatar--base { left: 2px; }
.trade-popular-row .pair-avatar-mono { font-size: .5rem; font-weight: 800; letter-spacing: -0.02em; }
.trade-popular-row .wl-pair-ticker { font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trade-popular-row .wl-pair-name { font-size: .6rem; color: var(--text-muted); }
.trade-popular-row .wl-pair-price { font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.trade-popular-row .wl-pair-pct { font-size: .62rem; }
.trade-popular-row .wl-chg--up { color: var(--green); }
.trade-popular-row .wl-chg--down { color: var(--red); }
.trade-popular-row .wl-chg--flat, .trade-popular-row .wl-chg--muted { color: var(--text-muted); }
.trade-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; }
.trade-panel-header {
    padding: .75rem 1rem; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: .75rem;
}
.trade-panel-header .sym-name { font-weight: 700; font-size: 1rem; }
.trade-panel-header .sym-price { font-size: 1.1rem; font-weight: 700; margin-left: auto; }
.trade-mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin:1rem 1rem 0; }
.trade-mode-switch .btn { min-height:38px; font-size:.8rem; font-weight:700; border-radius:7px !important; }
.leveraged-trade-form { padding:1rem; }
.leveraged-direction-grid { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin-bottom:1rem; }
.leveraged-direction-grid .btn { font-weight:700; }
.leveraged-stats { display:grid; grid-template-columns:1fr 1fr; gap:.4rem .75rem; padding:.75rem; margin-top:.75rem; border-radius:6px; background:var(--bg-secondary); font-size:.76rem; color:var(--text-secondary); }
.leveraged-stats strong { float:right; color:var(--text-primary); }
.trade-tabs { display: flex; border-bottom: 1px solid var(--border); }
.trade-tab {
    flex: 1; padding: .65rem; text-align: center;
    font-weight: 600; font-size: .85rem; cursor: pointer;
    border-bottom: 2px solid transparent; transition: all .15s;
    color: var(--text-secondary); background: transparent;
    border-top: none; border-left: none; border-right: none;
}
.trade-tab:hover { color: var(--text-primary); }
.trade-tab.active-buy { color: var(--green); border-bottom-color: var(--green); }
.trade-tab.active-sell { color: var(--red); border-bottom-color: var(--red); }
.trade-form { padding: 1rem; }
.trade-form .form-label { font-size: .78rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.trade-form .form-control { font-size: .9rem; padding: .6rem .75rem; }
.trade-quantity-row { display:flex; gap:.45rem; align-items:stretch; }
.trade-quantity-row .form-control { min-width:0; }
.trade-max-btn { border:1px solid var(--border); border-radius:6px; padding:0 .75rem; background:var(--bg-tertiary); color:var(--accent); font-size:.75rem; font-weight:700; }
.trade-max-btn:hover:not(:disabled) { border-color:var(--accent); }
.trade-max-btn:disabled { cursor:not-allowed; opacity:.45; }
.trade-position-hint { margin-top:.3rem; font-size:.72rem; color:var(--text-muted); }
.trade-position-hint.is-error { color:var(--red); }
.trade-summary {
    background: var(--bg-secondary); border-radius: 6px;
    padding: .75rem; margin-top: .75rem;
}
.trade-summary-row { display: flex; justify-content: space-between; font-size: .82rem; padding: .2rem 0; }
.trade-summary-row .label { color: var(--text-secondary); }
.trade-summary-row .value { font-weight: 600; }
.position-info {
    background: var(--bg-secondary); border-radius: 6px;
    padding: .75rem 1rem; margin: 0 1rem 1rem;
}
.position-info .pi-row { display: flex; justify-content: space-between; font-size: .8rem; padding: .15rem 0; }
.position-info .pi-label { color: var(--text-secondary); }
.chart-wrap { position:relative; background: #131722; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.stat-pills { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stat-pill {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: .65rem 1rem; flex: 1; min-width: 130px;
}
.stat-pill .lbl { font-size: .68rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.stat-pill .val { font-size: 1.05rem; font-weight: 700; margin-top: .1rem; }
@endsection

@section('content')

<div class="mb-3">
    <a href="{{ route('portal.markets') }}" style="font-size:.85rem"><i class="fas fa-arrow-left me-1"></i> Back to Markets</a>
</div>

{{-- Position stats (if exists) --}}
@if($position && (float)$position->quantity > 0)
<div class="stat-pills">
    <div class="stat-pill">
        <div class="lbl">Quantity Held</div>
        <div class="val">{{ rtrim(rtrim(number_format($position->quantity, 8), '0'), '.') }}</div>
    </div>
    <div class="stat-pill">
        <div class="lbl">Avg Entry Price</div>
        <div class="val">{{ number_format($position->avg_price, $symbol->decimal_places) }}</div>
    </div>
    <div class="stat-pill">
        <div class="lbl">Current Value</div>
        <div class="val">${{ $latestPrice > 0 ? number_format($position->quantity * $latestPrice, 2) : '—' }}</div>
    </div>
    <div class="stat-pill">
        <div class="lbl">Unrealised P&L</div>
        @php $upnl = ($latestPrice - $position->avg_price) * $position->quantity; @endphp
        <div class="val {{ $upnl >= 0 ? 'text-profit' : 'text-loss' }}">
            {{ ($upnl >= 0 ? '+' : '') . number_format($upnl, 2) }}
        </div>
    </div>
</div>
@endif

<div class="trade-layout">
    {{-- Popular Instruments Sidebar --}}
    <div class="watchlist-sidebar">
        <div class="trade-panel">
            <div style="padding:.6rem .75rem;border-bottom:1px solid var(--border);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)">
                <i class="fas fa-fire me-1" style="color:#f59e0b"></i> Popular
            </div>
            <div class="wl-list">
            @foreach($popularSymbols as $ps)
            <div class="trade-popular-row {{ $ps->id === $symbol->id ? 'wl-active' : '' }}">
                <a href="{{ route('portal.trade', $ps->id) }}" class="wl-item-main">
                    @include('portal.partials.popular-pair-core', ['symbol' => $ps])
                </a>
                <div class="wl-pair-actions" onclick="event.stopPropagation();">
                    <a href="{{ route('portal.trade', $ps->id) }}" class="wl-pair-act" title="Trade" aria-label="Open trade" onclick="event.stopPropagation();"><i class="fas fa-plus"></i></a>
                    <a href="{{ route('portal.markets') }}" class="wl-pair-act" title="All markets" aria-label="Markets" onclick="event.stopPropagation();"><i class="fas fa-info-circle"></i></a>
                </div>
            </div>
            @endforeach
            </div>
        </div>
    </div>

    {{-- Chart + Trade History --}}
    <div>
        <div class="chart-wrap" style="height:550px">
            <div style="position:absolute;z-index:2;top:.5rem;left:.65rem;display:flex;gap:.4rem">
                <select id="tradeChartRange" aria-label="Chart range" style="background:#1e2329;color:#eaecef;border:1px solid #2b3139;padding:.25rem"><option value="4h">4H</option><option value="1d" selected>1D</option><option value="1w">1W</option><option value="1m">1M</option><option value="1y">1Y</option></select>
                <select id="tradeChartInterval" aria-label="Chart interval" style="background:#1e2329;color:#eaecef;border:1px solid #2b3139;padding:.25rem"><option value="1m">1m</option><option value="5m">5m</option><option value="15m" selected>15m</option><option value="1h">1h</option><option value="1d">1D</option></select>
            </div>
            <div id="trade-chart-status" style="position:absolute;z-index:2;top:.6rem;right:.75rem;font-size:.68rem;color:#848e9c"></div>
            <div id="tv_trade_chart" style="height:100%"></div>
        </div>

        {{-- Trade history for this symbol --}}
        @if($trades->isNotEmpty())
        <div class="dark-card mt-3">
            <div class="card-header"><i class="fas fa-list me-2"></i>Your Trades — {{ $symbol->name }}</div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="dark-table w-100">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Side</th>
                                <th class="text-end">Qty</th>
                                <th class="text-end">Price</th>
                                <th class="text-end">Total</th>
                                <th>Currency</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($trades as $trade)
                        <tr>
                            <td style="color:var(--text-secondary)">{{ $trade->traded_at->format('Y-m-d H:i') }}</td>
                            <td><span class="badge badge-{{ $trade->side }}">{{ strtoupper($trade->side) }}</span></td>
                            <td class="text-end">{{ rtrim(rtrim(number_format($trade->quantity, 8), '0'), '.') }}</td>
                            <td class="text-end">{{ number_format($trade->price, $symbol->decimal_places) }}</td>
                            <td class="text-end fw-semibold">{{ number_format($trade->total_cost, 2) }}</td>
                            <td>{{ $trade->currency }}</td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif
    </div>

    {{-- Trade Panel --}}
    <div>
        <div class="trade-panel">
            <div class="trade-panel-header">
                <div style="width:36px;height:36px;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--text-secondary);font-weight:700">
                    {{ strtoupper(substr($symbol->name, 0, 2)) }}
                </div>
                <div>
                    <div class="sym-name">{{ $symbol->name }}</div>
                    <div style="font-size:.72rem;color:var(--text-muted)">{{ $symbol->tv_symbol }} · {{ ucfirst($symbol->category) }}</div>
                </div>
                <div class="sym-price" id="tradeLivePrice">{{ \App\Support\MarketPriceFormatter::format($latestPrice) }}</div>
            </div>

            <div class="trade-mode-switch" role="group" aria-label="Trading mode">
                <button type="button" class="btn btn-primary" id="marketModeAsset">Asset Trading</button>
                <button type="button" class="btn btn-outline-secondary" id="marketModeLeveraged">Leveraged Trading</button>
            </div>

            <div id="marketAssetTicket">

            <div class="trade-tabs">
                <button type="button" class="trade-tab active-buy" id="tabBuy" onclick="switchSide('buy')">
                    <i class="fas fa-arrow-trend-up me-1"></i> Buy / Long
                </button>
                <button type="button" class="trade-tab" id="tabSell" onclick="switchSide('sell')">
                    <i class="fas fa-arrow-trend-down me-1"></i> Sell / Close
                </button>
            </div>

            <form method="POST" action="{{ route('portal.trade.execute') }}" class="trade-form" id="tradeForm">
                @csrf
                <input type="hidden" name="symbol_id" value="{{ $symbol->id }}">
                <input type="hidden" name="side" id="tradeSide" value="{{ request('side', 'buy') }}">

                <div class="mb-3">
                    <label class="form-label">Account Currency</label>
                    <input type="hidden" name="currency" id="tradeCurrency" value="USD" data-balance="{{ (float) ($wallets->firstWhere('currency', 'USD')?->balance ?? 0) + $creditBalance }}">
                    <div class="form-control">USD — Available: {{ number_format((float) ($wallets->firstWhere('currency', 'USD')?->balance ?? 0) + $creditBalance, 2) }}</div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Quantity</label>
                    <div class="trade-quantity-row">
                        <input type="number" name="quantity" id="tradeQty" class="form-control"
                            step="0.00000001" min="0.00000001" placeholder="0.00" required
                            value="{{ old('quantity') }}">
                        <button type="button" class="trade-max-btn" id="tradeMaxBtn" onclick="setMaxPosition()">MAX</button>
                    </div>
                    <div class="trade-position-hint" id="tradePositionHint"></div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Price (Market)</label>
                    <input type="text" class="form-control" id="tradeMarketPrice" value="{{ \App\Support\MarketPriceFormatter::format($latestPrice, false) }}" disabled>
                    <div style="font-size:.7rem;color:var(--text-muted);margin-top:.25rem">
                        Orders execute at current market price
            </div>
        </div>
                <div class="trade-summary" id="tradeSummary">
                    <div class="trade-summary-row">
                        <span class="label">Order Type</span>
                        <span class="value" id="summaryType">Market Buy</span>
                    </div>
                    <div class="trade-summary-row">
                        <span class="label">Estimated Total</span>
                        <span class="value" id="summaryTotal">$0.00</span>
                    </div>
                    <div class="trade-summary-row">
                        <span class="label" id="summaryAvailableLabel">Available Balance</span>
                        <span class="value" id="summaryBalance">$0.00</span>
                    </div>
                </div>

                <button type="submit" class="btn btn-buy w-100 mt-3" id="tradeBtn" style="padding:.65rem;font-size:.9rem">
                    <i class="fas fa-arrow-trend-up me-1"></i> Buy / Long
                </button>
            </form>

            @if($position && (float)$position->quantity > 0)
            <div class="position-info">
                <div style="font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;margin-bottom:.35rem">Current Position</div>
                <div class="pi-row">
                    <span class="pi-label">Quantity</span>
                    <span>{{ rtrim(rtrim(number_format($position->quantity, 8), '0'), '.') }}</span>
                </div>
                <div class="pi-row">
                    <span class="pi-label">Avg Entry</span>
                    <span>{{ number_format($position->avg_price, $symbol->decimal_places) }}</span>
                </div>
                <div class="pi-row">
                    <span class="pi-label">P&L</span>
                    @php $upnl2 = ($latestPrice - $position->avg_price) * $position->quantity; @endphp
                    <span class="{{ $upnl2 >= 0 ? 'text-profit' : 'text-loss' }}">{{ ($upnl2 >= 0 ? '+' : '') . number_format($upnl2, 2) }}</span>
                </div>
            </div>
            @endif
            </div>

            <div id="marketLeveragedTicket" hidden>
                <form id="marketLeveragedForm" class="leveraged-trade-form" data-available-funds="{{ number_format((float) $wallets->sum('balance') + $creditBalance, 8, '.', '') }}">
                    @csrf
                    <input type="hidden" name="symbol_id" value="{{ $symbol->id }}">
                    <input type="hidden" name="direction" id="marketLeveragedDirection" value="up">
                    <input type="hidden" name="currency" value="USD">
                    <input type="hidden" name="input_mode" id="marketLeveragedInputMode" value="margin">

                    <div class="leveraged-direction-grid" role="group" aria-label="Leveraged direction">
                        <button type="button" class="btn btn-buy" id="marketDirectionUp">UP / Long</button>
                        <button type="button" class="btn btn-outline-danger" id="marketDirectionDown">DOWN / Short</button>
                    </div>

                    <div class="btn-group btn-group-sm w-100 mb-3" role="group" aria-label="Margin or units">
                        <button type="button" class="btn btn-primary" id="marketMarginMode">USD margin</button>
                        <button type="button" class="btn btn-outline-secondary" id="marketUnitsMode">Units</button>
                    </div>

                    <div class="row g-2 mb-3">
                        <div class="col-6" id="marketMarginPanel">
                            <label class="form-label" for="marketLeveragedMargin">USD margin</label>
                            <input class="form-control" type="number" name="margin" id="marketLeveragedMargin" min="0.01" step="0.01" value="10">
                        </div>
                        <div class="col-6" id="marketUnitsPanel" hidden>
                            <label class="form-label" for="marketLeveragedUnitsInput">Asset units</label>
                            <input class="form-control" type="number" name="units" id="marketLeveragedUnitsInput" min="0.00000001" step="any" value="1">
                        </div>
                        <div class="col-6">
                            <label class="form-label" for="marketLeveragedLeverage">Leverage</label>
                            <select class="form-control" name="leverage" id="marketLeveragedLeverage">
                                @foreach(\App\Services\LeveragedTradingService::LEVERAGES as $value)<option value="{{ $value }}">{{ $value }}×</option>@endforeach
                            </select>
                        </div>
                    </div>

                    <div class="row g-2">
                        <div class="col-6"><input class="form-control" type="number" step="any" name="stop_loss" placeholder="Stop Loss"></div>
                        <div class="col-6"><input class="form-control" type="number" step="any" name="take_profit" placeholder="Take Profit"></div>
                    </div>

                    <div class="leveraged-stats">
                        <span>Entry price <strong id="marketLeveragedPrice">—</strong></span>
                        <span>Position value <strong id="marketLeveragedExposure">USD 0.00</strong></span>
                        <span>Units <strong id="marketLeveragedUnits">—</strong></span>
                        <span>Margin <strong id="marketLeveragedMarginStat">USD 0.00</strong></span>
                        <span>Free margin <strong id="marketLeveragedFreeMargin">USD 0.00</strong></span>
                        <span>Leverage <strong id="marketLeveragedLeverageStat">1×</strong></span>
                    </div>

                    <button type="submit" class="btn btn-primary w-100 mt-3" id="marketLeveragedSubmit"><i class="fas fa-bolt me-1"></i> Open leveraged position</button>
                    <div id="marketLeveragedMessage" class="small mt-2" role="status" aria-live="polite"></div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://unpkg.com/lightweight-charts@5.2.0/dist/lightweight-charts.standalone.production.js"></script>
<script src="{{ asset('js/twelve-data-chart.js') }}?v=14"></script>
@endpush

@section('page-js')
<script>
let price = {{ $latestPrice }};
const decimals = {{ $symbol->decimal_places }};
const availablePosition = {{ (float) ($position?->quantity ?? 0) }};

function formatPositionQuantity(quantity) {
    return Number(quantity).toFixed(8).replace(/\.?0+$/, '') || '0';
}

function setMaxPosition() {
    if (availablePosition <= 0) return;
    document.getElementById('tradeQty').value = formatPositionQuantity(availablePosition);
    updateSummary();
}

function switchSide(side) {
    document.getElementById('tradeSide').value = side;
    const tabBuy = document.getElementById('tabBuy');
    const tabSell = document.getElementById('tabSell');
    const btn = document.getElementById('tradeBtn');

    if (side === 'buy') {
        tabBuy.className = 'trade-tab active-buy';
        tabSell.className = 'trade-tab';
        btn.className = 'btn btn-buy w-100 mt-3';
        btn.innerHTML = '<i class="fas fa-arrow-trend-up me-1"></i> Buy / Long';
        document.getElementById('summaryType').textContent = 'Market Buy';
    } else {
        tabBuy.className = 'trade-tab';
        tabSell.className = 'trade-tab active-sell';
        btn.className = 'btn btn-sell w-100 mt-3';
        btn.innerHTML = '<i class="fas fa-arrow-trend-down me-1"></i> Sell / Close';
        document.getElementById('summaryType').textContent = 'Market Sell';
    }
    updateSummary();
}

function updateSummary() {
    const qty = parseFloat(document.getElementById('tradeQty').value) || 0;
    const total = qty * price;
    const isSell = document.getElementById('tradeSide').value === 'sell';
    const btn = document.getElementById('tradeBtn');
    const maxBtn = document.getElementById('tradeMaxBtn');
    const hint = document.getElementById('tradePositionHint');
    document.getElementById('summaryTotal').textContent = '$' + total.toFixed(2);

    if (isSell) {
        document.getElementById('summaryAvailableLabel').textContent = 'Available Position';
        document.getElementById('summaryBalance').textContent = formatPositionQuantity(availablePosition) + ' units';
        maxBtn.disabled = availablePosition <= 0;
        const hasNoPosition = availablePosition <= 0;
        const exceedsPosition = qty > availablePosition;
        btn.disabled = hasNoPosition || exceedsPosition || qty <= 0;
        hint.classList.toggle('is-error', hasNoPosition || exceedsPosition);
        hint.textContent = hasNoPosition
            ? 'You do not have an open position in this instrument.'
            : (exceedsPosition ? 'Enter no more than ' + formatPositionQuantity(availablePosition) + ' units.' : 'Available to sell: ' + formatPositionQuantity(availablePosition) + ' units.');
    } else {
        const sel = document.getElementById('tradeCurrency');
        const bal = sel?.dataset.balance || 0;
        document.getElementById('summaryAvailableLabel').textContent = 'Available Balance';
        document.getElementById('summaryBalance').textContent = '$' + parseFloat(bal).toFixed(2);
        maxBtn.disabled = true;
        btn.disabled = qty <= 0;
        hint.classList.remove('is-error');
        hint.textContent = '';
    }
}

document.getElementById('tradeQty')?.addEventListener('input', updateSummary);
document.getElementById('tradeCurrency')?.addEventListener('change', updateSummary);

const marketAssetTicket = document.getElementById('marketAssetTicket');
const marketLeveragedTicket = document.getElementById('marketLeveragedTicket');
const marketModeAsset = document.getElementById('marketModeAsset');
const marketModeLeveraged = document.getElementById('marketModeLeveraged');
const leveragedForm = document.getElementById('marketLeveragedForm');
const leveragedMargin = document.getElementById('marketLeveragedMargin');
const leveragedUnitsInput = document.getElementById('marketLeveragedUnitsInput');
const leveragedLeverage = document.getElementById('marketLeveragedLeverage');
const leveragedInputMode = document.getElementById('marketLeveragedInputMode');
const leveragedFunds = Number(leveragedForm?.dataset.availableFunds || 0);

function setMarketTradeMode(mode) {
    const leveraged = mode === 'leveraged';
    marketAssetTicket.hidden = leveraged;
    marketLeveragedTicket.hidden = !leveraged;
    marketModeAsset.className = 'btn ' + (leveraged ? 'btn-outline-secondary' : 'btn-primary');
    marketModeLeveraged.className = 'btn ' + (leveraged ? 'btn-primary' : 'btn-outline-secondary');
    const url = new URL(window.location.href);
    if (leveraged) url.searchParams.set('mode', 'leveraged'); else url.searchParams.delete('mode');
    history.replaceState({}, '', url);
    if (leveraged) updateMarketLeveragedSummary();
}

function setMarketLeveragedDirection(direction) {
    document.getElementById('marketLeveragedDirection').value = direction;
    document.getElementById('marketDirectionUp').className = 'btn ' + (direction === 'up' ? 'btn-buy' : 'btn-outline-success');
    document.getElementById('marketDirectionDown').className = 'btn ' + (direction === 'down' ? 'btn-sell' : 'btn-outline-danger');
}

function setMarketLeveragedInputMode(mode) {
    leveragedInputMode.value = mode;
    document.getElementById('marketMarginPanel').hidden = mode !== 'margin';
    document.getElementById('marketUnitsPanel').hidden = mode !== 'units';
    document.getElementById('marketMarginMode').className = 'btn ' + (mode === 'margin' ? 'btn-primary' : 'btn-outline-secondary');
    document.getElementById('marketUnitsMode').className = 'btn ' + (mode === 'units' ? 'btn-primary' : 'btn-outline-secondary');
    updateMarketLeveragedSummary();
}

function updateMarketLeveragedSummary() {
    const leverage = Number(leveragedLeverage?.value || 1);
    const usingUnits = leveragedInputMode?.value === 'units';
    const unitsInput = Number(leveragedUnitsInput?.value || 0);
    let margin = Number(leveragedMargin?.value || 0);
    const exposure = usingUnits ? unitsInput * price : margin * leverage;
    if (usingUnits && leverage > 0) margin = exposure / leverage;
    const units = price > 0 ? exposure / price : 0;
    document.getElementById('marketLeveragedPrice').textContent = price > 0 ? window.TwelveDataChart.formatPrice(price) : '—';
    document.getElementById('marketLeveragedExposure').textContent = 'USD ' + exposure.toFixed(2);
    document.getElementById('marketLeveragedUnits').textContent = units > 0 ? formatPositionQuantity(units) : '—';
    document.getElementById('marketLeveragedMarginStat').textContent = 'USD ' + margin.toFixed(2);
    document.getElementById('marketLeveragedFreeMargin').textContent = 'USD ' + Math.max(0, leveragedFunds - margin).toFixed(2);
    document.getElementById('marketLeveragedLeverageStat').textContent = leverage + '×';
}

marketModeAsset?.addEventListener('click', () => setMarketTradeMode('asset'));
marketModeLeveraged?.addEventListener('click', () => setMarketTradeMode('leveraged'));
document.getElementById('marketDirectionUp')?.addEventListener('click', () => setMarketLeveragedDirection('up'));
document.getElementById('marketDirectionDown')?.addEventListener('click', () => setMarketLeveragedDirection('down'));
document.getElementById('marketMarginMode')?.addEventListener('click', () => setMarketLeveragedInputMode('margin'));
document.getElementById('marketUnitsMode')?.addEventListener('click', () => setMarketLeveragedInputMode('units'));
[leveragedMargin, leveragedUnitsInput, leveragedLeverage].forEach(element => element?.addEventListener('input', updateMarketLeveragedSummary));

leveragedForm?.addEventListener('submit', async function(event) {
    event.preventDefault();
    if (leveragedForm.dataset.submitting === '1') return;
    const submit = document.getElementById('marketLeveragedSubmit');
    const message = document.getElementById('marketLeveragedMessage');
    leveragedForm.dataset.submitting = '1';
    submit.disabled = true;
    message.className = 'small mt-2';
    message.textContent = 'Opening…';
    try {
        const response = await fetch(@json(route('portal.leveraged.open')), {
            method: 'POST',
            body: new FormData(leveragedForm),
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            credentials: 'same-origin'
        });
        const data = await response.json();
        if (!response.ok || !data.success) throw new Error(data.message || 'Unable to open leveraged position.');
        message.className = 'small mt-2 text-success';
        message.textContent = data.message || 'Leveraged position opened.';
        window.setTimeout(() => window.location.reload(), 700);
    } catch (error) {
        message.className = 'small mt-2 text-danger';
        message.textContent = error.message || 'Unable to open leveraged position.';
        submit.disabled = false;
        delete leveragedForm.dataset.submitting;
    }
});

// Init
document.addEventListener('DOMContentLoaded', function() {
    const initialSide = '{{ request('side', 'buy') }}';
    if (initialSide === 'sell') switchSide('sell');
    updateSummary();
    setMarketLeveragedDirection('up');
    setMarketLeveragedInputMode('margin');
    setMarketTradeMode(@json(request('mode') === 'leveraged' ? 'leveraged' : 'asset'));

    // Twelve Data chart and live quote are shared with ticket calculations.
    var chartEl = document.getElementById('tv_trade_chart');
    if (chartEl && window.TwelveDataChart) {
        window.TwelveDataChart.create({
            container: chartEl,
            symbolId: {{ $symbol->id }},
            chartUrl: @json(route('portal.markets.chart', ['symbolId' => '__SYMBOL_ID__'])),
            pricesUrl: @json(route('portal.markets.prices', ['light' => 1])),
            interval: '15m', range: '1d', statusElement: '#trade-chart-status',
            advancedIndicators: true,
            indicatorStorageKey: 'ast.portal.chart.indicators.v2',
            rangeControl: '#tradeChartRange', intervalControl: '#tradeChartInterval',
            onQuote: function (quote) {
                price = Number(quote.price) || price;
                var formatted = window.TwelveDataChart.formatPrice(price);
                var inputFormatted = window.TwelveDataChart.formatPrice(price, false);
                var header = document.getElementById('tradeLivePrice');
                var field = document.getElementById('tradeMarketPrice');
                if (header) header.textContent = formatted;
                if (field) field.value = inputFormatted;
                updateSummary();
                updateMarketLeveragedSummary();
            }
        });
    }

});
</script>
@endsection