@extends('layouts.app')
@section('title', 'Chart')
@section('content')
<h1>Market chart</h1>
<p class="label">Display only — not used for order execution.</p>
<div class="card">
    <div id="chart" style="height:400px"></div>
</div>
@endsection
@push('head')
<script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
@endpush
@push('scripts')
<script>
(async () => {
    const chart = LightweightCharts.createChart(document.getElementById('chart'), { width: 900, height: 400 });
    const series = chart.addCandlestickSeries();
    const r = await fetch('/api/rates?symbols=EURUSD');
    const j = await r.json();
    const now = Math.floor(Date.now()/1000);
    const data = [];
    let price = j.data?.[0]?.mid || 1.085;
    for (let i = 60; i >= 0; i--) {
        const t = now - i * 3600;
        const o = price; price += (Math.random()-0.5)*0.001;
        data.push({ time: t, open: o, high: Math.max(o,price)+0.0002, low: Math.min(o,price)-0.0002, close: price });
    }
    series.setData(data);
})();
</script>
@endpush