@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Result {{ $title_menu }}</h5>
                        </div>
                        <hr class="horizontal dark mt-0">

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper row">
                                    <div class="col">
                                        {{-- button back --}}
                                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                                            <i class="fas fa-circle-left me-1"></i>
                                            <span class="font-weight-bold">Kembali</span>
                                        </button>
                                        <!-- disarankan di HTML, biar aman sebelum JS jalan -->
                                        <button class="btn btn-danger mb-0" id="btnPdfCharts" disabled aria-disabled="true">
                                            <i class="fas fa-file-pdf me-1"></i> PDF Grafik (Loading…)
                                        </button>
                                    </div>

                                    <div class="col-md-3 md-auto justify-content-end row">
                                        <div class="col">
                                            {{-- set value filter (disiapkan untuk datatables search) --}}
                                                                                        @foreach ($filter as $key => $value)
                                                <input type="hidden" name="f{{ $key }}"
                                                    value="{{ $value }}" />
                                                @php
                                                    if (
                                                        preg_replace('/\s+/', '', strtolower(@$table_class->alias)) ==
                                                        preg_replace('/\s+/', '', strtolower($key))
                                                    ) {
                                                        $check_filter = $value == '%' ? '' : $value;
                                                    }
                                                @endphp
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- HEADER PROFIL: hanya muncul jika filter NIK digunakan --}}
                        @if (!empty($isByNik) && !empty($emp))
                            <div class="card mb-3">
                                <div class="card-header">
                                    <h6 class="mb-0">Detail Karyawan</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <table class="table mb-0">
                                                <tr>
                                                    <th style="width:140px;"><b>NIK</b></th>
                                                    <td>{{ $emp->nik ?? '-' }}</td>
                                                </tr>
                                                <tr>
                                                    <th><b>Nama</b></th>
                                                    <td>{{ $emp->nama ?? '-' }}</td>
                                                </tr>
                                                <tr>
                                                    <th><b>Departemen</b></th>
                                                    <td>{{ $emp->departemen ?? '-' }}</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="col-md-6">
                                            <table class="table mb-0">
                                                <tr>
                                                    <th style="width:140px;"><b>Jabatan</b></th>
                                                    <td>{{ $emp->jabatan ?? '-' }}</td>
                                                </tr>
                                                <tr>
                                                    <th><b>Gender</b></th>
                                                    <td>{{ $emp->gender ?? '-' }}</td>
                                                </tr>
                                                <tr>
                                                    <th><b>Umur</b></th>
                                                    <td>{{ $emp->umur ? $emp->umur . ' th' : '-' }}</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        {{-- ===== KPI SUMMARY ===== --}}
                        @if (!empty($kpi))
                            <div class="section-x mb-3">
                                <div class="row g-3">

                                    <div class="col-12 col-md-6 col-xl-3">
                                        <div class="border rounded-3 shadow-sm p-3 h-100 bg-primary-subtle">
                                            <div class="fw-bold mb-1">Total Kalori</div>
                                            <div class="fs-4 fw-semibold text-primary">
                                                {{ number_format($kpi['total']['kalori'], 2) }}</div>
                                            <div class="small text-muted">Rata-rata (per kegiatan):
                                                {{ number_format($kpi['avg']['kalori'], 2) }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-6 col-xl-3">
                                        <div class="border rounded-3 shadow-sm p-3 h-100 bg-success-subtle">
                                            <div class="fw-bold mb-1">Total Waktu (menit)</div>
                                            <div class="fs-4 fw-semibold text-success">
                                                {{ number_format($kpi['total']['waktu'], 2) }}</div>
                                            <div class="small text-muted">Rata-rata (per kegiatan):
                                                {{ number_format($kpi['avg']['waktu'], 2) }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-6 col-xl-3">
                                        <div class="border rounded-3 shadow-sm p-3 h-100 bg-info-subtle">
                                            <div class="fw-bold mb-1">Total Jarak (km)</div>
                                            <div class="fs-4 fw-semibold text-info">
                                                {{ number_format($kpi['total']['jarak'], 2) }}</div>
                                            <div class="small text-muted">Rata-rata (per kegiatan):
                                                {{ number_format($kpi['avg']['jarak'], 2) }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-6 col-xl-3">
                                        <div class="border rounded-3 shadow-sm p-3 h-100 bg-warning-subtle">
                                            <div class="fw-bold mb-1">Total Kegiatan</div>
                                            <div class="fs-4 fw-semibold text-warning">{{ $kpi['activities'] ?? 0 }}</div>
                                            <div class="small text-muted">{{ $chart_scope }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        {{-- ======== KALORI ======== --}}
                        <div class="card mb-3">
                            <div class="card-body">
                                <h6 class="mb-3">Kalori</h6>
                                <div id="chart-kalori" style="height:360px;"></div>
                            </div>
                        </div>

                        {{-- ======== 2 kolom: WAKTU & JARAK ======== --}}
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card mb-3">
                                    <div class="card-body">
                                        <h6 class="mb-3">Waktu</h6>
                                        <div id="chart-waktu" style="height:320px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card mb-3">
                                    <div class="card-body">
                                        <h6 class="mb-3">Jarak</h6>
                                        <div id="chart-jarak" style="height:320px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- ======== DETAIL TABLE CARD ======== --}}
                        <div class="card">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                <h6 class="mb-0">Detail Activity</h6>
                            </div>

                            <div class="row px-4 py-2">
                                <div class="table-responsive">
                                    <table class="table display" id="list_{{ $dmenu }}">
                                        {{-- check result data --}}
                                        @if ($table_result)
                                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>No</th>
                                                    {{-- set table header --}}
                                                    @foreach ($table_result as $result)
                                                        @php
                                                            $sAsArray = array_keys((array) $result);
                                                            $i = 0;
                                                        @endphp
                                                    @endforeach
                                                    @foreach ($sAsArray as $header)
                                                        @if (substr($header, 0, 3) == 'IMG')
                                                            <th>{{ substr($header, 4) }}</th>
                                                        @elseif (substr($header, 0, 3) == 'CDT')
                                                            <th>{{ substr($header, 6) . '-' . substr($header, 3, 2) }}</th>
                                                        @elseif (substr($header, 0, 3) == 'CST')
                                                            <th>{{ substr($header, 4) }}</th>
                                                        @else
                                                            <th>{{ $header }}</th>
                                                        @endif
                                                        @php
                                                            $i++;
                                                        @endphp
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {{-- retrieve table result --}}
                                                @foreach ($table_result as $detail)
                                                    <tr
                                                        {{ @$detail->isactive == '0' || @$detail->ISACTIVE == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                                        <td>{{ $loop->iteration }}</td>
                                                        @foreach ($table_result as $result)
                                                            @php
                                                                $field = array_keys((array) $result);
                                                                $i = 0;
                                                            @endphp
                                                        @endforeach
                                                        @foreach ($field as $header)
                                                            @php
                                                                $string = $header;
                                                                $img_id = '';
                                                                $characters =
                                                                    'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
                                                                for ($i = 0; $i < 10; $i++) {
                                                                    $img_id .=
                                                                        $characters[
                                                                            mt_rand(0, strlen($characters) - 1)
                                                                        ];
                                                                }
                                                            @endphp
                                                            @if (substr($string, 0, 3) == 'IMG')
                                                                <td class="text-sm font-weight-normal">
                                                                    <span class="my-2 text-xs">
                                                                        <img src="{{ asset('/storage' . '/' . $detail->$string) }}"
                                                                            alt="image" style="height: 40px;"
                                                                            data-bs-toggle="modal"
                                                                            data-bs-target="#{{ $img_id }}">
                                                                    </span>
                                                                    <span
                                                                        style="display: none;">{{ asset('/storage' . '/' . $detail->$string) }}
                                                                    </span>
                                                                    <!-- Modal -->
                                                                    <div class="modal fade" id="{{ $img_id }}"
                                                                        tabindex="-1" role="dialog"
                                                                        aria-labelledby="imageModalLabel"
                                                                        aria-hidden="true">
                                                                        <div class="modal-dialog modal-dialog-centered"
                                                                            role="document">
                                                                            <div class="modal-content">
                                                                                <div class="modal-header">
                                                                                    <h5 class="modal-title"
                                                                                        id="imageModalLabel">
                                                                                        Preview Image
                                                                                    </h5>
                                                                                    <button type="button"
                                                                                        class="btn-close"
                                                                                        data-bs-dismiss="modal"
                                                                                        aria-label="Close">
                                                                                        <span
                                                                                            aria-hidden="true">&times;</span>
                                                                                    </button>
                                                                                </div>
                                                                                <div class="modal-body">
                                                                                    <img src="{{ asset('/storage' . '/' . $detail->$string) }}"
                                                                                        id="preview" alt="image"
                                                                                        class="w-100 border-radius-lg shadow-sm">
                                                                                </div>
                                                                                <div class="modal-footer">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                            @elseif (substr($string, 0, 3) == 'CDT')
                                                                <td
                                                                    class="text-sm font-weight-normal {{ $detail->$string }}">
                                                                    {{ $detail->$string }}
                                                                </td>
                                                                <script>
                                                                    var inputDate = new Date('{{ $detail->$string }}');
                                                                    var currentDate = new Date();
                                                                    var futureDate = new Date(currentDate.setDate(currentDate.getDate() + parseInt('{{ substr($string, 3, 2) }}')));

                                                                    if (inputDate <= futureDate) {
                                                                        $('.{{ $detail->$string }}').parents('tr').addClass('exp');
                                                                        $('.{{ $detail->$string }}').parents('tr').css('background-color', '#ffe768');
                                                                    }
                                                                </script>
                                                            @elseif (substr($string, 0, 3) == 'CST')
                                                                <td
                                                                    class="text-sm font-weight-normal {{ $detail->$string }}">
                                                                    {{ $detail->$string }}
                                                                </td>
                                                                <script>
                                                                    if ('{{ $detail->$string }}' == 'FALSE') {
                                                                        $('.FALSE').parents('tr').addClass('stock');
                                                                        $('.FALSE').parents('tr').css('background-color', '#f93c3c');
                                                                        $('.FALSE').parents('tr').css('color', '#000');
                                                                    }
                                                                </script>
                                                            @else
                                                                <td class="text-sm font-weight-normal">
                                                                    {{ $detail->$string }}</td>
                                                            @endif
                                                            @php
                                                                $i++;
                                                            @endphp
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        @endif
                                    </table>
                                </div>
                            </div>
                            <div class="row px-4 py-2">
                                <div class="col-lg">
                                    @if ($table_result)
                                        <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                                    style="color: #ffc2cd;" class="fas fa-circle"></i> Data not
                                                active</code>
                                        </div>
                                    @else
                                        <div class="nav-wrapper"><code> Data not found!</code></div>
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu)
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection

{{-- ======== SCRIPTS ======== --}}
@push('js')
    {{-- ECharts --}}
    <script>
        (function() {
            // ====== Tombol & progress ======
            const PDFBTN = document.getElementById('btnPdfCharts');
            const ALL_CHART_IDS = ['chart-kalori', 'chart-waktu', 'chart-jarak'];
            const PRESENT_IDS = ALL_CHART_IDS.filter(id => document.getElementById(id));
            const readySet = new Set();
            let pageLoaded = (document.readyState === 'complete');

            function setBtnDisabled() {
                if (!PDFBTN) return;
                PDFBTN.disabled = true;
                PDFBTN.classList.add('disabled');
                PDFBTN.setAttribute('aria-disabled', 'true');
                PDFBTN.innerHTML = `<i class="fas fa-file-pdf me-1"></i> PDF Grafik (Loading…)`;
            }

            function setBtnEnabled() {
                if (!PDFBTN) return;
                PDFBTN.disabled = false;
                PDFBTN.classList.remove('disabled');
                PDFBTN.removeAttribute('aria-disabled');
                PDFBTN.innerHTML = `<i class="fas fa-file-pdf me-1"></i> PDF Grafik`;
            }

            function updateBtn() {
                const chartsReady = readySet.size >= PRESENT_IDS.length;
                if (chartsReady && pageLoaded) setBtnEnabled();
                else setBtnDisabled();
            }
            setBtnDisabled();
            if (!pageLoaded) window.addEventListener('load', () => {
                pageLoaded = true;
                updateBtn();
            }, {
                once: true
            });

            // ====== Data dari server ======
            const CHARTS = @json($charts);
            const SCOPE = @json($chart_scope ?? null);
            window.__charts = window.__charts || {};

            // ====== Render chart ======
            function renderBarLine(elId, cfg) {
                const el = document.getElementById(elId);
                if (!el || typeof echarts === 'undefined') return;

                const chart = echarts.init(el);
                window.__charts[elId] = chart;

                // tandai siap
                let marked = false;
                const markReady = () => {
                    if (marked) return;
                    marked = true;
                    readySet.add(elId);
                    updateBtn();
                };
                chart.on('finished', markReady);
                chart.getZr && chart.getZr().on('rendered', markReady);
                setTimeout(markReady, 1200); // safety

                const d = cfg || {};
                const FONT = {
                    base: 13,
                    title: 18,
                    sub: 12,
                    axis: 12,
                    legend: 12
                };
                const mainTitle = `${d.title}${SCOPE ? ' — ' + SCOPE : ''}`;

                chart.setOption({
                    textStyle: {
                        fontSize: FONT.base
                    },
                    title: {
                        text: mainTitle,
                        subtext: `${d.meta.fr} s/d ${d.meta.to}`,
                        left: 'center',
                        top: 6,
                        padding: [0, 0, 8, 0],
                        textStyle: {
                            fontSize: FONT.title,
                            fontWeight: 'bold'
                        },
                        subtextStyle: {
                            fontSize: FONT.sub,
                            color: '#666'
                        }
                    },
                    legend: {
                        top: 50,
                        textStyle: {
                            fontSize: FONT.legend
                        }
                    },
                    grid: {
                        left: 60,
                        right: 30,
                        bottom: 60,
                        top: 90
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {},
                            dataView: {
                                readOnly: true
                            },
                            restore: {}
                        },
                        right: 16,
                        top: 6
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        valueFormatter: v => (v == null ? '0' : v)
                    },
                    xAxis: {
                        type: 'category',
                        data: d.labels, // tetap kirim label lengkap: "Mgg 40 • 29 Sep–05 Oct 2025"
                        axisLabel: {
                            interval: 0,
                            rotate: 25,
                            fontSize: FONT.axis,
                            // tampilkan hanya "Mgg XX"
                            formatter: function(val) {
                                const m = String(val).match(/Mgg\s*([0-9]+)/i);
                                return m ? `Mgg ${m[1]}` : val; // fallback kalau format beda
                            }
                        }
                    },
                    yAxis: [{
                        type: 'value',
                        name: d.y1,
                        axisLabel: {
                            fontSize: FONT.axis
                        }
                    }],
                    series: [{
                            name: d.bar.name,
                            type: 'bar',
                            data: d.bar.data,
                            barMaxWidth: 36,
                            markLine: {
                                data: [{
                                    type: 'average',
                                    name: 'Rata2'
                                }],
                                symbol: 'none',
                                lineStyle: {
                                    type: 'dashed'
                                },
                                label: {
                                    fontSize: FONT.axis
                                }
                            },
                            emphasis: {
                                focus: 'series'
                            }
                        },
                        {
                            name: d.line.name,
                            type: 'line',
                            data: d.line.data,
                            smooth: true,
                            showSymbol: false,
                            areaStyle: {
                                opacity: .08
                            },
                            emphasis: {
                                focus: 'series'
                            }
                        }
                    ]
                });

                // === Klik titik/label minggu (opsi: tampilkan info; TIDAK filter tabel harian) ===
                chart.on('click', (p) => {
                    if (!p?.name) return;
                    // Info ringan – biar user paham ini aggr per minggu
                    const msg = `Minggu: ${p.name}\n\n` +
                        `${d.bar.name}: ${p.data?.toLocaleString?.('id-ID') ?? p.data}`;
                    if (window.Swal) {
                        Swal.fire({
                            title: 'Detail Mingguan',
                            text: msg,
                            icon: 'info',
                            confirmButtonColor: '#3085d6'
                        });
                    } else {
                        alert(msg);
                    }
                });

                window.addEventListener('resize', () => chart.resize());
            }

            // Render yang ada
            if (document.getElementById('chart-kalori')) renderBarLine('chart-kalori', CHARTS.kalori);
            if (document.getElementById('chart-waktu')) renderBarLine('chart-waktu', CHARTS.waktu);
            if (document.getElementById('chart-jarak')) renderBarLine('chart-jarak', CHARTS.jarak);

            // ====== Export chart → PNG stabil (ukuran seragam) ======
            function exportChartPNGStable(elId, width = 1000, height = 380, pixelRatio = 2) {
                const src = window.__charts?.[elId];
                if (!src) return null;
                const tmp = document.createElement('div');
                tmp.style.cssText =
                    `position:fixed;left:-99999px;top:0;width:${width}px;height:${height}px;visibility:hidden;`;
                document.body.appendChild(tmp);
                const opt = src.getOption ? src.getOption() : null;
                const tmpChart = echarts.init(tmp);
                if (opt) tmpChart.setOption(opt, {
                    lazyUpdate: false
                });
                tmpChart.resize({
                    width,
                    height
                });
                const png = tmpChart.getDataURL({
                    type: 'png',
                    pixelRatio,
                    backgroundColor: '#fff'
                });
                tmpChart.dispose();
                document.body.removeChild(tmp);
                return png;
            }

            // ====== Klik tombol PDF ======
            PDFBTN?.addEventListener('click', () => {
                const ids = PRESENT_IDS,
                    blocks = [];
                ids.forEach(id => {
                    const png = exportChartPNGStable(id, 1000, 380, 2);
                    if (!png) return;
                    blocks.push({
                        text: id.replace('chart-', '').toUpperCase(),
                        style: 'h2',
                        margin: [0, 10, 0, 6]
                    }, {
                        image: png,
                        width: 550,
                        margin: [0, 0, 0, 10]
                    });
                });

                const tableDetail = (typeof dtToPdfTableSimple === 'function') ?
                    dtToPdfTableSimple('#list_{{ $dmenu }}') : {
                        text: 'Tabel tidak ditemukan.',
                        italics: true
                    };

                // ---- Ambil periode & scope secara robust ----
                const PERIOD = (() => {
                    // 1) dari data server
                    let fr = window.CHARTS?.kalori?.meta?.fr || '';
                    let to = window.CHARTS?.kalori?.meta?.to || '';
                    let scope = window.SCOPEJS || '';

                    // 2) dari chart yg sudah dirender
                    try {
                        const ch = window.__charts?.['chart-kalori'];
                        const opt = ch?.getOption?.();
                        const titleText = opt?.title?.[0]?.text || '';
                        const sub = opt?.title?.[0]?.subtext || '';

                        if (!fr || !to) {
                            const m = sub.match(/(\d{4}-\d{2}-\d{2}).*?(\d{4}-\d{2}-\d{2})/);
                            if (m) {
                                fr = fr || m[1];
                                to = to || m[2];
                            }
                        }
                        if (!scope && titleText.includes('—')) {
                            scope = titleText.split('—')[1].trim(); // teks setelah em dash
                        }
                    } catch (e) {}

                    // 3) fallback terakhir dari hidden input filter (kalau ada)
                    fr = fr || document.querySelector('input[name="frtgl"]')?.value || '-';
                    to = to || document.querySelector('input[name="totgl"]')?.value || '-';

                    return {
                        fr,
                        to,
                        scope
                    };
                })();

                const SCOPE = PERIOD.scope;

                const doc = {
                    pageSize: 'A4',
                    pageMargins: [24, 28, 24, 28],
                    content: [{
                            text: (document.querySelector('.card h5')?.innerText || 'Grafik'),
                            style: 'h1'
                        },
                        {
                            text: `Periode: ${PERIOD.fr} s/d ${PERIOD.to}`,
                            style: 'sub'
                        },
                        {
                            text: SCOPE ? `Karyawan: ${SCOPE}` : '',
                            style: 'sub',
                            margin: [0, 0, 0, 8]
                        },
                        ...blocks,
                        {
                            text: 'Detail Activity',
                            style: 'h2',
                            margin: [0, 10, 0, 6],
                            pageBreak: 'before',
                            pageOrientation: 'landscape'
                        },
                        tableDetail
                    ],
                    styles: {
                        h1: {
                            fontSize: 14,
                            bold: true,
                            margin: [0, 0, 0, 2]
                        },
                        h2: {
                            fontSize: 11,
                            bold: true
                        },
                        sub: {
                            fontSize: 9,
                            color: '#666'
                        }
                    },
                    defaultStyle: {
                        fontSize: 10
                    }
                };

                pdfMake.createPdf(doc).open();
            });

            // ====== (Opsional) fungsi filter DataTables by range minggu ======
            function applyDtWeekFilter(selector, ymdStart, ymdEnd) {
                const dt = $(selector).DataTable?.();
                if (!dt) return;
                const colIndex = window.tglColIndex ?? 0;

                // Custom filter hanya sekali
                if (!$.fn.dataTable.ext.search.__weekFilterAdded) {
                    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                        if (settings.nTable !== $(selector)[0]) return true;
                        // Ambil teks tanggal di kolom tanggal
                        const txt = (data[colIndex] || '').trim();
                        // Parse ke Y-m-d
                        const parts = txt.match(/(\d{4})-(\d{2})-(\d{2})/);
                        if (!parts) return true; // kalau format tidak Y-m-d, loloskan saja
                        const d = parts[0];
                        if (!window.__weekFilter) return true;
                        return (d >= window.__weekFilter.start && d <= window.__weekFilter.end);
                    });
                    $.fn.dataTable.ext.search.__weekFilterAdded = true;
                }

                window.__weekFilter = {
                    start: ymdStart,
                    end: ymdEnd
                };
                dt.draw();
            }

            // ====== deteksi index kolom tanggal (untuk group & helper) ======
            window.tglColIndex = 0;
            $(function() {
                const ths = $('#list_{{ $dmenu }} thead th');
                ths.each(function(i) {
                    const t = $(this).text().trim().toLowerCase();
                    if (['tgl', 'tanggal', 'created_at'].includes(t)) window.tglColIndex = i;
                });
            });
        })();

        // SIMPLE helper: ambil data dari DataTables dan jadi tabel pdfMake
        function dtToPdfTableSimple(selector, options = {}) {
            const dt = $(selector).DataTable?.();
            if (!dt) return null;

            const maxRows = options.maxRows ?? 2000;
            const key = h => (h || '').toLowerCase().replace(/\s+/g, '').replace(/[^a-z0-9_]/g, '');

            // ---- ambil kolom visible lalu buang kolom foto/image ----
            const EXCLUDE_KEYS = new Set(['foto', 'image', 'img', 'img_foto', 'imgfoto', 'fot']); // apapun yang mirip
            let colIdxs = dt.columns(':visible').indexes().toArray().filter((i) => {
                const title = (dt.column(i).header().textContent || '').trim();
                const k = key(title);
                if (EXCLUDE_KEYS.has(k)) return false; // buang berdasar judul

                // auto-buang jika ada <img> di beberapa baris teratas
                let hasImg = false,
                    checked = 0;
                dt.rows({
                    search: 'applied'
                }).every(function() {
                    if (checked++ >= 5) return false;
                    if ($(this.node()).find('td').eq(i).find('img').length) {
                        hasImg = true;
                        return false;
                    }
                });
                return !hasImg;
            });

            const headers = colIdxs.map(i => (dt.column(i).header().textContent || '').trim());

            // lebar kolom (simple & rapi)
            const FIX = {
                no: 20,
                nik: 60,
                idbmi: 60,
                bmi: 35,
                kategoribmi: 60,
                tgl: 90,
                jarak: 40,
                waktu: 45,
                kalori: 40,
                star: 26,
                status: 50
            };
            const FLEX = new Set(['nama', 'deskripsi']);
            const widths = headers.map(h => (FLEX.has(key(h)) ? '*' : (FIX[key(h)] ?? 80)));

            // header row
            // header row (semua center)
            const body = [
                headers.map(h => ({
                    text: h,
                    bold: true,
                    alignment: 'center'
                }))
            ];

            // data rows
            let count = 0;
            dt.rows({
                search: 'applied'
            }).every(function() {
                if (count++ >= maxRows) return false;
                const $tds = $(this.node()).find('td');

                const NUM_RIGHT = new Set(['jarak', 'waktu', 'kalori', 'bmi', 'star']); // ← tambah 'star'
                const CENTER = new Set(['no']); // 'star' dihapus dari center

                const row = colIdxs.map((i, idx) => {
                    const k = key(headers[idx]);
                    let txt = ($tds.eq(i).text() || '').replace(/\s+/g, ' ').trim();

                    // format angka biar rapi (termasuk 'star')
                    if (NUM_RIGHT.has(k)) {
                        const num = Number(txt.replace(/[^0-9.,-]/g, '').replace(',', '.'));
                        if (!isNaN(num)) {
                            txt = (k === 'star') ?
                                num.toLocaleString('id-ID', {
                                    maximumFractionDigits: 0
                                }) :
                                num.toLocaleString('id-ID', {
                                    maximumFractionDigits: 2
                                });
                        }
                    }

                    return {
                        text: txt,
                        alignment: CENTER.has(k) ? 'center' : (NUM_RIGHT.has(k) ? 'right' : 'left'),
                        noWrap: false
                    };
                });


                body.push(row);
            });

            if (body.length === 1) {
                return {
                    table: {
                        body: [
                            [{
                                text: 'Tidak ada data (sesuai filter).',
                                italics: true
                            }]
                        ]
                    },
                    layout: 'noBorders'
                };
            }

            return {
                table: {
                    headerRows: 1,
                    widths,
                    body,
                    dontBreakRows: true
                },
                layout: {
                    fillColor: (rowIndex) => (rowIndex && rowIndex % 2 === 0 ? '#f9f9f9' : null),
                    hLineColor: () => '#ddd',
                    vLineColor: () => '#eee'
                },
                fontSize: 9
            };
        }

        let columnAbjad = '';
        $(document).ready(function() {
            let table = $('#list_{{ $dmenu }}').DataTable();
            let indexStatus = 0;
            let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
            let columnNames = '';
            let filter = '{{ @$table_class->alias }}'.toLowerCase();

            for (let index = 0; index < numColumns; index++) {
                columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
                filtercolom = columnNames.toLowerCase();
                if (columnNames == 'Status' || columnNames == 'status' || columnNames == 'STATUS') {
                    columnAbjad = String.fromCharCode(65 + index);
                }
                if (filtercolom == filter) {
                    indexStatus = index;
                }
            }

            // redraw table where filter
            $('#{{ @$table_class->field }}').change(function() {
                table.column(indexStatus).search($(this).val()).draw();
            });

            // note legend
            if ($('*').hasClass('exp')) {
                $('#noted').html(
                    `<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true" style="color: #ffe768;" class="fas fa-circle"></i> Data Expired )</code>`
                );
            }
            if ($('*').hasClass('stock')) {
                $('#noted').html(
                    `<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true" style="color: #f93c3c;" class="fas fa-circle"></i> Stock < Min Stock )</code>`
                );
            }
            if ($('*').hasClass('exp') && $('*').hasClass('stock')) {
                $('#noted').html(
                    `<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true" style="color: #ffe768;" class="fas fa-circle"></i> Data Expired ), ( <i aria-hidden="true" style="color: #f93c3c;" class="fas fa-circle"></i> Stock < Min Stock )</code>`
                );
            }
        });

        // set table into datatables
        $('#list_{{ $dmenu }}').DataTable({
            language: {
                search: "Cari :",
                lengthMenu: "Tampilkan _MENU_ baris",
                zeroRecords: "Maaf - Data tidak ada",
                info: "Data _START_ - _END_ dari _TOTAL_",
                infoEmpty: "Tidak ada data",
                infoFiltered: "(pencarian dari _MAX_ data)"
            },
            rowGroup: {
                dataSrc: window.tglColIndex
            },
            order: [
                [window.tglColIndex, 'asc']
            ],
            responsive: true,
            dom: 'frtip'
        });
    </script>
@endpush