@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@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</button>
                                        <button class="btn btn-success mb-0" onclick="exportExcel()">
                                            <i class="fas fa-file-excel me-1"></i>
                                            <span class="font-weight-bold">Excel</span>
                                        </button>
                                        <button class="btn btn-danger mb-0"
                                            onclick="exportTableToPDF('list_{{ $dmenu }}', 'Data {{ $title_menu }}')">
                                            <i class="fas fa-file-pdf me-1"></i>
                                            <span class="font-weight-bold">PDF</span>
                                        </button>
                                    </div>
                                    <div class="col-md-3 md-auto justify-content-end row">
                                        <div class="col">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <table class="table table-borderless mb-3">
                                        <tr>
                                            <td width="150"><strong>Tanggal</strong></td>
                                            <td>: {{ $header->first()->tanggal }}</td>

                                        </tr>
                                        <tr>
                                            <td><strong>Shift / Grup</strong></td>
                                            <td>: {{ $header->first()->shift }} / {{ $header->first()->shift_grup }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Nama Mesin</strong></td>
                                            <td>: {{ $header->first()->nama_mesin }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Operator</strong></td>
                                            <td>: {{ $operators }}</td>
                                        </tr>
                                    </table>
                                    {{-- <table class="table table-bordered">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                @foreach ($columns as $col)
                                                    <th>{{ $col }}</th>
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($table_result as $row)
                                                <tr>
                                                    @foreach ($columns as $col)
                                                        <td>{{ $row[$col] ?? '-' }}</td>
                                                    @endforeach
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="{{ count($columns) }}" class="text-center text-muted">
                                                        Tidak ada data
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table> --}}

                                    {{-- Blade View --}}
                                    <h2 class="fw-semibold mb-3" style="font-size:15px;">
                                        CEKLIST ROLL JADI &amp; SETTING MESIN SLITTER
                                    </h2>

                                    <div class="table-responsive">
                                        <table class="table table-bordered table-sm align-middle text-center"
                                            style="font-size:12px;">
                                            <thead>
                                                <tr>
                                                    {{-- Kolom parameter biasa --}}
                                                    @foreach ($static_columns as $col)
                                                        <th rowspan="2" class="align-middle"
                                                            style="background-color:#00b7bd4f; font-size:11px;">
                                                            {{ $col }}
                                                            @if (!empty($units[$col]))
                                                                <br><span
                                                                    style="font-weight:400; font-size:10px; color:#6c757d;">
                                                                    ({{ $units[$col] }})
                                                                </span>
                                                            @endif
                                                        </th>
                                                    @endforeach

                                                    {{-- Kolom parameter roll --}}
                                                    @foreach ($roll_columns as $col)
                                                        <th rowspan="2" class="align-middle"
                                                            style="background-color:#e8f7f7; font-size:11px;">
                                                            {{ $col }}
                                                            @if (!empty($units[$col]))
                                                                <br><span
                                                                    style="font-weight:400; font-size:10px; color:#6c757d;">
                                                                    ({{ $units[$col] }})
                                                                </span>
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                                <tr></tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($table_result as $row)
                                                    @if (!empty($row['rolls']))
                                                        @foreach ($row['rolls'] as $i => $roll)
                                                            <tr>
                                                                {{-- Kolom static hanya tampil di baris roll pertama (rowspan) --}}
                                                                @if ($i === 0)
                                                                    @foreach ($static_columns as $col)
                                                                        <td class="align-middle fw-medium bg-light"
                                                                            rowspan="{{ count($row['rolls']) }}">
                                                                            {{ $row['static'][$col] ?? '-' }}
                                                                        </td>
                                                                    @endforeach
                                                                @endif

                                                                {{-- Kolom roll tiap baris --}}
                                                                @foreach ($roll_columns as $col)
                                                                    <td class="align-middle">
                                                                        {{ $roll[$col] ?? '-' }}
                                                                    </td>
                                                                @endforeach
                                                            </tr>
                                                        @endforeach
                                                    @else
                                                        {{-- Tidak ada roll, tampil 1 baris biasa --}}
                                                        <tr>
                                                            @foreach ($static_columns as $col)
                                                                <td class="align-middle fw-medium bg-light">
                                                                    {{ $row['static'][$col] ?? '-' }}
                                                                </td>
                                                            @endforeach
                                                            @foreach ($roll_columns as $col)
                                                                <td class="align-middle">-</td>
                                                            @endforeach
                                                        </tr>
                                                    @endif
                                                @empty
                                                    <tr>
                                                        <td colspan="{{ count($static_columns) + count($roll_columns) }}"
                                                            class="text-center text-muted">
                                                            Tidak ada data
                                                        </td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </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 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>
            {{-- check flag js on dmenu --}}
            @if ($jsmenu == '1')
                @if (view()->exists("js.{$dmenu}"))
                    @push('addjs')
                        {{-- file js in folder (resources/views/js) --}}
                        @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
        @push('js')
            {{-- <script>
        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();
            })
            //check note
            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)"
            },
            function exportExcel() {
                $('#list_{{ $dmenu }}').DataTable().button('.buttons-excel').trigger();
            }
            responsive: true,
            dom: 'Bfrtip',
            buttons: [{
                extend: 'excelHtml5',
                className: 'buttons-excel',
                text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> Excel',
                autoFilter: true,
                sheetName: 'Exported data',
                customize: function(xlsx) {
                    var sheet = xlsx.xl.worksheets['sheet1.xml'];
                    sheet.querySelectorAll('row c[r^="' + columnAbjad + '"]').forEach((row) => {
                        let cell = row.querySelector('is t');
                        if (cell && cell.textContent === 'Not Active') {
                            row.setAttribute('s', '10');
                        }
                    });
                },
                exportOptions: {
                    columns: ':visible:not(:last-child)'
                },
            }],
            {
                extend: 'pdfHtml5',
                text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"> </i><span class="font-weight-bold"> PDF',
                orientation: 'landscape',
                pageSize: 'A4',
                exportOptions: {
                    columns: ':visible:not(:last-child)'
                },
            },
            {
                extend: 'print',
                text: '<i class="fas fa-print me-1 text-lg text-info"> </i><span class="font-weight-bold"> Print',
                orientation: 'landscape',
                pageSize: 'A4',
                exportOptions: {
                    columns: ':visible:not(:last-child)'
                },
            },
        ]
        });
        //set color button datatables
        $('.dt-button').addClass('btn btn-secondary');
        $('.dt-button').removeClass('dt-button');
        //check authorize button datatables
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/report/rpprmt/result.blade.php</b> on line <b>322</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/report/rpprmt/result.blade.php</b> on line <b>322</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/report/rpprmt/result.blade.php</b> on line <b>323</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/report/rpprmt/result.blade.php</b> on line <b>323</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/report/rpprmt/result.blade.php</b> on line <b>324</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/report/rpprmt/result.blade.php</b> on line <b>324</b><br />
        //function delete
        function deleteData(name, msg) {
            pesan = confirm('Apakah Anda Yakin ' + msg + ' Data ' + name + ' ini ?');
            if (pesan) return true
            else return false
        }
    </script> --}}
            <script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/xlsx-js-style@1.2.0/dist/xlsx.bundle.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.31/jspdf.plugin.autotable.min.js"></script>
            <script>
                let tableUnits = {
                    @foreach ($units as $param => $unit)
                        "{{ $param }}": "{{ $unit ?? '-' }}",
                    @endforeach
                };

                let tableResult = [
                    @foreach ($table_result as $row)
                        {
                            "static": {
                                @foreach ($row['static'] as $key => $val)
                                    "{{ $key }}": "{{ addslashes($val ?? '-') }}",
                                @endforeach
                            },
                            "rolls": [
                                @foreach ($row['rolls'] as $roll)
                                    {
                                        @foreach ($roll as $key => $val)
                                            "{{ $key }}": "{{ addslashes($val ?? '-') }}",
                                        @endforeach
                                    },
                                @endforeach
                            ]
                        },
                    @endforeach
                ];

                function exportExcel() {
                    try {
                        if (typeof XLSX === 'undefined') {
                            alert("Library Excel (SheetJS) belum dimuat!");
                            return;
                        }

                        let wb = XLSX.utils.book_new();
                        let kategori = "{{ $nama_kategori ?? '' }}";
                        let allHeaders = @json($header);
                        let tableUnits = @json($units);
                        let tableHeaders = [
                            @foreach ($columns as $col)
                                "{{ $col }}",
                            @endforeach
                        ];
                        const staticHeaders = @json($static_columns);
                        const rollHeaders = @json($roll_columns);

                        let wsData = [];
                        let merges = [];
                        let headerRowIndex = 2;
                        let headerRow1 = [];

                        if (kategori === 'Slitter') {

                            // ── Header row ────────────────────────────────────────────────
                            const headerTop = [];
                            [...staticHeaders, ...rollHeaders].forEach(h => {
                                const unit = tableUnits[h] && tableUnits[h] !== '' ? `${h} (${tableUnits[h]})` : h;
                                headerTop.push(unit);
                            });

                         wsData = buildInfoRows(`CEKLIST ROLL JADI & SETTING MESIN ${kategori.toUpperCase()}`);
                            headerRowIndex = wsData.length;
                            wsData.push(headerTop);

                            merges.push({
                                s: {
                                    r: 0,
                                    c: 0
                                },
                                e: {
                                    r: 0,
                                    c: headerTop.length - 1
                                }
                            });

                            // ── Data rows ─────────────────────────────────────────────────
                            tableResult.forEach(row => {
                                if (row.rolls && row.rolls.length > 0) {
                                    row.rolls.forEach((roll, i) => {
                                        let dataRow = [];
                                        // Static — isi hanya di baris roll pertama
                                        staticHeaders.forEach(col => dataRow.push(i === 0 ? (row.static[col] ??
                                            '-') : ''));
                                        // Roll — tiap baris
                                        rollHeaders.forEach(col => dataRow.push(roll[col] ?? '-'));
                                        wsData.push(dataRow);
                                    });
                                } else {
                                    let dataRow = [];
                                    staticHeaders.forEach(col => dataRow.push(row.static[col] ?? '-'));
                                    rollHeaders.forEach(() => dataRow.push('-'));
                                    wsData.push(dataRow);
                                }
                            });

                        } else {

                            headerRow1 = ['No', 'Tanggal', 'Shift/Grup'];
                            let headerRow2 = ['', '', ''];
                            let headerRow3 = ['', '', ''];
                            let colMap = [];

                            tableHeaders.forEach((col) => {
                                // Split header and unit if pattern "Name (Unit)"
                                let unitMatch = col.match(/(.*)\s\((.*)\)/);
                                if (unitMatch) {
                                    headerRow1.push(unitMatch[1]);
                                    headerRow2.push(unitMatch[2]);
                                } else {
                                    headerRow1.push(col);
                                    headerRow2.push('');
                                }
                                headerRow3.push('');
                                colMap.push(col);
                            });


                            rollHeaders.forEach(col => {
                                const unit = tableUnits[col] && tableUnits[col] !== '' ? `${col} (${tableUnits[col]})` :
                                    col;
                                headerRow1.push(unit);
                                headerRow2.push('');
                                headerRow3.push('');
                            });

                            headerRow1.push('Operator');
                            headerRow2.push('');
                            headerRow3.push('');

                            wsData.push([`DATA SETTING MESIN ${kategori.toUpperCase()}`]); 
                            wsData.push([]);
                            wsData.push(headerRow1);
                            wsData.push(headerRow2);
                            wsData.push(headerRow3);

                            merges.push({
                                s: {
                                    r: 0,
                                    c: 0
                                },
                                e: {
                                    r: 0,
                                    c: headerRow1.length - 1
                                }
                            });
                            for (let i = 0; i < 3; i++) merges.push({
                                s: {
                                    r: 2,
                                    c: i
                                },
                                e: {
                                    r: 4,
                                    c: i
                                }
                            });

                            let currentC = 3;
                            for (let idx = 0; idx < colMap.length; idx++) {
                                if (headerRow2[currentC] !== '') {
                                    // Has unit in row2 → merge rows 3&4 only
                                    merges.push({
                                        s: { r: 3, c: currentC },
                                        e: { r: 4, c: currentC }
                                    });
                                } else {
                                    // No unit → span all 3 header rows
                                    merges.push({
                                        s: { r: 2, c: currentC },
                                        e: { r: 4, c: currentC }
                                    });
                                }
                                currentC++;
                            }
                            // Merge kolom roll (single row header)
                            rollHeaders.forEach(() => {
                                merges.push({
                                    s: {
                                        r: 2,
                                        c: currentC
                                    },
                                    e: {
                                        r: 4,
                                        c: currentC
                                    }
                                });
                                currentC++;
                            });
                            merges.push({
                                s: {
                                    r: 2,
                                    c: headerRow1.length - 1
                                },
                                e: {
                                    r: 4,
                                    c: headerRow1.length - 1
                                }
                            });

                            let currentNo = 0,
                                lastShiftGroup = "",
                                lastDate = "";
                            tableResult.forEach((row, index) => {
                                const hRow = allHeaders[index] ?? allHeaders[0] ?? {};
                                let shiftGrup = (hRow.shift ?? '') + '/' + (hRow.shift_grup ?? '');
                                let tanggal = hRow.tanggal ?? '-';
                                if (shiftGrup !== lastShiftGroup || tanggal !== lastDate) currentNo = 1;
                                else currentNo++;
                                lastShiftGroup = shiftGrup;
                                lastDate = tanggal;

                                if (row.rolls && row.rolls.length > 0) {
                                    row.rolls.forEach((roll, i) => {
                                        let dataRow = [
                                            i === 0 ? currentNo : '',
                                            i === 0 ? tanggal : '',
                                            i === 0 ? shiftGrup : '',
                                        ];
                                        colMap.forEach(key => dataRow.push(i === 0 ? (row.static[key] ?? '-') :
                                            ''));
                                        rollHeaders.forEach(col => dataRow.push(roll[col] ?? '-'));
                                        dataRow.push(i === 0 ? "{{ $operators ?? '-' }}" : '');
                                        wsData.push(dataRow);
                                    });
                                } else {
                                    let dataRow = [currentNo, tanggal, shiftGrup];
                                    colMap.forEach(key => dataRow.push(row.static[key] ?? '-'));
                                    rollHeaders.forEach(() => dataRow.push('-'));
                                    dataRow.push("{{ $operators ?? '-' }}");
                                    wsData.push(dataRow);
                                }
                            });
                        }


                        let ws = XLSX.utils.aoa_to_sheet(wsData);
                        ws['!merges'] = merges;

                        const borderThin = {
                            style: "thin",
                            color: {
                                rgb: "000000"
                            }
                        };
                        const totalRows = wsData.length;
                        const totalCols = kategori === 'Slitter' ?
                            (staticHeaders.length + rollHeaders.length - 1) :
                            headerRow1.length - 1;

                        for (let r = 0; r < totalRows; r++) {
                            for (let c = 0; c <= totalCols; c++) {
                                const ref = XLSX.utils.encode_cell({
                                    r,
                                    c
                                });
                                if (!ws[ref]) ws[ref] = {
                                    v: '',
                                    t: 's'
                                };
                                ws[ref].s = {
                                    alignment: {
                                        wrapText: true,
                                        vertical: 'center',
                                        horizontal: 'center'
                                    },
                                    font: {
                                        sz: 10
                                    }
                                };
                                if (kategori === 'Slitter' ? r >= headerRowIndex : r >= 2) {
                                    ws[ref].s.border = {
                                        top: borderThin,
                                        bottom: borderThin,
                                        left: borderThin,
                                        right: borderThin
                                    };
                                }
                                if (r === 0) ws[ref].s.font = {
                                    bold: true,
                                    sz: 12
                                };
                                if (kategori === 'Slitter' ? r === headerRowIndex : (r >= 2 && r <= 4)) {
                                    ws[ref].s.font = {
                                        bold: true,
                                        sz: 10
                                    };
                                }
                            }
                        }

                        if (kategori === 'Slitter') {
                            ws['!cols'] = [];
                            for (let c = 0; c <= totalCols; c++) ws['!cols'][c] = {
                                wch: 20
                            };
                        } else {
                            ws['!cols'] = [{
                                wch: 5
                            }, {
                                wch: 12
                            }, {
                                wch: 10
                            }];
                            for (let c = 3; c <= totalCols; c++) ws['!cols'][c] = {
                                wch: 15
                            };
                        }

                        XLSX.utils.book_append_sheet(wb, ws, "Data Laporan");

                        let fileName = kategori || "{{ $title_menu ?? 'Laporan' }}";
                        fileName = fileName.replace(/[^a-zA-Z0-9_\-]/g, '_').substring(0, 50);
                        if (!fileName) fileName = "Laporan";

                        XLSX.writeFile(wb, `${fileName}.xlsx`);

                    } catch (e) {
                        console.error("Export Error:", e);
                        alert("Gagal export: " + e.message);
                    }
                }
                // window.exportTableToPDF = function(tableId, title) {
                //     try {
                //         const {
                //             jsPDF
                //         } = window.jspdf;

                //         const kategori = "{{ $nama_kategori ?? '' }}".trim();
                //         const tableUnits = @json($units ?? []);
                //         const tableResult = @json($table_result ?? []);
                //         const operators = "{{ $operators ?? '-' }}";
                //         const staticHeaders = @json($static_columns ?? []);
                //         const rollHeaders = @json($roll_columns ?? []);

                //         let doc = new jsPDF('landscape', 'mm', 'a3');
                //         const pageWidth = doc.internal.pageSize.getWidth();

                //         const reportTitle = "CEKLIST ROLL JADI & SETTING MESIN SLITTER";

                //         doc.setFontSize(13);
                //         doc.setFont('helvetica', 'bold');
                //         doc.text(reportTitle, pageWidth / 2, 12, {
                //             align: 'center'
                //         });

                //         let startY = 22;
                //         const infoRows = [
                //             ["Tanggal", ": {{ $header->first()->tanggal ?? '-' }}"],
                //             ["Shift / Grup",
                //                 ": {{ $header->first()->shift ?? '' }} / {{ $header->first()->shift_grup ?? '' }}"
                //             ],
                //             ["Nama Mesin", ": {{ $header->first()->nama_mesin ?? '-' }}"],
                //             ["Nama Gedung", ": {{ $header->first()->nama_gedung ?? '-' }}"],
                //             ["Petugas Operator", ": " + operators],
                //         ];

                //         infoRows.forEach(([label, value]) => {
                //             doc.setFontSize(9);
                //             doc.setFont('helvetica', 'bold');
                //             doc.text(label, 14, startY);
                //             doc.setFont('helvetica', 'normal');
                //             doc.text(value, 50, startY);
                //             startY += 6;
                //         });
                //         startY += 3;

                //         const allHeaders = [...staticHeaders, ...rollHeaders];
                //         const marginLeft = 10;
                //         const marginRight = 10;
                //         const usableWidth = pageWidth - marginLeft - marginRight;
                //         const colW = Math.max(
                //             Math.floor((usableWidth / (allHeaders.length || 1)) * 10) / 10,
                //             10
                //         );

                //         // ── Head row ─────────────────────────────────────────────────
                //         const headRow = allHeaders.map(h => ({
                //             content: (tableUnits[h] && tableUnits[h] !== '') ?
                //                 `${h}\n(${tableUnits[h]})` :
                //                 h,
                //             styles: {
                //                 halign: 'center',
                //                 valign: 'middle',
                //                 fontStyle: 'bold',
                //                 textColor: [0, 0, 0],
                //                 fillColor: [173, 216, 230]
                //             }
                //         }));

                //         // ── Body rows ─────────────────────────────────────────────────
                //         const bodyRows = [];
                //         tableResult.forEach(row => {
                //             if (row.rolls && row.rolls.length > 0) {
                //                 row.rolls.forEach((roll, i) => {
                //                     const rowData = staticHeaders.map(col => ({
                //                         content: i === 0 ? (row.static[col] ?? '-') : '',
                //                         styles: {
                //                             halign: 'center',
                //                             valign: 'middle'
                //                         }
                //                     }));
                //                     rollHeaders.forEach(col => {
                //                         rowData.push({
                //                             content: roll[col] ?? '-',
                //                             styles: {
                //                                 halign: 'center',
                //                                 valign: 'middle'
                //                             }
                //                         });
                //                     });
                //                     bodyRows.push(rowData);
                //                 });
                //             } else {
                //                 const rowData = staticHeaders.map(col => ({
                //                     content: row.static[col] ?? '-',
                //                     styles: {
                //                         halign: 'center',
                //                         valign: 'middle'
                //                     }
                //                 }));
                //                 rollHeaders.forEach(() => {
                //                     rowData.push({
                //                         content: '-',
                //                         styles: {
                //                             halign: 'center',
                //                             valign: 'middle'
                //                         }
                //                     });
                //                 });
                //                 bodyRows.push(rowData);
                //             }
                //         });


                //         const colStyles = {};
                //         allHeaders.forEach((_, i) => {
                //             colStyles[i] = {
                //                 cellWidth: colW,
                //                 halign: 'center',
                //                 valign: 'middle'
                //             };
                //         });


                //         doc.autoTable({
                //             head: [headRow],
                //             body: bodyRows,
                //             startY: startY,
                //             theme: 'grid',
                //             styles: {
                //                 fontSize: 7,
                //                 cellPadding: 1.5,
                //                 overflow: 'linebreak',
                //                 valign: 'middle',
                //                 lineColor: [0, 0, 0],
                //                 lineWidth: 0.1,
                //             },
                //             headStyles: {
                //                 fillColor: [230, 100, 0],
                //                 textColor: [255, 255, 255],
                //                 fontStyle: 'bold',
                //                 halign: 'center',
                //                 valign: 'middle',
                //             },
                //             columnStyles: colStyles,
                //             margin: {
                //                 left: marginLeft,
                //                 right: marginRight,
                //                 bottom: 14
                //             },
                //             showHead: 'everyPage',
                //             didDrawPage: (data) => {
                //                 if (data.pageNumber > 1) {
                //                     doc.setFontSize(13);
                //                     doc.setFont('helvetica', 'bold');
                //                     doc.text(reportTitle, pageWidth / 2, 12, {
                //                         align: 'center'
                //                     });
                //                 }
                //             },
                //         });

                //         doc.save(`${kategori}_${title}.pdf`);

                //     } catch (e) {
                //         console.error("PDF Export Error:", e);
                //         alert("Gagal export PDF: " + e.message);
                //     }
                // };

                window.exportTableToPDF = function(tableId, title) {
                    try {
                        const {
                            jsPDF
                        } = window.jspdf;

                        // 1. Ambil Data dari Laravel Blade
                        const namaKategori = "{{ $nama_kategori }}".toUpperCase();
                        const firstHeader = @json($header->first());
                        const tableUnits = @json($units ?? []);
                        const tableResult = @json($table_result ?? []);
                        const staticHeaders = @json($static_columns ?? []);
                        const rollHeaders = @json($roll_columns ?? []);
                        const operators = "{{ $operators ?? '-' }}";

                       
                        const findValue = (obj, key) => {
                            if (!obj) return '-';
                            // Cek langsung
                            if (obj[key] !== undefined && obj[key] !== null && obj[key] !== '') return obj[key];

                      
                            const cleanKey = key.trim().toLowerCase();
                            const foundKey = Object.keys(obj).find(k => k.trim().toLowerCase() === cleanKey);

                            return (foundKey && obj[foundKey] !== null && obj[foundKey] !== '') ? obj[foundKey] : '-';
                        };

                       
                        let doc;
                        let isVertical = namaKategori.includes('CORTEC') || !namaKategori.includes('SLITTER');

                        if (isVertical) {
                            doc = new jsPDF('l', 'mm', 'a4'); // Landscape A4
                        } else {
                            doc = new jsPDF('l', 'mm', 'a3'); // Slitter pakai A3 Landscape agar muat banyak kolom
                        }

                        const pageWidth = doc.internal.pageSize.getWidth();
                        const reportTitle = isVertical ? `SETTING MESIN ${namaKategori}` :
                            `CEKLIST ROLL JADI & SETTING MESIN ${namaKategori}`;

                        // 3. Header info data (shared)
                        const info = [
                            ["Tanggal", `: ${firstHeader.tanggal || '-'}`],
                            ["Shift / Grup", `: ${firstHeader.shift || '-'}`],
                            ["Grup", `: ${firstHeader.shift_grup || '-'}`],
                            ["Nama Mesin", `: ${firstHeader.nama_mesin || '-'}`]
                        ];
                        
                        if (!isVertical) {
                            info.push(["Operator", `: ${operators}`]);
                        } else {
                            info.push(["Petugas Operator", `: ${operators}`]);
                        }

                        // For non-vertical (Slitter), print header normally
                        // For vertical (Cortec), header is printed inside the block with auto-fit sizing
                        let startY = 25;
                        if (!isVertical) {
                            doc.setFontSize(14);
                            doc.setFont('helvetica', 'bold');
                            doc.text(reportTitle, pageWidth / 2, 15, {
                                align: 'center'
                            });
                            doc.setFontSize(8);
                            info.forEach(([label, value]) => {
                                doc.setFont('helvetica', 'bold');
                                doc.text(label, 14, startY);
                                doc.setFont('helvetica', 'normal');
                                doc.text(value, 40, startY);
                                startY += 4.5;
                            });
                        }

                        // 4. Konstruksi Tabel
                        if (isVertical) {
                            const allParams = [...staticHeaders, ...rollHeaders];
                            let numNilai = tableResult.length;
                            if (numNilai < 1) numNilai = 1;

                            const MAX_NILAI_PER_PAGE = 8;

                            // Build all body rows with values for EVERY session index
                            function buildAllBodyRows(sessionIndices) {
                                const rows = [];
                                allParams.forEach(param => {
                                    const unit = tableUnits[param] || findValue(tableUnits, param);
                                    let rowVals = [param, unit];
                                    sessionIndices.forEach(s => {
                                        const data = tableResult[s] || { static: {}, rolls: [] };
                                        let val = findValue(data.static, param);
                                        if (val === '-' && data.rolls && data.rolls.length > 0) {
                                            val = findValue(data.rolls[0], param);
                                        }
                                        rowVals.push(val);
                                    });
                                    rows.push(rowVals);
                                });

                                // Extra roll rows (roll index > 0)
                                const maxRolls = Math.max(...tableResult
                                    .filter((_, si) => sessionIndices.includes(si))
                                    .map(d => (d.rolls && d.rolls.length > 1) ? d.rolls.length : 0), 0);
                                if (maxRolls > 1) {
                                    for (let rollIdx = 1; rollIdx < maxRolls; rollIdx++) {
                                        rollHeaders.forEach(param => {
                                            const unit = tableUnits[param] || findValue(tableUnits, param);
                                            let rowVals = [`${param} (Roll ${rollIdx + 1})`, unit];
                                            sessionIndices.forEach(s => {
                                                const data = tableResult[s] || { static: {}, rolls: [] };
                                                const val = (data.rolls && data.rolls[rollIdx]) ? findValue(data.rolls[rollIdx], param) : '-';
                                                rowVals.push(val);
                                            });
                                            rows.push(rowVals);
                                        });
                                    }
                                }
                                return rows;
                            }

                            // Chunk session indices into groups of MAX_NILAI_PER_PAGE
                            let sessionChunks = [];
                            for (let i = 0; i < numNilai; i += MAX_NILAI_PER_PAGE) {
                                sessionChunks.push(
                                    Array.from({ length: Math.min(MAX_NILAI_PER_PAGE, numNilai - i) }, (_, k) => i + k)
                                );
                            }

                            sessionChunks.forEach((chunkIndices, chunkIdx) => {
                                const chunkSize = chunkIndices.length;
                                const bodyRows = buildAllBodyRows(chunkIndices);
                                const totalRows = bodyRows.length;

                                // ── Auto-fit: calculate optimal font size to fit 1 page ──
                                const pageHeight = doc.internal.pageSize.getHeight();
                                const marginTop = 10;
                                const marginBottom = 8;

                                // Compact header info height
                                const titleH = 6;
                                const infoLineH = 3.5;
                                const infoH = info.length * infoLineH + 2;
                                const headerUsed = titleH + infoH + 2; // title + info + gap

                                const availableH = pageHeight - marginTop - marginBottom - headerUsed;

                                // Each row ~= fontSize * 0.55 + cellPadding*2
                                // Header row counts as 1 extra row
                                const dataRows = totalRows + 1; // +1 for header
                                // Target: dataRows * rowHeight <= availableH
                                // rowHeight ≈ fontSize * 0.5 + padding * 2
                                // We pick fontSize dynamically, padding = 0.5
                                let fontSize = Math.min(7, Math.max(4, (availableH / dataRows - 1) / 0.5));
                                fontSize = Math.round(fontSize * 10) / 10; // round to 1 decimal
                                let cellPad = Math.min(1, Math.max(0.3, (availableH / dataRows - fontSize * 0.4) / 2));
                                cellPad = Math.round(cellPad * 10) / 10;

                                if (chunkIdx > 0) {
                                    doc.addPage();
                                }

                                // ── Print compact header on every page ──
                                let curY = marginTop;
                                doc.setFontSize(Math.min(12, fontSize + 5));
                                doc.setFont('helvetica', 'bold');
                                doc.text(reportTitle, pageWidth / 2, curY + 3, { align: 'center' });
                                curY += titleH;

                                doc.setFontSize(Math.min(7, fontSize + 1));
                                info.forEach(([label, value]) => {
                                    doc.setFont('helvetica', 'bold');
                                    doc.text(label, 10, curY + 2);
                                    doc.setFont('helvetica', 'normal');
                                    doc.text(value, 36, curY + 2);
                                    curY += infoLineH;
                                });
                                curY += 1;

                                let headRow = ['PARAMETER', 'Unit'];
                                chunkIndices.forEach(si => headRow.push('Nilai ' + (si + 1)));

                                // ── Auto-fit column widths to use full page width ──
                                const usableWidth = pageWidth - 10 - 10; // left + right margin
                                const paramColW = Math.max(30, usableWidth * 0.25);
                                const unitColW = Math.max(8, usableWidth * 0.06);
                                const remainingW = usableWidth - paramColW - unitColW;
                                const nilaiColW = Math.max(10, remainingW / chunkSize);

                                let colStyles = {
                                    0: { halign: 'left', fontStyle: 'bold', cellWidth: paramColW },
                                    1: { cellWidth: unitColW, halign: 'center' }
                                };
                                for (let i = 0; i < chunkSize; i++) {
                                    colStyles[i + 2] = { cellWidth: nilaiColW, halign: 'center' };
                                }

                                doc.autoTable({
                                    startY: curY,
                                    head: [headRow],
                                    body: bodyRows,
                                    theme: 'grid',
                                    tableWidth: 'wrap',
                                    styles: {
                                        fontSize: fontSize,
                                        halign: 'center',
                                        valign: 'middle',
                                        cellPadding: cellPad,
                                        lineWidth: 0.1,
                                        lineColor: [100, 100, 100],
                                        overflow: 'linebreak'
                                    },
                                    headStyles: {
                                        fillColor: [0, 82, 155],
                                        textColor: 255,
                                        fontStyle: 'bold',
                                        fontSize: fontSize
                                    },
                                    columnStyles: colStyles,
                                    margin: { left: 10, right: 10, top: marginTop, bottom: marginBottom },
                                    // Prevent page break - force single page
                                    pageBreak: 'avoid'
                                });
                            });

                        } else {

                            const allHeaders = [...staticHeaders, ...rollHeaders];
                            const bodyRows = [];

                            tableResult.forEach((group) => {
                                const rowCount = (group.rolls && group.rolls.length > 0) ? group.rolls.length : 1;

                                for (let i = 0; i < rowCount; i++) {
                                    const rowData = [];
                                    const rollData = (group.rolls && group.rolls[i]) ? group.rolls[i] : {};

                                    if (i === 0) {
                                        staticHeaders.forEach(col => {
                                            rowData.push({
                                                content: findValue(group.static, col),
                                                rowSpan: rowCount,
                                                styles: { valign: 'middle', halign: 'center' }
                                            });
                                        });
                                    }

                                    rollHeaders.forEach(col => {
                                        rowData.push(findValue(rollData, col));
                                    });

                                    bodyRows.push(rowData);
                                }
                            });

                            doc.autoTable({
                                startY: startY + 5,
                                head: [allHeaders.map(h => {
                                    const unit = tableUnits[h] || findValue(tableUnits, h);
                                    return (unit && unit !== '-') ? `${h}\n(${unit})` : h;
                                })],
                                body: bodyRows,
                                theme: 'grid',
                                styles: {
                                    fontSize: 7,
                                    halign: 'center',
                                    valign: 'middle',
                                    overflow: 'linebreak',
                                    lineWidth: 0.1
                                },
                                headStyles: {
                                    fillColor: [0, 82, 155], // Warna Biru
                                    textColor: 255,
                                    fontStyle: 'bold'
                                },

                                margin: {
                                    left: 10,
                                    right: 10
                                }
                            });
                        }

                        // 5. Download File
                        const fileName = `Laporan_${namaKategori}_${firstHeader.nama_mesin}_${firstHeader.tanggal}.pdf`;
                        doc.save(fileName);

                    } catch (e) {
                        console.error("PDF Export Error:", e);
                        alert("Gagal export PDF: " + e.message);
                    }
                };


                window.exportExcel = exportExcel;
                window.exportTableToPDF = exportTableToPDF;
            </script>
        @endpush