@extends('layouts.guru')
@section('title', 'Beranda Guru')

@section('topbar')
<div class="gr-topbar-inner">
    <div>
        <div class="gr-greeting-name">Selamat datang, {{ auth()->user()->name }}! 👋</div>
        <div class="gr-greeting-sub">Kelola kelas, buat tugas, dan pantau perkembangan belajar siswa.</div>
    </div>
    <div class="gr-topbar-right">
        @if($daftarKelas->isNotEmpty())
        <form method="GET" action="{{ route('guru.dashboard') }}" id="formKelas">
            <select name="kelas_id" class="gr-kelas-select" onchange="document.getElementById('formKelas').submit()">
                @foreach($daftarKelas as $k)
                    <option value="{{ $k->id }}" {{ $kelasAktif && $kelasAktif->id === $k->id ? 'selected' : '' }}>
                        {{ $k->nama }}
                    </option>
                @endforeach
            </select>
        </form>
        @endif
        <div class="gr-date-chip">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/>
                <line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
            </svg>
            {{ now()->translatedFormat('l, d F Y') }}
        </div>
    </div>
</div>
@endsection

@section('content')

{{-- ===== EMPTY STATE (belum ada kelas) ===== --}}
@if($daftarKelas->isEmpty())
<div style="text-align:center; padding:60px 0">
    <div style="font-size:48px; margin-bottom:12px">🏫</div>
    <h2 style="font-size:18px; font-weight:700; color:#111827; margin-bottom:6px">Belum ada kelas</h2>
    <p class="muted" style="margin-bottom:20px">Buat kelas pertama agar siswa bisa bergabung dan mengerjakan tugas.</p>
    <a href="{{ route('guru.kelas.index') }}" class="btn btn-purple">+ Buat Kelas Pertama</a>
</div>
@else

{{-- ===== 5 STAT CARDS ===== --}}
<div class="gr-stats">

    <div class="gr-stat">
        <div class="gr-stat-icon" style="background:#eff6ff">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/>
                <rect x="9" y="3" width="6" height="4" rx="1"/><line x1="9" y1="12" x2="15" y2="12"/><line x1="9" y1="16" x2="13" y2="16"/>
            </svg>
        </div>
        <div class="gr-stat-num">{{ $countTugas }}</div>
        <div class="gr-stat-lbl">Tugas Aktif</div>
        <div class="gr-stat-sub">{{ $countBelumSelesai }} belum selesai</div>
    </div>

    <div class="gr-stat">
        <div class="gr-stat-icon" style="background:#ecfdf5">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
            </svg>
        </div>
        <div class="gr-stat-num">{{ $siswaAktif }}</div>
        <div class="gr-stat-lbl">Siswa Aktif</div>
        <div class="gr-stat-sub">dari {{ $totalSiswa }} siswa</div>
    </div>

    <div class="gr-stat">
        <div class="gr-stat-icon" style="background:#eff6ff">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/>
                <line x1="6" y1="20" x2="6" y2="14"/>
            </svg>
        </div>
        <div class="gr-stat-num">{{ $avgSkor !== null ? $avgSkor . '%' : '—' }}</div>
        <div class="gr-stat-lbl">Rata-rata Ketercapaian</div>
        <div class="gr-stat-sub">di semua tugas</div>
    </div>

    <div class="gr-stat">
        <div class="gr-stat-icon" style="background:#fff7ed">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ea580c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
            </svg>
        </div>
        <div class="gr-stat-num">{{ $miskonsepsiCount }}</div>
        <div class="gr-stat-lbl">Miskonsepsi Dominan</div>
        <div class="gr-stat-sub">perlu perhatian</div>
    </div>

    <div class="gr-stat">
        <div class="gr-stat-icon" style="background:#fff1f2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#e11d48" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
            </svg>
        </div>
        <div class="gr-stat-num">{{ $soalDiBank }}</div>
        <div class="gr-stat-lbl">Soal di Bank</div>
        <div class="gr-stat-sub">siap digunakan</div>
    </div>

</div>

