{{-- resources/views/pages/dashboard/chart.blade.php --}}
@extends('layouts.app', ['class' => 'bg-gray-100'])

@section('content')
    @php
        $ID_COLS = [
            'Hide' => '__exclude__',
            'No' => '__no__',
            'Shift Date' => 'shift_date',
            'Shift' => 'shift',
            'Batch' => 'batch',
            'Gedung' => 'gedung',
            'Customer' => 'customer',
            'Material' => 'material',
            'Mesin' => 'mesin',

            'Team Group' => 'teamgroup',
            'Delivery' => 'delivery',
            'Width' => 'width',
            'Length' => 'length',
            'Weight' => 'weight',
            'Unit of Dimension' => 'unit_of_dimension',
            'Base Unit Measure' => 'base_unit_measure',

            'Tested By' => 'tested_by',
            'Checked By' => 'checked_by',
            'Supervisor By' => 'supervisor_by',

            'Tested At' => 'tested_at',
            'Checked At' => 'checked_at',
            'Supervisor At' => 'supervisor_at',
        ];
    @endphp

    @php
        // Querystring utk link Detail
        $passQsStr = http_build_query(request()->except('chart'));
        $passQs = $passQsStr ? '&' . $passQsStr : '';

        // ID terpilih (SUMBER KEBENARAN)
        $propIds = array_filter(array_map('intval', (array) request('properties', [])));
        $paramIds = array_filter(array_map('intval', (array) request('param_mesin', [])));

        $hasProps = !empty($propIds);
        $hasParams = !empty($paramIds);

        $propCol = $hasProps && $hasParams ? 'col-lg-6' : 'col-lg-12';
        $paramCol = $hasProps && $hasParams ? 'col-lg-6' : 'col-lg-12';
    @endphp

    @if (empty($hide_topnav))
        @include('layouts.navbars.auth.topnav', ['title' => ''])
    @endif

    {{-- HEADER --}}
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center gap-3">
                    <h6 class="mb-0">Dashboard</h6>

                    <div id="dashProgressWrap" style="width:180px;">
                        <div class="progress" style="height:6px;">
                            <div id="dashProgressBar" class="progress-bar progress-bar-striped progress-bar-animated"
                                style="width:0%">
                            </div>
                        </div>
                        <small id="dashProgressText" class="text-muted">
                            Mengambil data…
                        </small>
                        <small id="dashProgressETA" class="text-muted d-block" style="font-size:11px"></small>

                    </div>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ url($url_menu) }}" class="btn btn-secondary">
                        <i class="fas fa-circle-left me-1"></i> Kembali
                    </a>
                    <button id="btnExportExcel" class="btn btn-primary">
                        <i class="fas fa-file-excel me-1"></i> Export Excel
                    </button>
                    <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modalFilter"
                        title="Filter">
                        <i class="fas fa-filter"></i>
                    </button>
                    <button id="btnToggleTables" class="btn btn-outline-secondary" title="Tampilkan / Sembunyikan Tabel">
                        <i class="fas fa-table"></i>
                    </button>
                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        @if (empty($chart_keys))

            <div class="alert alert-info mx-1">
                Belum ada metrik terpilih. Silakan pilih <strong>Properties</strong> atau <strong>Parameter Mesin</strong>.
            </div>
        @else
            <div class="row">
                {{-- BLOK PROPERTIES --}}
                @if ($hasProps)
                    <div class="{{ $propCol }} mb-4">
                        <div class="card h-100">
                            <div class="card-header pb-0 text-center">
                                <h6 class="mb-0">Properties</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    @foreach ($chart_keys as $ckey)
                                        @php
                                            if (!str_starts_with($ckey, 'prop_')) {
                                                continue;
                                            }

                                            $id = (int) str_replace('prop_', '', $ckey);
                                            $title = $mst_properties->firstWhere('id', $id)->nama ?? 'Property';
                                        @endphp


                                        @php $canvasId = 'c_' . preg_replace('/[^a-zA-Z0-9_]/', '_', (string) $ckey); @endphp
                                        <div class="col-12 mb-4">
                                            <div class="card h-100">
                                                <div class="card-header pb-0 d-flex align-items-center justify-content-between">
                                                    <div class="chart-head position-relative w-100 text-center">
                                                        <h6 class="chart-title text-sm text-secondary m-0">
                                                            {{ $title }}
                                                        </h6>
                                                    </div>
                                                    <div class="ms-2 flex-shrink-0">
                                                        <button type="button" class="btn btn-sm btn-outline-success btn-download-chart"
                                                            data-canvas="{{ $canvasId }}" data-title="{{ $title }}">
                                                            PNG
                                                        </button>
                                                        <a class="btn btn-sm btn-outline-primary btn-detail-chart" target="_blank"
                                                            data-base-href="{{ url($url_menu . '/detail') . '?chart=' . urlencode((string) $ckey) . $passQs }}"
                                                            href="{{ url($url_menu . '/detail') . '?chart=' . urlencode((string) $ckey) . $passQs }}">
                                                            Detail
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                                    <div class="chart-wrapper" style="position:relative;height:260px">
                                                        <div class="chart-spinner d-none"
                                                            style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.8);z-index:5;">
                                                            <div class="text-center">
                                                                <div class="spinner-border text-primary" role="status">
                                                                </div>

                                                                <div class="mt-2 small text-muted chart-progress-text">
                                                                    Mengambil data…
                                                                </div>

                                                                <div class="small text-muted chart-progress-eta"></div>
                                                            </div>
                                                        </div>
                                                        <canvas id="{{ $canvasId }}"></canvas>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- BLOK PARAMETER MESIN --}}
                @if ($hasParams)
                    <div class="{{ $paramCol }} mb-4">
                        <div class="card h-100">
                            <div class="card-header pb-0 text-center">
                                <h6 class="mb-0">Parameter Mesin</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    @foreach ($chart_keys as $ckey)
                                        @php
                                            //  HANYA PARAMETER MESIN
                                            if (!str_starts_with($ckey, 'param_')) {
                                                continue;
                                            }

                                            $id = (int) str_replace('param_', '', $ckey);
                                            $title = $mst_parameter_mesin->firstWhere('id', $id)->nama ?? 'Parameter';
                                        @endphp


                                        @php $canvasId = 'c_' . preg_replace('/[^a-zA-Z0-9_]/', '_', (string) $ckey); @endphp
                                        <div class="col-12 mb-4">
                                            <div class="card h-100">
                                                <div class="card-header pb-0 d-flex align-items-center justify-content-between">
                                                    <div class="chart-head position-relative w-100 text-center">
                                                        <h6 class="chart-title text-sm text-secondary m-0">
                                                            {{ $title }}

                                                        </h6>
                                                    </div>
                                                    <div class="ms-2 flex-shrink-0">
                                                        <button type="button" class="btn btn-sm btn-outline-success btn-download-chart"
                                                            data-canvas="{{ $canvasId }}" data-title="{{ $title }}">
                                                            PNG
                                                        </button>
                                                        <a class="btn btn-sm btn-outline-primary btn-detail-chart" target="_blank"
                                                            data-base-href="{{ url($url_menu . '/detail') . '?chart=' . urlencode((string) $ckey) . $passQs }}"
                                                            href="{{ url($url_menu . '/detail') . '?chart=' . urlencode((string) $ckey) . $passQs }}">
                                                            Detail
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                                    <div class="chart-wrapper" style="position:relative;height:260px">
                                                        <div class="chart-spinner d-none"
                                                            style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.8);z-index:5;">
                                                            <div class="text-center">
                                                                <div class="spinner-border text-primary" role="status"
                                                                    style="width:2rem;height:2rem"></div>
                                                                <div class="mt-2 small text-muted chart-progress-text">
                                                                    Mengambil data...</div>
                                                                <div class="small text-muted chart-progress-eta"></div>
                                                            </div>
                                                        </div>
                                                        <canvas id="{{ $canvasId }}"></canvas>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            {{-- =======================
            TABEL 1: DATA BATCH
            ======================== --}}
            <div class="card mb-4 deferred">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Tabel Batch</h6>
                    <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#collapseBatch">
                        Expand / Collapse
                    </button>
                </div>

                <div id="collapseBatch" class="collapse show">
                    <div class="card-body pt-0">
                        <div style="width:100%; overflow-x:auto;">
                            <table class="table display nowrap" id="tbl_batch" style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        @foreach ($ID_COLS as $label => $key)
                                            <th>{{ $label }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody></tbody>
                                {{-- AJAX --}}
                            </table>
                        </div>
                    </div>
                </div>
            </div>


            {{-- =======================
            TABEL 2: PROPERTIES
            ======================== --}}
            @if ($hasProps)
                @php
                    // Kelompokkan header property menjadi: {Nama Property} -> [Nilai, Min, Target, Max, Allowance]
                    $propGroups = [];
                    foreach ($HPROP as $label => $key) {
                        if (preg_match('/^(.*)\s—\s(Min|Target|Max|Allowance)$/u', $label, $m)) {
                            $base = trim($m[1]);
                            $sub = $m[2];
                            $propGroups[$base] = $propGroups[$base] ?? [
                                'Nilai' => null,
                                'Min' => null,
                                'Target' => null,
                                'Max' => null,
                                'Allowance' => null,
                            ];
                            $propGroups[$base][$sub] = $key;
                        } else {
                            $base = trim($label);
                            $propGroups[$base] = $propGroups[$base] ?? [
                                'Nilai' => null,
                                'Min' => null,
                                'Target' => null,
                                'Max' => null,
                                'Allowance' => null,
                            ];
                            $propGroups[$base]['Nilai'] = $key; // kolom nilai aktual
                        }
                    }
                    // urutan sub-kolom yang dipakai
                    $SUBS = ['Nilai', 'Min', 'Target', 'Max'];
                @endphp

                <div class="card mb-4 deferred">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">Tabel Properties</h6>
                        <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#collapseProps">
                            Expand / Collapse
                        </button>
                    </div>
                    <div id="collapseProps" class="collapse show">
                        <div class="card-body pt-0">
                            <div style="width:100%; overflow-x:auto;">
                                <table class="table display nowrap" id="tbl_props" style="width:100%">
                                    <thead class="thead-light">
                                        {{-- Header baris-1: kolom identitas (rowspan 2) + grup property (colspan 5) --}}
                                        {{-- <tr>
                                            @foreach ($ID_COLS as $label => $key)
                                            <th rowspan="2" class="align-middle sticky-col s{{ $loop->iteration }}">
                                                {{ $label }}
                                            </th>
                                            @endforeach

                                            @foreach ($propGroups as $pname => $cols)
                                            <th colspan="5" class="text-center align-middle bg-info-subtle">{{ $pname }}
                                            </th>
                                            @endforeach
                                        </tr> --}}
                                        {{-- Header baris-2: sub kolom tiap property --}}
                                        {{-- <tr>
                                            @foreach ($propGroups as $pname => $cols)
                                            @foreach ($SUBS as $s)
                                            <th class="text-center">{{ $s }}</th>
                                            @endforeach
                                            @endforeach
                                        </tr> --}}
                                    </thead>
                                    <tbody></tbody> {{-- DIISI VIA AJAX --}}

                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- ============================
            TABEL 3: PARAMETER MESIN
            ============================= --}}
            @if ($hasParams)
                <div class="card mb-4 deferred">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">Tabel Parameter Mesin</h6>
                        <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#collapseParams">
                            Expand / Collapse
                        </button>
                    </div>
                    <div id="collapseParams" class="collapse show">
                        <div class="card-body pt-0">
                            <div style="width:100%; overflow-x:auto;">
                                <table class="table display nowrap" id="tbl_params" style="width:100%">
                                    <thead class="thead-light">
                                        {{-- <tr>
                                            @foreach ($ID_COLS as $label => $key)
                                            <th class="sticky-col s{{ $loop->iteration }}">{{ $label }}</th>
                                            @endforeach

                                            @foreach ($HPARAM as $label => $key)
                                            <th>{{ $label }}</th>
                                            @endforeach
                                        </tr> --}}
                                    </thead>
                                    <tbody></tbody> {{-- DIISI VIA AJAX --}}

                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endif
    </div>

    @includeIf('pages.dashboard.partials.modal-filter')

    <style>
        .chart-head {
            position: relative;
            min-height: 32px
        }

        .chart-title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            margin: 0
        }

        .chart-wrapper canvas {
            display: block;
            width: 100% !important;
            height: 100% !important;
        }

        #modalFilter .form-label {
            font-weight: 700;
            color: #2b3a55
        }

        /* header utama */
        table.dataTable thead th {
            background-color: #00b7bd4f !important;
            color: #2b2b2b;
            font-weight: 600;
        }

        /* cegah wrap supaya semua kolom tampil */
        table.dataTable th,
        table.dataTable td {
            white-space: nowrap;
        }

        /* FixedColumns background match */
        div.dtfc-left-top-block,
        div.dtfc-left-body-block,
        div.dtfc-left-bottom-block {
            background: #fff !important;
        }

        table.dataTable.display thead th.dtfc-fixed-left,
        table.dataTable.display tbody td.dtfc-fixed-left {
            background: #fff !important;
        }

        .dtfc-fixed-left .dataTables_scrollHeadInner thead th {
            background-color: #00b7bd4f !important;
        }

        .dtfc-fixed-left {
            box-shadow: 2px 0 0 rgba(0, 0, 0, .06);
            z-index: 3;
        }

        #dashProgressBar {
            transition: width 0.4s ease;
        }

        .batch-exclude {
            appearance: none;
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border: 2px solid #4b6262;
            border-radius: 4px;
            display: inline-grid;
            place-content: center;
            background: #fff;
            cursor: pointer;
        }

        .batch-exclude::before {
            content: '';
            width: 9px;
            height: 5px;
            border-left: 2px solid #0c5d5d;
            border-bottom: 2px solid #0c5d5d;
            transform: rotate(-45deg) scale(0);
            transition: transform 0.12s ease-in-out;
        }

        .batch-exclude:checked::before {
            transform: rotate(-45deg) scale(1);
        }

        .batch-exclude:focus-visible {
            outline: 2px solid #99c8c8;
            outline-offset: 2px;
        }
    </style>

    {{-- form export --}}
    <form id="exportForm" action="{{ route('dashboard.export') }}" method="POST" class="d-none">
        @csrf
        <input type="hidden" name="images_json" id="images_json">
        @php
            if (!function_exists('renderHidden')) {
                function renderHidden($name, $value)
                {
                    if (is_array($value)) {
                        foreach ($value as $k => $v) {
                            renderHidden($name . '[' . $k . ']', $v);
                        }
                    } else {
                        echo '<input type="hidden" name="' . e($name) . '" value="' . e((string) $value) . '">';
                    }
                }
            }
        @endphp

        @foreach (request()->all() as $k => $v)
            @php renderHidden($k, $v); @endphp
        @endforeach

    </form>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.dataTables.min.css" />
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>

    <script>
        (function () {

            /* =========================================================
             *  GLOBAL FLAG
             * ========================================================= */
            const IS_SPECIAL_SPEC = '{{ request('spec_source') }}' === 'special';

            // batch yang di-hide dari chart (sinkron lintas tabel)
            const excludedBatches = new Set();
            window.getDashboardExcludedBatches = () => Array.from(excludedBatches);
            let isSyncingExclude = false;
            let isReloadingCharts = false;
            let pendingReload = false;
            let reloadTimer = null;

            function setExcludeState(batchId, checked) {
                const id = String(batchId);
                if (checked) {
                    excludedBatches.add(id);
                } else {
                    excludedBatches.delete(id);
                }
            }

            function syncExcludeCheckboxes(batchId) {
                const id = String(batchId);
                document.querySelectorAll(`input.batch-exclude[data-batch-id="${id}"]`).forEach(cb => {
                    cb.checked = excludedBatches.has(id);
                });
            }

            function buildChartQuery() {
                const qs = new URLSearchParams(window.location.search);
                excludedBatches.forEach(id => qs.append('exclude_batch[]', id));
                return qs.toString();
            }

            /* =========================================================
             *  UTIL: HITUNG SCALE Y (MIN & MAX KE TENGAH)
             * ========================================================= */
            function computeYScale(values, boundary) {
                const nums = [];
                const push = arr => {
                    if (!Array.isArray(arr)) return;
                    arr.forEach(v => {
                        const n = Number(v);
                        if (v != null && !isNaN(n)) nums.push(n);
                    });
                };

                push(values);
                if (boundary) {
                    push(boundary.min);
                    push(boundary.max);
                    push(boundary.target);
                }

                if (!nums.length) return null;

                const min = Math.min(...nums);
                const max = Math.max(...nums);
                const SCALE_MODE = '{{ request('y_scale_mode', 'normal') }}';

                const PAD_MAP = {
                    tight: 0.15,
                    normal: 0.35,
                    loose: 0.60
                };

                const padFactor = PAD_MAP[SCALE_MODE] ?? 0.35;
                const pad = (max - min || 1) * padFactor;


                return {
                    min: min - pad,
                    max: max + pad
                };
            }

            /* =========================================================
             *  DATASET BOUNDARY (ALLOWANCE KONDISIONAL)
             * ========================================================= */
            function boundaryDatasets(bound) {
                if (!bound) return [];
                const len = (bound.min || []).length;
                const line = arr => (arr && arr.length ? arr : Array(len).fill(null));

                const isolatedDot = ctx => {
                    const v = ctx.raw;
                    if (v == null) return 0;
                    const d = ctx.dataset.data || [];
                    const i = ctx.dataIndex;
                    const l = i > 0 ? d[i - 1] : null;
                    const r = i < d.length - 1 ? d[i + 1] : null;
                    return (l == null && r == null) ? 4 : 0;
                };

                const sets = [{
                    label: 'min',
                    data: line(bound.min),
                    borderColor: '#000',
                    borderWidth: 3,
                    tension: 0,
                    order: 1,
                    pointRadius: 0,
                    pointHoverRadius: 0,
                    spanGaps: false // garis terputus (bolong) di null
                },
                {
                    label: 'target',
                    data: line(bound.target),
                    borderColor: '#000',
                    borderDash: [8, 6],
                    borderWidth: 2,
                    tension: 0,
                    order: 1,
                    pointRadius: 0,
                    pointHoverRadius: 0,
                    spanGaps: false
                },
                {
                    label: 'max',
                    data: line(bound.max),
                    borderColor: '#000',
                    borderDash: [2, 5],
                    borderWidth: 2,
                    tension: 0,
                    order: 1,
                    pointRadius: 0,
                    pointHoverRadius: 0,
                    spanGaps: false
                }
                ];

                return sets;
            }

            /* =========================================================
             *  PLUGIN: MONTH GUIDE
             * ========================================================= */
            const MonthGuide = {
                id: 'monthGuide',
                afterDatasetsDraw(chart) {
                    const cfg = chart.config._config.userCfg || {};
                    const monthLabels = cfg.monthLabels;
                    const monthStartsIdx = cfg.monthStartsIdx;
                    const yearLabels = cfg.yearLabels;
                    const yearStartsIdx = cfg.yearStartsIdx;
                    const hasMultiYear = yearStartsIdx && yearStartsIdx.length > 1;

                    const {
                        ctx,
                        chartArea,
                        scales: {
                            x
                        }
                    } = chart;
                    if (!chartArea) return;

                    // --- Year separator (solid red line) ---
                    if (hasMultiYear) {
                        yearStartsIdx.forEach((s, i) => {
                            if (i === 0) return;
                            const xp = x.getPixelForValue(s - 0.5);

                            ctx.save();
                            ctx.setLineDash([]);
                            ctx.lineWidth = 2.5;
                            ctx.strokeStyle = 'rgba(180,40,40,0.7)';
                            ctx.beginPath();
                            ctx.moveTo(xp, chartArea.top);
                            ctx.lineTo(xp, chartArea.bottom);
                            ctx.stroke();
                            ctx.restore();
                        });

                        // Year labels di atas (baris pertama, di atas label bulan)
                        ctx.save();
                        ctx.font = '700 12px system-ui';
                        ctx.fillStyle = 'rgba(180,40,40,0.9)';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'top';
                        yearStartsIdx.forEach((s, i) => {
                            const e = (i + 1 < yearStartsIdx.length) ?
                                yearStartsIdx[i + 1] - 1 :
                                chart.data.labels.length - 1;
                            const mid = (s + e) / 2;
                            ctx.fillText(yearLabels[i], x.getPixelForValue(mid), chartArea.top + 2);
                        });
                        ctx.restore();
                    }

                    // --- Month separator lines (dashed) ---
                    if (!monthLabels || !monthStartsIdx) return;

                    ctx.save();
                    ctx.setLineDash([5, 4]);
                    ctx.strokeStyle = 'rgba(0,0,0,.35)';
                    monthStartsIdx.forEach((s, i) => {
                        if (i === 0) return;
                        const xp = x.getPixelForValue(s - .5);
                        ctx.beginPath();
                        ctx.moveTo(xp, chartArea.top);
                        ctx.lineTo(xp, chartArea.bottom);
                        ctx.stroke();
                    });
                    ctx.restore();

                    // Month labels (baris kedua jika multi-year, baris pertama jika single-year)
                    const monthLabelY = hasMultiYear ? chartArea.top + 16 : chartArea.top + 2;
                    ctx.save();
                    ctx.font = '600 12px system-ui';
                    ctx.fillStyle = '#334';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'top';
                    monthStartsIdx.forEach((s, i) => {
                        const e = (i + 1 < monthStartsIdx.length) ?
                            monthStartsIdx[i + 1] - 1 :
                            chart.data.labels.length - 1;
                        const mid = (s + e) / 2;
                        ctx.fillText(monthLabels[i], x.getPixelForValue(mid), monthLabelY);
                    });
                    ctx.restore();
                }
            };

            function formatETA(sec) {
                if (!sec || sec <= 0) return null;
                const m = Math.floor(sec / 60);
                const s = sec % 60;
                return m > 0 ? `${m}m ${s}s` : `${s}s`;
            }

            function updateChartSpinners(pct, batch, eta) {
                document.querySelectorAll('.chart-spinner:not(.d-none)').forEach(sp => {
                    const txt = sp.querySelector('.chart-progress-text');
                    const etaEl = sp.querySelector('.chart-progress-eta');

                    if (txt) {
                        txt.textContent = batch ?
                            `Batch: ${batch} (${pct}%)` :
                            `Mengambil data… ${pct}%`;
                    }

                    if (etaEl) {
                        etaEl.textContent = eta ? `Estimasi ± ${eta}` : '';
                    }
                });
            }



            /* =========================================================
             *  PROGRESS BAR (DASHBOARD)
             * ========================================================= */
            const Progress = (() => {
                const wrap = document.getElementById('dashProgressWrap');
                const bar = document.getElementById('dashProgressBar');
                const text = document.getElementById('dashProgressText');

                if (!wrap || !bar || !text) {
                    return {
                        init() { },
                        step() { },
                        done() { },
                        isDone() {
                            return false;
                        }
                    };
                }

                let total = 0;
                let curr = 0;
                let _done = false;

                const etaEl = document.getElementById('dashProgressETA');

                return {
                    isDone() {
                        return _done;
                    },
                    init(count) {
                        total = Math.max(1, count);
                        curr = 0;
                        _done = false;
                        wrap.style.display = '';
                        wrap.style.opacity = '1';
                        bar.style.width = '0%';
                        text.textContent = 'Memulai…';
                        if (etaEl) etaEl.textContent = '';
                    },
                    step(label = null) {
                        if (_done) return;
                        curr++;
                        const raw = (curr / total) * 100;
                        const pct = Math.min(95, Math.round(raw));
                        bar.style.width = pct + '%';
                    },

                    done() {
                        if (_done) return;
                        _done = true;
                        bar.style.width = '100%';
                        text.textContent = 'Selesai';
                        if (etaEl) etaEl.textContent = '';

                        // Hide all remaining chart spinners
                        document.querySelectorAll('.chart-spinner:not(.d-none)').forEach(sp => {
                            sp.classList.add('d-none');
                        });

                        setTimeout(() => {
                            wrap.style.opacity = '0';
                            wrap.style.transition = 'opacity 0.5s ease';
                            setTimeout(() => {
                                wrap.style.display = 'none';
                                wrap.style.transition = '';
                            }, 500);
                        }, 800);
                    }
                };
            })();

            window.__charts = window.__charts || {};
            window.__chartObservers = window.__chartObservers || {};

            function chartPixelRatio() {
                return Math.max(window.devicePixelRatio || 1, 4); // Resolusi ditingkatkan (min 4x)
            }

            function observeChartResize(canvasId, chart, canvas) {
                if (window.__chartObservers[canvasId]) {
                    window.__chartObservers[canvasId].disconnect();
                }

                const wrapper = canvas.closest('.chart-wrapper');
                if (!wrapper || !window.ResizeObserver) return;

                const observer = new ResizeObserver(() => {
                    chart.resize();
                    chart.update('none');
                });
                observer.observe(wrapper);
                window.__chartObservers[canvasId] = observer;
            }


            /* =========================================================
             *  RENDER CHART (EXPOSE KE WINDOW)
             * ========================================================= */
            window.renderChart = function renderChart(canvasId, cfg) {
                if (!cfg || !cfg.values || cfg.values.length === 0) {
                    if (window.__charts[canvasId]) {
                        window.__charts[canvasId].destroy();
                        delete window.__charts[canvasId];
                    }
                    const canvas = document.getElementById(canvasId);
                    if (canvas) {
                        const ctx = canvas.getContext('2d');
                        if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
                    }
                    return;
                }

                const values = cfg.values || [];
                const labels = (cfg.labels || []).map(String);
                const batchIds = (cfg.batchIds || []).map(String);
                const machineNames = cfg.machineNames || [];
                const yTitle = cfg.yTitle || '';
                const indexLabels = values.map((_, i) => i + 1);

                const yScale = computeYScale(values, cfg.boundary);

                const HL = new Set((cfg.highlight || []).map(Number));

                const starts = Array.isArray(cfg.monthStartsIdx) ? cfg.monthStartsIdx.slice() : [0];
                if (starts[0] !== 0) starts.unshift(0);
                const ranges = starts.map((s, i) => [s, (i + 1 < starts.length ? starts[i + 1] - 1 : values.length -
                    1)]);

                const uniq = [];
                machineNames.forEach(n => {
                    const nm = n || 'Tanpa Nama';
                    if (!uniq.includes(nm)) uniq.push(nm);
                });

                const COLORS = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b'];

                const isHL = i => HL.has(i);

                const datasets = [];

                uniq.forEach((nm, uidx) => {
                    const color = COLORS[uidx % COLORS.length];
                    const fullData = values.map((v, i) =>
                        machineNames[i] === nm ? v : null
                    );

                    // Split per bulan supaya garis tidak nyambung antar bulan
                    ranges.forEach((rg, ridx) => {
                        const [a, b] = rg;
                        datasets.push({
                            label: nm,
                            _hideLegend: ridx !== 0,
                            data: fullData.map((v, i) => (i >= a && i <= b) ? v : null),
                            borderColor: color,
                            borderWidth: 3,
                            tension: 0,
                            spanGaps: true, // span gaps DALAM bulan saja
                            order: 10,

                            pointRadius: ctx =>
                                ctx.raw == null ? 0 : (isHL(ctx.dataIndex) ? 7 : 3),

                            pointHoverRadius: ctx =>
                                ctx.raw == null ? 0 : (isHL(ctx.dataIndex) ? 9 : 6),

                            pointStyle: ctx =>
                                ctx.raw == null ? 'circle' : (isHL(ctx.dataIndex) ?
                                    'triangle' : 'circle')
                        });
                    });
                });


                boundaryDatasets(cfg.boundary).forEach(ds => {
                    ranges.forEach((rg, ridx) => {
                        const [a, b] = rg;
                        datasets.push({
                            ...ds,
                            _hideLegend: ridx !== 0,
                            data: ds.data.map((v, i) => (i >= a && i <= b) ? v : null)
                        });
                    });
                });

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

                //  DESTROY chart lama jika canvas sudah pernah dipakai
                if (window.__charts[canvasId]) {
                    window.__charts[canvasId].destroy();
                    delete window.__charts[canvasId];
                }
                if (window.__chartObservers[canvasId]) {
                    window.__chartObservers[canvasId].disconnect();
                    delete window.__chartObservers[canvasId];
                }

                const chart = new Chart(canvas.getContext('2d'), {
                    type: 'line',
                    data: {
                        labels: indexLabels,
                        datasets
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        devicePixelRatio: chartPixelRatio(),
                        interaction: {
                            mode: 'nearest',
                            intersect: false
                        },
                        plugins: {
                            legend: {
                                position: 'right',
                                labels: {
                                    filter: (item, data) =>
                                        !data.datasets[item.datasetIndex]._hideLegend
                                },
                                // Toggle SEMUA segmen yang labelnya sama (lintas bulan)
                                onClick(e, legendItem, legend) {
                                    const chart = legend.chart;
                                    const dsIndex = legendItem.datasetIndex;
                                    const clickedLabel = chart.data.datasets[dsIndex]?.label;
                                    if (!clickedLabel) return;

                                    const idxs = [];
                                    chart.data.datasets.forEach((ds, idx) => {
                                        if (ds.label === clickedLabel) idxs.push(idx);
                                    });

                                    const anyVisible = idxs.some(idx => !chart.getDatasetMeta(idx).hidden);
                                    idxs.forEach(idx => {
                                        chart.getDatasetMeta(idx).hidden = anyVisible ? true : null;
                                    });
                                    chart.update();
                                }
                            },
                            tooltip: {
                                mode: 'nearest',
                                intersect: false,
                                callbacks: {
                                    title: items =>
                                        `No: ${indexLabels[items[0].dataIndex]}`,
                                    label: it => [
                                        `Mesin : ${it.dataset.label}`,
                                        `No    : ${indexLabels[it.dataIndex]}`,
                                        `Batch : ${labels[it.dataIndex] ?? '-'}`,
                                        `Nilai : ${it.formattedValue}`
                                    ]
                                }
                            }
                        },
                        scales: {
                            x: {
                                title: {
                                    display: true,
                                    text: 'Nomor Urut'
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: yTitle
                                },
                                ...(yScale ? {
                                    min: yScale.min,
                                    max: yScale.max
                                } : {})
                            }
                        }
                    },
                    plugins: [MonthGuide]
                });

                // sss SIMPAN INSTANCE chart
                window.__charts[canvasId] = chart;

                // simpan config custom kamu (bulan + tahun)
                chart.config._config.userCfg = {
                    monthLabels: cfg.monthLabels || null,
                    monthStartsIdx: cfg.monthStartsIdx || null,
                    yearLabels: cfg.yearLabels || null,
                    yearStartsIdx: cfg.yearStartsIdx || null
                };

                observeChartResize(canvasId, chart, canvas);
                requestAnimationFrame(() => {
                    chart.resize();
                    chart.update('none');
                });

            };

            // reload chart sesuai exclude_batch, dengan antrian saat request bertumpuk
            async function reloadCharts() {
                if (!Progress.isDone()) {
                    pendingReload = true;
                    return;
                }
                if (isReloadingCharts) {
                    pendingReload = true;
                    return;
                }
                isReloadingCharts = true;

                try {
                    const qs = buildChartQuery();

                    for (const key of CHART_KEYS) {
                        const canvasId = 'c_' + key.replace(/[^a-zA-Z0-9_]/g, '_');
                        const canvas = document.getElementById(canvasId);
                        if (!canvas) continue;

                        const wrapper = canvas.closest('.chart-wrapper');
                        const spinner = wrapper?.querySelector('.chart-spinner');
                        spinner?.classList.remove('d-none');

                        try {
                            const url = `{{ route('dashboard.chartSingle') }}?chart=${encodeURIComponent(key)}${qs ? '&' + qs : ''}`;
                            const res = await fetch(url, {
                                headers: {
                                    'X-Requested-With': 'XMLHttpRequest'
                                }
                            });
                            const cfg = await res.json();
                            renderChart(canvasId, cfg);
                        } catch (e) {
                            console.error('Chart reload error:', key, e);
                        } finally {
                            spinner?.classList.add('d-none');
                        }
                    }
                } finally {
                    isReloadingCharts = false;
                    if (pendingReload) {
                        pendingReload = false;
                        reloadCharts();
                    }
                }
            }
            let etaPoller = null;

            function startETAPoller() {
                stopETAPoller();

                etaPoller = setInterval(async () => {
                    if (Progress.isDone()) {
                        stopETAPoller();
                        return;
                    }

                    try {
                        const res = await fetch('{{ route('dashboard.batchProgress') }}', {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        });

                        const data = await res.json();
                        if (!data || Progress.isDone()) return;

                        const pct = data.percent ?? 0;
                        const batch = data.batch ?? '';
                        const eta = formatETA(data.eta);

                        const txt = document.getElementById('dashProgressText');
                        const etaEl = document.getElementById('dashProgressETA');

                        if (pct >= 100) {
                            if (txt) txt.textContent = 'Data siap, memproses chart…';
                            if (etaEl) etaEl.textContent = '';
                            stopETAPoller();
                        } else {
                            if (txt) {
                                txt.textContent = batch ?
                                    `Batch: ${batch} (${pct}%)` :
                                    `Mengambil data… ${pct}%`;
                            }
                            if (etaEl) {
                                etaEl.textContent = eta ? `Estimasi ± ${eta}` : '';
                            }
                        }

                        updateChartSpinners(pct, batch, eta);
                    } catch (e) {
                        // silent fail
                    }
                }, 1000);
            }

            function stopETAPoller() {
                if (etaPoller) {
                    clearInterval(etaPoller);
                    etaPoller = null;
                }
            }


            /* =========================================================
             *  RENDER SEMUA CHART SEQUENTIALLY + DEFER TABLES
             * ========================================================= */
            const CHART_KEYS = @json($chart_keys ?? []);
            // Progress.init(CHART_KEYS.length);


            // Progress.init(TOTAL_CANVAS);


            async function renderChartsParallel(limit = 1) {
                let idx = 0;

                async function worker() {
                    while (idx < CHART_KEYS.length) {
                        const key = CHART_KEYS[idx++];
                        const canvasId = 'c_' + key.replace(/[^a-zA-Z0-9_]/g, '_');
                        const canvas = document.getElementById(canvasId);
                        if (!canvas) {
                            Progress.step(key);
                            continue;
                        }

                        const wrapper = canvas.closest('.chart-wrapper');

                        const spinner = wrapper?.querySelector('.chart-spinner');
                        spinner?.classList.remove('d-none');

                        const qs = buildChartQuery();
                        try {
                            const start = performance.now();

                            const res = await fetch(
                                `{{ route('dashboard.chartSingle') }}?chart=${encodeURIComponent(key)}${qs ? '&' + qs : ''}`,
                                {
                                    headers: {
                                        'X-Requested-With': 'XMLHttpRequest'
                                    }
                                }
                            );

                            const cfg = await res.json();
                            // console.log('CFG', key, cfg);

                            const chartTitle = cfg.yTitle || cfg.title || key;

                            renderChart(canvasId, cfg);

                            const elapsed = performance.now() - start;
                            if (elapsed < 300) {
                                await new Promise(r => setTimeout(r, 300 - elapsed));
                            }

                            Progress.step(chartTitle);

                        } catch (e) {
                            console.error('Chart error:', key, e);
                            Progress.step('Gagal memuat chart');
                        } finally {
                            spinner?.classList.add('d-none');

                        }
                    }
                }

                Progress.init(CHART_KEYS.length);

                startETAPoller();

                await Promise.all(Array.from({
                    length: limit
                }, worker));
                stopETAPoller();

                Progress.done();
                if (pendingReload) {
                    pendingReload = false;
                    reloadCharts();
                }
                // LOAD TABLE BELAKANGAN
                loadTables();

                function formatDate(v) {
                    if (!v) return '-';

                    try {
                        const d = new Date(v);
                        if (isNaN(d)) return v;

                        const day = String(d.getDate()).padStart(2, '0');
                        const month = d.toLocaleString('en-US', {
                            month: 'short'
                        });
                        const year = d.getFullYear();

                        return `${day}-${month}-${year}`;
                    } catch {
                        return v;
                    }
                }



                function getBatchId(row) {
                    return row?.batch_id ?? row?.id_batch ?? null;
                }

                function renderExcludeCell(batchId) {
                    if (!batchId) {
                        return '<td class="text-center">-</td>';
                    }
                    const checked = excludedBatches.has(String(batchId)) ? 'checked' : '';
                    return `<td class="text-center">
                                            <input type="checkbox" class="batch-exclude" data-batch-id="${batchId}" ${checked}>
                                        </td>`;
                }

                function renderBatchTable(rows, ID_COLS, HBASE) {
                    const tb = document.querySelector('#tbl_batch tbody');
                    if (!tb) return;

                    tb.innerHTML = '';

                    const keys = Object.values(HBASE);

                    rows.forEach((r, i) => {
                        let html = '';

                        keys.forEach(key => {
                            let v = '-';

                            if (key === '__exclude__') {
                                html += renderExcludeCell(getBatchId(r));
                                return;
                            }

                            if (key === '__no__') {
                                v = i + 1;
                            } else if (key === 'shift_date' && r[key]) {
                                v = formatDate(r[key]);
                            } else {
                                v = r[key] ?? '-';
                            }

                            html += `<td>${v}</td>`;
                        });

                        tb.insertAdjacentHTML('beforeend', `<tr>${html}</tr>`);
                    });
                }



                function renderPropertiesTable(rows, ID_COLS, HPROP) {
                    const tb = document.querySelector('#tbl_props tbody');
                    if (!tb || !HPROP || !Object.keys(HPROP).length) return;

                    // grouping sama persis seperti Blade
                    const propGroups = {};
                    Object.entries(HPROP).forEach(([label, key]) => {
                        const m = label.match(/^(.*)\s—\s(Min|Target|Max|Allowance)$/u);
                        const base = m ? m[1].trim() : label.trim();
                        const sub = m ? m[2] : 'Nilai';

                        if (!propGroups[base]) {
                            propGroups[base] = {
                                Nilai: null,
                                Min: null,
                                Target: null,
                                Max: null,
                                Allowance: null
                            };
                        }
                        propGroups[base][sub] = key;
                    });

                    const SUBS = ['Nilai', 'Min', 'Target', 'Max'];
                    tb.innerHTML = '';

                    rows.forEach((r, i) => {
                        let html = '';

                        /* ===============================
                         *   KOLOM IDENTITAS (ID_COLS)
                         * =============================== */
                        Object.values(ID_COLS).forEach(key => {
                            let v = '-';

                            if (key === '__exclude__') {
                                html += renderExcludeCell(getBatchId(r));
                                return;
                            }

                            if (key === '__no__') {
                                v = i + 1;
                            } else if (key === 'shift_date' && r[key]) {
                                v = formatDate(r[key]);
                            } else {
                                v = r[key] ?? '-';
                            }

                            html += `<td>${v}</td>`;
                        });

                        /* ===============================
                         *   KOLOM PROPERTY
                         * =============================== */
                        Object.values(propGroups).forEach(cols => {
                            SUBS.forEach(s => {
                                const k = cols[s];
                                let v = k ? r[k] : null;
                                v = typeof v === 'number' ? v.toFixed(2) : (v ?? '-');
                                html += `<td class="text-center">${v}</td>`;
                            });
                        });

                        tb.insertAdjacentHTML('beforeend', `<tr>${html}</tr>`);
                    });
                }

                function buildPropertiesHeader(tableSel, ID_COLS, HPROP) {
                    const thead = document.querySelector(`${tableSel} thead`);
                    if (!thead) return;

                    // grouping sama dengan server
                    const propGroups = {};
                    Object.entries(HPROP).forEach(([label, key]) => {
                        const m = label.match(/^(.*)\s—\s(Min|Target|Max|Allowance)$/u);
                        const base = m ? m[1].trim() : label.trim();
                        const sub = m ? m[2] : 'Nilai';

                        if (!propGroups[base]) {
                            propGroups[base] = {
                                Nilai: null,
                                Min: null,
                                Target: null,
                                Max: null,
                                Allowance: null
                            };
                        }
                        propGroups[base][sub] = key;
                    });

                    const SUBS = ['Nilai', 'Min', 'Target', 'Max'];

                    // ===== HEADER ROW 1
                    let row1 = '<tr>';
                    Object.keys(ID_COLS).forEach(lbl => {
                        row1 += `<th rowspan="2" class="align-middle">${lbl}</th>`;
                    });
                    Object.keys(propGroups).forEach(p => {
                        row1 += `<th colspan="${SUBS.length}" class="text-center bg-info-subtle align-middle">${p}</th>`;
                    });
                    row1 += '</tr>';

                    // ===== HEADER ROW 2
                    let row2 = '<tr>';
                    Object.keys(propGroups).forEach(() => {
                        SUBS.forEach(s => row2 += `<th class="text-center">${s}</th>`);
                    });
                    row2 += '</tr>';

                    thead.innerHTML = row1 + row2;
                }

                function buildParameterHeader(tableSel, ID_COLS, HPARAM) {
                    const thead = document.querySelector(`${tableSel} thead`);
                    if (!thead || !HPARAM || !Object.keys(HPARAM).length) return;

                    let row = '<tr>';

                    // kolom identitas
                    Object.keys(ID_COLS).forEach(lbl => {
                        row += `<th>${lbl}</th>`;
                    });

                    // kolom parameter
                    Object.keys(HPARAM).forEach(lbl => {
                        row += `<th class="text-center">${lbl}</th>`;
                    });

                    row += '</tr>';

                    thead.innerHTML = row;
                }



                function renderParameterTable(rows, ID_COLS, HPARAM) {
                    const tb = document.querySelector('#tbl_params tbody');
                    if (!tb || !HPARAM) return;

                    tb.innerHTML = '';

                    rows.forEach((r, i) => {
                        let html = '';

                        // kolom identitas
                        Object.values(ID_COLS).forEach(key => {
                            let v = '-';
                            if (key === '__exclude__') {
                                html += renderExcludeCell(getBatchId(r));
                                return;
                            }
                            if (key === '__no__') v = i + 1;
                            else if (key === 'shift_date' && r[key]) {
                                v = formatDate(r[key]);
                            } else v = r[key] ?? '-';
                            html += `<td>${v}</td>`;
                        });

                        // kolom parameter
                        Object.values(HPARAM).forEach(key => {
                            let v = r[key] ?? '-';
                            if (typeof v === 'number') v = v.toFixed(2);
                            html += `<td>${v}</td>`;
                        });

                        tb.insertAdjacentHTML('beforeend', `<tr>${html}</tr>`);
                    });
                }


                async function loadTables() {
                    const qs = new URLSearchParams(window.location.search);

                    const res = await fetch(
                        `{{ route('dashboard.tableAjax') }}?${qs}`, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    }
                    );

                    const {
                        rows,
                        HBASE,
                        HPROP,
                        HPARAM,
                        ID_COLS
                    } = await res.json();

                    renderBatchTable(rows, ID_COLS, HBASE);
                    buildPropertiesHeader('#tbl_props', ID_COLS, HPROP);
                    renderPropertiesTable(rows, ID_COLS, HPROP);
                    buildParameterHeader('#tbl_params', ID_COLS, HPARAM);
                    renderParameterTable(rows, ID_COLS, HPARAM);

                    initDT('#tbl_batch', 5);
                    initDT('#tbl_props', 5);
                    initDT('#tbl_params', 5);
                }



            }

            //     /* DATATABLES */
            function initDT(sel, leftFreeze = 5) {
                if (!window.jQuery || !document.querySelector(sel)) return;
                if ($.fn.DataTable.isDataTable(sel)) return;

                $(sel).DataTable({
                    scrollX: true,
                    scrollCollapse: true,
                    paging: true,
                    pageLength: 25,

                    orderCellsTop: true, // ⬅️ PENTING UNTUK HEADER 2 BARIS
                    fixedColumns: {
                        leftColumns: leftFreeze
                    },

                    autoWidth: false
                });

            }


            function initAllTables() {

                initDT('#tbl_batch', 5);
                initDT('#tbl_props', 5);
                initDT('#tbl_params', 5);
            }




            document.addEventListener('shown.bs.collapse', () => {
                if (window._dashDTs) {
                    window._dashDTs.forEach(dt => {
                        // dt.columns.adjust();
                        if (dt.fixedColumns) {
                            // dt.fixedColumns().relayout();
                        }
                    });
                }
            });



            // initDT('#tbl_batch', 4);
            // initDT('#tbl_props', 4);
            // initDT('#tbl_params', 4);



            // debounce supaya klik cepat tidak ke-skip
            document.addEventListener('change', function (e) {
                const cb = e.target.closest('.batch-exclude');
                if (!cb || isSyncingExclude) return;

                const batchId = cb.dataset.batchId;
                if (!batchId) return;

                isSyncingExclude = true;
                setExcludeState(batchId, cb.checked);
                syncExcludeCheckboxes(batchId);
                isSyncingExclude = false;

                if (reloadTimer) clearTimeout(reloadTimer);
                reloadTimer = setTimeout(() => {
                    reloadCharts();
                }, 250);
            });

            // pastikan link Detail membawa exclude_batch[]
            document.addEventListener('click', function (e) {
                const link = e.target.closest('.btn-detail-chart');
                if (!link) return;

                const baseHref = link.dataset.baseHref || link.getAttribute('href');
                if (!baseHref) return;

                e.preventDefault();
                const qs = buildChartQuery();
                const sep = baseHref.includes('?') ? '&' : '?';
                const finalUrl = qs ? `${baseHref}${sep}${qs}` : baseHref;

                window.open(finalUrl, '_blank');
            });

            // start sequential rendering
            renderChartsParallel(3).catch(err => console.error(err));

        })();
        document.getElementById('btnExportExcel')?.addEventListener('click', () => {
            const form = document.getElementById('exportForm');
            if (!form) return;

            form.querySelectorAll('input[data-exclude-batch="1"]').forEach(el => el.remove());

            try {
                const ids = window.getDashboardExcludedBatches ? window.getDashboardExcludedBatches() : [];
                ids.forEach(id => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'exclude_batch[]';
                    input.value = String(id);
                    input.setAttribute('data-exclude-batch', '1');
                    form.appendChild(input);
                });
            } catch (e) {
                console.error(e);
            }

            form.submit();
        });

        // Toggle deferred table cards (expand / collapse all)
        (function () {
            const btn = document.getElementById('btnToggleTables');
            if (!btn) return;
            btn.addEventListener('click', () => {
                try {
                    const targets = ['#collapseBatch', '#collapseProps', '#collapseParams'];
                    const found = targets.map(sel => document.querySelector(sel)).filter(Boolean);

                    if (found.length) {
                        // toggle each collapse using Bootstrap or jQuery or fallback to toggling parent card
                        found.forEach(el => {
                            const BS = window.bootstrap;
                            if (BS && BS.Collapse) {
                                const inst = BS.Collapse.getOrCreateInstance(el);
                                inst.toggle();
                            } else if (window.jQuery) {
                                $(el).collapse('toggle');
                            } else {
                                const card = el.closest('.card');
                                if (card) card.classList.toggle('d-none');
                            }
                        });
                    } else {
                        // if the collapse containers are not rendered, toggle deferred cards directly
                        const deferred = document.querySelectorAll('.deferred');
                        deferred.forEach(card => card.classList.toggle('d-none'));
                    }
                } catch (e) {
                    console.error(e);
                }
            });
        })();
    </script>
    <script>
        window.addEventListener('error', function (e) {
            if (e.message && e.message.includes('classList')) {
                e.preventDefault();
                return false;
            }
        });
    </script>

    <script>
        document.addEventListener('click', function (e) {
            const btn = e.target.closest('.btn-download-chart');
            if (!btn) return;

            const canvas = document.getElementById(btn.dataset.canvas);
            if (!canvas) return;

            const outW = 2900,
                outH = 650; // ukuran PNG yang kamu mau

            const exportCanvas = document.createElement('canvas');
            exportCanvas.width = outW;
            exportCanvas.height = outH;

            const ctx = exportCanvas.getContext('2d');
            ctx.fillStyle = '#fff';
            ctx.fillRect(0, 0, outW, outH);

            // scale agar fit
            const scale = Math.min(outW / canvas.width, outH / canvas.height);
            const drawW = canvas.width * scale;
            const drawH = canvas.height * scale;
            const dx = (outW - drawW) / 2;
            const dy = (outH - drawH) / 2;

            ctx.drawImage(canvas, dx, dy, drawW, drawH);

            const link = document.createElement('a');
            link.href = exportCanvas.toDataURL('image/png');
            link.download = 'chart.png';
            link.click();
        });
    </script>
@endpush