{{-- resources/views/dashboard/trade/future.blade.php --}}
@extends('layouts.user')
@section('title', 'Future Trade Simulation')

@section('styles')
<style>
/* ── MT5 Positions Panel ── */
.mt5-panel {
  background: #0d1117;
  border-radius: var(--radius);
  overflow: hidden;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
}
@media (max-width: 991px) {
  .mt5-panel { position: static; max-height: none; }
}

.mt5-header {
  background: #161b22;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.mt5-symbol-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.mt5-symbol {
  font-family: var(--font-brand);
  font-size: 18px; font-weight: 800; color: #e6edf3;
  letter-spacing: -.3px;
}
.mt5-price {
  margin-left: auto;
  font-size: 20px; font-weight: 800;
  color: #58a6ff;
  font-family: var(--font-brand);
}
.mt5-trend {
  font-size: 11px; font-weight: 700; padding: 3px 8px;
  border-radius: 20px; text-transform: uppercase;
}
.mt5-trend--bull { background: rgba(5,193,104,.18); color: #05c168; }
.mt5-trend--bear { background: rgba(245,34,45,.15); color: #f5222d; }

/* Balance rows */
.mt5-stats { padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.05); flex-shrink: 0; }
.mt5-stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0;
  font-size: 13px;
}
.mt5-stat-row:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.04); }
.mt5-stat-lbl { color: rgba(255,255,255,.55); font-weight: 500; }
.mt5-stat-val { color: #e6edf3; font-weight: 700; font-family: var(--font-brand); }
.mt5-stat-val.pos { color: #05c168; }
.mt5-stat-val.neg { color: #f5222d; }
.mt5-stat-val.blue { color: #58a6ff; }

/* Positions section */
.mt5-pos-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px 6px;
  font-size: 11px; font-weight: 800;
  color: rgba(255,255,255,.35);
  text-transform: uppercase; letter-spacing: 1px;
  flex-shrink: 0;
}
.mt5-positions {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.mt5-positions::-webkit-scrollbar { width: 4px; }
.mt5-positions::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

.mt5-pos-card {
  background: #161b22;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: border-color .15s;
}
.mt5-pos-card:hover { border-color: rgba(88,166,255,.3); }

.mt5-pos-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 5px;
}
.mt5-pos-symbol { font-weight: 800; font-size: 14px; color: #e6edf3; font-family: var(--font-brand); }
.mt5-pos-pnl {
  font-size: 18px; font-weight: 800;
  font-family: var(--font-brand); letter-spacing: -.3px;
}
.mt5-pos-pnl.pos { color: #58a6ff; }
.mt5-pos-pnl.neg { color: #f5222d; }

.mt5-pos-meta {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px;
}
.mt5-pos-side {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px;
}
.mt5-pos-side--buy  { background: rgba(0,113,255,.2); color: #58a6ff; }
.mt5-pos-side--sell { background: rgba(245,34,45,.15); color: #f87171; }
.mt5-pos-stake { font-size: 12px; color: rgba(255,255,255,.5); font-weight: 600; }

.mt5-pos-prices {
  font-size: 12.5px; color: rgba(255,255,255,.5); margin-bottom: 10px;
  font-family: var(--font-brand);
}
.mt5-pos-prices span { color: #e6edf3; font-weight: 700; }
.mt5-pos-prices .arrow { color: rgba(255,255,255,.25); margin: 0 4px; }

.mt5-pos-close {
  width: 100%; padding: 7px; border-radius: 8px;
  background: rgba(245,34,45,.12); color: #f87171;
  border: 1.5px solid rgba(245,34,45,.25);
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: var(--font);
  transition: background .13s, border-color .13s;
}
.mt5-pos-close:hover { background: rgba(245,34,45,.25); border-color: #f5222d; color: #fff; }

/* Open Trade Form */
.trade-form-card {
  background: #161b22;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 14px;
  margin: 0 10px 10px;
  flex-shrink: 0;
}
.trade-form-card .form-label { color: rgba(255,255,255,.6); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.trade-form-card .form-control {
  background: #0d1117;
  border-color: rgba(255,255,255,.1);
  color: #e6edf3;
  font-size: 13px;
}
.trade-form-card .form-control:focus { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,.15); }
.trade-form-card select.form-control option { background: #161b22; }
.btn-buy  { background: linear-gradient(90deg,#0071ff,#0096ff); color: #fff; border: 0; width: 100%; padding: 11px; border-radius: 8px; font-size: 14px; font-weight: 800; cursor: pointer; font-family: var(--font); letter-spacing: .3px; transition: opacity .13s; }
.btn-buy:hover { opacity: .88; }
.btn-sell { background: linear-gradient(90deg,#dc2626,#ef4444); color: #fff; border: 0; width: 100%; padding: 11px; border-radius: 8px; font-size: 14px; font-weight: 800; cursor: pointer; font-family: var(--font); letter-spacing: .3px; transition: opacity .13s; }
.btn-sell:hover { opacity: .88; }

/* Empty state */
.mt5-empty {
  text-align: center; padding: 32px 16px;
  color: rgba(255,255,255,.25); font-size: 13px;
}
.mt5-empty i { font-size: 36px; display: block; margin-bottom: 10px; opacity: .3; }

/* Chart toolbar responsive */
.chart-toolbar {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px; align-items: center;
}
.chart-toolbar .btn { font-size: 11.5px; padding: 5px 10px; }
.chart-tip {
  font-size: 11px; color: var(--muted);
  padding: 4px 10px; border: 1px dashed var(--border);
  border-radius: 8px; white-space: nowrap;
}
@media (max-width: 480px) {
  .chart-tip { display: none; }
  .chart-toolbar .btn--sm { padding: 5px 8px; font-size: 11px; }
}

/* Closed trades compact on mobile */
@media (max-width: 767px) {
  .mt5-panel { border-radius: var(--radius); }
  .mt5-price { font-size: 16px; }
  .mt5-symbol { font-size: 15px; }
}
</style>
@endsection

@section('content')

<div class="page-hdr">
  <h1 class="page-hdr__title">Future Trade <span style="font-size:13px;font-weight:500;color:var(--muted);margin-left:8px;" id="simSymbol">SIMULATION</span></h1>
  <div class="page-hdr__right">
    <div class="breadcrumb">
      <i class="icon ion-md-home"></i>
      <a href="{{ route('dashboard.overview') }}">Home</a>
      <i class="icon ion-ios-arrow-forward"></i>
      <span>Future</span>
    </div>
  </div>
</div>

{{-- ── Main Grid: Chart (left) + MT5 Panel (right) ── --}}
<div class="pg-chart mb-5">

  {{-- ── Left: Chart Card ── --}}
  <div class="card">
    <div class="card__head">
      <div>
        <div class="card__title">Advanced Live Candle Chart</div>
        <div class="card__sub">Zoom · Pan · Draw lines · SMA/EMA · Fullscreen</div>
      </div>
    </div>
    <div class="card__body">

      {{-- Toolbar --}}
      <div class="chart-toolbar">
        <button type="button" class="btn btn--outline btn--sm" id="btnZoomIn">
          <i class="icon ion-md-add"></i> Zoom In
        </button>
        <button type="button" class="btn btn--outline btn--sm" id="btnZoomOut">
          <i class="icon ion-md-remove"></i> Zoom Out
        </button>
        <span class="chart-tip">Drag to scroll · Wheel to zoom</span>
        <button type="button" class="btn btn--outline btn--sm" id="btnAutoFollow">
          <i class="icon ion-md-eye"></i> Auto Follow: OFF
        </button>
        <button type="button" class="btn btn--outline btn--sm" id="btnDraw">
          <i class="icon ion-md-create"></i> Draw: OFF
        </button>
        <button type="button" class="btn btn--danger btn--sm" id="btnClearLines">
          <i class="icon ion-md-trash"></i> Clear
        </button>
        <button type="button" class="btn btn--outline btn--sm" id="btnFullscreen">
          <i class="icon ion-md-expand"></i>
        </button>
        <label style="display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer;">
          <input type="checkbox" id="chkSma" checked style="accent-color:var(--primary);"> SMA(20)
        </label>
        <label style="display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer;">
          <input type="checkbox" id="chkEma" checked style="accent-color:#f59e0b;"> EMA(50)
        </label>
      </div>

      {{-- Canvas wrap --}}
      <div id="chartWrap" style="position:relative;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff;">
        <div id="futureChartContainer" style="height:430px;"></div>
        <canvas id="drawLayer" style="position:absolute;left:0;top:0;pointer-events:auto;z-index:20;cursor:grab;touch-action:none;"></canvas>

        {{-- Line context menu --}}
        <div id="lineMenu" style="display:none;position:absolute;z-index:30;background:#1e293b;border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.35);padding:8px;gap:6px;flex-direction:column;min-width:130px;">
          <button type="button" class="btn btn--sm" id="lineMoveBtn" style="background:rgba(255,255,255,.08);color:#e2e8f0;border:0;justify-content:flex-start;">
            <i class="icon ion-md-move"></i> Move Line
          </button>
          <button type="button" class="btn btn--sm" id="lineEdgeBtn" style="background:rgba(255,255,255,.08);color:#e2e8f0;border:0;justify-content:flex-start;">
            <i class="icon ion-md-resize"></i> Move Edge
          </button>
          <button type="button" class="btn btn--danger btn--sm" id="lineDeleteBtn" style="justify-content:flex-start;">
            <i class="icon ion-md-trash"></i> Delete Line
          </button>
        </div>

        {{-- Crosshair price tooltip --}}
        <div id="priceTooltip" style="display:none;position:absolute;right:60px;z-index:15;background:rgba(15,21,53,.85);color:#e6edf3;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:700;pointer-events:none;font-family:monospace;"></div>
      </div>

      <div style="margin-top:8px;font-size:11px;color:var(--muted);">
        Tip: <strong>Wheel</strong> zoom · <strong>Drag</strong> pan · Enable <strong>Draw</strong> then click 2 points to add a trend line · Lines saved to browser storage
      </div>
    </div>
  </div>

  {{-- ── Right: MT5 Panel ── --}}
  <div class="mt5-panel">

    {{-- Symbol + live price header --}}
    <div class="mt5-header">
      <div class="mt5-symbol-row">
        <div>
          <div class="mt5-symbol" id="simSymbolH">—</div>
          <div id="simTrend" class="mt5-trend mt5-trend--bull" style="margin-top:4px;display:inline-block;">—</div>
        </div>
        <div class="mt5-price" id="simPrice">—</div>
      </div>
    </div>

    {{-- Balance / Equity / Margin stats --}}
    <div class="mt5-stats">
      <div class="mt5-stat-row">
        <span class="mt5-stat-lbl">Balance</span>
        <span class="mt5-stat-val" id="mt5Balance">${{ number_format((float)$accountBalance, 2) }}</span>
      </div>
      <div class="mt5-stat-row">
        <span class="mt5-stat-lbl">Equity</span>
        <span class="mt5-stat-val blue" id="mt5Equity">—</span>
      </div>
      <div class="mt5-stat-row">
        <span class="mt5-stat-lbl">Margin</span>
        <span class="mt5-stat-val" id="simMargin">${{ number_format((float)$marginInUse, 2) }}</span>
      </div>
      <div class="mt5-stat-row">
        <span class="mt5-stat-lbl">Free Margin</span>
        <span class="mt5-stat-val" id="mt5FreeMargin">—</span>
      </div>
      <div class="mt5-stat-row">
        <span class="mt5-stat-lbl">Margin Level (%)</span>
        <span class="mt5-stat-val blue" id="mt5MarginLevel">—</span>
      </div>
      <div class="mt5-stat-row">
        <span class="mt5-stat-lbl">Entry (latest)</span>
        <span class="mt5-stat-val" id="simEntry">{{ $entryPrice > 0 ? number_format($entryPrice, 4) : '—' }}</span>
      </div>
    </div>

    {{-- Open Trade Form --}}
    <div class="trade-form-card">
      <div style="font-size:11px;font-weight:800;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;">Open Trade</div>
      <form method="POST" action="{{ route('dashboard.trade.future.open') }}" style="display:flex;flex-direction:column;gap:10px;">
        @csrf
        <div>
          <label class="form-label">Side</label>
          <select name="side" class="form-control" required id="tradeSide">
            <option value="buy">BUY</option>
            <option value="sell">SELL</option>
          </select>
        </div>
        <div>
          <label class="form-label">Stake Amount (USD)</label>
          <input type="number" name="stake_amount" step="0.01" min="1" class="form-control" required placeholder="100.00">
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
          <button type="submit" id="btnBuy" class="btn-buy" onclick="document.getElementById('tradeSide').value='buy'">
            BUY
          </button>
          <button type="submit" id="btnSell" class="btn-sell" onclick="document.getElementById('tradeSide').value='sell'">
            SELL
          </button>
        </div>
      </form>
    </div>

    {{-- Positions header --}}
    <div class="mt5-pos-head">
      <span>Positions</span>
      <span id="posCount" style="background:rgba(255,255,255,.08);padding:2px 8px;border-radius:20px;">0</span>
    </div>

    {{-- Positions list --}}
    <div class="mt5-positions" id="positionsList">
      @forelse($openTrades as $trade)
      <div class="mt5-pos-card" data-trade-id="{{ $trade->id }}">
        <div class="mt5-pos-top">
          <div class="mt5-pos-symbol">{{ $trade->symbol }}</div>
          <div class="mt5-pos-pnl {{ (float)$trade->live_pnl >= 0 ? 'pos' : 'neg' }} trade-pnl-display">
            {{ number_format((float)$trade->live_pnl, 2) }}
          </div>
        </div>
        <div class="mt5-pos-meta">
          <span class="mt5-pos-side mt5-pos-side--{{ strtolower($trade->side) }}">{{ strtoupper($trade->side) }}</span>
          <span class="mt5-pos-stake">${{ number_format((float)$trade->stake_amount, 2) }}</span>
          <span class="mt5-pos-stake trade-pnl-pct" style="margin-left:auto;color:{{ (float)$trade->live_pnl_percent>=0?'#05c168':'#f5222d' }}">
            {{ (float)$trade->live_pnl_percent >= 0 ? '+' : '' }}{{ number_format((float)$trade->live_pnl_percent, 2) }}%
          </span>
        </div>
        <div class="mt5-pos-prices">
          <span>{{ number_format((float)$trade->entry_price, 4) }}</span>
          <span class="arrow">→</span>
          <span id="livePrice-{{ $trade->id }}">—</span>
        </div>
        <form method="POST" action="{{ route('dashboard.trade.future.close', $trade) }}">
          @csrf
          <button type="submit" class="mt5-pos-close">Close Trade</button>
        </form>
      </div>
      @empty
      <div class="mt5-empty">
        <i class="icon ion-md-pulse"></i>
        No open positions.<br>Use the form above to open a trade.
      </div>
      @endforelse
    </div>

  </div>{{-- /.mt5-panel --}}

</div>{{-- /.pg-chart --}}

{{-- ── Closed Trades ── --}}
<div class="card">
  <div class="card__head">
    <div>
      <div class="card__title">Closed Trades</div>
      <div class="card__sub">Realized PnL credited back to account balance</div>
    </div>
  </div>
  <div class="card__body" style="padding-top:12px;">
    <div class="table-wrap">
      <table id="openTradesTable">
        <thead>
          <tr>
            <th>ID</th><th>Symbol</th><th>Side</th><th>Entry</th><th>Exit</th>
            <th>PnL</th><th>Credited</th><th>Closed At</th>
          </tr>
        </thead>
        <tbody>
          @forelse($closedTrades as $trade)
          <tr>
            <td style="color:var(--muted);font-weight:700;">#{{ $trade->id }}</td>
            <td><strong>{{ $trade->symbol }}</strong></td>
            <td>
              <span style="font-size:11px;font-weight:800;padding:2px 8px;border-radius:20px;
                background:{{ strtolower($trade->side)==='buy'?'#dbeafe':'#fee2e2' }};
                color:{{ strtolower($trade->side)==='buy'?'#1d4ed8':'#b91c1c' }}">
                {{ strtoupper($trade->side) }}
              </span>
            </td>
            <td class="font-mono">{{ number_format((float)$trade->entry_price, 4) }}</td>
            <td class="font-mono">{{ number_format((float)$trade->exit_price, 4) }}</td>
            <td style="font-weight:800;color:{{ (float)$trade->pnl>=0?'var(--success)':'var(--danger)' }}">
              {{ (float)$trade->pnl >= 0 ? '+' : '' }}{{ number_format((float)$trade->pnl, 4) }}
            </td>
            <td class="font-bold text-success">${{ number_format((float)$trade->credited_amount, 2) }}</td>
            <td style="color:var(--muted);font-size:12px;">{{ $trade->closed_at?->format('Y-m-d H:i:s') }}</td>
          </tr>
          @empty
          <tr>
            <td colspan="8" style="text-align:center;padding:32px;color:var(--muted);">
              <i class="icon ion-md-close-circle" style="font-size:28px;display:block;margin-bottom:8px;opacity:.2;"></i>
              No closed trades yet.
            </td>
          </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>

@endsection

@push('scripts')
<script>
/* ══════════════════════════════════════════════════════════════
   BELLUCHIBROKER — FUTURE TRADE CHART ENGINE
   MT5-style interaction · localStorage line persistence
══════════════════════════════════════════════════════════════ */
const closeTradeRouteTemplate = @json(route('dashboard.trade.future.close', ['trade' => '__TRADE_ID__']));
const csrfToken = @json(csrf_token());
const LS_KEY = 'bb_chart_lines_v2';

const wrap        = document.getElementById('chartWrap');
const underlay    = document.getElementById('futureChartContainer');
const canvas      = document.getElementById('drawLayer');
const lineMenu    = document.getElementById('lineMenu');
const lineMoveBtn = document.getElementById('lineMoveBtn');
const lineEdgeBtn = document.getElementById('lineEdgeBtn');
const lineDeleteBtn = document.getElementById('lineDeleteBtn');
const priceTooltip  = document.getElementById('priceTooltip');
const ctx = canvas ? canvas.getContext('2d') : null;

/* ── State ── */
const state = {
  candles: [],
  drawings: [],          // [{i1,p1,i2,p2,color}]
  drawMode: false,
  pendingPoint: null,    // {i,p}
  autoFollow: false,
  zoom: 1,
  scrollBars: 0,
  dragging: false,
  dragStartX: 0,
  dragStartY: 0,
  metrics: null,
  openTrades: [],
  selectedLine: null,    // index into drawings[]
  lineDragMode: null,    // null | 'move' | 'p1' | 'p2'
  mouseX: 0,
  mouseY: 0,
  currentPrice: 0,
};

/* ── LocalStorage line persistence ── */
function saveLines() {
  try { localStorage.setItem(LS_KEY, JSON.stringify(state.drawings)); } catch(e) {}
}
function loadLines() {
  try {
    const raw = localStorage.getItem(LS_KEY);
    if (raw) { const d = JSON.parse(raw); if (Array.isArray(d)) state.drawings = d; }
  } catch(e) {}
}
loadLines();

/* ── Candle helpers ── */
function toCandles(items) {
  return (items || []).map((c, idx) => ({
    index: idx,
    time: Math.floor(new Date(c.x).getTime() / 1000),
    open: Number(c.y[0]), high: Number(c.y[1]),
    low:  Number(c.y[2]), close: Number(c.y[3]),
  }));
}

/* ── Indicator calculations ── */
function calcSMA(data, period) {
  const out = Array(data.length).fill(null);
  let sum = 0;
  for (let i = 0; i < data.length; i++) {
    sum += data[i].close;
    if (i >= period) sum -= data[i - period].close;
    if (i >= period - 1) out[i] = sum / period;
  }
  return out;
}
function calcEMA(data, period) {
  const out = Array(data.length).fill(null);
  const k = 2 / (period + 1);
  let ema = null;
  for (let i = 0; i < data.length; i++) {
    ema = ema === null ? data[i].close : data[i].close * k + ema * (1 - k);
    if (i >= period - 1) out[i] = ema;
  }
  return out;
}

/* ── Canvas resize ── */
function resizeCanvas() {
  if (!ctx || !wrap || !canvas) return;
  const rect = wrap.getBoundingClientRect();
  const h = underlay ? underlay.clientHeight : 430;
  canvas.width  = Math.max(300, Math.floor(rect.width));
  canvas.height = Math.max(240, Math.floor(h));
  canvas.style.width  = canvas.width  + 'px';
  canvas.style.height = canvas.height + 'px';
  renderChart();
}

/* ── Viewport metrics ── */
function computeMetrics() {
  const w = canvas.width, h = canvas.height;
  const left = 64, right = 14, top = 14, bottom = 28;
  const plotW = Math.max(80, w - left - right);
  const plotH = Math.max(80, h - top - bottom);
  const len = state.candles.length;
  const baseVisible = 80;
  const visibleCount = Math.max(20, Math.min(240, Math.round(baseVisible / state.zoom)));
  const maxScroll = Math.max(0, len - visibleCount);
  state.scrollBars = Math.max(0, Math.min(maxScroll, state.scrollBars));
  let end = len - 1 - Math.round(state.scrollBars);
  end = Math.max(0, Math.min(len - 1, end));
  let start = Math.max(0, end - visibleCount + 1);
  if (state.autoFollow) { end = len - 1; start = Math.max(0, end - visibleCount + 1); state.scrollBars = 0; }
  const visible = state.candles.slice(start, end + 1);
  const high = visible.length ? Math.max(...visible.map(c => c.high)) : 1;
  const low  = visible.length ? Math.min(...visible.map(c => c.low))  : 0;
  const pad = Math.max((high - low) * 0.08, Math.max(high,1) * 0.0025);
  const maxP = high + pad, minP = Math.max(0.0001, low - pad);
  return { w, h, left, right, top, bottom, plotW, plotH, start, end, visibleCount, minP, maxP, maxScroll };
}

/* ── Coordinate helpers ── */
function xForIndex(index, m) { return m.left + ((index - m.start + 0.5) / m.visibleCount) * m.plotW; }
function yForPrice(price, m) { return m.top  + (1 - (price - m.minP) / Math.max(1e-10, m.maxP - m.minP)) * m.plotH; }
function indexForX(x, m)     { return m.start + ((x - m.left) / m.plotW) * m.visibleCount; }
function priceForY(y, m)     { return m.maxP  - ((y - m.top) / m.plotH) * (m.maxP - m.minP); }

/* ── Draw helpers ── */
function drawGrid(m) {
  ctx.strokeStyle = 'rgba(0,0,0,.05)'; ctx.lineWidth = 1;
  for (let i = 0; i <= 5; i++) {
    const y = m.top + (i / 5) * m.plotH;
    ctx.beginPath(); ctx.moveTo(m.left, y); ctx.lineTo(m.left + m.plotW, y); ctx.stroke();
  }
  for (let i = 0; i <= 8; i++) {
    const x = m.left + (i / 8) * m.plotW;
    ctx.beginPath(); ctx.moveTo(x, m.top); ctx.lineTo(x, m.top + m.plotH); ctx.stroke();
  }
}
function drawAxes(m) {
  ctx.fillStyle = '#6b7280'; ctx.font = '11px Inter,sans-serif'; ctx.textAlign = 'right';
  for (let i = 0; i <= 5; i++) {
    const y = m.top + (i / 5) * m.plotH;
    const p = m.maxP - (i / 5) * (m.maxP - m.minP);
    ctx.fillText(p.toFixed(4), m.left - 6, y + 3);
  }
  // current price marker
  if (state.currentPrice > 0) {
    const y = yForPrice(state.currentPrice, m);
    if (y >= m.top && y <= m.top + m.plotH) {
      ctx.strokeStyle = '#4361ee'; ctx.lineWidth = 1; ctx.setLineDash([4,3]);
      ctx.beginPath(); ctx.moveTo(m.left, y); ctx.lineTo(m.left + m.plotW, y); ctx.stroke();
      ctx.setLineDash([]);
      ctx.fillStyle = '#4361ee';
      ctx.fillRect(m.left + m.plotW + 2, y - 9, 58, 18);
      ctx.fillStyle = '#fff'; ctx.textAlign = 'left'; ctx.font = 'bold 10px Inter,sans-serif';
      ctx.fillText(state.currentPrice.toFixed(4), m.left + m.plotW + 6, y + 3);
    }
  }
}
function drawCandles(m) {
  const candleW = Math.max(2, (m.plotW / m.visibleCount) * 0.62);
  for (let i = m.start; i <= m.end; i++) {
    const c = state.candles[i]; if (!c) continue;
    const x = xForIndex(i, m);
    const yO = yForPrice(c.open, m), yC = yForPrice(c.close, m);
    const yH = yForPrice(c.high, m), yL = yForPrice(c.low,  m);
    const up = c.close >= c.open, color = up ? '#05c168' : '#f5222d';
    ctx.strokeStyle = color; ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(x, yH); ctx.lineTo(x, yL); ctx.stroke();
    ctx.fillStyle = color;
    ctx.fillRect(x - candleW/2, Math.min(yO,yC), candleW, Math.max(1, Math.abs(yC - yO)));
  }
}
function drawIndicator(values, color, m) {
  ctx.strokeStyle = color; ctx.lineWidth = 1.5; ctx.beginPath();
  let started = false;
  for (let i = m.start; i <= m.end; i++) {
    const v = values[i]; if (v === null || isNaN(v)) continue;
    const x = xForIndex(i, m), y = yForPrice(v, m);
    if (!started) { ctx.moveTo(x, y); started = true; } else ctx.lineTo(x, y);
  }
  if (started) ctx.stroke();
}
function drawTradeLines(m) {
  if (!state.openTrades.length) return;
  state.openTrades.forEach(trade => {
    const entry = Number(trade.entry_price || 0);
    if (!isFinite(entry) || entry <= 0) return;
    const y = yForPrice(entry, m);
    if (y < m.top - 2 || y > m.top + m.plotH + 2) return;
    const isBuy = String(trade.side||'').toLowerCase() === 'buy';
    const color = isBuy ? '#0096ff' : '#ef4444';
    ctx.setLineDash([6, 4]); ctx.strokeStyle = color; ctx.lineWidth = 1.4;
    ctx.beginPath(); ctx.moveTo(m.left, y); ctx.lineTo(m.left + m.plotW, y); ctx.stroke();
    ctx.setLineDash([]);
    ctx.fillStyle = color; ctx.font = 'bold 11px Inter,sans-serif';
    ctx.textAlign = 'left';
    ctx.fillText(`${isBuy?'BUY':'SELL'} · ${entry.toFixed(4)}`, m.left + 6, y - 5);
  });
}

/* ── Line proximity helpers ── */
function distToSegment(px, py, x1, y1, x2, y2) {
  const A=px-x1,B=py-y1,C=x2-x1,D=y2-y1,lenSq=C*C+D*D;
  const t = lenSq>0 ? Math.max(0,Math.min(1,(A*C+B*D)/lenSq)) : 0;
  return Math.hypot(px-(x1+C*t), py-(y1+D*t));
}
const HANDLE_R = 10, LINE_HIT = 7;

function findLineHit(x, y, m) {
  for (let i = state.drawings.length - 1; i >= 0; i--) {
    const ln = state.drawings[i];
    const x1 = xForIndex(ln.i1, m), y1 = yForPrice(ln.p1, m);
    const x2 = xForIndex(ln.i2, m), y2 = yForPrice(ln.p2, m);
    if (Math.hypot(x-x1, y-y1) <= HANDLE_R) return { idx: i, part: 'p1' };
    if (Math.hypot(x-x2, y-y2) <= HANDLE_R) return { idx: i, part: 'p2' };
    if (distToSegment(x, y, x1, y1, x2, y2) <= LINE_HIT) return { idx: i, part: 'line' };
  }
  return null;
}

/* ── MT5-style cursor logic ── */
function getCursorForHit(hit) {
  if (!hit) return state.drawMode ? 'crosshair' : 'grab';
  if (hit.part === 'p1' || hit.part === 'p2') return 'nwse-resize'; // endpoint — resize cursor
  return 'all-scroll'; // body of line — move cursor
}

/* ── Draw user lines ── */
function drawLines(m) {
  state.drawings.forEach((ln, idx) => {
    const x1 = xForIndex(ln.i1, m), y1 = yForPrice(ln.p1, m);
    const x2 = xForIndex(ln.i2, m), y2 = yForPrice(ln.p2, m);
    const sel = state.selectedLine === idx;
    const color = ln.color || '#d70016';
    ctx.strokeStyle = sel ? '#ff6b6b' : color; ctx.lineWidth = sel ? 2.5 : 2;
    ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
    // endpoint handles
    [{ x: x1, y: y1 }, { x: x2, y: y2 }].forEach(pt => {
      ctx.fillStyle = sel ? '#fff' : 'rgba(255,255,255,.7)';
      ctx.strokeStyle = color; ctx.lineWidth = sel ? 2 : 1.5;
      ctx.beginPath(); ctx.arc(pt.x, pt.y, sel ? 6 : 4, 0, Math.PI*2); ctx.fill(); ctx.stroke();
    });
  });
  // pending draw point
  if (state.drawMode && state.pendingPoint && state.metrics) {
    const x1 = xForIndex(state.pendingPoint.i, m);
    const y1 = yForPrice(state.pendingPoint.p, m);
    ctx.fillStyle = '#d70016'; ctx.strokeStyle = '#d70016'; ctx.lineWidth = 1.5;
    ctx.beginPath(); ctx.arc(x1, y1, 5, 0, Math.PI*2); ctx.fill();
    // rubber-band line to mouse
    if (state.mouseX && state.mouseY) {
      ctx.setLineDash([6,4]); ctx.beginPath();
      ctx.moveTo(x1, y1); ctx.lineTo(state.mouseX, state.mouseY); ctx.stroke();
      ctx.setLineDash([]);
    }
  }
}

/* ── Crosshair ── */
function drawCrosshair(m) {
  if (!state.mouseX || state.mouseX < m.left || state.mouseX > m.left + m.plotW) return;
  if (!state.mouseY || state.mouseY < m.top  || state.mouseY > m.top  + m.plotH) return;
  ctx.strokeStyle = 'rgba(100,120,200,.4)'; ctx.lineWidth = 1; ctx.setLineDash([4,4]);
  ctx.beginPath(); ctx.moveTo(state.mouseX, m.top); ctx.lineTo(state.mouseX, m.top + m.plotH); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(m.left, state.mouseY); ctx.lineTo(m.left + m.plotW, state.mouseY); ctx.stroke();
  ctx.setLineDash([]);
  // price label
  const price = priceForY(state.mouseY, m);
  if (priceTooltip) {
    priceTooltip.style.display = 'block';
    priceTooltip.style.top = (state.mouseY - 10) + 'px';
    priceTooltip.textContent = price.toFixed(4);
  }
}

/* ── Master render ── */
function renderChart() {
  if (!ctx || !canvas) return;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (!state.candles.length) {
    ctx.fillStyle = '#9ca3af'; ctx.font = '14px Inter,sans-serif';
    ctx.textAlign = 'left'; ctx.fillText('Waiting for candles…', 14, 28); return;
  }
  const m = computeMetrics(); state.metrics = m;
  ctx.textAlign = 'left';
  drawGrid(m); drawAxes(m); drawCandles(m);
  if (document.getElementById('chkSma')?.checked) drawIndicator(calcSMA(state.candles,20), '#2563eb', m);
  if (document.getElementById('chkEma')?.checked) drawIndicator(calcEMA(state.candles,50), '#f59e0b', m);
  drawTradeLines(m);
  drawLines(m);
  drawCrosshair(m);
}

/* ── MT5 Positions panel renderer ── */
function renderPositionsPanel(trades) {
  state.openTrades = Array.isArray(trades) ? trades : [];
  const list = document.getElementById('positionsList');
  const countEl = document.getElementById('posCount');
  if (!list) return;

  if (countEl) countEl.textContent = state.openTrades.length;

  if (!state.openTrades.length) {
    list.innerHTML = `<div class="mt5-empty"><i class="icon ion-md-pulse"></i>No open positions.<br>Use the form above to open a trade.</div>`;
    updateMarginStats();
    renderChart(); return;
  }

  const currentPrice = state.currentPrice || 0;

  list.innerHTML = state.openTrades.map(trade => {
    const pnl    = Number(trade.live_pnl || 0);
    const pnlPct = Number(trade.live_pnl_percent || 0);
    const pos    = pnl >= 0;
    const isBuy  = String(trade.side||'').toLowerCase() === 'buy';
    const closeUrl = closeTradeRouteTemplate.replace('__TRADE_ID__', String(trade.id));
    const livePriceStr = currentPrice > 0 ? currentPrice.toFixed(4) : '—';
    return `
      <div class="mt5-pos-card" data-trade-id="${trade.id}">
        <div class="mt5-pos-top">
          <div class="mt5-pos-symbol">${trade.symbol}</div>
          <div class="mt5-pos-pnl ${pos?'pos':'neg'}">${(pos?'+':'')}${pnl.toFixed(2)}</div>
        </div>
        <div class="mt5-pos-meta">
          <span class="mt5-pos-side mt5-pos-side--${isBuy?'buy':'sell'}">${isBuy?'BUY':'SELL'}</span>
          <span class="mt5-pos-stake">$${Number(trade.stake_amount).toFixed(2)}</span>
          <span class="mt5-pos-stake" style="margin-left:auto;color:${pos?'#05c168':'#f5222d'};font-weight:700;">
            ${(pos?'+':'')}${pnlPct.toFixed(2)}%
          </span>
        </div>
        <div class="mt5-pos-prices">
          <span>${Number(trade.entry_price).toFixed(4)}</span>
          <span class="arrow"> → </span>
          <span>${livePriceStr}</span>
        </div>
        <form method="POST" action="${closeUrl}">
          <input type="hidden" name="_token" value="${csrfToken}">
          <button type="submit" class="mt5-pos-close">Close Trade</button>
        </form>
      </div>`;
  }).join('');

  updateMarginStats();
  renderChart();
}

function updateMarginStats() {
  const trades = state.openTrades;
  const balance = Number(document.getElementById('mt5Balance')?.textContent?.replace(/[$,]/g,'') || 0);
  const totalMargin  = trades.reduce((s,t) => s + Number(t.stake_amount||0), 0);
  const totalPnl     = trades.reduce((s,t) => s + Number(t.live_pnl||0), 0);
  const equity       = balance + totalPnl;
  const freeMargin   = equity - totalMargin;
  const marginLevel  = totalMargin > 0 ? (equity / totalMargin * 100) : 0;

  const fmt = v => '$' + v.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g,',');
  const el = id => document.getElementById(id);

  if (el('simMargin'))     el('simMargin').textContent     = fmt(totalMargin);
  if (el('mt5Equity'))     { el('mt5Equity').textContent   = fmt(equity);      el('mt5Equity').className = 'mt5-stat-val ' + (equity>=balance?'pos':'neg'); }
  if (el('mt5FreeMargin')) { el('mt5FreeMargin').textContent = fmt(freeMargin); el('mt5FreeMargin').className = 'mt5-stat-val ' + (freeMargin>=0?'':'neg'); }
  if (el('mt5MarginLevel')) el('mt5MarginLevel').textContent = (totalMargin>0 ? marginLevel.toFixed(2)+'%' : '—');

  // latest entry
  const latest = trades[0] || null;
  if (el('simEntry')) el('simEntry').textContent = latest ? Number(latest.entry_price||0).toFixed(4) : '—';
}

/* ── Live feed polling ── */
function refreshFeed() {
  fetch("{{ route('dashboard.trade.future.feed') }}", { headers:{'X-Requested-With':'XMLHttpRequest'} })
    .then(r => r.json())
    .then(payload => {
      if (!payload) return;
      const price = Number(payload.current_price || 0);
      state.currentPrice = price;

      const simPrice   = document.getElementById('simPrice');
      const simTrend   = document.getElementById('simTrend');
      const simSymbolH = document.getElementById('simSymbolH');
      const simSymbol  = document.getElementById('simSymbol');

      if (simPrice) simPrice.textContent = price > 0 ? price.toFixed(4) : '—';
      if (simSymbolH && payload.symbol) simSymbolH.textContent = payload.symbol;
      if (simSymbol  && payload.symbol) simSymbol.textContent  = payload.symbol;
      if (simTrend) {
        const bull = String(payload.trend||'').toLowerCase() === 'up';
        // simTrend.textContent = 'Trend: ' + String(payload.trend||'').toUpperCase();
        simTrend.className = 'mt5-trend ' + (bull ? 'mt5-trend--bull' : 'mt5-trend--bear');
      }

      if (Array.isArray(payload.candles)) {
        state.candles = toCandles(payload.candles);
        if (state.autoFollow) state.scrollBars = 0;
        renderChart();
      }
      if (Array.isArray(payload.open_trades)) renderPositionsPanel(payload.open_trades);
    })
    .catch(() => {});
}

/* ══════════════════════════════════════════
   CANVAS EVENT HANDLING — MT5 STYLE
══════════════════════════════════════════ */
if (canvas) {

  /* ── Wheel: zoom (default) or pan (Shift+wheel) ── */
  canvas.addEventListener('wheel', ev => {
    ev.preventDefault();
    if (!state.metrics) return;
    if (ev.shiftKey) {
      const deltaBars = ev.deltaY > 0 ? 4 : -4;
      state.scrollBars = Math.max(0, Math.min(state.metrics.maxScroll, state.scrollBars + deltaBars));
      state.autoFollow = false;
      document.getElementById('btnAutoFollow').textContent = 'Auto Follow: OFF';
    } else {
      state.zoom = ev.deltaY < 0
        ? Math.min(6, state.zoom * 1.12)
        : Math.max(0.3, state.zoom / 1.12);
    }
    renderChart();
  }, { passive: false });

  /* ── Touch pinch-zoom ── */
  let lastTouchDist = 0;
  canvas.addEventListener('touchstart', ev => {
    if (ev.touches.length === 2) {
      lastTouchDist = Math.hypot(
        ev.touches[0].clientX - ev.touches[1].clientX,
        ev.touches[0].clientY - ev.touches[1].clientY
      );
    }
  }, { passive: true });
  canvas.addEventListener('touchmove', ev => {
    if (ev.touches.length === 2) {
      ev.preventDefault();
      const dist = Math.hypot(
        ev.touches[0].clientX - ev.touches[1].clientX,
        ev.touches[0].clientY - ev.touches[1].clientY
      );
      const ratio = dist / Math.max(1, lastTouchDist);
      state.zoom = Math.max(0.3, Math.min(6, state.zoom * ratio));
      lastTouchDist = dist;
      renderChart();
    }
  }, { passive: false });

  /* ── Mouse down ── */
  canvas.addEventListener('mousedown', ev => {
    if (!state.metrics) return;
    const rect = canvas.getBoundingClientRect();
    const x = ev.clientX - rect.left, y = ev.clientY - rect.top;

    if (state.drawMode) {
      // handled in click
      return;
    }

    const hit = findLineHit(x, y, state.metrics);
    if (hit) {
      state.selectedLine = hit.idx;
      state.lineDragMode = hit.part; // 'p1' | 'p2' | 'line' (mapped to 'move')
      if (hit.part === 'line') state.lineDragMode = 'move';
      state.dragStartX = ev.clientX;
      state.dragStartY = ev.clientY;
      canvas.style.cursor = 'grabbing';
      hideLineMenu();
      renderChart();
      return;
    }

    // pan
    state.dragging = true;
    state.dragStartX = ev.clientX;
    canvas.style.cursor = 'grabbing';
    if (state.selectedLine !== null) { state.selectedLine = null; hideLineMenu(); renderChart(); }
  });

  /* ── Mouse move ── */
  canvas.addEventListener('mousemove', ev => {
    if (!state.metrics) return;
    const rect = canvas.getBoundingClientRect();
    const x = ev.clientX - rect.left, y = ev.clientY - rect.top;
    state.mouseX = x; state.mouseY = y;

    /* Active line drag */
    if (state.lineDragMode !== null && state.selectedLine !== null) {
      const ln = state.drawings[state.selectedLine]; if (!ln) return;
      if (state.lineDragMode === 'p1') {
        ln.i1 = indexForX(x, state.metrics); ln.p1 = priceForY(y, state.metrics);
      } else if (state.lineDragMode === 'p2') {
        ln.i2 = indexForX(x, state.metrics); ln.p2 = priceForY(y, state.metrics);
      } else if (state.lineDragMode === 'move') {
        const dx = ev.clientX - state.dragStartX;
        const dy = ev.clientY - state.dragStartY;
        state.dragStartX = ev.clientX; state.dragStartY = ev.clientY;
        const pxPerBar  = state.metrics.plotW / state.metrics.visibleCount;
        const bars      = dx / Math.max(1, pxPerBar);
        const priceDel  = -dy / Math.max(1, state.metrics.plotH) * (state.metrics.maxP - state.metrics.minP);
        ln.i1 += bars; ln.i2 += bars; ln.p1 += priceDel; ln.p2 += priceDel;
      }
      saveLines();
      renderChart(); return;
    }

    /* Chart pan */
    if (state.dragging) {
      const dx = ev.clientX - state.dragStartX;
      state.dragStartX = ev.clientX;
      const pxPerBar = state.metrics.plotW / state.metrics.visibleCount;
      const bars = -dx / Math.max(1, pxPerBar);
      state.scrollBars = Math.max(0, Math.min(state.metrics.maxScroll, state.scrollBars + bars));
      state.autoFollow = false;
      document.getElementById('btnAutoFollow').textContent = 'Auto Follow: OFF';
      renderChart(); return;
    }

    /* ── MT5 cursor: changes based on proximity to line ── */
    if (!state.drawMode) {
      const hit = findLineHit(x, y, state.metrics);
      canvas.style.cursor = getCursorForHit(hit);
    }

    renderChart(); // repaint crosshair
  });

  /* ── Mouse leave ── */
  canvas.addEventListener('mouseleave', () => {
    state.dragging = false; state.lineDragMode = null;
    state.mouseX = 0; state.mouseY = 0;
    if (priceTooltip) priceTooltip.style.display = 'none';
    canvas.style.cursor = state.drawMode ? 'crosshair' : 'grab';
    renderChart();
  });

  /* ── Mouse up ── */
  canvas.addEventListener('mouseup', ev => {
    if (state.lineDragMode !== null) saveLines(); // persist after drag ends
    state.dragging = false; state.lineDragMode = null;
    canvas.style.cursor = state.drawMode ? 'crosshair' : 'grab';
  });

  /* ── Click: draw points OR select line ── */
  canvas.addEventListener('click', ev => {
    if (!state.metrics) return;
    const rect = canvas.getBoundingClientRect();
    const x = ev.clientX - rect.left, y = ev.clientY - rect.top;

    if (state.drawMode) {
      const i = indexForX(x, state.metrics), p = priceForY(y, state.metrics);
      if (state.pendingPoint === null) {
        state.pendingPoint = { i, p };
      } else {
        state.drawings.push({ i1: state.pendingPoint.i, p1: state.pendingPoint.p, i2: i, p2: p, color: '#d70016' });
        state.selectedLine = state.drawings.length - 1;
        state.pendingPoint = null;
        saveLines();
      }
      renderChart(); return;
    }

    const hit = findLineHit(x, y, state.metrics);
    if (hit) {
      state.selectedLine = hit.idx;
      showLineMenu(x, y, hit.part);
    } else {
      state.selectedLine = null;
      hideLineMenu();
    }
    renderChart();
  });

  /* ── Right-click: context menu on line ── */
  canvas.addEventListener('contextmenu', ev => {
    ev.preventDefault();
    if (!state.metrics) return;
    const rect = canvas.getBoundingClientRect();
    const x = ev.clientX - rect.left, y = ev.clientY - rect.top;
    const hit = findLineHit(x, y, state.metrics);
    if (hit) { state.selectedLine = hit.idx; showLineMenu(x, y, hit.part); renderChart(); }
  });
}

/* ── Line menu ── */
function showLineMenu(x, y, part) {
  if (!lineMenu) return;
  lineMenu.style.display = 'flex';
  lineMenu.style.left = Math.max(8, x - 60) + 'px';
  lineMenu.style.top  = Math.max(8, y - 10) + 'px';
  if (lineMoveBtn)   lineMoveBtn.style.display   = part === 'line' ? 'flex' : 'flex';
  if (lineEdgeBtn)   lineEdgeBtn.style.display   = (part === 'p1' || part === 'p2') ? 'flex' : 'none';
  if (lineDeleteBtn) lineDeleteBtn.style.display = 'flex';
}
function hideLineMenu() { if (lineMenu) lineMenu.style.display = 'none'; }

/* ── Toolbar buttons ── */
document.getElementById('btnZoomIn')?.addEventListener('click', () => { state.zoom = Math.min(6, state.zoom * 1.25); renderChart(); });
document.getElementById('btnZoomOut')?.addEventListener('click', () => { state.zoom = Math.max(0.3, state.zoom / 1.25); renderChart(); });

document.getElementById('btnAutoFollow')?.addEventListener('click', function() {
  state.autoFollow = !state.autoFollow;
  if (state.autoFollow) state.scrollBars = 0;
  this.textContent = `Auto Follow: ${state.autoFollow ? 'ON' : 'OFF'}`;
  this.style.background = state.autoFollow ? 'var(--primary)' : '';
  this.style.color      = state.autoFollow ? '#fff' : '';
  renderChart();
});

document.getElementById('btnDraw')?.addEventListener('click', function() {
  state.drawMode = !state.drawMode;
  state.pendingPoint = null;
  if (state.drawMode) hideLineMenu();
  if (canvas) canvas.style.cursor = state.drawMode ? 'crosshair' : 'grab';
  this.textContent = `Draw: ${state.drawMode ? 'ON' : 'OFF'}`;
  this.style.background = state.drawMode ? 'var(--primary)' : '';
  this.style.color      = state.drawMode ? '#fff' : '';
  renderChart();
});

document.getElementById('btnClearLines')?.addEventListener('click', () => {
  if (!confirm('Clear all drawn lines?')) return;
  state.drawings = []; state.selectedLine = null; state.pendingPoint = null;
  hideLineMenu(); saveLines(); renderChart();
});

document.getElementById('btnFullscreen')?.addEventListener('click', async () => {
  if (!document.fullscreenElement) {
    await wrap?.requestFullscreen().catch(()=>{});
  } else {
    await document.exitFullscreen().catch(()=>{});
  }
});

lineMoveBtn?.addEventListener('click', () => { state.lineDragMode = 'move'; hideLineMenu(); });
lineEdgeBtn?.addEventListener('click', () => { state.lineDragMode = state.selectedLine !== null ? 'p1' : null; hideLineMenu(); });
lineDeleteBtn?.addEventListener('click', () => {
  if (state.selectedLine !== null) {
    state.drawings.splice(state.selectedLine, 1);
    state.selectedLine = null;
    hideLineMenu(); saveLines(); renderChart();
  }
});

document.getElementById('chkSma')?.addEventListener('change', renderChart);
document.getElementById('chkEma')?.addEventListener('change', renderChart);

window.addEventListener('resize', resizeCanvas);
document.addEventListener('fullscreenchange', () => setTimeout(resizeCanvas, 100));

/* ── Init ── */
if (underlay) { underlay.style.background = '#fff'; underlay.innerHTML = ''; }
resizeCanvas();
refreshFeed();
setInterval(refreshFeed, 2000);
</script>
@endpush