@extends('portal.layouts.master')
@section('title', 'Leveraged Trading')
@section('page-title', 'Leveraged Trading')
@section('extra-css')
.lev-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:1rem}.lev-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1rem}.lev-dir{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.lev-dir button{padding:.8rem;border:1px solid var(--border);border-radius:8px;background:var(--bg-secondary);color:var(--text-secondary);font-weight:800}.lev-dir button.active.up{border-color:#0ecb81;color:#0ecb81}.lev-dir button.active.down{border-color:#f6465d;color:#f6465d}.lev-card label{font-size:.7rem;text-transform:uppercase;color:var(--text-muted);font-weight:700}.lev-card input,.lev-card select{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border)}.lev-stat{display:flex;justify-content:space-between;padding:.35rem 0;color:var(--text-secondary)}.lev-stat strong{color:var(--text-primary)}.lev-position{border:1px solid var(--border);border-radius:8px;padding:.75rem;margin-bottom:.6rem}@media(max-width:900px){.lev-grid{grid-template-columns:1fr}}
@endsection
@section('content')
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2"><div><h4 class="mb-1">Leveraged price movement</h4><p class="text-muted mb-0" style="font-size:.82rem">Choose UP or DOWN and control a larger exposure with USD margin.</p></div><div class="btn-group"><a href="{{ route('portal.markets') }}" class="btn btn-sm btn-outline-secondary">Asset Trading</a><a href="{{ route('portal.binary') }}" class="btn btn-sm btn-outline-secondary">Binary Options</a></div></div>
<div class="lev-grid"><div>
<div class="lev-card mb-3"><form id="levOpenForm" data-available-funds="{{ number_format((float)($wallet?->balance ?? 0) + (float)$credit, 8, '.', '') }}">@csrf
<div class="mb-3"><label>Asset</label><select name="symbol_id" id="levSymbol" class="form-select">@foreach($symbols as $symbol)<option value="{{ $symbol->id }}" data-price="{{ $symbol->latestPrice?->price ?? 0 }}" @selected($selected?->id === $symbol->id)>{{ $symbol->name }} ({{ $symbol->tv_symbol }})</option>@endforeach</select></div>
<div class="lev-dir mb-3"><button type="button" class="{{ $initialDirection === 'up' ? 'active up' : '' }}" data-direction="up"><span aria-hidden="true">▲</span> UP<br><small>Price rises</small></button><button type="button" class="{{ $initialDirection === 'down' ? 'active down' : '' }}" data-direction="down"><span aria-hidden="true">▼</span> DOWN<br><small>Price falls</small></button></div><input type="hidden" name="direction" id="levDirection" value="{{ $initialDirection }}"><input type="hidden" name="currency" value="USD">
<input type="hidden" name="input_mode" id="levInputMode" value="margin"><div class="btn-group btn-group-sm w-100 mb-2" role="group" aria-label="Margin or units"><button type="button" class="btn btn-primary" id="levMarginMode">USD margin</button><button type="button" class="btn btn-outline-secondary" id="levUnitsMode">Units</button></div><div class="row g-2 mb-3"><div class="col-6" id="levMarginPanel"><label for="levMargin">USD margin</label><div class="input-group"><span class="input-group-text">USD</span><input class="form-control" type="number" name="margin" id="levMargin" min="0.01" step="0.01" required value="10" aria-label="USD margin"></div></div><div class="col-6" id="levUnitsPanel" style="display:none"><label for="levUnitsInput">Asset units</label><input class="form-control" type="number" name="units" id="levUnitsInput" min="0.00000001" step="any" value="1" aria-label="Asset units"></div><div class="col-6"><label for="levLeverage">Leverage</label><select class="form-select" name="leverage" id="levLeverage">@foreach(\App\Services\LeveragedTradingService::LEVERAGES as $value)<option value="{{ $value }}">{{ $value }}×</option>@endforeach</select></div></div>
<div class="row g-2 mb-3"><div class="col-6"><label>Stop Loss</label><input class="form-control" type="number" step="any" name="stop_loss" id="levStop"></div><div class="col-6"><label>Take Profit</label><input class="form-control" type="number" step="any" name="take_profit" id="levTake"></div></div>
<div class="lev-stat"><span>Entry price</span><strong id="levPrice">—</strong></div><div class="lev-stat"><span>Position value</span><strong id="levExposure">USD 10.00</strong></div><div class="row g-1 small text-muted mt-1"><div class="col-6">Units <b id="levUnits">—</b></div><div class="col-6">Contract size <b>1 unit</b></div><div class="col-6">Margin <b id="levMarginStat">USD 10.00</b></div><div class="col-6">Free margin <b id="levFreeMargin">USD 0.00</b></div><div class="col-6">Leverage <b id="levLeverageStat">1×</b></div><div class="col-6">Spread <b>—</b></div></div><button class="btn btn-primary w-100 mt-3" id="levOpenBtn">Open leveraged position</button><div id="levMessage" class="small mt-2"></div></form></div>
<div class="lev-card"><h6>Open positions</h6><div id="levOpenPositions">@forelse($open as $position)<div class="lev-position"><div class="d-flex justify-content-between"><strong>{{ $position->symbol->name }} · {{ strtoupper($position->direction) }} {{ $position->leverage }}×</strong><button class="btn btn-sm btn-outline-danger lev-close" data-id="{{ $position->id }}">Close</button></div><div>Margin USD {{ number_format($position->margin,2) }} · Entry {{ $position->entry_price }}</div><form class="lev-level-form mt-2" data-id="{{ $position->id }}"><div class="row g-2"><div class="col-6"><input class="form-control form-control-sm" name="stop_loss" type="number" step="any" placeholder="Stop Loss" value="{{ $position->stop_loss }}"></div><div class="col-6"><input class="form-control form-control-sm" name="take_profit" type="number" step="any" placeholder="Take Profit" value="{{ $position->take_profit }}"></div></div><button class="btn btn-sm btn-outline-primary mt-2">Save exit levels</button><span class="small ms-2" data-level-message></span></form></div>@empty<span class="text-muted small">No open leveraged positions.</span>@endforelse</div></div>
</div><div class="lev-card"><h6>Available funds</h6><div class="lev-stat"><span>USD cash</span><strong>USD {{ number_format((float)($wallet?->balance ?? 0),2) }}</strong></div><div class="lev-stat"><span>USD credit</span><strong>USD {{ number_format($credit,2) }}</strong></div><hr><h6>Recent history</h6>@forelse($history as $position)<div class="lev-position"><strong>{{ $position->symbol->name }} · {{ strtoupper($position->direction) }}</strong><div class="small">{{ ucfirst(str_replace('_',' ',$position->close_reason)) }} · P&amp;L USD {{ number_format($position->realized_pnl,2) }}</div></div>@empty<span class="text-muted small">No completed positions.</span>@endforelse</div></div>
@endsection
@section('page-js')
<script>
(function(){const form=document.getElementById('levOpenForm'),symbol=document.getElementById('levSymbol'),margin=document.getElementById('levMargin'),units=document.getElementById('levUnitsInput'),lev=document.getElementById('levLeverage'),mode=document.getElementById('levInputMode'),msg=document.getElementById('levMessage'),funds=parseFloat(form?.dataset.availableFunds||0);function price(){return parseFloat(symbol.options[symbol.selectedIndex]?.dataset.price||0)||0}function refresh(){const p=price(),l=parseInt(lev.value)||1,usingUnits=mode.value==='units',u=parseFloat(units.value)||0,m=usingUnits?(u*p)/l:(parseFloat(margin.value)||0),e=usingUnits?u*p:m*l;document.getElementById('levPrice').textContent=p>0?p.toFixed(8):'—';document.getElementById('levExposure').textContent='USD '+e.toFixed(2);document.getElementById('levUnits').textContent=p>0?(e/p).toFixed(8).replace(/\.?0+$/,''):'—';document.getElementById('levMarginStat').textContent='USD '+m.toFixed(2);document.getElementById('levFreeMargin').textContent='USD '+Math.max(0,funds-m).toFixed(2);document.getElementById('levLeverageStat').textContent=l+'×'}function setMode(next){mode.value=next;document.getElementById('levMarginPanel').style.display=next==='margin'?'':'none';document.getElementById('levUnitsPanel').style.display=next==='units'?'':'none';document.getElementById('levMarginMode').className='btn '+(next==='margin'?'btn-primary':'btn-outline-secondary');document.getElementById('levUnitsMode').className='btn '+(next==='units'?'btn-primary':'btn-outline-secondary');refresh()}refresh();symbol.addEventListener('change',refresh);margin.addEventListener('input',refresh);units.addEventListener('input',refresh);lev.addEventListener('change',refresh);document.getElementById('levMarginMode').addEventListener('click',()=>setMode('margin'));document.getElementById('levUnitsMode').addEventListener('click',()=>setMode('units'));document.querySelectorAll('[data-direction]').forEach(b=>b.addEventListener('click',()=>{document.querySelectorAll('[data-direction]').forEach(x=>x.classList.remove('active','up','down'));b.classList.add('active',b.dataset.direction);document.getElementById('levDirection').value=b.dataset.direction}));form.addEventListener('submit',e=>{e.preventDefault();const btn=document.getElementById('levOpenBtn');btn.disabled=true;fetch('{{ route('portal.leveraged.open') }}',{method:'POST',body:new FormData(form),headers:{'X-CSRF-TOKEN':document.querySelector('meta[name=csrf-token]').content,'Accept':'application/json','X-Requested-With':'XMLHttpRequest'}}).then(r=>r.json().then(x=>({ok:r.ok,x}))).then(({ok,x})=>{if(!ok||!x.success)throw new Error(x.message||'Could not open position.');location.reload()}).catch(e=>{msg.className='small mt-2 text-danger';msg.textContent=e.message;btn.disabled=false})});document.querySelectorAll('.lev-close').forEach(btn=>btn.addEventListener('click',()=>{if(!confirm('Close this position at the current market price?'))return;btn.disabled=true;fetch('{{ url('/portal/leveraged-trading') }}/'+btn.dataset.id+'/close',{method:'POST',headers:{'X-CSRF-TOKEN':document.querySelector('meta[name=csrf-token]').content,'Accept':'application/json','X-Requested-With':'XMLHttpRequest'}}).then(r=>r.json()).then(x=>x.success?location.reload():alert(x.message||'Could not close position.')).catch(()=>alert('Could not close position.'))}));document.querySelectorAll('.lev-level-form').forEach(f=>f.addEventListener('submit',e=>{e.preventDefault();const m=f.querySelector('[data-level-message]');fetch('{{ url('/portal/leveraged-trading') }}/'+f.dataset.id+'/levels',{method:'PUT',body:new FormData(f),headers:{'X-CSRF-TOKEN':document.querySelector('meta[name=csrf-token]').content,'Accept':'application/json','X-Requested-With':'XMLHttpRequest'}}).then(r=>r.json().then(x=>({ok:r.ok,x}))).then(({ok,x})=>{m.className='small ms-2 '+(ok&&x.success?'text-success':'text-danger');m.textContent=x.message||'Updated';if(!ok||!x.success)throw new Error(x.message)}).catch(()=>{})}));})();
</script>
<script>
// Handle dedicated-page closes without navigating away. This capture handler
// also prevents the legacy inline handler below from triggering a reload.
document.addEventListener('click', function (event) {
    const button = event.target.closest('.lev-close');
    if (!button) return;
    event.preventDefault();
    event.stopImmediatePropagation();
    if (button.dataset.submitting === '1') return;
    if (!window.confirm('Close this leveraged position at the current market price?')) return;

    button.dataset.submitting = '1';
    button.disabled = true;
    button.textContent = '…';
    fetch('{{ url('/portal/leveraged-trading') }}/' + encodeURIComponent(button.dataset.id) + '/close', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        },
        credentials: 'same-origin'
    }).then(function (response) {
        return response.json().then(function (data) {
            if (!response.ok || !data.success) throw new Error(data.message || 'Could not close position.');
            return data;
        });
    }).then(function (data) {
        const card = button.closest('.lev-position');
        if (card) card.remove();
        const list = document.getElementById('levOpenPositions');
        if (list && !list.querySelector('.lev-position')) list.innerHTML = '<span class="text-muted small">No open leveraged positions.</span>';
        if (typeof showToast === 'function') showToast('success', data.message || 'Position closed.');
    }).catch(function (error) {
        button.disabled = false;
        delete button.dataset.submitting;
        button.textContent = 'Close';
        if (typeof showToast === 'function') showToast('error', error.message);
        else window.alert(error.message);
    });
});
</script>
@endsection