{{-- ===== 2-COL DASHBOARD GRID ===== --}}
<div class="gr-dash-grid">

    {{-- ===== KIRI: Konten Utama ===== --}}
    <div>

        {{-- Ringkasan Kelas --}}
        <div class="al-card" style="margin-bottom:14px; overflow:hidden">
            <div class="al-card-head">
                <span class="al-card-title">Ringkasan {{ $kelasAktif->nama }}</span>
                <a href="{{ route('guru.kelas.show', $kelasAktif) }}" class="btn btn-outline btn-sm" style="font-size:12px">
                    Lihat detail kelas
                </a>
            </div>
            <div class="al-card-body" style="padding:0">
                <div class="gr-summary-inner">
                    {{-- KKM Side --}}
                    <div class="gr-kkm-side">
                        <div class="gr-kkm-pct {{ $avgSkor !== null && $avgSkor >= $kkm ? 'gr-kkm-pct--green' : 'gr-kkm-pct--red' }}">
                            {{ $avgSkor !== null ? $avgSkor . '%' : '—' }}
                        </div>
                        <div class="gr-kkm-note">
                            @if($avgSkor !== null)
                                {{ $avgSkor >= $kkm ? 'Di atas' : 'Di bawah' }} KKM {{ $kkm }}%
                            @else
                                Belum ada data
                            @endif
                        </div>
                        @if($avgSkor !== null)
                            <div style="font-size:28px; margin-bottom:6px">{{ $avgSkor >= $kkm ? '⭐' : '😔' }}</div>
                        @endif
                        <div class="gr-kkm-msg {{ $avgSkor !== null && $avgSkor >= $kkm ? 'gr-kkm-msg--ok' : 'gr-kkm-msg--warn' }}">
                            @if($avgSkor === null)
                                Belum ada sesi selesai.
                            @elseif($avgSkor >= $kkm)
                                Bagus! Pertahankan semangat belajar siswa.
                            @else
                                Perlu perhatian khusus pada indikator bermasalah.
                            @endif
                        </div>
                    </div>

                    {{-- Trend Side --}}
                    <div class="gr-trend-side">
                        <div class="gr-trend-title">Tren Ketercapaian 7 Hari Terakhir</div>
                        <canvas id="trendCanvas"></canvas>
                        <div style="display:flex; justify-content:space-between; font-size:10.5px; color:#9ca3af; margin-top:4px">
                            @foreach($tren as $t)
                                <span>{{ $t['tanggal'] }}</span>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Tugas Terbaru --}}
        <div class="al-card" style="margin-bottom:14px">
            <div class="al-card-head">
                <span class="al-card-title">Tugas Terbaru</span>
                <a href="{{ route('guru.kelas.show', $kelasAktif) }}" class="muted" style="font-size:12.5px">Lihat semua</a>
            </div>
            <div class="al-card-body">
                @if($tugasTerbaru->isEmpty())
                    <div style="text-align:center; padding:24px 0; color:#9ca3af; font-size:13.5px">
                        Belum ada tugas. <a href="{{ route('guru.tugas.create', $kelasAktif) }}">Buat tugas pertama</a>.
                    </div>
                @else
                <table style="width:100%; border-collapse:collapse; font-size:13px">
                    <thead>
                        <tr>
                            <th style="text-align:left; padding:7px 10px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:#9ca3af; border-bottom:2px solid #e5e7eb; background:#f9fafb">Nama Tugas</th>
                            <th style="text-align:left; padding:7px 10px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:#9ca3af; border-bottom:2px solid #e5e7eb; background:#f9fafb">Indikator</th>
                            <th style="text-align:left; padding:7px 10px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:#9ca3af; border-bottom:2px solid #e5e7eb; background:#f9fafb">Siswa Selesai</th>
                            <th style="text-align:center; padding:7px 10px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:#9ca3af; border-bottom:2px solid #e5e7eb; background:#f9fafb">Rata-rata</th>
                            <th style="text-align:center; padding:7px 10px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:#9ca3af; border-bottom:2px solid #e5e7eb; background:#f9fafb">Status</th>
                            <th style="border-bottom:2px solid #e5e7eb; background:#f9fafb; width:90px; text-align:center; padding:7px 10px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:#9ca3af">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($tugasTerbaru as $row)
                        @php
                            $t = $row['tugas'];
                            $warna = $row['avg'] !== null ? ($row['avg'] >= $kkm ? '#16a34a' : ($row['avg'] >= 50 ? '#d97706' : '#dc2626')) : '#9ca3af';
                        @endphp
                        <tr>
                            <td style="padding:10px 10px; border-bottom:1px solid #f3f4f6">
                                <div style="font-weight:600; color:#111827">{{ $t->indikator->kode ?? '—' }}</div>
                                <div style="font-size:11.5px; color:#6b7280">{{ $kelasAktif->nama }}</div>
                            </td>
                            <td style="padding:10px 10px; border-bottom:1px solid #f3f4f6; max-width:180px">
                                <div style="font-size:12.5px; color:#374151; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">
                                    {{ $t->indikator->deskripsi ?? '—' }}
                                </div>
                            </td>
                            <td style="padding:10px 10px; border-bottom:1px solid #f3f4f6">
                                <div style="font-size:12px; color:#374151; margin-bottom:4px">
                                    {{ $row['selesai'] }}/{{ $row['total'] }}
                                </div>
                                <div class="gr-prog">
                                    <div class="gr-prog-fill" style="width:{{ $row['pct'] }}%; background:{{ $warna }}"></div>
                                </div>
                            </td>
                            <td style="padding:10px 10px; border-bottom:1px solid #f3f4f6; text-align:center">
                                @if($row['avg'] !== null)
                                    <span style="font-size:14px; font-weight:700; color:{{ $warna }}">{{ $row['avg'] }}%</span>
                                @else
                                    <span style="color:#9ca3af; font-size:13px">—</span>
                                @endif
                            </td>
                            <td style="padding:10px 10px; border-bottom:1px solid #f3f4f6; text-align:center">
                                @if($row['generate'] !== 'selesai')
                                    <span class="gr-badge gr-badge-pending">Generate...</span>
                                @elseif($row['status'] === 'selesai')
                                    <span class="gr-badge gr-badge-selesai">Selesai</span>
                                @elseif($row['status'] === 'aktif')
                                    <span class="gr-badge gr-badge-aktif">Aktif</span>
                                @else
                                    <span class="gr-badge gr-badge-belum">Belum</span>
                                @endif
                            </td>
                            <td style="padding:10px 10px; border-bottom:1px solid #f3f4f6; text-align:center">
                                @if($t->status_generate === 'selesai')
                                    <a href="{{ route('guru.hasil.index', $t) }}"
                                       class="btn btn-outline btn-sm" style="font-size:11.5px">
                                        Lihat Hasil
                                    </a>
                                @else
                                    <a href="{{ route('guru.tugas.show', $t) }}"
                                       class="btn btn-outline btn-sm" style="font-size:11.5px">
                                        Lanjutkan
                                    </a>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                @endif
            </div>
        </div>

        {{-- Tips & Panduan --}}
        <div class="gr-tips-grid">
            <div class="gr-tips-card">
                <div style="display:flex; align-items:flex-start; gap:12px">
                    <div style="font-size:24px; flex-shrink:0">💡</div>
                    <div>
                        <div style="font-size:14px; font-weight:700; color:#111827; margin-bottom:6px">Tips Guru Hari Ini</div>
                        <p style="font-size:13px; color:#6b7280; line-height:1.6">
                            Gunakan analisis miskonsepsi untuk memberikan pendampingan yang tepat sasaran.
                            Fokus pada siswa dengan skor di bawah KKM {{ $kkm }}%.
                        </p>
                    </div>
                </div>
            </div>
            <div class="gr-tips-card">
                <div style="font-size:14px; font-weight:700; color:#111827; margin-bottom:10px">Panduan Singkat</div>
                @foreach([
                    'Buat tugas baru dengan memilih indikator',
                    'Gunakan bank soal agar soal dapat digunakan ulang',
                    'Analisis hasil untuk mengetahui miskonsepsi siswa',
                    'Berikan tindak lanjut sesuai hasil evaluasi',
                ] as $tip)
                <div class="gr-check-item">
                    <div class="gr-check-icon">✓</div>
                    <span>{{ $tip }}</span>
                </div>
                @endforeach
            </div>
        </div>

    </div>

    {{-- ===== KANAN: Sidebar ===== --}}
    <div>

        {{-- Tugas Terkini --}}
        <div class="al-card" style="margin-bottom:14px">
            <div class="al-card-head">
                <span class="al-card-title">Tugas Terkini</span>
                <a href="{{ route('guru.kelas.show', $kelasAktif) }}" class="muted" style="font-size:12px">Lihat semua</a>
            </div>
            <div class="al-card-body">
                @forelse($tugasTerbaru->take(3) as $row)
                    @php $sbadge = match($row['status']) {
                        'selesai' => ['kelas' => 'gr-sbadge-selesai', 'teks' => 'SELESAI'],
                        'aktif'   => ['kelas' => 'gr-sbadge-sebagian', 'teks' => 'SEBAGIAN'],
                        default   => ['kelas' => 'gr-sbadge-belum', 'teks' => 'BELUM SELESAI'],
                    }; @endphp
                    <div class="gr-task-item">
                        <span class="gr-sbadge {{ $sbadge['kelas'] }}">{{ $sbadge['teks'] }}</span>
                        <div class="gr-task-title">{{ $row['tugas']->indikator->deskripsi ?? $row['tugas']->indikator->kode ?? 'Tugas' }}</div>
                        <div class="gr-task-kelas">{{ $kelasAktif->nama }}</div>
                    </div>
                @empty
                    <div style="text-align:center; padding:16px 0; color:#9ca3af; font-size:13px">
                        Belum ada tugas.
                    </div>
                @endforelse
            </div>
        </div>

        {{-- Tombol Buat Tugas Baru --}}
        <a href="{{ route('guru.tugas.create', $kelasAktif) }}"
           class="btn btn-purple"
           style="width:100%; text-align:center; display:block; margin-bottom:14px; font-size:14px; padding:12px">
            + Buat Tugas Baru
        </a>

        {{-- Aksi Cepat --}}
        <div class="al-card" style="margin-bottom:14px">
            <div class="al-card-head">
                <span class="al-card-title">Aksi Cepat</span>
            </div>
            <div class="al-card-body">
                <div class="gr-quick-grid">
                    <a href="{{ route('guru.tugas.create', $kelasAktif) }}" class="gr-quick-item">
                        <div class="gr-quick-icon" style="background:#eff6ff">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px">
                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                            </svg>
                        </div>
                        <span class="gr-quick-lbl">Buat Tugas</span>
                    </a>
                    <a href="{{ route('guru.kelas.show', $kelasAktif) }}" class="gr-quick-item">
                        <div class="gr-quick-icon" style="background:#ecfdf5">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px">
                                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
                            </svg>
                        </div>
                        <span class="gr-quick-lbl">Pilih dari Bank</span>
                    </a>
                    <a href="{{ route('guru.tugas.create', $kelasAktif) }}" class="gr-quick-item">
                        <div class="gr-quick-icon" style="background:#fff7ed">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ea580c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px">
                                <circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/>
                                <line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/>
                            </svg>
                        </div>
                        <span class="gr-quick-lbl">Generate Soal AI</span>
                    </a>
                    <a href="{{ route('guru.kelas.show', $kelasAktif) }}" class="gr-quick-item">
                        <div class="gr-quick-icon" style="background:#f3e8ff">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px">
                                <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
                            </svg>
                        </div>
                        <span class="gr-quick-lbl">Lihat Hasil Kelas</span>
                    </a>
                    <a href="{{ route('guru.evaluasi.index', $kelasAktif) }}" class="gr-quick-item">
                        <div class="gr-quick-icon" style="background:#ecfdf5">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#0d9488" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px">
                                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
                            </svg>
                        </div>
                        <span class="gr-quick-lbl">Evaluasi Kelas</span>
                    </a>
                    <a href="{{ route('guru.kelas.show', $kelasAktif) }}" class="gr-quick-item">
                        <div class="gr-quick-icon" style="background:#ecfdf5">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px">
                                <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                                <circle cx="8.5" cy="7" r="4"/>
                                <line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/>
                            </svg>
                        </div>
                        <span class="gr-quick-lbl">Tambah Siswa</span>
                    </a>
                </div>
            </div>
        </div>

        {{-- Miskonsepsi Dominan --}}
        <div class="al-card">
            <div class="al-card-head">
                <span class="al-card-title">Miskonsepsi Dominan di Kelas</span>
                <a href="{{ route('guru.evaluasi.index', $kelasAktif) }}" class="muted" style="font-size:12px">Lihat detail</a>
            </div>
            <div class="al-card-body">
                @if($miskonsepsiDominan->isEmpty())
                    <div style="text-align:center; padding:16px 0; color:#9ca3af; font-size:13px">
                        Belum ada data miskonsepsi.
                    </div>
                @else
                    @foreach($miskonsepsiDominan as $m)
                        @php
                            $pct = $totalMiskonFrekuensi > 0
                                ? round($m->frekuensi / $totalMiskonFrekuensi * 100)
                                : 0;
                            $barColors = ['#ef4444','#f97316','#eab308','#06b6d4','#8b5cf6'];
                            $barColor  = $barColors[$loop->index] ?? '#9ca3af';
                        @endphp
                        <div class="gr-miskon-item">
                            <div class="gr-miskon-row">
                                <span class="gr-miskon-lbl" title="{{ $m->label }}">{{ $m->label }}</span>
                                <span class="gr-miskon-pct">{{ $pct }}%</span>
                            </div>
                            <div class="gr-miskon-track">
                                <div class="gr-miskon-fill" style="width:{{ $pct }}%; background:{{ $barColor }}"></div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>

    </div>

