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

{{-- section content --}}
@section('content')
    <style>
        /* 3D Export Button Hover Effects */
        .export-btn-3d {
            position: relative;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .export-btn-3d:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .export-btn-3d:active {
            transform: translateY(-1px) scale(1.02);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        /* Excel Button - Green Glow */
        .export-excel:hover {
            box-shadow: 0 8px 20px rgba(40, 167, 69, 0.4), 0 0 20px rgba(40, 167, 69, 0.2);
            border-color: #28a745 !important;
            background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(40, 167, 69, 0.05) 100%);
        }

        /* PDF Button - Red Glow */
        .export-pdf:hover {
            box-shadow: 0 8px 20px rgba(220, 53, 69, 0.4), 0 0 20px rgba(220, 53, 69, 0.2);
            border-color: #dc3545 !important;
            background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
        }

        /* Print Button - Gray Glow */
        .export-print:hover {
            box-shadow: 0 8px 20px rgba(108, 117, 125, 0.4), 0 0 20px rgba(108, 117, 125, 0.2);
            border-color: #6c757d !important;
            background: linear-gradient(135deg, rgba(108, 117, 125, 0.1) 0%, rgba(108, 117, 125, 0.05) 100%);
        }

        /* Icon Animation on Hover */
        .export-btn-3d:hover i {
            animation: iconBounce 0.6s ease-in-out;
        }

        @keyframes iconBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }

        .logo-panah {
            transition: transform 0.3s ease;
        }

        .logo-panah.rotate {
            transform: rotate(180deg);
        }
    </style>

    @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 shadow-lg">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="mb-0">Result {{ $title_menu }}</h5>
                        </div>
                        <hr class="horizontal dark mt-0">

                        {{-- ── Toolbar ── --}}
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper row">
                                    <div class="col">
                                        <a href="{{ url($url_menu) }}" class="btn btn-secondary mb-0">
                                            <i class="fas fa-circle-left me-1"></i>
                                            <span class="font-weight-bold">Kembali</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- ── Export buttons ── --}}
                        <div class="row px-4 pb-2">
                            <div class="col-lg">
                                <div class="d-flex gap-2">
                                    @if ($authorize->excel == '1')
                                        <button type="button"
                                            class="btn btn-sm btn-outline-success mb-0 export-btn-3d export-excel"
                                            id="exportAllExcel">
                                            <i class="fas fa-file-excel me-1"></i> Excel
                                        </button>
                                    @endif
                                    @if ($authorize->pdf == '1')
                                        <button type="button"
                                            class="btn btn-sm btn-outline-danger mb-0 export-btn-3d export-pdf"
                                            id="exportAllPDF">
                                            <i class="fas fa-file-pdf me-1"></i> PDF
                                        </button>
                                    @endif
                                    @if ($authorize->print == '1')
                                        <button type="button"
                                            class="btn btn-sm btn-outline-secondary mb-0 export-btn-3d export-print"
                                            id="printAll">
                                            <i class="fas fa-print me-1"></i> Print
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0 mb-2">

                        {{-- ── Result Table (Flat Style matches Dashboard) ── --}}
                        <div class="row px-4 py-2" id="real-result-container">
                            <div class="table-responsive p-0">
                                <table class="table display align-items-center mb-0" id="list_rptdev">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder">ID SAMPLE</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder">ID PS</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Project</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Item</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Sumber Material</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Date</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Customer</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Salesman</th>
                                            <!-- <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Main Status</th> -->
                                            <!-- <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Approver</th> -->
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">Approve Marketing</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">Approve QC</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">Order PPIC</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">GR Produksi</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">Generate PPS</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">Gudang FG</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">Proses Administrasi Delivery</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Feedback Customer</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $statusColors = [
                                                'Entry' => 'info',
                                                'Pending' => 'warning',
                                                'OnProgress' => 'primary',
                                                'Finished' => 'success',
                                                'Rejected' => 'danger',
                                                'Cancelled' => 'dark',
                                                'Approved' => 'success',
                                            ];
                                        @endphp

                                        @foreach ($collapse_header as $item)
                                       
                                            <tr>
                                                <td><h6 class="mb-0 text-sm">{{ $item->id_sample ?? $item->id_ps }}</h6></td>
                                                <td><h6 class="mb-0 text-sm">{{ $item->id_ps ?? $item->matched_id_ps ?? '-' }}</h6></td>
                                                <td><h6 class="mb-0 text-sm">{{ $item->project ?? '-' }}</h6></td>
                                                <td><p class="text-sm mb-0 text-dark font-weight-bold">{{ $item->item_desc ?? '-' }}</p></td>
                                                <td><p class="text-sm mb-0 text-dark font-weight-bold">{{ $item->sumber_material ?? '-' }}</p></td>
                                                <td>
                                                    <p class="text-sm mb-0 text-dark font-weight-bold">
                                                        {{ \Carbon\Carbon::parse($item->ps_date ?? ($item->sample_date ?? $item->created_at))->format('Y-m-d') }}
                                                    </p>
                                                </td>
                                                <td><p class="text-sm mb-0 text-dark font-weight-bold">{{ $item->customer }}</p></td>
                                                <td><p class="text-sm mb-0 text-dark font-weight-bold">{{ $item->nama_sales ?? $item->salesman ?? '-' }}</p></td>
                                                <!-- <td>
                                                    <span class="badge bg-gradient-{{ $statusColors[$item->status] ?? 'secondary' }}">{{ strtoupper($item->status) }}</span>
                                                </td> -->
                                                <!-- <td class="text-sm font-weight-normal">
                                                    <div class="d-flex align-items-center">
                                                        <span>{{ $item->approver_name ?? '-' }}</span>
                                                    </div>
                                                </td> -->
                                                
                                                {{-- Approve Marketing --}}
                                                <td class="text-center">
                                                    <div class="d-flex flex-column align-items-center">
                                                        @if($item->approve_marketing)
                                                            <i class="fas fa-check-circle text-success" title="Approved"></i>
                                                        @else
                                                            <i class="fas fa-clock text-secondary opacity-5" title="Pending"></i>
                                                        @endif
                                                    </div>
                                                </td>

                                                {{-- Approve QC --}}
                                                <td class="text-center">
                                                    <div class="d-flex flex-column align-items-center">
                                                        @if($item->approve_qc)
                                                            <i class="fas fa-check-circle text-success" title="Approved"></i>
                                                        @else
                                                            <i class="fas fa-clock text-secondary opacity-5" title="Pending"></i>
                                                        @endif
                                                    </div>
                                                </td>

                                                {{-- Order PPIC --}}
                                                <td class="text-center">
                                                    <div class="d-flex flex-column align-items-center">
                                                        @if(isset($item->is_backup_qa) && $item->is_backup_qa)
                                                            <span class="text-muted fw-bold" title="N/A - Backup QA/PPIC">-</span>
                                                        @elseif($item->order_ppic > 0)
                                                            <i class="fas fa-check-circle text-success" title="Done ({{ round($item->order_ppic) }})"></i>
                                                        @elseif(!empty($item->is_sap_fetching))
                                                            <i class="fas fa-sync-alt text-warning fa-spin" title="Sedang sinkronisasi..."></i>
                                                        @elseif(!empty($item->is_sap_failed))
                                                            <i class="fas fa-exclamation-triangle text-danger" title="Gagal ambil data SAP"></i>
                                                        @else
                                                            <i class="fas fa-clock text-secondary opacity-5" title="Wait"></i>
                                                        @endif
                                                    </div>
                                                </td>

                                                {{-- GR Produksi --}}
                                                <td class="text-center">
                                                    <div class="d-flex flex-column align-items-center">
                                                        @if(isset($item->is_backup_qa) && $item->is_backup_qa)
                                                            <span class="text-muted fw-bold" title="N/A - Backup QA/PPIC">-</span>
                                                        @elseif($item->gr_produksi > 0)
                                                            <i class="fas fa-check-circle text-success" title="Done ({{ round($item->gr_produksi) }})"></i>
                                                        @elseif(!empty($item->is_sap_fetching))
                                                            <i class="fas fa-sync-alt text-warning fa-spin" title="Sedang sinkronisasi..."></i>
                                                        @elseif(!empty($item->is_sap_failed))
                                                            <i class="fas fa-exclamation-triangle text-danger" title="Gagal ambil data SAP"></i>
                                                        @else
                                                            <i class="fas fa-clock text-secondary opacity-5" title="Wait"></i>
                                                        @endif
                                                    </div>
                                                </td>

                                                {{-- Generate PPS --}}
                                                <td class="text-center">
                                                    <div class="d-flex flex-column align-items-center">
                                                        @if(isset($item->is_backup_qa) && $item->is_backup_qa)
                                                            <span class="text-muted fw-bold" title="N/A - Backup QA/PPIC">-</span>
                                                        @elseif(!empty($item->genpps))
                                                            <i class="fas fa-check-circle text-success" title="Done"></i>
                                                        @else
                                                            <i class="fas fa-clock text-secondary opacity-5" title="Wait"></i>
                                                        @endif
                                                    </div>
                                                </td>

                                                {{-- Gudang FG --}}
                                                <td class="text-center">
                                                    <div class="d-flex flex-column align-items-center">
                                                        @if(isset($item->is_backup_qa) && $item->is_backup_qa)
                                                            <span class="text-muted fw-bold" title="N/A - Backup QA/PPIC">-</span>
                                                        @elseif($item->gudang_fg > 0)
                                                            <i class="fas fa-check-circle text-success" title="Done ({{ round($item->gudang_fg) }})"></i>
                                                        @elseif(!empty($item->is_sap_fetching))
                                                            <i class="fas fa-sync-alt text-warning fa-spin" title="Sedang sinkronisasi..."></i>
                                                        @elseif(!empty($item->is_sap_failed))
                                                            <i class="fas fa-exclamation-triangle text-danger" title="Gagal ambil data SAP"></i>
                                                        @else
                                                            <i class="fas fa-clock text-secondary opacity-5" title="Wait"></i>
                                                        @endif
                                                    </div>
                                                </td>

                                                {{-- Proses Administrasi Delivery --}}
                                                <td class="text-center">
                                                    <div class="d-flex flex-column align-items-center">
                                                        @if(isset($item->delivery) && $item->delivery > 0)
                                                            <i class="fas fa-check-circle text-success" title="Done ({{ round($item->delivery) }})"></i>
                                                        @elseif(!empty($item->is_sap_fetching))
                                                            <i class="fas fa-sync-alt text-warning fa-spin" title="Sedang sinkronisasi..."></i>
                                                        @elseif(!empty($item->is_sap_failed))
                                                            <i class="fas fa-exclamation-triangle text-danger" title="Gagal ambil data SAP"></i>
                                                        @else
                                                            <i class="fas fa-clock text-secondary opacity-5" title="Wait"></i>
                                                        @endif
                                                    </div>
                                                </td>

                                                {{-- Feedback Customer --}}
                                                <td>
                                                    @if(!empty($item->feedback_customer))
                                                        <div class="text-sm text-dark" style="min-width:180px; max-width:280px; white-space:normal;">
                                                            {{ $item->feedback_customer }}
                                                        </div>
                                                        @if((string) ($item->status_feedback ?? '') === '1')
                                                            <span class="badge bg-success">Customer OK</span>
                                                        @elseif((string) ($item->status_feedback ?? '') === '0')
                                                            <span class="badge bg-danger">Customer Not OK</span>
                                                        @else
                                                            <span class="badge bg-secondary">Belum Ada Keputusan</span>
                                                        @endif
                                                        @if(!empty($item->attachment_feedback))
                                                            <a href="{{ route('feedcs.attachment.preview', ['token' => encrypt($item->attachment_feedback)]) }}"
                                                                target="_blank" rel="noopener" class="text-xs text-primary mt-1 d-block">
                                                                <i class="fas fa-paperclip me-1"></i>Lihat lampiran
                                                            </a>
                                                        @endif
                                                    @else
                                                        <span class="text-secondary text-sm">Belum ada feedback</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            {{-- Hidden form for paging & search --}}
                            <form id="psPagingForm" method="POST" action="{{ URL::to($url_menu) }}">
                                @csrf
                                <input type="hidden" name="page" id="pageInput" value="{{ $collapse_header->currentPage() }}">
                                @foreach ($filterParams ?? [] as $k => $v)
                                    <input type="hidden" name="{{ $k }}" value="{{ $v }}">
                                @endforeach
                            </form>

                            <div class="d-flex justify-content-end px-4 py-2">
                                {{ $collapse_header->links('pagination::bootstrap-5') }}
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                @if ($table_result)
                                    <div class="nav-wrapper">
                                        <code>Note : Data ditampilkan per Sample ID</code>
                                    </div>
                                @else
                                    <div class="nav-wrapper"><code>Data not found!</code></div>
                                @endif
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
$(document).ready(function () {
    // ── Init DataTables ──
    $('table.display').each(function () {
        const tableId = $(this).attr('id');
        if (tableId && !$.fn.DataTable.isDataTable('#' + tableId)) {
            $('#' + tableId).DataTable({
                language: {
                    search: 'Cari :',
                    lengthMenu: 'Tampilkan _MENU_ baris',
                    zeroRecords: 'Tidak ada data',
                    info: 'Data _START_ - _END_ dari _TOTAL_',
                    infoEmpty: 'Tidak ada data',
                    infoFiltered: '(dari _MAX_ data)'
                },
                responsive: true,
                paging: true, // Enable paging to match rptsmp
                ordering: true,
                searching: true // Enable searching to match rptsmp
            });
        }
    });

    // Arrow rotate on collapse
    $(document).on('show.bs.collapse', '.collapse', function () {
        $(this).parent().find('.logo-panah').addClass('rotate');
    });
    $(document).on('hide.bs.collapse', '.collapse', function () {
        $(this).parent().find('.logo-panah').removeClass('rotate');
    });

    // ── Server-side search ──
    let searchTimeout;
    let currentRequest = null;

    $('#btn-search-server').on('click', function () {
        performAjaxSearch($('#server-search-box').val());
    });

    $('#server-search-box').on('input', function () {
        const val = $(this).val();
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => performAjaxSearch(val), 500);
    });

    function performAjaxSearch(val) {
        const $form = $('#psPagingForm');
        $form.find('input[name="search_all"]').remove();
        $form.append('<input type="hidden" name="search_all" value="' + val + '">');
        $('#pageInput').val(1);

        const formData  = $form.serialize();
        const actionUrl = $form.attr('action');
        $('#real-result-container').css('opacity', '0.5');

        if (currentRequest) currentRequest.abort();
        currentRequest = $.ajax({
            url: actionUrl,
            type: 'POST',
            data: formData,
            success: function (response) {
                const newContent = $('<div>').html(response).find('#real-result-container').html();
                if (newContent) $('#real-result-container').html(newContent);
                $('#real-result-container').css('opacity', '1');
            },
            error: function (xhr) {
                if (xhr.statusText !== 'abort') {
                    $('#real-result-container').css('opacity', '1');
                }
            }
        });
    }

    // ── Export functionality ──
    $('#exportAllExcel').on('click', function() { exportAllData('excel'); });
    $('#exportAllPDF').on('click', function() { exportAllData('pdf'); });
    $('#printAll').on('click', function() { exportAllData('print'); });

    function exportAllData(type) {
        const btnSelector = type === 'excel' ? '#exportAllExcel' : (type === 'pdf' ? '#exportAllPDF' : '#printAll');
        const $btn = $(btnSelector);
        const originalBtnHtml = $btn.html();
        $btn.html('<i class="fas fa-spinner fa-spin me-1"></i> Processing...').prop('disabled', true);

        $.ajax({
            url: $('#psPagingForm').attr('action') || window.location.href,
            type: 'POST',
            data: $('#psPagingForm').serialize() + '&export_type=' + type,
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            success: function(response) {
                if (response.success && response.data && response.data.length > 0) {
                    processExport(type, response.data);
                } else {
                    Swal.fire('Info', 'No data found for the current filters.', 'info');
                }
            },
            error: function(xhr, status, error) {
                Swal.fire('Error', 'Failed to fetch export data.', 'error');
            },
            complete: function() {
                $btn.html(originalBtnHtml).prop('disabled', false);
            }
        });
    }

    function sanitizeForExcel(value) {
        if (value === null || value === undefined) return '';
        let str = String(value);
        str = str.replace(/[\x00-\x08\x0B-\x0C\x0E-\x1F\x7F]/g, '');
        str = str.replace(/"/g, '""');
        return str;
    }

    function processExport(type, data) {
        const columnMapping = [
            { key: 'no', header: 'No' },
            { key: 'id_sample', header: 'ID Sample' },
            { key: 'id_ps', header: 'ID PS', render: (r) => r.id_ps || r.matched_id_ps || '-' },
            { key: 'project', header: 'Project', render: (r) => r.project || '-' },
            { key: 'item_desc', header: 'Item', render: (r) => r.item_desc || '-' },
            { key: 'sumber_material', header: 'Sumber Material', render: (r) => r.sumber_material || '-' },
            { key: 'ps_date', header: 'Date', render: (r) => {
                let d = r.ps_date || r.sample_date || r.created_at;
                return d ? d.substring(0, 10) : '-';
            }},
            { key: 'customer', header: 'Customer' },
            { key: 'nama_sales', header: 'Salesman', render: (r) => r.nama_sales || r.salesman || '-' },
            { key: 'status', header: 'Main Status' },
            { key: 'approver_name', header: 'Approver', render: (r) => r.approver_name || '-' },
            { key: 'approve_marketing', header: 'Approve Marketing', render: (r) => r.approve_marketing ? 'Yes' : 'No' },
            { key: 'approve_qc', header: 'Approve QC', render: (r) => r.approve_qc ? 'Yes' : 'No' },
            { key: 'order_ppic', header: 'Order PPIC', render: (r) => {
                if (r.is_backup_qa) return '-';
                return r.order_ppic > 0 ? 'Yes' : 'No';
            }},
            { key: 'gr_produksi', header: 'GR Produksi', render: (r) => {
                if (r.is_backup_qa) return '-';
                return r.gr_produksi > 0 ? 'Yes' : 'No';
            }},
            { key: 'genpps', header: 'Generate PPS', render: (r) => r.genpps ? 'Yes' : 'No' },
            { key: 'gudang_fg', header: 'Gudang FG', render: (r) => {
                if (r.is_backup_qa) return '-';
                return r.gudang_fg > 0 ? 'Yes' : 'No';
            }},
            { key: 'delivery', header: 'Adm Delivery', render: (r) => r.delivery > 0 ? 'Yes' : 'No' },
            { key: 'feedback_customer', header: 'Feedback Customer', render: (r) => r.feedback_customer || '-' },
            { key: 'status_feedback', header: 'Status Feedback', render: (r) => {
                if (String(r.status_feedback) === '1') return 'Customer OK';
                if (String(r.status_feedback) === '0') return 'Customer Not OK';
                return r.feedback_customer ? 'Belum Ada Keputusan' : '-';
            }},
            { key: 'attachment_feedback', header: 'Lampiran Feedback', render: (r) => r.attachment_feedback ? 'Ada' : '-' }
        ];

        function getCellValue(col, row, rowIndex) {
            if (col.key === 'no') return rowIndex + 1;
            if (col.render) return col.render(row);
            return (row[col.key] !== null && row[col.key] !== undefined) ? row[col.key] : '-';
        }

        // ── PDF: gunakan pdfmake langsung (cepat, tidak terpotong) ──────────
        if (type === 'pdf') {
            const headerRow = columnMapping.map(col => ({
                text: col.header,
                style: 'tableHeader',
                alignment: 'center'
            }));

            const bodyRows = data.map((row, i) =>
                columnMapping.map(col => ({
                    text: String(getCellValue(col, row, i)),
                    style: 'tableCell',
                    alignment: 'center'
                }))
            );

            const docDefinition = {
                pageOrientation: 'landscape',
                pageSize: 'A3',
                pageMargins: [15, 40, 15, 40],
                content: [
                    { text: 'Monitoring Sample Report', style: 'title' },
                    { text: new Date().toLocaleDateString('id-ID', { day:'2-digit', month:'long', year:'numeric' }), style: 'subtitle' },
                    {
                        table: {
                            headerRows: 1,
                            widths: Array(columnMapping.length).fill('*'),
                            body: [headerRow, ...bodyRows]
                        },
                        layout: {
                            fillColor: (rowIndex) => rowIndex === 0 ? '#00b7bd' : (rowIndex % 2 === 0 ? '#f2f2f2' : null),
                            hLineWidth: () => 0.5,
                            vLineWidth: () => 0.5,
                            hLineColor: () => '#cccccc',
                            vLineColor: () => '#cccccc',
                        }
                    }
                ],
                styles: {
                    title:       { fontSize: 14, bold: true, alignment: 'center', margin: [0, 0, 0, 4] },
                    subtitle:    { fontSize: 9, alignment: 'center', color: '#555', margin: [0, 0, 0, 10] },
                    tableHeader: { fontSize: 7, bold: true, color: '#ffffff' },
                    tableCell:   { fontSize: 6 }
                }
            };

            pdfMake.createPdf(docDefinition).download(
                'Monitoring_Sample_' + new Date().toISOString().slice(0, 10) + '.pdf'
            );
            return;
        }

        // ── Print: buka window print dengan tabel HTML ──────────────────────
        if (type === 'print') {
            let printHtml = `<!DOCTYPE html><html><head><meta charset="utf-8">
            <title>Monitoring Sample Report</title>
            <style>
                body { font-family: Arial, sans-serif; font-size: 8px; margin: 10px; }
                h2 { text-align:center; font-size:13px; margin-bottom:4px; }
                p.date { text-align:center; font-size:9px; color:#555; margin-bottom:10px; }
                table { width:100%; border-collapse:collapse; }
                th { background:#00b7bd; color:#fff; padding:4px 3px; font-size:7px; border:1px solid #aaa; text-align:center; }
                td { padding:3px 3px; border:1px solid #ccc; text-align:center; }
                tr:nth-child(even) td { background:#f2f2f2; }
                @page { size: A3 landscape; margin: 10mm; }
                @media print { body { margin:0; } }
            </style></head><body>
            <h2>Monitoring Sample Report</h2>
            <p class="date">${new Date().toLocaleDateString('id-ID', { day:'2-digit', month:'long', year:'numeric' })}</p>
            <table><thead><tr>`;
            columnMapping.forEach(col => { printHtml += `<th>${col.header}</th>`; });
            printHtml += '</tr></thead><tbody>';
            data.forEach((row, i) => {
                printHtml += '<tr>';
                columnMapping.forEach(col => {
                    printHtml += `<td>${sanitizeForExcel(getCellValue(col, row, i))}</td>`;
                });
                printHtml += '</tr>';
            });
            printHtml += '</tbody></table></body></html>';

            const pw = window.open('', '_blank');
            pw.document.write(printHtml);
            pw.document.close();
            pw.focus();
            setTimeout(() => { pw.print(); }, 600);
            return;
        }

        // ── Excel: tetap gunakan DataTables HTML5 (jszip) ───────────────────
        const tempTableId = 'tempExportTable_' + Date.now();
        let tableHTML = '<table id="' + tempTableId + '" class="display" style="display:none;"><thead><tr>';

        columnMapping.forEach(col => { tableHTML += '<th>' + col.header + '</th>'; });
        tableHTML += '</tr></thead><tbody>';

        data.forEach((row, rowIndex) => {
            tableHTML += '<tr>';
            columnMapping.forEach(col => {
                let cleanValue = sanitizeForExcel(getCellValue(col, row, rowIndex));
                tableHTML += '<td>' + $('<div>').text(cleanValue).html() + '</td>';
            });
            tableHTML += '</tr>';
        });

        tableHTML += '</tbody></table>';
        $('body').append(tableHTML);

        const tempDT = $('#' + tempTableId).DataTable({
            dom: 'Bfrtip',
            paging: false,
            ordering: false,
            searching: false,
            buttons: [{
                extend: 'excelHtml5',
                title: 'Monitoring Sample Report',
                filename: 'Monitoring_Sample_' + new Date().toISOString().slice(0, 10),
            }]
        });

        setTimeout(() => {
            try {
                tempDT.button(0).trigger();
                setTimeout(() => {
                    tempDT.destroy();
                    $('#' + tempTableId).remove();
                }, 2000);
            } catch (err) {
                Swal.fire('Error', 'Export failed: ' + err.message, 'error');
            }
        }, 500);
    }

    // ── Pagination via form ──
    $(document).on('click', '.pagination a', function (e) {
        e.preventDefault();
        const href = $(this).attr('href');
        if (!href) return;
        const page = new URL(href, window.location.origin).searchParams.get('page') || 1;
        $('#pageInput').val(page);
        $('#psPagingForm').submit();
    });
});
</script>
@endpush