@php use App\Support\SymbolPresentation; @endphp
@extends('portal.layouts.master')
@section('title', 'Binary Options')
@section('page-title', 'Binary Options')

@section('extra-css')
/* ══════════════════════════════════════════
   BINARY OPTIONS — 3-column layout
   ══════════════════════════════════════════ */
.bo-shell {
    --bo-panel-height: clamp(640px, 72vh, 820px);
    display: grid;
    grid-template-columns: minmax(250px,300px) minmax(0,1fr) minmax(350px,380px);
    grid-template-rows: 58px calc(var(--bo-panel-height) - 58px) auto auto;
    column-gap: 1rem;
    row-gap: 0;
    min-height: 0;
    background: transparent;
}

/* ─── COLUMN 1: Category nav ─── */
.cat-col {
    width: 210px;
    flex-shrink: 0;
    background: #131722;
    border-right: 1px solid #2b3139;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.cat-col::-webkit-scrollbar { width: 3px; }
.cat-col::-webkit-scrollbar-thumb { background: #2b3139; }

.cat-top {
    padding: .9rem 1rem .6rem;
    border-bottom: 1px solid #2b3139;
}
.cat-top h6 { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #5e6673; margin: 0; }

.cat-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255,255,255,.03);
    transition: background .14s, border-color .14s;
}
.cat-item:hover { background: rgba(255,255,255,.04); }
.cat-item.active { background: rgba(59,130,246,.1); border-left-color: #3b82f6; }
.cat-item.active .cat-iname { color: #fff; }

.cat-icon-wrap {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: .95rem;
}
.cat-icon-wrap.forex  { background: rgba(14,203,129,.12); color: #0ecb81; }
.cat-icon-wrap.crypto { background: rgba(245,158,11,.12);  color: #f59e0b; }
.cat-icon-wrap.stocks { background: rgba(59,130,246,.12);  color: #3b82f6; }
.cat-icon-wrap.commodities { background: rgba(139,92,246,.12); color: #8b5cf6; }

.cat-iname { font-size: .85rem; font-weight: 700; color: #848e9c; }
.cat-idesc { font-size: .65rem; color: #5e6673; margin-top: 1px; line-height: 1.3; }
.cat-count {
    margin-left: auto; flex-shrink: 0;
    background: #1e2329; color: #848e9c;
    font-size: .62rem; font-weight: 700;
    padding: .15rem .4rem; border-radius: 4px; min-width: 20px; text-align: center;
}
.cat-item.active .cat-count { background: rgba(59,130,246,.2); color: #3b82f6; }

/* ─── COLUMN 2: Asset list ─── */
.asset-col {
    width: auto;
    min-width: 0;
    grid-column: 1;
    grid-row: 1 / 3;
    height: var(--bo-panel-height);
    background: var(--bg-card, #131722);
    border: 1px solid var(--border, #2b3139);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.asset-filter-header {
    padding: .6rem .75rem; border-bottom: 1px solid var(--border, #2b3139);
    min-height: 51px; display: flex; align-items: center;
}
.asset-filter { position: relative; width: 100%; }
.asset-filter-toggle {
    width: 100%; padding: 0; border: 0; background: transparent; color: var(--text-secondary, #848e9c);
    display: flex; align-items: center; gap: .55rem; text-transform: uppercase;
    letter-spacing: .05em; font-size: .8rem; font-weight: 700; cursor: pointer; text-align: left;
}
.asset-filter-toggle .filter-chevron { margin-left: auto; transition: transform .15s ease; }
.asset-filter-toggle[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); }
.asset-filter-menu {
    position: absolute; z-index: 50; top: calc(100% + .7rem); left: -.75rem; right: -.75rem;
    padding: .35rem; border: 1px solid var(--border, #2b3139); border-radius: 8px;
    background: var(--bg-card, #131722); box-shadow: 0 12px 30px rgba(0,0,0,.38);
}
.asset-filter-menu .cat-item {
    width: 100%; border: 0; border-radius: 6px; padding: .55rem .6rem;
    background: transparent; text-align: left;
}
.asset-filter-menu .cat-item.active,
.asset-filter-menu .cat-item:hover,
.asset-filter-menu .cat-item:focus { background: rgba(59,130,246,.1); outline: none; }
.asset-search-bar {
    padding: .6rem .8rem;
    border-bottom: 1px solid #2b3139;
    flex-shrink: 0;
    position: relative;
}
.asset-search-bar input {
    width: 100%;
    background: #131722;
    border: 1px solid #2b3139;
    border-radius: 7px;
    padding: .45rem .7rem .45rem 2.1rem;
    color: #eaecef;
    font-size: .82rem;
    outline: none;
    transition: border-color .15s;
    font-family: inherit;
}
.asset-search-bar input:focus { border-color: #3b82f6; }
.asset-search-bar .fa-magnifying-glass {
    position: absolute; left: 1.35rem; top: 50%; transform: translateY(-50%);
    color: #5e6673; font-size: .78rem; pointer-events: none;
}

.asset-list-hdr {
    display: grid;
    grid-template-columns: 1fr 60px 60px;
    padding: .35rem .85rem;
    border-bottom: 1px solid #2b3139;
    flex-shrink: 0;
}
.asset-list-hdr span {
    font-size: .62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #5e6673;
}
.asset-list-hdr span:not(:first-child) { text-align: center; }

.asset-scroll { overflow-y: auto; flex: 1; }
.asset-scroll::-webkit-scrollbar { width: 3px; }
.asset-scroll::-webkit-scrollbar-thumb { background: #2b3139; }

.asset-row {
    display: grid;
    grid-template-columns: 1fr 60px 60px;
    align-items: center;
    padding: .6rem .85rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255,255,255,.03);
    transition: background .12s;
}
.asset-row:hover  { background: rgba(255,255,255,.04); }
.asset-row.active { background: rgba(59,130,246,.1); border-left-color: #3b82f6; }

.ar-info { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.ar-icon {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: #1e2329; font-size: .7rem; font-weight: 800;
}
.ar-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ar-icon.stock-icon { font-size: .92rem; }
.ar-icon.stock-icon i { line-height: 1; }
.ar-icon-fallback { display: none; font-size: .62rem; font-weight: 800; }
.ar-icon.flags { position: relative; background: transparent; }
.ar-icon.flags .f1, .ar-icon.flags .f2 {
    width: 22px; height: 22px; border-radius: 50%;
    position: absolute; overflow: hidden;
    border: 1px solid #0d1117;
}
.ar-icon.flags .f1 { top: 0; left: 0; z-index: 2; }
.ar-icon.flags .f2 { bottom: 0; right: 0; z-index: 1; }
.ar-icon.flags .f1 img, .ar-icon.flags .f2 img { width: 100%; height: 100%; object-fit: cover; }

.ar-text { min-width: 0; }
.ar-name  { font-size: .82rem; font-weight: 600; color: #eaecef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-price { font-size: .68rem; color: #848e9c; margin-top: 1px; font-variant-numeric: tabular-nums; }

.ar-pct {
    text-align: center;
    font-size: .78rem; font-weight: 700;
    color: #0ecb81;
}
.ar-pct.na { color: #5e6673; }

/* ─── COLUMN 3: Chart + Trade form ─── */
.trade-col {
    display: contents;
}
.trade-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid #2b3139;
    grid-column: 2;
    grid-row: 1;
    background: #131722;
    border: 1px solid var(--border, #2b3139);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}
.th-left {}
.th-asset { font-size: 1.05rem; font-weight: 700; color: #eaecef; }
.th-sub   { font-size: .7rem;   color: #848e9c; margin-top: 1px; }
.th-price-big { font-size: 1.5rem; font-weight: 800; color: #f0c96a; font-variant-numeric: tabular-nums; line-height: 1; text-align: right; }
.th-chg   { font-size: .75rem; font-weight: 700; text-align: right; margin-top: 2px; }
.th-chg.up { color: #0ecb81; } .th-chg.dn { color: #f6465d; }

/* Chart */
.chart-wrap {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    min-height: 0;
    background: #0b0e11;
    border: 1px solid var(--border, #2b3139);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chart-wrap:fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; background: #0b0e11; }
.chart-toolbar {
    min-height: 42px; display: flex; align-items: center; gap: .3rem; padding: .35rem .45rem;
    overflow-x: auto; flex: 0 0 auto; border-bottom: 1px solid #252b34; background: #10141c;
    scrollbar-width: thin;
}
.chart-toolbar-group { display: inline-flex; align-items: center; gap: .18rem; padding-right: .35rem; border-right: 1px solid #2b3139; }
.chart-toolbar-group:last-child { border: 0; }
.chart-tool {
    min-width: 31px; height: 30px; padding: 0 .48rem; border: 1px solid transparent; border-radius: 5px;
    background: transparent; color: #a8b0bc; font-size: .68rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.chart-tool:hover { color: #fff; background: #202630; }
.chart-tool.active { color: #fff; background: #323946; border-color: #4b5563; }
.chart-tool.danger:hover { color: #ff6b7d; }
.chart-tool-select {
    height: 30px; padding: 0 1.45rem 0 .45rem; border: 1px solid #303743; border-radius: 5px;
    background: #151a23; color: #d5dae1; font-size: .68rem; cursor: pointer;
}
.binary-range-label,
.binary-timeframe-label { display:inline-flex; align-items:center; height:30px; color:#a8b0bc; font-size:.68rem; font-weight:700; line-height:1; padding:0 .15rem; white-space:nowrap; }
.chart-indicator-menu {
    position: absolute; z-index: 40; top: 45px; left: 315px; width: 238px; padding: .55rem;
    border: 1px solid #303743; border-radius: 7px; background: #161b24; box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.chart-indicator-menu[hidden] { display: none; }
.indicator-option { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem; color: #d5dae1; font-size: .7rem; }
.indicator-option input { accent-color: #3b82f6; }
.indicator-option .indicator-settings { display: flex; gap: .2rem; }
.indicator-option input[type="number"] { width: 42px; padding: .12rem .18rem; color: #fff; background: #0b0e11; border: 1px solid #303743; border-radius: 3px; font-size: .62rem; }
.chart-stage { position: relative; min-height: 0; flex: 1 1 auto; }
.internal-chart-mount { position: absolute; inset: 0; }
.chart-drawing-layer { position: absolute; inset: 0; z-index: 8; width: 100%; height: 100%; pointer-events: none; }
.chart-drawing-layer.drawing { pointer-events: auto; cursor: crosshair; }
.chart-drawing-layer .drawing-hit { pointer-events: stroke; cursor: pointer; }
.chart-drawing-layer .selected { filter: drop-shadow(0 0 3px #60a5fa); }
.internal-chart-status {
    position: absolute; top: 2.3rem; left: .75rem; z-index: 3;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .28rem .5rem; border-radius: 5px;
    background: rgba(11,14,17,.78); color: #848e9c;
    font-size: .65rem; font-weight: 700; letter-spacing: .03em;
    pointer-events: none;
}
.chart-ohlc {
    position: absolute; top: .42rem; left: .75rem; right: .75rem; z-index: 3;
    display: flex; align-items: center; gap: .42rem; color: #8f98a5; font-size: .65rem;
    pointer-events: none; white-space: nowrap; overflow: hidden;
}
.chart-ohlc strong { color: #e5e7eb; }
.chart-ohlc .up { color: #0ecb81; } .chart-ohlc .down { color: #f6465d; }
.chart-save-state { margin-left: auto; color: #64748b; font-size: .6rem; }
.chart-attribution { color:#64748b; font-size:.58rem; text-decoration:none; white-space:nowrap; }
.chart-attribution:hover { color:#94a3b8; }
.chart-save-state.saved { color: #0ecb81; }
.chart-save-state.error { color: #f59e0b; }
.internal-chart-status::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #0ecb81; box-shadow: 0 0 0 3px rgba(14,203,129,.12);
}

/* Form scroll area */
.trade-form-wrap {
    grid-column: 3; grid-row: 1 / 3; height: var(--bo-panel-height); min-height: 0;
    display: flex; flex-direction: column; overflow: hidden;
    background: #0c1628; border: 1px solid #294467; border-radius: 12px;
    box-shadow: inset 0 0 30px rgba(20,93,180,.08), 0 10px 30px rgba(0,0,0,.18);
}
.trade-form-wrap::-webkit-scrollbar { width: 3px; }
.trade-form-wrap::-webkit-scrollbar-thumb { background: #2b3139; }
#boForm {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .75rem .9rem .9rem;
    display: flex; flex-direction: column; justify-content: space-between; gap: .45rem;
}
.bo-panel-tabs { display:flex; flex:0 0 auto; margin:.7rem .9rem 0; padding:.3rem; border:1px solid rgba(41,68,103,.7); border-radius:8px; background:#091426; }
.bo-panel-tab { flex:1; padding:.48rem; border:0; border-radius:6px; background:transparent; color:#90a2bd; font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; cursor:pointer; }
.bo-panel-tab.active { color:#fff; background:#0c2f65; box-shadow:inset 0 0 12px rgba(22,136,255,.18); }
.bo-panel-view[hidden] { display:none !important; }
.bo-signal-view { flex:1 1 auto; min-height:0; padding:.9rem; overflow-y:auto; }
.bo-signal-card { height:100%; display:flex; flex-direction:column; justify-content:space-between; gap:1rem; padding:1rem; border:1px solid #294467; border-radius:10px; background:#07101e; }
.bo-signal-title { color:#f4f7fb; font-size:1rem; font-weight:800; }
.bo-signal-symbol { color:#7f94b3; font-size:.68rem; margin-top:.2rem; }
.bo-signal-badge { align-self:flex-start; padding:.45rem .75rem; border-radius:5px; background:rgba(139,148,158,.12); color:#8b949e; font-size:.78rem; font-weight:800; text-transform:uppercase; }
.bo-signal-badge.up { background:rgba(14,203,129,.14); color:#0ecb81; }
.bo-signal-badge.down { background:rgba(246,70,93,.12); color:#f6465d; }
.bo-signal-metrics { display:grid; gap:.65rem; }
.bo-signal-line { display:flex; justify-content:space-between; gap:1rem; padding-bottom:.55rem; border-bottom:1px solid rgba(41,68,103,.55); color:#90a2bd; font-size:.76rem; }
.bo-signal-line strong { color:#f4f7fb; text-align:right; }
.bo-signal-note { color:#7185a2; font-size:.68rem; line-height:1.55; }
}
.bo-ticket-header {
    display: flex; align-items: center; gap: .65rem; padding-bottom: .75rem; margin-bottom: .75rem;
    border-bottom: 1px solid rgba(73,112,161,.35);
}
.bo-ticket-identity { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.bo-ticket-quote { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.bo-ticket-price { color: #1688ff; font-size: 1rem; font-weight: 900; line-height: 1.1; }
.bo-ticket-change { color: #7f94b3; font-size: .62rem; font-weight: 700; margin-top: .2rem; }
.bo-ticket-change.up { color: #0ecb81; }
.bo-ticket-change.dn { color: #f6465d; }
.bo-ticket-mark {
    width: 35px; height: 35px; flex: 0 0 35px; border: 2px solid #1688ff; border-radius: 50%;
    display: grid; place-items: center; color: #fff; background: #10284c;
    box-shadow: 0 0 16px rgba(22,136,255,.26); font-size: .9rem;
}
.bo-ticket-title { color: #f4f7fb; font-size: .92rem; font-weight: 900; letter-spacing: .01em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-ticket-title span { color: #1688ff; }
.bo-ticket-subtitle { color: #7f94b3; font-size: .62rem; margin-top: .27rem; white-space: nowrap; }
.bo-ticket-secure { color: #7185a2; font-size: .62rem; text-align: center; margin-top: .55rem; }
.bo-ticket-secure i { color: #6384b0; margin-right: .3rem; }

/* Direction */
.dir-row {
    display: flex !important; width: 100%; align-items: stretch; gap: .45rem; margin-bottom: .85rem;
    padding: .35rem; border: 1px solid rgba(41,68,103,.7); border-radius: 10px; background: #091426;
}
.dir-btn {
    flex: 1 1 0; width: 0; min-width: 0;
    display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto;
    align-items: center; justify-content: center; column-gap: .48rem; row-gap: .05rem;
    min-height: 66px; padding: .48rem .42rem; border-radius: 8px;
    border: 2px solid transparent; cursor: pointer; transition: all .18s; font-family: inherit;
    background: rgba(255,255,255,.03);
    opacity: .48;
}
.dir-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.14rem; }
.dir-btn.call { border-color: rgba(14,203,129,.3); color: #0ecb81; }
.dir-btn.put  { border-color: rgba(246,70,93,.3);  color: #f6465d; }
/* Selected — unmistakably highlighted */
.dir-btn.call.sel {
    background: #103d35;
    border-color: #0ecb81;
    box-shadow: 0 0 0 1px rgba(14,203,129,.22), inset 0 0 18px rgba(14,203,129,.18), 0 0 14px rgba(14,203,129,.16);
    opacity: 1;
}
.dir-btn.put.sel {
    background: #371b2b;
    border-color: #f6465d;
    box-shadow: 0 0 0 1px rgba(246,70,93,.2), inset 0 0 18px rgba(246,70,93,.14), 0 0 14px rgba(246,70,93,.12);
    opacity: 1;
}
.dir-btn.call:hover { opacity: .75; }
.dir-btn.put:hover  { opacity: .75; }
.dir-btn.call.sel:hover, .dir-btn.put.sel:hover { opacity: 1; }
.dir-btn i   { font-size: 1.15rem; }
.dir-btn b   { font-size: .8rem; font-weight: 900; letter-spacing: .04em; text-align: left; }
.dir-btn small { display: block; font-size: .56rem; color: #8798b2; text-align: left; white-space: nowrap; }
.dir-btn .direction-price { grid-column: 1 / -1; font-size:.78rem; font-weight:800; color:#f4f7fb; text-align:center; }

/* ─── Toast notification ─── */
.bo-toast {
    position: fixed; top: 80px; right: 20px; z-index: 99999;
    padding: .8rem 1.25rem 1rem; border-radius: 10px;
    font-size: .88rem; font-weight: 600;
    min-width: 280px; max-width: 400px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    display: flex; align-items: flex-start; gap: .7rem;
    animation: boSlideIn .22s ease;
    line-height: 1.45;
}
.bo-toast.success { background: #0b2218; border: 1px solid #0ecb81; color: #0ecb81; }
.bo-toast.error   { background: #1f0a0d; border: 1px solid #f6465d; color: #f6465d; }
.bo-toast-icon { font-size: 1.1rem; margin-top: .05rem; flex-shrink: 0; }
.bo-toast-close {
    margin-left: auto; background: none; border: none; color: inherit;
    font-size: 1rem; cursor: pointer; opacity: .7; flex-shrink: 0; padding: 0;
}
@keyframes boSlideIn {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Fields */
.row2 { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: .55rem; margin-bottom: .85rem; }
.bo-field { margin-bottom: 0; }
.bo-lbl { display: flex; align-items: center; gap: .3rem; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #90a2bd; margin-bottom: .38rem; }
.bo-lbl .bo-info { color: #6384b0; font-size: .68rem; }
.bo-control-wrap { position: relative; }
.bo-control-icon {
    position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
    color: #35d795; background: #0b4135; font-size: .72rem; pointer-events: none;
}
.bo-currency-flag {
    position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 25px; height: 25px; border-radius: 50%; object-fit: cover; pointer-events: none;
}
.bo-input {
    width: 100%; background: #07101e; border: 1px solid #294467;
    color: #f4f7fb; border-radius: 8px; padding: .62rem .45rem .62rem 2.35rem;
    font-size: 1rem; outline: none; transition: border-color .15s, box-shadow .15s; font-family: inherit;
}
.bo-input:focus { border-color: #1688ff; box-shadow: 0 0 0 2px rgba(22,136,255,.16); }
.bo-select {
    width: 100%; background: #07101e; border: 1px solid #294467;
    color: #f4f7fb; border-radius: 8px; padding: .65rem .35rem .65rem 2.35rem;
    font-size: .82rem; outline: none; cursor: pointer; font-family: inherit;
}
.bo-select option { background: #131722; }

/* Expiry tabs */
.exp-tabs {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.35rem; width:100%; margin-bottom:.9rem; padding:.08rem 0;
    overflow-x:hidden;
}
.exp-tab {
    width:100%; min-width:0; min-height:38px; padding:.35rem .25rem; border-radius:6px;
    border: 1px solid #294467; background: #0b1b31;
    color: #90a2bd; cursor: pointer; transition: all .14s; font-family: inherit;
    display:flex; align-items:center; justify-content:center; gap:.2rem;
}
.exp-tab i { display:none; }
.exp-tab .exp-value { color:#f4f7fb; font-size:.78rem; line-height:1; font-weight:700; }
.exp-tab .exp-unit { display:none; }
.exp-tab:hover { border-color: #1688ff; color: #eaecef; }
.exp-tab.sel   { background: #0c2f65; border-color: #1688ff; color: #fff; box-shadow: inset 0 0 16px rgba(22,136,255,.2), 0 0 10px rgba(22,136,255,.14); }
.expiry-preview { border:1px solid #294467; border-radius:8px; padding:.55rem .7rem; margin:-.15rem 0 .85rem; background:#07101e; font-size:.72rem; }
.expiry-preview-row { display:flex; justify-content:space-between; gap:.75rem; color:#90a2bd; line-height:1.55; }
.expiry-preview-row strong { color:#f4f7fb; }

/* Payout preview */
.pv-row { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-bottom: .85rem; }
.pv-box { position: relative; padding: .62rem .35rem; min-height: 79px; border-radius: 8px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.pv-box.w { background: #0b302a; border: 1px solid #126c51; }
.pv-box.l { background: #301520; border: 1px solid #7b2637; }
.pv-icon { position: absolute; top: .45rem; left: .5rem; font-size: .62rem; }
.pv-box.w .pv-icon { color: #35d795; } .pv-box.l .pv-icon { color: #ff546d; }
.pv-lbl { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .15rem; }
.pv-box.w .pv-lbl { color: #0ecb81; }
.pv-box.l .pv-lbl { color: #f6465d; }
.pv-amt { font-size: 1.12rem; font-weight: 900; }
.pv-box.w .pv-amt { color: #0ecb81; }
.pv-box.l .pv-amt { color: #f6465d; }
.pv-sub { font-size: .62rem; color: #5e6673; margin-top: 1px; }
.payout-panel { border:1px solid #294467; border-radius:8px; padding:.58rem .7rem; margin-bottom:.85rem; background:#07101e; }
.payout-line { display:flex; justify-content:space-between; gap:.75rem; color:#aab7c9; font-size:.76rem; line-height:1.65; }
.payout-line strong { color:#f4f7fb; }
.payout-line .positive { color:#0ecb81; }
.payout-line .negative { color:#f6465d; }

/* Place button */
.btn-place {
    display: block; width: 100%; padding: .72rem;
    background: linear-gradient(135deg,#1a6ef7,#3b9af6);
    color: #fff; border: 1px solid #32a1ff; border-radius: 8px;
    font-weight: 700; font-size: .92rem; cursor: pointer;
    transition: filter .15s, transform .12s; font-family: inherit; box-shadow: 0 0 14px rgba(22,136,255,.22);
}
.btn-place:disabled { opacity: .45; cursor: not-allowed; }
.btn-place:not(:disabled):hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ─── Open positions ─── */
.pos-section {
    grid-column: 1 / -1; grid-row: 3; margin-top: 1rem;
    background: var(--bg-card, #131722); border: 1px solid var(--border, #2b3139);
    border-radius: 8px; padding: .9rem;
}
.sec-hdr {
    font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    color: #5e6673; margin-bottom: .55rem; display: flex; align-items: center; gap: .4rem;
}
.sec-cnt { background: #3b82f6; color: #fff; border-radius: 99px; font-size: .6rem; padding: .1rem .4rem; }

.opts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: .55rem; }
.opt-card {
    background: #131722; border: 1px solid #2b3139; border-radius: 8px;
    padding: .75rem .9rem; border-left: 3px solid transparent;
}
.opt-card.call { border-left-color: #0ecb81; }
.opt-card.put  { border-left-color: #f6465d; }
.opt-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45rem; }
.od-badge { font-size: .6rem; font-weight: 800; padding: .15rem .45rem; border-radius: 4px; letter-spacing: .05em; }
.od-badge.call { background: rgba(14,203,129,.14); color: #0ecb81; }
.od-badge.put  { background: rgba(246,70,93,.1);   color: #f6465d; }
.od-sym   { font-size: .82rem; font-weight: 700; color: #eaecef; margin-left: .4rem; }
.od-timer { font-size: .7rem; color: #848e9c; font-variant-numeric: tabular-nums; }
.od-timer.finalising { color: #f0b90b; font-weight: 700; }
.od-timer.delayed { color: #f59e0b; max-width: 190px; text-align: right; line-height: 1.25; }
.opt-card.result-won { border-color: rgba(14,203,129,.7); background: rgba(14,203,129,.08); }
.opt-card.result-lost { border-color: rgba(246,70,93,.7); background: rgba(246,70,93,.07); }
.od-live { display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; padding-top:.45rem; border-top:1px solid #2b3139; font-size:.75rem; }
.od-live-price { color:#eaecef; font-weight:700; font-variant-numeric:tabular-nums; }
.od-live-badge { font-size:.62rem; font-weight:800; padding:.12rem .42rem; border-radius:4px; letter-spacing:.04em; }
.od-live-badge.itm  { background:rgba(14,203,129,.14); color:#0ecb81; }
.od-live-badge.otm  { background:rgba(246,70,93,.1);   color:#f6465d; }
.od-live-badge.even { background:rgba(139,148,158,.12); color:#8b949e; }
.kv3 { display: grid; grid-template-columns: repeat(3,1fr); gap: .35rem; }
.kv label { font-size: .6rem; color: #5e6673; display: block; margin-bottom: 1px; }
.kv span  { font-size: .78rem; font-weight: 600; color: #eaecef; }
.kv span.g { color: #0ecb81; }

/* ─── History table ─── */
.hist-section {
    grid-column: 1 / -1; grid-row: 4; margin-top: 1rem;
    background: var(--bg-card, #131722); border: 1px solid var(--border, #2b3139);
    border-radius: 8px; padding: .9rem;
}
.dir-pill { font-size: .62rem; font-weight: 800; padding: .12rem .42rem; border-radius: 4px; }
.dir-pill.call { background: rgba(14,203,129,.12); color: #0ecb81; }
.dir-pill.put  { background: rgba(246,70,93,.1);   color: #f6465d; }
.st-pill { font-size: .62rem; font-weight: 700; padding: .12rem .42rem; border-radius: 4px; }
.st-pill.open              { background: rgba(59,130,246,.12);  color: #3b82f6; }
.st-pill.won               { background: rgba(14,203,129,.12);  color: #0ecb81; }
.st-pill.lost              { background: rgba(246,70,93,.1);    color: #f6465d; }
.st-pill.push              { background: rgba(139,148,158,.12); color: #8b949e; }
.st-pill.cancelled         { background: rgba(132,142,156,.1);  color: #848e9c; }
.st-pill.manually_settled  { background: rgba(245,158,11,.12);  color: #f59e0b; }

/* ─── Live result dialog ─── */
.bo-result-backdrop {
    position: fixed; inset: 0; z-index: 1090; display: grid; place-items: center;
    padding: 1rem; background: rgba(3,7,18,.78); backdrop-filter: blur(4px);
}
.bo-result-backdrop[hidden] { display: none; }
.bo-result-dialog {
    width: min(460px,100%); border-radius: 18px; border: 1px solid #2b3139;
    background: #131722; color: #eaecef; padding: 1.5rem; text-align: center;
    box-shadow: 0 28px 80px rgba(0,0,0,.55); position: relative;
}
.bo-result-dialog.won  { border-color: rgba(14,203,129,.8);   box-shadow: 0 28px 80px rgba(14,203,129,.16); }
.bo-result-dialog.lost { border-color: rgba(246,70,93,.8);   box-shadow: 0 28px 80px rgba(246,70,93,.14); }
.bo-result-dialog.push { border-color: rgba(139,148,158,.6); box-shadow: 0 28px 80px rgba(139,148,158,.12); }
.bo-result-close {
    position: absolute; top: .7rem; right: .8rem; border: 0; background: transparent;
    color: #848e9c; font-size: 1.5rem; line-height: 1; padding: .35rem; cursor: pointer;
}
.bo-result-icon {
    width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
    margin: 0 auto .85rem; font-size: 1.75rem;
}
.won .bo-result-icon       { color: #0ecb81; background: rgba(14,203,129,.14); }
.lost .bo-result-icon      { color: #f6465d; background: rgba(246,70,93,.13); }
.push .bo-result-icon      { color: #8b949e; background: rgba(139,148,158,.14); }
.cancelled .bo-result-icon { color: #f59e0b; background: rgba(245,158,11,.13); }
.bo-result-dialog h2 { margin: 0; font-size: 1.65rem; font-weight: 800; }
.bo-result-sub { color: #848e9c; margin: .35rem 0 1rem; }
.bo-result-amount { font-size: 1.75rem; font-weight: 800; margin-bottom: 1rem; }
.won .bo-result-amount       { color: #0ecb81; }
.lost .bo-result-amount      { color: #f6465d; }
.push .bo-result-amount      { color: #8b949e; }
.cancelled .bo-result-amount { color: #f59e0b; }
.bo-result-details { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; text-align: left; margin-bottom: 1.1rem; }
.bo-result-detail { border: 1px solid #2b3139; border-radius: 9px; padding: .65rem .75rem; }
.bo-result-detail label { display: block; color: #5e6673; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }
.bo-result-detail strong { display: block; margin-top: .2rem; font-size: .9rem; }
.bo-result-done { width: 100%; border: 0; border-radius: 9px; padding: .75rem; color: #fff; font-weight: 800; cursor: pointer; }
.won .bo-result-done       { background: #0a9f68; }
.lost .bo-result-done      { background: #d9364e; }
.push .bo-result-done      { background: #4a5568; }
.cancelled .bo-result-done { background: #b77909; }

/* ─── Flash alerts ─── */
.bo-alert { position: fixed; top: 76px; right: 20px; z-index: 1080; border-radius: 8px; padding: .5rem .85rem; font-size: .82rem; }

/* ─── Place button loading state ─── */
.btn-place.loading { opacity: .65; }

/* ─── Responsive ─── */
@media (max-width: 1200px) {
    .bo-shell { grid-template-columns: minmax(240px,280px) minmax(0,1fr); grid-template-rows: 58px 632px auto auto auto; }
    .trade-form-wrap { grid-column: 1 / -1; grid-row: 3; height: auto; margin-top: 1rem; }
    #boForm { height: auto; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
    #boForm .bo-ticket-header, #boForm .dir-row, #boForm .btn-place, #boForm .bo-ticket-secure { grid-column: 1 / -1; }
    #boForm .row2, #boForm > .bo-field, #boForm .pv-row { margin-bottom: 0 !important; }
    .pos-section { grid-row: 4; }
    .hist-section { grid-row: 5; }
}
@media (max-width: 800px) {
    .bo-shell { display: grid; grid-template-columns: 1fr; grid-template-rows: 330px 58px 520px auto auto auto; }
    .asset-col { grid-column: 1; grid-row: 1; width: 100%; height: 330px; }
    .trade-hdr { grid-column: 1; grid-row: 2; }
    .chart-wrap { grid-column: 1; grid-row: 3; height: 520px; }
    .chart-indicator-menu { left: .5rem; right: .5rem; width: auto; }
    .trade-form-wrap { grid-column: 1; grid-row: 4; }
    #boForm { display: block; }
    #boForm .row2, #boForm > .bo-field, #boForm .pv-row { margin-bottom: .9rem !important; }
    .pos-section { grid-row: 5; }
    .hist-section { grid-row: 6; }
}
@endsection

@section('content')

@php
/* ── Category meta ── */
$cats = [
    'forex'       => ['label'=>'Forex',       'icon'=>'fa-arrow-right-arrow-left', 'cls'=>'forex',       'desc'=>'Currency pairs'],
    'stocks'      => ['label'=>'Stocks',       'icon'=>'fa-chart-line',             'cls'=>'stocks',      'desc'=>'Global equities'],
    'crypto'      => ['label'=>'Crypto',       'icon'=>'fa-bitcoin-sign',           'cls'=>'crypto',      'desc'=>'Cryptocurrencies'],
    'commodities' => ['label'=>'Commodities',  'icon'=>'fa-coins',                  'cls'=>'commodities', 'desc'=>'Metals, energy & indices'],
];

/* ── Currency → flag ISO code ── */
$flagCC = [
    'USD'=>'us','EUR'=>'eu','GBP'=>'gb','JPY'=>'jp','CHF'=>'ch',
    'AUD'=>'au','CAD'=>'ca','NZD'=>'nz','SGD'=>'sg','HKD'=>'hk',
    'NOK'=>'no','SEK'=>'se','DKK'=>'dk','PLN'=>'pl','CZK'=>'cz',
];

/* ── Crypto symbol → icon slug ── */
$cryptoSlug = [
    'Bitcoin'=>'btc','Ethereum'=>'eth','BNB'=>'bnb','Solana'=>'sol','XRP'=>'xrp',
    'Cardano'=>'ada','Dogecoin'=>'doge','TRON'=>'trx','Toncoin'=>'ton',
    'Polkadot'=>'dot','Polygon'=>'matic','Litecoin'=>'ltc','Chainlink'=>'link',
    'Bitcoin Cash'=>'bch','Avalanche'=>'avax','Cosmos'=>'atom','Stellar'=>'xlm',
    'Uniswap'=>'uni','Ethereum Classic'=>'etc','Aptos'=>'apt',
];

/* ── Commodity icon ── */
$commodityIcon = [
    'Gold'=>'fa-gem','Silver'=>'fa-gem','Platinum'=>'fa-gem','Palladium'=>'fa-gem',
    'US Oil (WTI)'=>'fa-oil-well','UK Oil (Brent)'=>'fa-oil-well','Natural Gas'=>'fa-fire',
    'Copper'=>'fa-plug','S&P 500'=>'fa-chart-bar','NASDAQ 100'=>'fa-chart-bar',
    'Dow Jones'=>'fa-chart-bar','VIX'=>'fa-wave-square','US Dollar Index'=>'fa-dollar-sign',
];

/* ── Group symbols by category ── */
$grouped = $symbols->groupBy('category');
$firstCat = $selectedSymbol?->category ?? $grouped->keys()->first() ?? 'forex';
@endphp

<div class="bo-shell">

    {{-- ══ COLUMN 1: Binary Options asset dropdown + list ══ --}}
    <div class="asset-col">
        <div class="asset-filter-header">
            <div class="asset-filter" id="binaryAssetFilter">
                <button type="button" class="asset-filter-toggle" id="binaryAssetFilterToggle"
                        aria-haspopup="listbox" aria-expanded="false" aria-controls="binaryAssetFilterMenu">
                    <i class="fas {{ $cats[$firstCat]['icon'] ?? 'fa-bolt' }}" id="binaryAssetFilterIcon" style="color:#3b82f6"></i>
                    <span id="binaryAssetFilterLabel">Binary Options · {{ $cats[$firstCat]['label'] ?? 'All Assets' }}</span>
                    <i class="fas fa-chevron-down filter-chevron" aria-hidden="true"></i>
                </button>
                <div class="asset-filter-menu" id="binaryAssetFilterMenu" role="listbox" aria-label="Binary Options asset category" hidden>
                    @foreach($cats as $catKey => $catMeta)
                    @php $catSyms = $grouped->get($catKey, collect()); @endphp
                    @if($catSyms->count())
                    <button type="button" class="cat-item {{ $catKey === $firstCat ? 'active' : '' }}"
                            role="option" aria-selected="{{ $catKey === $firstCat ? 'true' : 'false' }}"
                            data-cat="{{ $catKey }}" data-label="{{ $catMeta['label'] }}" data-icon="{{ $catMeta['icon'] }}">
                        <div class="cat-icon-wrap {{ $catMeta['cls'] }}"><i class="fas {{ $catMeta['icon'] }}"></i></div>
                        <div><div class="cat-iname">{{ $catMeta['label'] }}</div><div class="cat-idesc">{{ $catMeta['desc'] }}</div></div>
                        <span class="cat-count">{{ $catSyms->count() }}</span>
                    </button>
                    @endif
                    @endforeach
                </div>
            </div>
        </div>
        <div class="asset-search-bar">
            <i class="fas fa-magnifying-glass"></i>
            <input type="text" id="assetSearch" placeholder="Search by name or ticker…" autocomplete="off">
        </div>
        <div class="asset-list-hdr">
            <span>Asset</span>
            <span>Profit</span>
            <span>Payout</span>
        </div>
        <div class="asset-scroll" id="assetScroll">
            @foreach($symbols as $sym)
            @php
                $p   = (float)($sym->latestPrice?->price ?? 0);
                $dec = $p < 10 ? 5 : ($p < 100 ? 3 : 2);
                $st  = $settings->get($sym->id) ?? $defaultSetting;
                $pct = $st->payout_pct;
                $cat = $sym->category;

                /* Build icon HTML */
                if ($cat === 'forex' && str_contains($sym->name, '/')) {
                    [$base, $quote] = explode('/', $sym->name, 2);
                    $cc1 = $flagCC[$base]  ?? null;
                    $cc2 = $flagCC[$quote] ?? null;
                    $iconHtml = '<div class="ar-icon flags">'
                        . '<div class="f1">'.($cc1 ? '<img src="https://flagcdn.com/w40/'.$cc1.'.webp" alt="'.$base.'">' : '<span>'.substr($base,0,1).'</span>').'</div>'
                        . '<div class="f2">'.($cc2 ? '<img src="https://flagcdn.com/w40/'.$cc2.'.webp" alt="'.$quote.'">' : '<span>'.substr($quote,0,1).'</span>').'</div>'
                        . '</div>';
                } elseif ($cat === 'crypto' && isset($cryptoSlug[$sym->name])) {
                    $slug = $cryptoSlug[$sym->name];
                    $iconHtml = '<div class="ar-icon"><img src="https://cdn.jsdelivr.net/npm/cryptocurrency-icons@0.18.1/svg/color/'.$slug.'.svg" alt="'.$sym->name.'" onerror="this.style.display=\'none\'"></div>';
                } elseif ($cat === 'stocks') {
                    $ticker = preg_replace('/.*:/', '', $sym->tv_symbol ?? '');
                    [$stockIcon, $stockColor] = SymbolPresentation::baseIconPair($sym);
                    if ($stockIcon && !str_starts_with($stockIcon, 'img:')) {
                        $iconHtml = '<div class="ar-icon stock-icon" style="background:' . $stockColor . '22;color:' . $stockColor . '"><i class="' . e($stockIcon) . '"></i></div>';
                    } elseif (str_starts_with($stockIcon, 'img:')) {
                        $iconUrl = substr($stockIcon, 4);
                        $iconHtml = '<div class="ar-icon stock-icon" style="background:' . $stockColor . '22"><img src="' . e($iconUrl) . '" alt="' . e($sym->name) . '" onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'inline\'"><span class="ar-icon-fallback">' . e(substr($ticker, 0, 3)) . '</span></div>';
                    } else {
                        $iconHtml = '<div class="ar-icon" style="background:linear-gradient(135deg,#1a6ef7,#1553c4);color:#fff;font-size:.7rem;font-weight:800;">' . e(substr($ticker,0,3)) . '</div>';
                    }
                } else {
                    $faIcon = $commodityIcon[$sym->name] ?? 'fa-chart-line';
                    $iconHtml = '<div class="ar-icon" style="background:rgba(139,92,246,.15);color:#8b5cf6;font-size:.78rem"><i class="fas '.$faIcon.'"></i></div>';
                }
            @endphp
            <div class="asset-row {{ $selectedSymbol && $selectedSymbol->id === $sym->id ? 'active' : '' }}"
                 data-id="{{ $sym->id }}"
                 data-name="{{ $sym->name }}"
                 data-tv="{{ $sym->tv_symbol ?? '' }}"
                 data-price="{{ $p }}"
                 data-payout="{{ $pct }}"
                 data-cat="{{ $cat }}"
                 data-expiries="{{ json_encode($st->available_expiries) }}">
                <div class="ar-info">
                    {!! $iconHtml !!}
                    <div class="ar-text">
                        <div class="ar-name">{{ $sym->name }}</div>
                        <div class="ar-price">{{ $p > 0 ? number_format($p, $dec) : '—' }}</div>
                    </div>
                </div>
                <div class="ar-pct">{{ $pct }}%</div>
                <div class="ar-pct">{{ in_array('300', $st->available_expiries) ? $pct.'%' : '—' }}</div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- ══ Dashboard flow: center chart + right CALL/PUT panel ══ --}}
    <div class="trade-col">

        {{-- Flash messages --}}
        @if(session('success'))
            <div class="bo-alert alert alert-success alert-dismissible fade show py-2">
                {{ session('success') }}
                <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @if(session('error'))
            <div class="bo-alert alert alert-danger alert-dismissible fade show py-2">
                {{ session('error') }}
                <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
            </div>
        @endif

        {{-- Trade header --}}
        <div class="trade-hdr">
            <div class="th-left">
                <div class="th-asset" id="th-name">{{ $selectedSymbol?->name ?? 'Select an asset' }}</div>
                <div class="th-sub" id="th-sub">{{ $selectedSymbol?->tv_symbol ?? '' }}</div>
            </div>
            <div>
                <div class="th-price-big" id="th-price">
                    @if($selectedSymbol?->latestPrice)
                        @php $sp = (float)$selectedSymbol->latestPrice->price; @endphp
                        {{ \App\Support\MarketPriceFormatter::format($sp) }}
                    @else —
                    @endif
                </div>
                @php $sc = (float)($selectedSymbol?->latestPrice?->change_24h_pct ?? 0); @endphp
                <div class="th-chg {{ $sc >= 0 ? 'up' : 'dn' }}" id="th-chg">
                    {{ $sc >= 0 ? '+' : '' }}{{ number_format($sc, 2) }}%
                </div>
            </div>
        </div>

        {{-- Shared dashboard chart — uses the same component and Twelve Data quote stream --}}
        <div class="chart-wrap" id="chartWrap">
            <div id="binary-main-chart" style="height:100%;min-height:0"></div>
        </div>

        {{-- Trade form --}}
        <div class="trade-form-wrap">
            <div class="bo-panel-tabs" role="tablist" aria-label="Binary option panel">
                <button type="button" class="bo-panel-tab active" id="binaryTradeTab" role="tab" aria-selected="true" aria-controls="boForm">Trade</button>
                <button type="button" class="bo-panel-tab" id="binarySignalsTab" role="tab" aria-selected="false" aria-controls="binarySignalsView">Signals</button>
            </div>
            <form method="POST" action="{{ route('portal.binary.place') }}" id="boForm" class="bo-panel-view" role="tabpanel" aria-labelledby="binaryTradeTab">
                @csrf
                <input type="hidden" name="symbol_id"  id="formSymbolId"  value="{{ $selectedSymbol?->id ?? '' }}">
                <input type="hidden" name="direction"  id="formDirection" value="call">
                <input type="hidden" name="expiry_key" id="formExpiryKey" value="">

                <div class="bo-ticket-header">
                    <div class="bo-ticket-identity">
                        <div class="bo-ticket-mark" id="boTicketMark" aria-hidden="true">{{ strtoupper(substr($selectedSymbol?->name ?? '—', 0, 3)) }}</div>
                        <div>
                            <div class="bo-ticket-title" id="boTicketName">{{ $selectedSymbol?->name ?? 'Select an asset' }}</div>
                            <div class="bo-ticket-subtitle" id="boTicketSymbol">{{ $selectedSymbol?->tv_symbol ?? '' }}</div>
                        </div>
                    </div>
                    <div class="bo-ticket-quote">
                        <div class="bo-ticket-price" id="boTicketPrice">
                            @if($selectedSymbol?->latestPrice)
                                {{ \App\Support\MarketPriceFormatter::format($sp) }}
                            @else — @endif
                        </div>
                        <div class="bo-ticket-change {{ $sc >= 0 ? 'up' : 'dn' }}" id="boTicketChange">{{ $sc >= 0 ? '+' : '' }}{{ number_format($sc, 2) }}%</div>
                    </div>
                </div>

                {{-- Direction --}}
                <div class="dir-row">
                    <button type="button" class="dir-btn call sel" id="btnCall" onclick="selectDir('call')">
                        <i class="fas fa-arrow-trend-up"></i>
                        <b>HIGHER</b>
                        <small>Price will finish above</small>
                        <span class="direction-price" id="dirCallPrice">—</span>
                    </button>
                    <button type="button" class="dir-btn put" id="btnPut" onclick="selectDir('put')">
                        <i class="fas fa-arrow-trend-down"></i>
                        <b>LOWER</b>
                        <small>Price will finish below</small>
                        <span class="direction-price" id="dirPutPrice">—</span>
                    </button>
                </div>

                {{-- Stake + Currency --}}
                <div class="row2">
                    <div class="bo-field">
                        <label class="bo-lbl" for="formStake">Investment Amount <i class="fas fa-circle-info bo-info" aria-hidden="true"></i></label>
                        <div class="bo-control-wrap">
                            <span class="bo-control-icon" aria-hidden="true"><i class="fas fa-dollar-sign"></i></span>
                            <input type="number" name="stake" id="formStake" class="bo-input"
                                   min="1" step="any" value="{{ old('stake', 100) }}" placeholder="100"
                                   oninput="updatePayout()">
                        </div>
                    </div>
                    <div class="bo-field">
                        <label class="bo-lbl" for="walletCurrency">Account Currency <i class="fas fa-circle-info bo-info" aria-hidden="true"></i></label>
                        <div class="bo-control-wrap">
                        <img class="bo-currency-flag" id="walletFlag" src="https://flagcdn.com/w40/us.webp" alt="">
                        <input type="hidden" name="currency" id="walletCurrency" value="USD">
                        <div class="bo-select">USD ({{ number_format((float) ($wallets->firstWhere('currency', 'USD')?->balance ?? 0) + $creditBalance, 2) }})</div>
                        </div>
                    </div>
                </div>

                {{-- Expiry tabs --}}
                <div class="bo-field">
                    <label class="bo-lbl">Expiry Time <i class="fas fa-circle-info bo-info" aria-hidden="true"></i></label>
                    <div class="exp-tabs" id="expiryTabs"></div>
                    <div class="expiry-preview">
                        <div class="expiry-preview-row"><span>Expiry at</span><strong id="expiryAt">—</strong></div>
                        <div class="expiry-preview-row"><span>Time remaining</span><strong id="expiryRemaining">—</strong></div>
                    </div>
                </div>

                {{-- Payout preview --}}
                <div class="payout-panel">
                    <div class="payout-line"><span>Payout</span><strong class="positive" id="pvPct">—</strong></div>
                    <div class="payout-line"><span>Profit if correct</span><strong class="positive" id="pvProfit">—</strong></div>
                    <div class="payout-line"><span>Total return</span><strong id="pvReturn">—</strong></div>
                    <div class="payout-line"><span>Maximum loss</span><strong class="negative" id="pvLoss">—</strong></div>
                </div>

                <button type="submit" class="btn-place" id="placeBtn">
                    <i class="fas fa-bolt me-1"></i> Place Binary Option
                </button>
                <div class="bo-ticket-secure"><i class="fas fa-shield-halved" aria-hidden="true"></i>Encrypted and secure</div>
            </form>
            <section class="bo-panel-view bo-signal-view" id="binarySignalsView" role="tabpanel" aria-labelledby="binarySignalsTab" hidden>
                <div class="bo-signal-card">
                    <div>
                        <div class="bo-signal-title" id="binarySignalName">{{ $selectedSymbol?->name ?? 'Select an asset' }}</div>
                        <div class="bo-signal-symbol" id="binarySignalSymbol">{{ $selectedSymbol?->tv_symbol ?? '' }}</div>
                    </div>
                    <span class="bo-signal-badge" id="binarySignalBadge">Waiting for price</span>
                    <div class="bo-signal-metrics">
                        <div class="bo-signal-line"><span>Current price</span><strong id="binarySignalPrice">—</strong></div>
                        <div class="bo-signal-line"><span>24h movement</span><strong id="binarySignalChange">—</strong></div>
                        <div class="bo-signal-line"><span>Updated</span><strong id="binarySignalTime">—</strong></div>
                    </div>
                    <div class="bo-signal-note">The signal reflects the selected instrument’s latest Twelve Data movement. It is market information, not a guaranteed outcome.</div>
                </div>
            </section>
        </div>

            {{-- Open Positions --}}
            <div class="pos-section" id="openPositionsSection" @if(!$openOptions->count()) hidden @endif>
                <div class="sec-hdr">
                    <i class="fas fa-clock"></i> Open Positions
                    <span class="sec-cnt" id="openPositionsCount">{{ $openOptions->count() }}</span>
                </div>
                <div class="small text-muted mb-2">Binary options cannot be closed before expiry. The position settles automatically at the displayed expiry time.</div>
                <div class="opts-grid" id="openOptionsGrid">
                    @foreach($openOptions as $opt)
                    @php $od = (int)($opt->strike_price < 10 ? 5 : 2); @endphp
                    <div class="opt-card {{ $opt->direction }}"
                         data-option-id="{{ $opt->id }}"
                         data-strike="{{ $opt->strike_price }}"
                         data-direction="{{ $opt->direction }}"
                         data-symbol-id="{{ $opt->symbol_id }}">
                        <div class="opt-top">
                            <div>
                                <span class="od-badge {{ $opt->direction }}">{{ strtoupper($opt->direction) }}</span>
                                <span class="od-sym">{{ $opt->symbol->name }}</span>
                            </div>
                            <span class="od-timer" data-exp="{{ $opt->expires_at->toISOString() }}" data-id="{{ $opt->id }}">—</span>
                        </div>
                        <div class="kv3">
                            <div class="kv"><label>Stake</label><span>{{ $opt->currency }} {{ number_format($opt->stake,2) }}</span></div>
                            <div class="kv"><label>Strike</label><span>{{ number_format($opt->strike_price,$od) }}</span></div>
                            <div class="kv"><label>Potential</label><span class="g">{{ $opt->currency }} {{ number_format($opt->potential_return,2) }}</span></div>
                        </div>
                        <div class="od-live">
                            <span class="od-live-price" id="live-price-{{ $opt->id }}">—</span>
                            <span class="od-live-badge even" id="live-badge-{{ $opt->id }}">—</span>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Trade History --}}
            <div class="hist-section">
                <div class="sec-hdr"><i class="fas fa-history"></i> Trade History</div>
                <div class="table-responsive" style="border-radius:8px;overflow:hidden;border:1px solid #2b3139">
                    <table class="table table-dark table-hover table-sm align-middle mb-0">
                        <thead style="background:#131722">
                            <tr style="font-size:.62rem;color:#5e6673;text-transform:uppercase;letter-spacing:.06em">
                                <th>Asset</th><th>Dir</th><th>Stake</th><th>Strike</th>
                                <th>Close</th><th>P&amp;L</th><th>Result</th><th>Date</th>
                            </tr>
                        </thead>
                        <tbody id="binaryHistoryBody">
                            @forelse($history as $opt)
                            @php
                                $hd = (int)($opt->strike_price < 10 ? 5 : 2);
                                $clientResult = $opt->status === 'manually_settled'
                                    ? ((float) $opt->profit > 0 ? 'won' : 'lost')
                                    : $opt->status;
                            @endphp
                            <tr style="font-size:.8rem" data-history-option-id="{{ $opt->id }}">
                                <td style="color:#eaecef;font-weight:600">{{ $opt->symbol->name }}</td>
                                <td><span class="dir-pill {{ $opt->direction }}">{{ strtoupper($opt->direction) }}</span></td>
                                <td style="color:#eaecef">{{ $opt->currency }} {{ number_format($opt->stake,2) }}</td>
                                <td style="color:#848e9c">{{ number_format($opt->strike_price,$hd) }}</td>
                                <td style="color:#848e9c">{{ $opt->close_price ? number_format($opt->close_price,$hd) : '—' }}</td>
                                <td>
                                    @if($clientResult === 'won')
                                        <span style="color:#0ecb81;font-weight:700">+{{ $opt->currency }} {{ number_format($opt->profit??0,2) }}</span>
                                    @elseif($clientResult === 'lost')
                                        <span style="color:#f6465d;font-weight:700">-{{ $opt->currency }} {{ number_format($opt->stake,2) }}</span>
                                    @elseif($clientResult === 'push')
                                        <span style="color:#8b949e;font-weight:700">{{ $opt->currency }} 0.00</span>
                                    @else<span style="color:#5e6673">—</span>
                                    @endif
                                </td>
                                <td><span class="st-pill {{ $clientResult }}">{{ ucfirst($clientResult) }}</span></td>
                                <td style="color:#5e6673;white-space:nowrap">{{ $opt->created_at->format('d M y H:i') }}</td>
                            </tr>
                            @empty
                            <tr class="history-empty"><td colspan="8" class="text-center py-3" style="color:#5e6673">No trade history yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

    </div>{{-- /trade-col --}}
</div>{{-- /bo-shell --}}

<div class="bo-result-backdrop" id="binaryResultBackdrop" hidden>
    <div class="bo-result-dialog" id="binaryResultDialog" role="dialog" aria-modal="true"
         aria-labelledby="binaryResultTitle" aria-describedby="binaryResultSummary" tabindex="-1">
        <button type="button" class="bo-result-close" id="binaryResultClose" aria-label="Close result">&times;</button>
        <div class="bo-result-icon" aria-hidden="true"><i id="binaryResultIcon" class="fas fa-trophy"></i></div>
        <h2 id="binaryResultTitle">Trade result</h2>
        <p class="bo-result-sub" id="binaryResultSummary"></p>
        <div class="bo-result-amount" id="binaryResultAmount"></div>
        <div class="bo-result-details">
            <div class="bo-result-detail"><label>Total payout</label><strong id="binaryResultPayout">—</strong></div>
            <div class="bo-result-detail"><label>Closing price</label><strong id="binaryResultClosePrice">—</strong></div>
            <div class="bo-result-detail"><label>Updated balance</label><strong id="binaryResultBalance">—</strong></div>
            <div class="bo-result-detail"><label>Settled at</label><strong id="binaryResultSettledAt">—</strong></div>
        </div>
        <button type="button" class="bo-result-done" id="binaryResultDone">Close</button>
    </div>
</div>
@endsection

@push('scripts')
{{-- Lightweight chart driven by the authoritative internal price feed --}}
<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>
<script>
(function () {
'use strict';

/* ─────────────────────────────────────
   TOAST NOTIFICATIONS
   ───────────────────────────────────── */
function showToast (type, message) {
    // Remove any existing toast
    document.querySelectorAll('.bo-toast').forEach(t => t.remove());

    const icon = type === 'success' ? 'fa-circle-check' : 'fa-circle-xmark';
    const el = document.createElement('div');
    el.className = 'bo-toast ' + type;
    el.innerHTML =
        '<i class="fas ' + icon + ' bo-toast-icon"></i>' +
        '<span>' + message + '</span>' +
        '<button class="bo-toast-close" aria-label="Close">&times;</button>';
    el.querySelector('.bo-toast-close').addEventListener('click', () => el.remove());
    document.body.appendChild(el);

    // Auto-dismiss after 6s
    setTimeout(() => { if (el.parentNode) el.remove(); }, 6000);
}

const expiryLabels = @json(\App\Models\BinaryOptionSetting::$expiryOptions);

let cur = {
    id:       @json($selectedSymbol?->id ?? null),
    name:     @json($selectedSymbol?->name ?? ''),
    tv:       @json($selectedSymbol?->tv_symbol ?? ''),
    price:    @json((float)($selectedSymbol?->latestPrice?->price ?? 0)),
    payout:   @json((float)($selectedSetting->payout_pct ?? 80)),
    expiries: @json($selectedSetting->available_expiries ?? []),
};

const TICKET_STATE_KEY = 'ast.binary.ticket.v1.' + @json((string) auth('client')->id());
let restoringTicketState = false;

function readTicketState () {
    try {
        const state = JSON.parse(sessionStorage.getItem(TICKET_STATE_KEY) || 'null');
        return state && typeof state === 'object' ? state : null;
    } catch (_) {
        return null;
    }
}

function persistTicketState () {
    if (restoringTicketState) return;
    const stake = Number(document.getElementById('formStake')?.value);
    const state = {
        symbolId: String(cur.id || ''),
        direction: document.getElementById('formDirection')?.value || 'call',
        stake: Number.isFinite(stake) && stake >= 1 ? String(document.getElementById('formStake').value) : '100',
        expiryKey: document.getElementById('formExpiryKey')?.value || '',
    };
    try { sessionStorage.setItem(TICKET_STATE_KEY, JSON.stringify(state)); } catch (_) {}
}

function restoreTicketState () {
    const state = readTicketState();
    restoringTicketState = true;

    if (state?.symbolId) {
        const savedRow = [...document.querySelectorAll('.asset-row')]
            .find(row => String(row.dataset.id) === String(state.symbolId));
        if (savedRow && String(cur.id) !== String(state.symbolId)) selectAsset(savedRow);
        else buildExpiryTabs();
    } else {
        buildExpiryTabs();
    }

    if (state?.direction === 'call' || state?.direction === 'put') {
        selectDir(state.direction);
    }

    const savedStake = Number(state?.stake);
    if (Number.isFinite(savedStake) && savedStake >= 1) {
        document.getElementById('formStake').value = state.stake;
    }

    const expiryButton = [...document.querySelectorAll('#expiryTabs .exp-tab')]
        .find(button => String(button.dataset.key) === String(state?.expiryKey || ''));
    if (expiryButton) expiryButton.click();

    restoringTicketState = false;
    updatePayout();
    persistTicketState();
}

let internalChart = null;
let binaryChartWidget = null;
let internalSeries = null;
let volumeSeries = null;
let indicatorSeries = [];
let chartResizeObserver = null;
let lastChartTime = 0;
let currentCandle = null;
let chartSeriesSymbolId = null;
let chartUsesLiveWindow = true;
let lastChartHistoryReload = 0;
let chartCandles = [];
let chartIntervalSeconds = 900;
let chartInitSequence = 0;
let chartHistorySequence = 0;
let activeDrawingTool = null;
let pendingDrawingPoint = null;
let selectedDrawingId = null;
let drawingUndo = [];
let drawingRedo = [];
const preferenceSaveTimers = new Map();
const preferenceCache = new Map();
const defaultChartPreference = () => ({
    chart_type: 'candles', interval: '15m', range: '1d', indicators: [], drawings: [], pane_sizes: {},
});
let chartPreference = defaultChartPreference();
const ADVANCED_CHART_ENABLED = @json((bool) config('trading.advanced_binary_chart'));

const PREF_SHOW_ROUTE = @json(route('portal.binary.chart-preferences.show', ['symbolId' => '__SYMBOL_ID__']));
const PREF_UPDATE_ROUTE = @json(route('portal.binary.chart-preferences.update', ['symbolId' => '__SYMBOL_ID__']));
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';

function showBinaryPanel (panel) {
    const trade = panel === 'trade';
    document.getElementById('boForm').hidden = !trade;
    document.getElementById('binarySignalsView').hidden = trade;
    document.getElementById('binaryTradeTab').classList.toggle('active', trade);
    document.getElementById('binarySignalsTab').classList.toggle('active', !trade);
    document.getElementById('binaryTradeTab').setAttribute('aria-selected', trade ? 'true' : 'false');
    document.getElementById('binarySignalsTab').setAttribute('aria-selected', trade ? 'false' : 'true');
}

document.getElementById('binaryTradeTab').addEventListener('click', () => showBinaryPanel('trade'));
document.getElementById('binarySignalsTab').addEventListener('click', () => showBinaryPanel('signals'));

function updateBinarySignal (quote) {
    if (!quote || String(quote.id) !== String(cur.id)) return;
    const movement = Number(quote.change_24h_pct);
    const signal = !Number.isFinite(movement) || Math.abs(movement) < 0.05
        ? ['Neutral', ''] : (movement > 0 ? ['Higher momentum', 'up'] : ['Lower momentum', 'down']);
    const badge = document.getElementById('binarySignalBadge');
    badge.textContent = signal[0];
    badge.className = 'bo-signal-badge ' + signal[1];
    document.getElementById('binarySignalPrice').textContent = price(quote.price);
    document.getElementById('binarySignalChange').textContent = Number.isFinite(movement)
        ? (movement >= 0 ? '+' : '') + movement.toFixed(2) + '%' : '—';
    document.getElementById('binarySignalTime').textContent = quote.priced_at
        ? new Date(quote.priced_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '—';
}

function preferenceRoute (template, symbolId = cur.id) {
    return template.replace('__SYMBOL_ID__', encodeURIComponent(String(symbolId)));
}

async function loadChartPreference () {
    const key = String(cur.id || '');
    if (!key) return;
    if (!ADVANCED_CHART_ENABLED) { chartPreference = defaultChartPreference(); applyPreferenceControls(); return; }
    if (preferenceCache.has(key)) {
        chartPreference = structuredClone(preferenceCache.get(key));
        applyPreferenceControls();
        return;
    }

    const localKey = 'ast.binary.chart.unsaved.' + key;
    try {
        const response = await fetch(preferenceRoute(PREF_SHOW_ROUTE), {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            cache: 'no-store', credentials: 'same-origin',
        });
        if (!response.ok) throw new Error('Preference load failed');
        const payload = await response.json();
        chartPreference = { ...defaultChartPreference(), ...(payload.preference || {}) };
        try {
            const unsaved = JSON.parse(localStorage.getItem(localKey) || 'null');
            if (unsaved) chartPreference = { ...chartPreference, ...unsaved };
        } catch (_) {}
    } catch (_) {
        try {
            chartPreference = { ...defaultChartPreference(), ...(JSON.parse(localStorage.getItem(localKey) || 'null') || {}) };
        } catch (_) { chartPreference = defaultChartPreference(); }
    }
    preferenceCache.set(key, structuredClone(chartPreference));
    drawingUndo = [];
    drawingRedo = [];
    applyPreferenceControls();
}

function applyPreferenceControls () {
    document.getElementById('chartRange').value = chartPreference.range;
    document.getElementById('chartType').value = chartPreference.chart_type;
    document.querySelectorAll('[data-chart-interval]').forEach(button => {
        button.classList.toggle('active', button.dataset.chartInterval === chartPreference.interval);
    });
    const enabled = new Map((chartPreference.indicators || []).map(item => [item.type, item]));
    document.querySelectorAll('[data-indicator]').forEach(input => {
        input.checked = enabled.has(input.dataset.indicator);
    });
    document.querySelectorAll('[data-indicator-param]').forEach(input => {
        const item = enabled.get(input.dataset.indicatorParam);
        const index = Number(input.dataset.paramIndex);
        if (item?.params?.[index] !== undefined) input.value = item.params[index];
    });
}

function collectIndicators () {
    return [...document.querySelectorAll('[data-indicator]:checked')].map(input => ({
        id: input.dataset.indicator,
        type: input.dataset.indicator,
        params: [...document.querySelectorAll('[data-indicator-param="' + input.dataset.indicator + '"]')]
            .map(param => Math.max(1, Math.min(500, Number(param.value) || 1))),
    }));
}

function schedulePreferenceSave (immediate = false) {
    if (!cur.id || !ADVANCED_CHART_ENABLED) return;
    chartPreference.indicators = collectIndicators();
    const panes = internalChart?.panes?.() || [];
    chartPreference.pane_sizes = {
        ...(chartPreference.pane_sizes || {}),
        ...(panes[1] ? { volume: panes[1].getHeight() } : {}),
        ...(panes[2] ? { rsi: panes[2].getHeight() } : {}),
        ...(panes[3] ? { macd: panes[3].getHeight() } : {}),
    };
    const symbolId = String(cur.id);
    const preferenceToSave = structuredClone(chartPreference);
    preferenceCache.set(symbolId, preferenceToSave);
    const localKey = 'ast.binary.chart.unsaved.' + symbolId;
    try { localStorage.setItem(localKey, JSON.stringify(preferenceToSave)); } catch (_) {}
    const state = document.getElementById('chartSaveState');
    state.textContent = 'Saving…'; state.className = 'chart-save-state';
    clearTimeout(preferenceSaveTimers.get(symbolId));
    // Chart notes/drawings are explicit user actions. Save those immediately
    // so navigating away or refreshing right after placing a note cannot lose
    // it. Other preference changes remain debounced to avoid noisy requests.
    preferenceSaveTimers.set(symbolId, setTimeout(async () => {
        try {
            const response = await fetch(preferenceRoute(PREF_UPDATE_ROUTE, symbolId), {
                method: 'PUT', credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify(preferenceToSave),
            });
            if (!response.ok) throw new Error('Save failed');
            try { localStorage.removeItem(localKey); } catch (_) {}
            if (String(cur.id) === symbolId) { state.textContent = 'Saved'; state.className = 'chart-save-state saved'; }
            setTimeout(() => { if (state.textContent === 'Saved') state.textContent = ''; }, 1800);
        } catch (_) {
            if (String(cur.id) === symbolId) { state.textContent = 'Saved locally'; state.className = 'chart-save-state error'; }
        }
        preferenceSaveTimers.delete(symbolId);
    }, immediate ? 0 : 700));
}

function seriesData () {
    if (['line', 'area'].includes(chartPreference.chart_type)) {
        return chartCandles.map(candle => ({ time: candle.time, value: candle.close }));
    }
    return chartCandles.map(({ time, open, high, low, close }) => ({ time, open, high, low, close }));
}

function createMainSeries () {
    if (!internalChart) return;
    if (internalSeries) internalChart.removeSeries(internalSeries);
    const precision = cur.price < 10 ? 5 : (cur.price < 100 ? 3 : 2);
    const common = { priceLineVisible: true, lastValueVisible: true, priceFormat: { type: 'price', precision, minMove: Math.pow(10, -precision) } };
    const definition = {
        candles: LightweightCharts.CandlestickSeries,
        bars: LightweightCharts.BarSeries,
        line: LightweightCharts.LineSeries,
        area: LightweightCharts.AreaSeries,
    }[chartPreference.chart_type] || LightweightCharts.CandlestickSeries;
    const options = chartPreference.chart_type === 'candles'
        ? { ...common, upColor: '#0ecb81', downColor: '#f6465d', borderUpColor: '#0ecb81', borderDownColor: '#f6465d', wickUpColor: '#0ecb81', wickDownColor: '#f6465d' }
        : chartPreference.chart_type === 'bars'
            ? { ...common, upColor: '#0ecb81', downColor: '#f6465d', thinBars: false }
            : chartPreference.chart_type === 'area'
                ? { ...common, lineColor: '#3b82f6', topColor: 'rgba(59,130,246,.35)', bottomColor: 'rgba(59,130,246,.02)', lineWidth: 2 }
                : { ...common, color: '#3b82f6', lineWidth: 2 };
    internalSeries = internalChart.addSeries(definition, options, 0);
    if (chartCandles.length) internalSeries.setData(seriesData());
}

function smaValues (candles, period) {
    let sum = 0;
    return candles.map((candle, index) => {
        sum += candle.close;
        if (index >= period) sum -= candles[index - period].close;
        return index >= period - 1 ? { time: candle.time, value: sum / period } : null;
    }).filter(Boolean);
}

function emaValues (candles, period, selector = candle => candle.close) {
    const factor = 2 / (period + 1); let value = null;
    return candles.map(candle => {
        const next = selector(candle);
        value = value === null ? next : next * factor + value * (1 - factor);
        return { time: candle.time, value };
    });
}

function addIndicatorLine (data, color, pane = 0, width = 1) {
    const series = internalChart.addSeries(LightweightCharts.LineSeries, { color, lineWidth: width, priceLineVisible: false, lastValueVisible: false }, pane);
    series.setData(data); indicatorSeries.push(series); return series;
}

function renderIndicators () {
    if (!internalChart) return;
    indicatorSeries.forEach(series => { try { internalChart.removeSeries(series); } catch (_) {} });
    indicatorSeries = [];
    const closes = chartCandles;
    (chartPreference.indicators || []).forEach(indicator => {
        const params = indicator.params || [];
        if (indicator.type === 'sma') addIndicatorLine(smaValues(closes, params[0] || 20), '#f59e0b', 0, 2);
        if (indicator.type === 'ema') addIndicatorLine(emaValues(closes, params[0] || 20), '#8b5cf6', 0, 2);
        if (indicator.type === 'bollinger') {
            const period = params[0] || 20, multiplier = params[1] || 2;
            const middle = smaValues(closes, period);
            const bands = middle.map((point, index) => {
                const sourceIndex = index + period - 1;
                const slice = closes.slice(sourceIndex - period + 1, sourceIndex + 1).map(item => item.close);
                const variance = slice.reduce((sum, value) => sum + Math.pow(value - point.value, 2), 0) / period;
                const deviation = Math.sqrt(variance) * multiplier;
                return { time: point.time, upper: point.value + deviation, lower: point.value - deviation };
            });
            addIndicatorLine(middle, '#38bdf8');
            addIndicatorLine(bands.map(p => ({ time: p.time, value: p.upper })), '#64748b');
            addIndicatorLine(bands.map(p => ({ time: p.time, value: p.lower })), '#64748b');
        }
        if (indicator.type === 'rsi') {
            const period = params[0] || 14; let gain = 0, loss = 0;
            const data = [];
            for (let index = 1; index < closes.length; index++) {
                const change = closes[index].close - closes[index - 1].close;
                gain = index <= period ? gain + Math.max(change, 0) : (gain * (period - 1) + Math.max(change, 0)) / period;
                loss = index <= period ? loss + Math.max(-change, 0) : (loss * (period - 1) + Math.max(-change, 0)) / period;
                if (index === period) { gain /= period; loss /= period; }
                if (index >= period) data.push({ time: closes[index].time, value: loss === 0 ? 100 : 100 - 100 / (1 + gain / loss) });
            }
            addIndicatorLine(data, '#a78bfa', 2, 2);
        }
        if (indicator.type === 'macd') {
            const fast = emaValues(closes, params[0] || 12), slow = emaValues(closes, params[1] || 26);
            const macd = fast.map((point, index) => ({ time: point.time, value: point.value - slow[index].value }));
            const signal = emaValues(macd.map(p => ({ time: p.time, close: p.value })), params[2] || 9);
            addIndicatorLine(macd, '#38bdf8', 3, 2); addIndicatorLine(signal, '#f59e0b', 3, 2);
            const histogram = internalChart.addSeries(LightweightCharts.HistogramSeries, { priceLineVisible: false, lastValueVisible: false }, 3);
            histogram.setData(macd.map((point, index) => ({ time: point.time, value: point.value - signal[index].value, color: point.value >= signal[index].value ? 'rgba(14,203,129,.65)' : 'rgba(246,70,93,.65)' })));
            indicatorSeries.push(histogram);
        }
    });
}

function updateOhlcLegend (candle) {
    if (!candle) return;
    const delta = candle.close - candle.open;
    const klass = delta >= 0 ? 'up' : 'down';
    const legend = document.getElementById('chartOhlc');
    const values = [
        ['strong', cur.name, ''], ['span', 'O ' + price(candle.open), ''],
        ['span', 'H ' + price(candle.high), ''], ['span', 'L ' + price(candle.low), ''],
        ['span', 'C ' + price(candle.close), ''], ['span', (delta >= 0 ? '+' : '') + Math.abs(delta).toFixed(window.TwelveDataChart.priceDecimals(Math.abs(delta)) ?? 8), klass],
    ];
    if (candle.volume !== null) values.push(['span', 'Vol ' + Number(candle.volume).toLocaleString(undefined, { notation: 'compact', maximumFractionDigits: 2 }), '']);
    legend.replaceChildren(...values.map(([tag, text, className]) => {
        const element = document.createElement(tag); element.textContent = text; if (className) element.className = className; return element;
    }));
}

/* ─────────────────────────────────────
   ADVANCED INTERNAL TRADING-PRICE CHART
   ───────────────────────────────────── */
async function initChart () {
    const mount = document.getElementById('binary-main-chart');
    if (!mount || !window.TwelveDataChart || !cur.id) return;
    if (binaryChartWidget) {
        binaryChartWidget.setSymbol(cur.id);
        return;
    }
    binaryChartWidget = window.TwelveDataChart.create({
        container: mount,
        symbolId: cur.id,
        chartUrl: @json(route('portal.markets.chart', ['symbolId' => '__SYMBOL_ID__'])),
        pricesUrl: @json(route('portal.markets.prices', ['light' => 1])),
        interval: '15m',
        range: window.PortalChartPreferences?.getRange('1d') || '1d',
        advancedIndicators: true,
        indicatorStorageKey: 'ast.binary.chart.indicators.v2',
        poll: false,
    });
    if (binaryChartWidget) {
        const internalRange = mount.querySelector('.ast-range');
        const internalInterval = mount.querySelector('.ast-interval');
        if (internalRange) {
            internalRange.style.display = '';
            internalRange.setAttribute('aria-label', 'History range');
            internalRange.title = 'History range';
            if (!mount.querySelector('.binary-range-label')) {
                const rangeLabel = document.createElement('span');
                rangeLabel.className = 'binary-range-label';
                rangeLabel.textContent = 'Range';
                internalRange.parentElement.insertBefore(rangeLabel, internalRange);
            }
        }
        if (internalInterval) {
            internalInterval.setAttribute('aria-label', 'Timeframe');
            internalInterval.title = 'Timeframe';
            if (!mount.querySelector('.binary-timeframe-label')) {
                const label = document.createElement('span');
                label.className = 'binary-timeframe-label';
                label.textContent = 'Timeframe';
                internalInterval.parentElement.insertBefore(label, internalInterval);
            }
        }
    }
}

function drawingSnapshot () { return structuredClone(chartPreference.drawings || []); }

function commitDrawings (next) {
    drawingUndo.push(drawingSnapshot());
    if (drawingUndo.length > 50) drawingUndo.shift();
    drawingRedo = [];
    chartPreference.drawings = next.slice(0, 100);
    renderDrawings(); schedulePreferenceSave(true);
}

function svgElement (name, attributes = {}) {
    const element = document.createElementNS('http://www.w3.org/2000/svg', name);
    Object.entries(attributes).forEach(([key, value]) => element.setAttribute(key, value));
    return element;
}

function renderDrawings () {
    const layer = document.getElementById('chartDrawingLayer');
    if (!layer || !internalChart || !internalSeries) return;
    layer.replaceChildren();
    const width = layer.clientWidth, height = layer.clientHeight;
    layer.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
    const x = point => internalChart.timeScale().timeToCoordinate(point.time);
    const y = point => internalSeries.priceToCoordinate(point.price);

    (chartPreference.drawings || []).forEach(drawing => {
        const group = svgElement('g', { 'data-drawing-id': drawing.id });
        if (drawing.id === selectedDrawingId) group.classList.add('selected');
        const p1 = drawing.points?.[0], p2 = drawing.points?.[1];
        if (!p1) return;
        const x1 = x(p1), y1 = y(p1), x2 = p2 ? x(p2) : null, y2 = p2 ? y(p2) : null;
        if (x1 === null || y1 === null) return;
        const color = '#60a5fa';
        const addLine = (ax, ay, bx, by, stroke = color, dash = '') => {
            group.append(
                svgElement('line', { x1: ax, y1: ay, x2: bx, y2: by, stroke, 'stroke-width': 1.5, 'stroke-dasharray': dash }),
                svgElement('line', { x1: ax, y1: ay, x2: bx, y2: by, stroke: 'transparent', 'stroke-width': 12, class: 'drawing-hit' })
            );
        };
        if (drawing.type === 'trend' && x2 !== null && y2 !== null) addLine(x1, y1, x2, y2);
        if (drawing.type === 'horizontal') addLine(0, y1, width, y1, color, '5 4');
        if (drawing.type === 'vertical') addLine(x1, 0, x1, height, color, '5 4');
        if (drawing.type === 'rectangle' && x2 !== null && y2 !== null) {
            group.append(svgElement('rect', { x: Math.min(x1,x2), y: Math.min(y1,y2), width: Math.abs(x2-x1), height: Math.abs(y2-y1), fill: 'rgba(59,130,246,.10)', stroke: color, 'stroke-width': 1.5, class: 'drawing-hit' }));
        }
        if (drawing.type === 'fibonacci' && x2 !== null && y2 !== null) {
            [0,.236,.382,.5,.618,1].forEach(level => {
                const levelY = y1 + (y2 - y1) * level;
                addLine(Math.min(x1,x2), levelY, Math.max(x1,x2), levelY, color, level === 0 || level === 1 ? '' : '3 3');
                const label = svgElement('text', { x: Math.min(x1,x2) + 3, y: levelY - 3, fill: '#93c5fd', 'font-size': 10 });
                label.textContent = String(level); group.append(label);
            });
        }
        if (drawing.type === 'text') {
            const label = svgElement('text', { x: x1 + 4, y: y1 - 4, fill: '#f8fafc', 'font-size': 12, class: 'drawing-hit' });
            label.textContent = drawing.text || 'Note'; group.append(label);
        }
        group.addEventListener('click', event => {
            if (activeDrawingTool) return;
            event.stopPropagation(); selectedDrawingId = drawing.id; renderDrawings();
        });
        layer.appendChild(group);
    });
}

function chartPointFromEvent (event) {
    const layer = document.getElementById('chartDrawingLayer');
    const rect = layer.getBoundingClientRect();
    const time = internalChart?.timeScale().coordinateToTime(event.clientX - rect.left);
    const priceValue = internalSeries?.coordinateToPrice(event.clientY - rect.top);
    if (typeof time !== 'number' || !Number.isFinite(Number(priceValue))) return null;
    return { time: Math.round(time), price: Number(priceValue) };
}

function deactivateDrawingTool () {
    activeDrawingTool = null; pendingDrawingPoint = null;
    document.getElementById('chartDrawingLayer').classList.remove('drawing');
    document.querySelectorAll('[data-drawing-tool]').forEach(button => button.classList.remove('active'));
}

function activateDrawingTool (tool, button) {
    activeDrawingTool = activeDrawingTool === tool ? null : tool; pendingDrawingPoint = null;
    document.querySelectorAll('[data-drawing-tool]').forEach(item => item.classList.remove('active'));
    if (activeDrawingTool) button.classList.add('active');
    document.getElementById('chartDrawingLayer').classList.toggle('drawing', !!activeDrawingTool);
}

function bindAdvancedChartControls () {
    if (!ADVANCED_CHART_ENABLED) {
        document.getElementById('chartToolbar').hidden = true;
        document.getElementById('indicatorMenu').hidden = true;
        return;
    }
    // Keep the requested interval and range compatible with the history
    // providers.  Fine-grained candles are only available for a short
    // window; previously the API silently changed 1m/5m/etc. to 1h while
    // leaving the selected button highlighted, which made the controls look
    // broken.  Move the range to a safe window before requesting history so
    // the selected interval is the interval that is actually displayed.
    const rangeForInterval = (interval, range) => {
        if (['1m', '5m', '15m', '30m'].includes(interval) && ['1w', '1m'].includes(range)) return '1d';
        return range;
    };
    document.querySelectorAll('[data-chart-interval]').forEach(button => button.addEventListener('click', () => {
        chartPreference.interval = button.dataset.chartInterval;
        const nextRange = rangeForInterval(chartPreference.interval, chartPreference.range);
        if (nextRange !== chartPreference.range) {
            chartPreference.range = nextRange;
            const rangeControl = document.getElementById('chartRange');
            if (rangeControl) rangeControl.value = nextRange;
        }
        applyPreferenceControls();
        schedulePreferenceSave();
        loadChartHistory();
    }));
    document.getElementById('chartRange').addEventListener('change', event => {
        chartPreference.range = event.target.value; schedulePreferenceSave(); loadChartHistory();
    });
    document.getElementById('chartType').addEventListener('change', event => {
        chartPreference.chart_type = event.target.value; createMainSeries(); renderIndicators(); renderDrawings(); schedulePreferenceSave();
    });
    const menu = document.getElementById('indicatorMenu');
    document.getElementById('indicatorToggle').addEventListener('click', event => { event.stopPropagation(); menu.hidden = !menu.hidden; });
    menu.addEventListener('click', event => event.stopPropagation());
    document.addEventListener('click', () => { menu.hidden = true; });
    document.querySelectorAll('[data-indicator], [data-indicator-param]').forEach(input => input.addEventListener('change', () => {
        chartPreference.indicators = collectIndicators(); renderIndicators(); schedulePreferenceSave();
    }));
    document.querySelectorAll('[data-drawing-tool]').forEach(button => button.addEventListener('click', () => activateDrawingTool(button.dataset.drawingTool, button)));
    document.getElementById('chartDrawingLayer').addEventListener('click', event => {
        if (!activeDrawingTool) { selectedDrawingId = null; renderDrawings(); return; }
        const point = chartPointFromEvent(event); if (!point) return;
        if (['horizontal','vertical','text'].includes(activeDrawingTool)) {
            let text = null;
            if (activeDrawingTool === 'text') { text = (window.prompt('Chart note (maximum 120 characters):', '') || '').trim().slice(0,120); if (!text) return; }
            commitDrawings([...(chartPreference.drawings || []), { id: window.crypto?.randomUUID?.() || String(Date.now()), type: activeDrawingTool, points: [point], ...(text ? { text } : {}) }]);
            deactivateDrawingTool(); return;
        }
        if (!pendingDrawingPoint) { pendingDrawingPoint = point; return; }
        commitDrawings([...(chartPreference.drawings || []), { id: window.crypto?.randomUUID?.() || String(Date.now()), type: activeDrawingTool, points: [pendingDrawingPoint, point] }]);
        deactivateDrawingTool();
    });
    document.getElementById('chartUndo').addEventListener('click', () => { if (!drawingUndo.length) return; drawingRedo.push(drawingSnapshot()); chartPreference.drawings = drawingUndo.pop(); renderDrawings(); schedulePreferenceSave(); });
    document.getElementById('chartRedo').addEventListener('click', () => { if (!drawingRedo.length) return; drawingUndo.push(drawingSnapshot()); chartPreference.drawings = drawingRedo.pop(); renderDrawings(); schedulePreferenceSave(); });
    document.getElementById('chartDelete').addEventListener('click', () => { if (!selectedDrawingId) return; commitDrawings((chartPreference.drawings || []).filter(item => item.id !== selectedDrawingId)); selectedDrawingId = null; });
    document.getElementById('chartClear').addEventListener('click', () => { if (!(chartPreference.drawings || []).length || !window.confirm('Clear all drawings for this asset?')) return; commitDrawings([]); selectedDrawingId = null; });
    document.getElementById('chartReset').addEventListener('click', () => internalChart?.timeScale().fitContent());
    document.getElementById('chartFullscreen').addEventListener('click', () => { const wrap = document.getElementById('chartWrap'); if (document.fullscreenElement) document.exitFullscreen(); else wrap.requestFullscreen?.(); });
    document.addEventListener('fullscreenchange', () => {
        document.querySelector('#chartFullscreen i').className = document.fullscreenElement ? 'fas fa-compress' : 'fas fa-expand';
        setTimeout(() => internalChart?.applyOptions({ width: document.getElementById('internal-chart-mount').clientWidth, height: document.getElementById('internal-chart-mount').clientHeight }), 50);
    });
    document.addEventListener('keydown', event => {
        if (event.key === 'Escape' && activeDrawingTool) deactivateDrawingTool();
        if ((event.key === 'Delete' || event.key === 'Backspace') && selectedDrawingId && !['INPUT','TEXTAREA'].includes(document.activeElement?.tagName)) document.getElementById('chartDelete').click();
    });
}

/* ─────────────────────────────────────
   CATEGORY FILTER
   ───────────────────────────────────── */
const binaryAssetFilter = document.getElementById('binaryAssetFilter');
const binaryAssetFilterToggle = document.getElementById('binaryAssetFilterToggle');
const binaryAssetFilterMenu = document.getElementById('binaryAssetFilterMenu');

function closeAssetFilter () {
    binaryAssetFilterMenu.hidden = true;
    binaryAssetFilterToggle.setAttribute('aria-expanded', 'false');
}

binaryAssetFilterToggle.addEventListener('click', event => {
    event.stopPropagation();
    const opening = binaryAssetFilterMenu.hidden;
    binaryAssetFilterMenu.hidden = !opening;
    binaryAssetFilterToggle.setAttribute('aria-expanded', String(opening));
});

document.querySelectorAll('.cat-item').forEach(item => {
    item.addEventListener('click', () => {
        document.querySelectorAll('.cat-item').forEach(i => {
            i.classList.remove('active');
            i.setAttribute('aria-selected', 'false');
        });
        item.classList.add('active');
        item.setAttribute('aria-selected', 'true');
        const cat = item.dataset.cat;
        const search = document.getElementById('assetSearch');
        search.value = '';
        document.querySelectorAll('.asset-row').forEach(row => {
            row.style.display = (row.dataset.cat === cat) ? '' : 'none';
        });
        document.getElementById('binaryAssetFilterLabel').textContent = 'Binary Options · ' + item.dataset.label;
        document.getElementById('binaryAssetFilterIcon').className = 'fas ' + item.dataset.icon;
        closeAssetFilter();
    });
});

document.addEventListener('click', event => {
    if (!binaryAssetFilter.contains(event.target)) closeAssetFilter();
});
document.addEventListener('keydown', event => {
    if (event.key === 'Escape' && !binaryAssetFilterMenu.hidden) {
        closeAssetFilter();
        binaryAssetFilterToggle.focus();
    }
});

// Apply initial category filter on load
(function () {
    const firstCat = document.querySelector('.cat-item.active')?.dataset.cat;
    if (firstCat) {
        document.querySelectorAll('.asset-row').forEach(row => {
            row.style.display = row.dataset.cat === firstCat ? '' : 'none';
        });
    }
})();

/* ─────────────────────────────────────
   ASSET SEARCH
   ───────────────────────────────────── */
document.getElementById('assetSearch').addEventListener('input', function () {
    const q = this.value.toLowerCase();
    const activeCategory = document.querySelector('.cat-item.active')?.dataset.cat;
    document.querySelectorAll('.asset-row').forEach(row => {
        const matchesCategory = !activeCategory || row.dataset.cat === activeCategory;
        const matchesSearch = !q || row.dataset.name.toLowerCase().includes(q);
        row.style.display = matchesCategory && matchesSearch ? '' : 'none';
    });
});

/* ─────────────────────────────────────
   EXPIRY TABS
   ───────────────────────────────────── */
function buildExpiryTabs () {
    const wrap  = document.getElementById('expiryTabs');
    const input = document.getElementById('formExpiryKey');
    const visual = {
        '60': ['1m', '', 'fa-stopwatch'],
        '300': ['5m', '', 'fa-clock'],
        '900': ['15m', '', 'fa-clock'],
        '1800': ['30m', '', 'fa-clock'],
        '3600': ['1h', '', 'fa-clock'],
        '14400': ['4h', '', 'fa-clock'],
        'eod': ['EOD', '', 'fa-calendar-days'],
        '2592000': ['1mo', '', 'fa-calendar-days'],
        '31536000': ['1y', '', 'fa-calendar-days'],
    };
    wrap.innerHTML = '';
    input.value = '';
    const avail = cur.expiries;
    let first = true;
    avail.forEach(key => {
        const btn = document.createElement('button');
        btn.type        = 'button';
        btn.className   = 'exp-tab' + (first ? ' sel' : '');
        const [value, unit, iconName] = visual[key] ?? [expiryLabels[key] ?? key, '', 'fa-clock'];
        const icon = document.createElement('i');
        icon.className = 'fas ' + iconName;
        icon.setAttribute('aria-hidden', 'true');
        const valueEl = document.createElement('span');
        valueEl.className = 'exp-value';
        valueEl.textContent = value;
        const unitEl = document.createElement('span');
        unitEl.className = 'exp-unit';
        unitEl.textContent = unit;
        btn.append(icon, valueEl, unitEl);
        btn.setAttribute('aria-label', expiryLabels[key] ?? key);
        btn.dataset.key = key;
        if (first) { input.value = key; first = false; }
        btn.addEventListener('click', () => {
            wrap.querySelectorAll('.exp-tab').forEach(b => b.classList.remove('sel'));
            btn.classList.add('sel');
            input.value = key;
            updateExpiryPreview();
            persistTicketState();
        });
        wrap.appendChild(btn);
    });
    updateExpiryPreview();
}

let expiryPreviewKey = '';
let expiryPreviewAt = 0;
function updateExpiryPreview () {
    const key = document.getElementById('formExpiryKey')?.value;
    const expiryAt = document.getElementById('expiryAt');
    const remaining = document.getElementById('expiryRemaining');
    if (!key || !expiryAt || !remaining) return;
    if (key !== expiryPreviewKey || expiryPreviewAt <= Date.now()) {
        const seconds = key === 'eod' ? Math.max(1, (24 * 60 * 60) - (new Date().getHours() * 3600 + new Date().getMinutes() * 60 + new Date().getSeconds())) : (parseInt(key, 10) || 0);
        expiryPreviewKey = key;
        expiryPreviewAt = Date.now() + seconds * 1000;
    }
    const seconds = Math.max(0, Math.ceil((expiryPreviewAt - Date.now()) / 1000));
    if (seconds <= 0) { expiryAt.textContent = '—'; remaining.textContent = '—'; return; }
    const expiry = new Date(expiryPreviewAt);
    expiryAt.textContent = expiry.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit', second:'2-digit', hour12:false});
    const mins = Math.floor(seconds / 60), secs = seconds % 60;
    remaining.textContent = (mins > 59 ? Math.floor(mins / 60) + 'h ' + (mins % 60) : mins) + ':' + String(secs).padStart(2, '0');
}

function updateWalletFlag () {
    const flag = document.getElementById('walletFlag');
    if (flag) flag.src = 'https://flagcdn.com/w40/us.webp';
}
document.getElementById('walletCurrency')?.addEventListener('change', updateWalletFlag);

/* ─────────────────────────────────────
   DIRECTION
   ───────────────────────────────────── */
window.selectDir = function (dir) {
    document.getElementById('btnCall').classList.toggle('sel', dir === 'call');
    document.getElementById('btnPut').classList.toggle('sel', dir === 'put');
    document.getElementById('formDirection').value = dir;
    persistTicketState();
};

/* ─────────────────────────────────────
   PAYOUT PREVIEW
   ───────────────────────────────────── */
window.updatePayout = function () {
    const stake  = parseFloat(document.getElementById('formStake').value) || 0;
    const profit = +(stake * cur.payout / 100).toFixed(2);
    const total  = +(stake + profit).toFixed(2);
    document.getElementById('pvProfit').textContent = stake > 0 ? '+$' + profit.toFixed(2) : '—';
    document.getElementById('pvReturn').textContent = stake > 0 ? '$' + total.toFixed(2) : '—';
    document.getElementById('pvLoss').textContent = stake > 0 ? '-$' + stake.toFixed(2) : '—';
    document.getElementById('pvPct').textContent = stake > 0 ? cur.payout + '%' : '—';
    document.getElementById('placeBtn').disabled  = stake <= 0 || !cur.id || !document.getElementById('formExpiryKey').value;
};

/* ─────────────────────────────────────
   SELECT ASSET
   ───────────────────────────────────── */
function selectAsset (row) {
    document.querySelectorAll('.asset-row').forEach(r => r.classList.remove('active'));
    row.classList.add('active');

    cur.id       = row.dataset.id;
    cur.name     = row.dataset.name;
    cur.tv       = row.dataset.tv;
    cur.price    = parseFloat(row.dataset.price) || 0;
    cur.payout   = parseFloat(row.dataset.payout) || 80;
    cur.expiries = JSON.parse(row.dataset.expiries || '[]');

    document.getElementById('formSymbolId').value  = cur.id;
    document.getElementById('th-name').textContent = cur.name;
    document.getElementById('th-sub').textContent  = cur.tv;
    document.getElementById('boTicketName').textContent = cur.name;
    document.getElementById('boTicketSymbol').textContent = cur.tv;
    const ticketMark = document.getElementById('boTicketMark');
    const assetIcon = row.querySelector('.ar-icon');
    if (ticketMark && assetIcon) {
        ticketMark.className = 'bo-ticket-mark ' + assetIcon.className;
        ticketMark.innerHTML = assetIcon.innerHTML;
    }
    document.getElementById('binarySignalName').textContent = cur.name;
    document.getElementById('binarySignalSymbol').textContent = cur.tv;
    document.getElementById('binarySignalBadge').textContent = 'Waiting for price';
    document.getElementById('binarySignalBadge').className = 'bo-signal-badge';
    document.getElementById('binarySignalPrice').textContent = '—';
    document.getElementById('binarySignalChange').textContent = '—';
    document.getElementById('binarySignalTime').textContent = '—';

    document.getElementById('th-price').textContent = price(cur.price);
    document.getElementById('boTicketPrice').textContent = price(cur.price);
    document.getElementById('dirCallPrice').textContent = price(cur.price);
    document.getElementById('dirPutPrice').textContent = price(cur.price);
    const cachedQuote = latestMarketPrices.get(String(cur.id));
    if (cachedQuote) updateSelectedPrice(cachedQuote);

    buildExpiryTabs();
    updatePayout();
    initChart();
    refreshSelectedPrice();
    persistTicketState();
}

document.querySelectorAll('.asset-row').forEach(row => {
    row.addEventListener('click', () => selectAsset(row));
});
const initialAssetIcon = document.querySelector('.asset-row.active .ar-icon');
const initialTicketMark = document.getElementById('boTicketMark');
if (initialAssetIcon && initialTicketMark) {
    initialTicketMark.className = 'bo-ticket-mark ' + initialAssetIcon.className;
    initialTicketMark.innerHTML = initialAssetIcon.innerHTML;
}

/* ─────────────────────────────────────
   COUNTDOWN + LIVE SETTLEMENT RESULTS
   ───────────────────────────────────── */
const expiringIds = new Set();
const notifiedIds = new Set();
const resultQueue = [];
let pollTimer = null;
let pollInFlight = false;
let activeResult = null;
let resultPreviousFocus = null;
const POLL_ROUTE  = '{{ route('portal.binary.poll') }}';
const resultBackdrop = document.getElementById('binaryResultBackdrop');
const resultDialog = document.getElementById('binaryResultDialog');

function money (currency, value) {
    return currency + ' ' + Number(value || 0).toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    });
}

function price (value) {
    return window.TwelveDataChart?.formatPrice(value) || '—';
}

const PRICES_ROUTE = @json(route('portal.markets.prices'));
const CHART_ROUTE = @json(route('portal.markets.chart', ['symbolId' => '__SYMBOL_ID__']));
const latestMarketPrices = new Map();
let selectedPriceRequestInFlight = false;

async function loadChartHistory () {
    if (!cur.id || !internalSeries) return;
    const historySequence = ++chartHistorySequence;
    const requestedSymbolId = String(cur.id);
    const requestedInterval = chartPreference.interval;
    const requestedRange = ['1m', '5m', '15m', '30m'].includes(requestedInterval)
        && ['1w', '1m'].includes(chartPreference.range) ? '1d' : chartPreference.range;
    if (requestedRange !== chartPreference.range) {
        chartPreference.range = requestedRange;
        const rangeControl = document.getElementById('chartRange');
        if (rangeControl) rangeControl.value = requestedRange;
        schedulePreferenceSave();
    }
    const status = document.querySelector('.internal-chart-status');
    if (status) status.textContent = 'Loading ' + requestedRange.toUpperCase() + ' history…';

    try {
        const chartUrl = new URL(CHART_ROUTE.replace('__SYMBOL_ID__', encodeURIComponent(requestedSymbolId)), window.location.origin);
        chartUrl.searchParams.set('range', requestedRange);
        chartUrl.searchParams.set('interval', requestedInterval);
        const response = await fetch(
            chartUrl,
            {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                cache: 'no-store',
                credentials: 'same-origin',
            }
        );
        if (!response.ok) throw new Error('Chart history failed (' + response.status + ')');
        const payload = await response.json();
        if (historySequence !== chartHistorySequence || String(cur.id) !== requestedSymbolId || !Array.isArray(payload.candles)) return;

        const candles = payload.candles.map(candle => ({
            time: Number(candle.time),
            open: Number(candle.open),
            high: Number(candle.high),
            low: Number(candle.low),
            close: Number(candle.close),
            volume: candle.volume === null || candle.volume === undefined ? null : Number(candle.volume),
        })).filter(candle => [candle.time,candle.open,candle.high,candle.low,candle.close].every(Number.isFinite));
        if (!candles.length) throw new Error('No chart candles available');

        chartCandles = candles;
        if (payload.interval && payload.interval !== chartPreference.interval) {
            // A previously saved preference may contain an interval/range
            // combination that the provider cannot serve (for example 1m
            // candles over a month).  Keep the user's interval and narrow
            // the range instead of silently changing the interval to 1h.
            const fineInterval = ['1m', '5m', '15m', '30m'].includes(requestedInterval);
            if (fineInterval && ['1w', '1m'].includes(requestedRange)) {
                chartPreference.range = '1d';
                const rangeControl = document.getElementById('chartRange');
                if (rangeControl) rangeControl.value = '1d';
                applyPreferenceControls(); schedulePreferenceSave();
            } else {
                chartPreference.interval = payload.interval;
                applyPreferenceControls(); schedulePreferenceSave();
            }
        }
        chartIntervalSeconds = ({ '1m':60, '5m':300, '15m':900, '30m':1800, '1h':3600, '1d':86400 })[payload.interval || chartPreference.interval] || 900;
        internalSeries.setData(seriesData());
        volumeSeries?.setData(candles.filter(candle => candle.volume !== null).map(candle => ({
            time: candle.time, value: candle.volume, color: candle.close >= candle.open ? 'rgba(14,203,129,.58)' : 'rgba(246,70,93,.58)',
        })));
        currentCandle = chartCandles[chartCandles.length - 1];
        lastChartTime = currentCandle.time;
        chartSeriesSymbolId = requestedSymbolId;
        chartUsesLiveWindow = payload.is_live !== false;
        renderIndicators(); updateOhlcLegend(currentCandle); renderDrawings();
        internalChart.timeScale().fitContent();
        const panes = internalChart.panes();
        if (panes[1]) panes[1].setHeight(Number(chartPreference.pane_sizes?.volume || 105));

        if (status && payload.label) status.textContent = payload.label;
        const cachedQuote = latestMarketPrices.get(requestedSymbolId);
        if (cachedQuote) updateInternalChart(cachedQuote, false);
    } catch (error) {
        if (status) status.textContent = 'Chart history unavailable · retrying live prices';
        console.warn('Chart history failed:', error);
    }
}

function updateInternalChart (quote, resetData) {
    if (!internalSeries || !quote || String(quote.id) !== String(cur.id)) return;

    const currentPrice = Number(quote.price);
    if (!Number.isFinite(currentPrice) || currentPrice <= 0) return;

    const latestTime = Math.floor(
        quote.priced_at ? new Date(quote.priced_at).getTime() / 1000 : Date.now() / 1000
    );
    if (!Number.isFinite(latestTime)) return;
    const candleTime = Math.floor(latestTime / chartIntervalSeconds) * chartIntervalSeconds;

    // A closed market uses the latest active trading hour. Do not append a
    // distant flat candle that would squash that history horizontally.
    if (!resetData && !chartUsesLiveWindow && chartSeriesSymbolId === String(cur.id)) {
        if (currentCandle && currentPrice !== currentCandle.close && Date.now() - lastChartHistoryReload > 10000) {
            lastChartHistoryReload = Date.now();
            loadChartHistory();
        }
        return;
    }

    if (resetData || chartSeriesSymbolId !== String(cur.id) || !currentCandle) {
        const candlesByTime = new Map();
        (Array.isArray(quote.chart_candles) ? quote.chart_candles : []).forEach(candle => {
            const time = Number(candle.time);
            const open = Number(candle.open);
            const high = Number(candle.high);
            const low = Number(candle.low);
            const close = Number(candle.close);
            if ([time, open, high, low, close].every(Number.isFinite) && open > 0 && high > 0 && low > 0 && close > 0) {
                candlesByTime.set(time, { time, open, high, low, close, volume: candle.volume === undefined ? null : Number(candle.volume) });
            }
        });

        // Backward-compatible fallback while an older cached API response is in flight.
        if (!candlesByTime.size) {
            (Array.isArray(quote.chart_points) ? quote.chart_points : []).forEach(point => {
                const value = Number(point.price);
                const pointTime = Math.floor(new Date(point.priced_at).getTime() / 1000);
                const bucketTime = Math.floor(pointTime / chartIntervalSeconds) * chartIntervalSeconds;
                if (!Number.isFinite(value) || value <= 0 || !Number.isFinite(pointTime)) return;
                const candle = candlesByTime.get(bucketTime);
                candlesByTime.set(bucketTime, candle ? {
                    ...candle,
                    high: Math.max(candle.high, value),
                    low: Math.min(candle.low, value),
                    close: value,
                } : { time: bucketTime, open: value, high: value, low: value, close: value, volume: null });
            });
        }

        const latest = candlesByTime.get(candleTime);
        candlesByTime.set(candleTime, latest ? {
            ...latest,
            high: Math.max(latest.high, currentPrice),
            low: Math.min(latest.low, currentPrice),
            close: currentPrice,
        } : { time: candleTime, open: currentPrice, high: currentPrice, low: currentPrice, close: currentPrice, volume: null });

        chartCandles = Array.from(candlesByTime.values()).sort((a, b) => a.time - b.time);
        internalSeries.setData(seriesData());
        currentCandle = chartCandles[chartCandles.length - 1];
        lastChartTime = currentCandle.time;
        chartSeriesSymbolId = String(cur.id);
        renderIndicators(); updateOhlcLegend(currentCandle); renderDrawings();
        internalChart.timeScale().fitContent();
        return;
    }

    if (candleTime > lastChartTime) {
        currentCandle = {
            time: candleTime,
            open: currentCandle.close,
            high: Math.max(currentCandle.close, currentPrice),
            low: Math.min(currentCandle.close, currentPrice),
            close: currentPrice,
            volume: null,
        };
        lastChartTime = candleTime;
        chartCandles.push(currentCandle);
    } else if (candleTime === lastChartTime) {
        currentCandle = {
            ...currentCandle,
            high: Math.max(currentCandle.high, currentPrice),
            low: Math.min(currentCandle.low, currentPrice),
            close: currentPrice,
        };
        chartCandles[chartCandles.length - 1] = currentCandle;
    }
    internalSeries.update(['line','area'].includes(chartPreference.chart_type)
        ? { time: currentCandle.time, value: currentCandle.close }
        : { time: currentCandle.time, open: currentCandle.open, high: currentCandle.high, low: currentCandle.low, close: currentCandle.close });
    renderIndicators(); updateOhlcLegend(currentCandle); renderDrawings();
}

function updateSelectedPrice (quote) {
    if (!quote || String(quote.id) !== String(cur.id)) return;

    const currentPrice = Number(quote.price);
    if (Number.isFinite(currentPrice) && currentPrice > 0) {
        cur.price = currentPrice;
        document.getElementById('th-price').textContent = price(currentPrice);
        document.getElementById('boTicketPrice').textContent = price(currentPrice);
        document.getElementById('dirCallPrice').textContent = price(currentPrice);
        document.getElementById('dirPutPrice').textContent = price(currentPrice);
        binaryChartWidget?.applyQuote(quote);
        updateBinarySignal(quote);
    }

    const changeEl = document.getElementById('th-chg');
    const change = Number(quote.change_24h_pct);
    changeEl.classList.remove('up', 'dn');
    if (Number.isFinite(change)) {
        changeEl.textContent = (change >= 0 ? '+' : '') + change.toFixed(2) + '%';
        changeEl.classList.add(change >= 0 ? 'up' : 'dn');
        const ticketChange = document.getElementById('boTicketChange');
        ticketChange.textContent = (change >= 0 ? '+' : '') + change.toFixed(2) + '%';
        ticketChange.className = 'bo-ticket-change ' + (change >= 0 ? 'up' : 'dn');
    } else {
        changeEl.textContent = '—';
        document.getElementById('boTicketChange').textContent = '—';
    }
}

function updateAssetRowPrice (quote) {
    document.querySelectorAll('.asset-row').forEach(row => {
        if (String(row.dataset.id) !== String(quote.id)) return;
        const currentPrice = Number(quote.price);
        if (!Number.isFinite(currentPrice) || currentPrice <= 0) return;
        row.dataset.price = String(currentPrice);
        const priceEl = row.querySelector('.ar-price');
        if (priceEl) priceEl.textContent = price(currentPrice);
    });
}

async function refreshSelectedPrice () {
    if (document.hidden || selectedPriceRequestInFlight) return;
    selectedPriceRequestInFlight = true;

    try {
        const response = await fetch(PRICES_ROUTE, {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
            cache: 'no-store',
            credentials: 'same-origin',
        });
        if (!response.ok) throw new Error('Price refresh failed (' + response.status + ')');

        const payload = await response.json();
        if (!Array.isArray(payload.symbols)) return;

        payload.symbols.forEach(quote => {
            latestMarketPrices.set(String(quote.id), quote);
            updateAssetRowPrice(quote);
            updateSelectedPrice(quote);
        });
        refreshLivePrices(Object.fromEntries(
            payload.symbols
                .filter(quote => Number.isFinite(Number(quote.price)) && Number(quote.price) > 0)
                .map(quote => [String(quote.id), Number(quote.price)])
        ));
    } catch (error) {
        console.warn('Keeping last binary-option price:', error);
    } finally {
        selectedPriceRequestInFlight = false;
    }
}

function refreshLivePrices (currentPrices) {
    if (!currentPrices) return;
    document.querySelectorAll('.opt-card[data-option-id]:not([data-settled="true"])').forEach(card => {
        const symId    = card.dataset.symbolId;
        const price    = currentPrices[symId];
        if (price == null) return;

        const strike    = parseFloat(card.dataset.strike);
        const direction = card.dataset.direction;
        const priceEl   = document.getElementById('live-price-' + card.dataset.optionId);
        const badgeEl   = document.getElementById('live-badge-' + card.dataset.optionId);
        if (!priceEl || !badgeEl) return;

        priceEl.textContent = window.TwelveDataChart.formatPrice(price);

        const diff = price - strike;
        const itm  = direction === 'call' ? diff > 0.000001 : diff < -0.000001;
        const push = Math.abs(diff) < 0.000001;
        badgeEl.className = 'od-live-badge ' + (push ? 'even' : (itm ? 'itm' : 'otm'));
        badgeEl.textContent = push ? 'Even' : (itm ? 'ITM ▲' : 'OTM ▼');
    });
}

function updateWallets (wallets) {
    const field = document.getElementById('walletCurrency');
    const display = field?.nextElementSibling;
    if (!display || !wallets || !Object.prototype.hasOwnProperty.call(wallets, 'USD')) return;
    display.textContent = 'USD (' + Number(wallets.USD).toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    }) + ')';
}

function historyCell (text, className) {
    const td = document.createElement('td');
    if (className) td.className = className;
    td.textContent = text;
    return td;
}

function addHistoryRow (item) {
    const body = document.getElementById('binaryHistoryBody');
    if (!body || body.querySelector('[data-history-option-id="' + item.id + '"]')) return;
    body.querySelectorAll('.history-empty').forEach(row => row.remove());

    const row = document.createElement('tr');
    row.dataset.historyOptionId = item.id;
    row.style.fontSize = '.8rem';

    const asset = historyCell(item.symbol);
    asset.style.color = '#eaecef';
    asset.style.fontWeight = '600';
    row.appendChild(asset);

    const direction = document.createElement('td');
    const directionPill = document.createElement('span');
    directionPill.className = 'dir-pill ' + item.direction;
    directionPill.textContent = String(item.direction || '').toUpperCase();
    direction.appendChild(directionPill);
    row.appendChild(direction);

    row.appendChild(historyCell(money(item.currency, item.stake)));
    row.appendChild(historyCell(price(item.strike_price)));
    row.appendChild(historyCell(price(item.close_price)));

    const pnl = document.createElement('td');
    const pnlValue = document.createElement('span');
    if (item.result === 'won') {
        pnlValue.style.cssText = 'color:#0ecb81;font-weight:700';
        pnlValue.textContent = '+' + money(item.currency, item.profit);
    } else if (item.result === 'lost') {
        pnlValue.style.cssText = 'color:#f6465d;font-weight:700';
        pnlValue.textContent = '-' + money(item.currency, item.stake);
    } else if (item.result === 'push') {
        pnlValue.style.cssText = 'color:#8b949e;font-weight:700';
        pnlValue.textContent = money(item.currency, '0.00');
    } else {
        pnlValue.style.color = '#5e6673';
        pnlValue.textContent = '—';
    }
    pnl.appendChild(pnlValue);
    row.appendChild(pnl);

    const status = document.createElement('td');
    const statusPill = document.createElement('span');
    statusPill.className = 'st-pill ' + item.status;
    statusPill.textContent = item.result === 'won' ? 'Won'
        : (item.result === 'lost' ? 'Lost'
        : (item.result === 'push' ? 'Push'
        : 'Cancelled'));
    status.appendChild(statusPill);
    row.appendChild(status);

    const dateCell = historyCell(item.display_date || '—');
    dateCell.style.cssText = 'color:#5e6673;white-space:nowrap';
    row.appendChild(dateCell);
    body.prepend(row);
}

function updateOpenCard (item) {
    const card = document.querySelector('.opt-card[data-option-id="' + item.id + '"]');
    if (!card) return;
    const timer = card.querySelector('.od-timer');
    if (timer) {
        timer.classList.remove('finalising', 'delayed');
        timer.textContent = item.result === 'won' ? 'WON' : (item.result === 'lost' ? 'LOST' : 'CANCELLED');
    }
    if (item.result === 'won') card.classList.add('result-won');
    if (item.result === 'lost') card.classList.add('result-lost');
    card.dataset.settled = 'true';

    const count = document.getElementById('openPositionsCount');
    const remaining = document.querySelectorAll('.opt-card:not([data-settled="true"])').length;
    if (count) count.textContent = remaining;

    window.setTimeout(() => {
        card.remove();
        if (!document.querySelector('.opt-card:not([data-settled="true"])')) {
            document.getElementById('openPositionsSection')?.setAttribute('hidden', 'hidden');
        }
    }, 1800);
}

function queueResult (item, wallets) {
    if (notifiedIds.has(String(item.id))) return;
    notifiedIds.add(String(item.id));
    resultQueue.push({ item, wallets });
    if (!activeResult) showNextResult();
}

function showNextResult () {
    const next = resultQueue.shift();
    if (!next) {
        activeResult = null;
        resultBackdrop.hidden = true;
        resultPreviousFocus?.focus?.();
        return;
    }

    activeResult = next;
    const item = next.item;
    const won = item.result === 'won';
    const cancelled = item.result === 'cancelled';
    const isPush = item.result === 'push';
    const balance = next.wallets?.[item.currency];
    const dialogClass = cancelled ? 'cancelled' : (won ? 'won' : (isPush ? 'push' : 'lost'));
    resultDialog.className = 'bo-result-dialog ' + dialogClass;
    document.getElementById('binaryResultIcon').className = cancelled ? 'fas fa-rotate-left'
        : (won ? 'fas fa-trophy'
        : (isPush ? 'fas fa-equals'
        : 'fas fa-arrow-trend-down'));
    document.getElementById('binaryResultTitle').textContent = cancelled ? 'Trade Cancelled'
        : (won ? 'You Won'
        : (isPush ? 'Push — Draw'
        : 'Trade Lost'));
    document.getElementById('binaryResultSummary').textContent = item.symbol + ' · ' + String(item.direction).toUpperCase();
    document.getElementById('binaryResultAmount').textContent = (cancelled || isPush)
        ? 'Stake refunded'
        : (won ? '+' + money(item.currency, item.profit) + ' net profit' : '-' + money(item.currency, item.stake));
    document.getElementById('binaryResultPayout').textContent = won ? money(item.currency, item.payout) : (isPush ? money(item.currency, item.stake) : '—');
    document.getElementById('binaryResultClosePrice').textContent = price(item.close_price);
    document.getElementById('binaryResultBalance').textContent = balance === undefined ? '—' : money(item.currency, balance);
    document.getElementById('binaryResultSettledAt').textContent = item.settled_at
        ? new Date(item.settled_at).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit' })
        : '—';
    document.getElementById('binaryResultDone').textContent = resultQueue.length ? 'Next result' : 'Close';

    resultPreviousFocus = document.activeElement;
    resultBackdrop.hidden = false;
    resultDialog.focus();
}

function closeResult () {
    if (!activeResult) return;
    activeResult = null;
    showNextResult();
}

document.getElementById('binaryResultClose').addEventListener('click', closeResult);
document.getElementById('binaryResultDone').addEventListener('click', closeResult);
resultBackdrop.addEventListener('click', event => {
    if (event.target === resultBackdrop) closeResult();
});
document.addEventListener('keydown', event => {
    if (event.key === 'Escape' && !resultBackdrop.hidden) closeResult();
    if (event.key === 'Tab' && !resultBackdrop.hidden) {
        const focusable = Array.from(resultDialog.querySelectorAll('button:not([disabled])'));
        if (!focusable.length) return;
        const first = focusable[0], last = focusable[focusable.length - 1];
        if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
        else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
    }
});

function tick () {
    document.querySelectorAll('.od-timer[data-exp]').forEach(el => {
        const diff = Math.max(0, new Date(el.dataset.exp) - Date.now());
        if (!diff) {
            const waiting = Date.now() - new Date(el.dataset.exp).getTime();
            el.classList.toggle('delayed', waiting >= 30_000);
            el.classList.toggle('finalising', waiting < 30_000);
            el.textContent = waiting >= 30_000
                ? 'Settlement delayed — waiting for market price'
                : 'Finalising result…';
            if (el.dataset.id) expiringIds.add(el.dataset.id);
            return;
        }
        const d = Math.floor(diff / 86400000), h = Math.floor((diff%86400000)/3600000),
              m = Math.floor((diff%3600000)/60000), s = Math.floor((diff%60000)/1000);
        el.textContent = d > 0
            ? d+'d '+String(h).padStart(2,'0')+'h'
            : String(h).padStart(2,'0')+':'+String(m).padStart(2,'0')+':'+String(s).padStart(2,'0');
    });

    if (expiringIds.size > 0 && !pollTimer) {
        startPolling();
    }
}

function startPolling () {
    pollStatuses();
    pollTimer = setInterval(pollStatuses, 1000);
}

async function pollStatuses () {
    if (pollInFlight || expiringIds.size === 0) return;
    pollInFlight = true;
    try {
        const ids = [...expiringIds];
        const qs = ids.map(id => 'ids[]=' + encodeURIComponent(id)).join('&');
        const res = await fetch(POLL_ROUTE + '?' + qs, {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
            cache: 'no-store',
        });
        if (!res.ok) return;

        const payload = await res.json();
        updateWallets(payload.wallets);
        refreshLivePrices(payload.current_prices);
        ids.forEach(id => {
            const item = payload.options?.[id];
            if (!item) return;
            if (item.status === 'open') {
                const timer = document.querySelector('.od-timer[data-id="' + id + '"]');
                if (timer && item.settlement_state === 'waiting_for_price') {
                    timer.classList.remove('finalising');
                    timer.classList.add('delayed');
                    timer.textContent = 'Settlement delayed — waiting for market price';
                }
                return;
            }

            expiringIds.delete(String(id));
            updateOpenCard(item);
            addHistoryRow(item);
            queueResult(item, payload.wallets);
        });

        if (expiringIds.size === 0 && pollTimer) {
            clearInterval(pollTimer);
            pollTimer = null;
        }
    } catch (error) {
        // Temporary failures are deliberately retried; the countdown shows delay state.
    } finally {
        pollInFlight = false;
    }
}

document.addEventListener('visibilitychange', () => {
    if (!document.hidden) {
        tick();
        if (expiringIds.size > 0) pollStatuses();
    }
});

/* ─────────────────────────────────────
   AJAX FORM SUBMISSION
   ───────────────────────────────────── */
document.getElementById('boForm').addEventListener('submit', async function (e) {
    e.preventDefault();

    const btn = document.getElementById('placeBtn');
    const origHTML = btn.innerHTML;
    btn.disabled = true;
    btn.classList.add('loading');
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Placing…';

    try {
        const res = await fetch(this.action, {
            method: 'POST',
            body: new FormData(this),
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
        });

        let data;
        try { data = await res.json(); }
        catch (jsonErr) {
            showToast('error', 'Unexpected server response. Please try again.');
            return;
        }

        if (data.success) {
            showToast('success', data.message || 'Binary option placed successfully.');
            persistTicketState();
            // Reload account data while retaining the traded asset and its chart.
            const refreshUrl = data.refresh_url || (() => {
                const url = new URL(window.location.href);
                url.searchParams.set('symbol_id', data.selected_symbol_id || cur.id);
                return url.toString();
            })();
            setTimeout(() => { window.location.href = refreshUrl; }, 1800);
        } else {
            showToast('error', data.message || 'Trade could not be placed. Please try again.');
            btn.disabled = false;
            btn.classList.remove('loading');
            btn.innerHTML = origHTML;
        }
    } catch (err) {
        showToast('error', 'Network error. Please check your connection and try again.');
        btn.disabled = false;
        btn.classList.remove('loading');
        btn.innerHTML = origHTML;
    }
});

/* ─────────────────────────────────────
   INIT
   ───────────────────────────────────── */
restoreTicketState();
setInterval(updateExpiryPreview, 1000);
updateWalletFlag();
try { initChart(); } catch (e) { console.warn('Chart init failed:', e); }
tick();
setInterval(tick, 1000);

// Keep the displayed quote synchronized with the same internal feed used
// for binary-option strike prices and settlement.
refreshSelectedPrice();
const selectedPricePoll = window.setInterval(refreshSelectedPrice, {{ (int) config('services.twelvedata.browser_refresh_ms', 2000) }});
document.addEventListener('visibilitychange', () => {
    if (!document.hidden) refreshSelectedPrice();
});
window.addEventListener('pagehide', () => {
    window.clearInterval(selectedPricePoll);
}, { once: true });

// Auto-select first visible asset if none pre-selected
if (!cur.id) {
    const first = document.querySelector('.asset-row:not([style*="none"])');
    if (first) selectAsset(first);
}

document.getElementById('formStake')?.addEventListener('input', persistTicketState);

})();
</script>
@endpush