</div>
@endif

@endsection

@section('scripts')
<script>
(function () {
    const tren = @json($tren ?? []);
    if (!tren.length) return;

    const canvas = document.getElementById('trendCanvas');
    if (!canvas) return;

    const dpr = window.devicePixelRatio || 1;
    const W   = canvas.offsetWidth || 300;
    const H   = 150;
    canvas.width  = W * dpr;
    canvas.height = H * dpr;
    canvas.style.height = H + 'px';

    const ctx = canvas.getContext('2d');
    ctx.scale(dpr, dpr);

    const padL = 34, padR = 8, padT = 8, padB = 20;
    const innerW = W - padL - padR;
    const innerH = H - padT - padB;

    // Grid Y lines
    [0, 20, 40, 60, 80, 100].forEach(pct => {
        const y = padT + innerH - (pct / 100 * innerH);
        ctx.fillStyle = '#9ca3af';
        ctx.font = `${10}px sans-serif`;
        ctx.textAlign = 'right';
        ctx.fillText(pct + '%', padL - 4, y + 3.5);
        ctx.beginPath();
        ctx.moveTo(padL, y);
        ctx.lineTo(W - padR, y);
        ctx.strokeStyle = 'rgba(0,0,0,.06)';
        ctx.lineWidth = 1;
        ctx.stroke();
    });

    const n = tren.length;
    const pts = tren.map((d, i) => ({
        x: padL + (n <= 1 ? innerW / 2 : (i / (n - 1)) * innerW),
        y: d.avg !== null ? padT + innerH - (Math.min(100, Math.max(0, d.avg)) / 100 * innerH) : null,
    }));

    // Draw line
    ctx.beginPath();
    let started = false;
    pts.forEach(p => {
        if (p.y === null) { started = false; return; }
        if (!started) { ctx.moveTo(p.x, p.y); started = true; }
        else ctx.lineTo(p.x, p.y);
    });
    ctx.strokeStyle = '#7c3aed';
    ctx.lineWidth = 2.5;
    ctx.lineJoin = 'round';
    ctx.stroke();

    // Dots
    pts.forEach(p => {
        if (p.y === null) return;
        ctx.beginPath(); ctx.arc(p.x, p.y, 4, 0, Math.PI * 2);
        ctx.fillStyle = '#7c3aed'; ctx.fill();
        ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
        ctx.fillStyle = '#fff'; ctx.fill();
    });
})();
</script>
@endsection