@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);
            }
        }

        /* Ripple Effect on Click */
        .export-btn-3d::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .export-btn-3d:active::after {
            width: 200px;
            height: 200px;
            opacity: 0;
        }

        /* Modal PS Selection Hover */
        .hover-bg:hover {
            background-color: rgba(0, 183, 189, 0.05);
        }
    </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">
                        <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 --}}
                                        <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 class="col-auto align-self-center">
                                        <div class="d-flex align-items-center">
                                            <label class="text-sm font-weight-bold text-secondary me-2 mb-0">Cari :</label>
                                            <div class="input-group input-group-sm" style="width: 300px;">
                                                <input type="search" id="server-search-box" class="form-control"
                                                    placeholder="ID PS / Sample / Cust..."
                                                    value="{{ $filterParams['search_all'] ?? '' }}">
                                                <button class="btn btn-outline-primary mb-0" type="button"
                                                    id="btn-search-server">
                                                    <i class="fas fa-search" aria-hidden="true"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Global Export Buttons - Below Kembali with 3D Hover Effect --}}
                        <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">

                        @if ($is_admin)
                            <div class="row px-4 pb-2">
                                <div class="col-lg">
                                    <button type="button"
                                        class="btn btn-sm btn-outline-warning mb-0"
                                        id="btn-back-to-progress">
                                        <i class="fas fa-rotate-left me-1"></i> Kembalikan ke On Progress
                                    </button>
                                </div>
                            </div>
                            <hr class="horizontal dark mt-0 mb-2">
                        @endif


                        <div class="row px-4 py-2" id="real-result-container">

                            @foreach ($collapse_header as $ps)
                                <div class="card mb-3 sample-card"
                                    data-search="{{ strtolower($ps->id_ps . ' ' . $ps->customer . ' ' . $ps->sales) }}">

                                    <div class="card-header d-flex justify-content-between align-items-center"
                                        data-bs-toggle="collapse" data-bs-target="#ps-{{ $ps->id_ps }}"
                                        style="cursor:pointer;">
                                        <div>
                                            @if ($is_admin)
                                                @php $idPsValue = $ps->{'Id PS'} ?? $ps->id_ps ?? ''; @endphp
                                                <input type="checkbox" class="form-check-input sample-checkbox"
                                                    value="{{ $idPsValue }}"
                                                    data-ps="{{ $ps->id_ps }}"
                                                    onclick="event.stopPropagation();">
                                            @endif
                                            <span class="badge bg-primary text-white fw-semibold">
                                                NO PS : {{ $ps->id_ps }}
                                            </span>
                                            <span>| Customer : {{ $ps->customer }} |
                                                {{ !empty($ps->ps_date) ? date('d-m-Y', strtotime($ps->ps_date)) : '-' }} |
                                                {{ count($details[$ps->id_ps] ?? []) }}
                                                Sample</span>
                                        </div>
                                        <div class="panah" id="dropdown">
                                            <span id="logo"
                                                class="fas fa-circle-arrow-down text-primary logo-panah"></span>
                                        </div>
                                    </div>

                                    <div class="collapse" id="ps-{{ $ps->id_ps }}">
                                        <div class="card-body p-0">
                                            <div class="table-responsive">
                                                <table class="table display"
                                                    id="list_{{ $dmenu }}_{{ $ps->id_ps }}">
                                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                        <tr>
                                                            <th class="text-center">No</th>
                                                            <th class="text-center">Customer</th>
                                                            <th class="text-center">No PS</th>
                                                            <th class="text-center">Distribusi to QA</th>
                                                            <th class="text-center">Kode Material</th>
                                                            <th class="text-center">Aplikasi</th>
                                                            <th class="text-center">Detail</th>
                                                            <th class="text-center">Color</th>
                                                            <th class="text-center">GSM</th>
                                                            <th class="text-center">Length</th>
                                                            <th class="text-center">Width</th>
                                                            <th class="text-center">Jumlah</th>
                                                            <th class="text-center">Memo</th>
                                                            <th class="text-center">ETD Date</th>
                                                            <th class="text-center">No Roll</th>
                                                            <th class="text-center">Kode Jumbo</th>
                                                            <th class="text-center">Line</th>
                                                            <th class="text-center">No PPS/SJS</th>
                                                            <th class="text-center">Refers</th>
                                                            <th class="text-center">Do Number</th>
                                                            <th class="text-center">No COA</th>
                                                            <th class="text-center">Date COA</th>
                                                            <th class="text-center">AWB</th>
                                                            <th class="text-center">Expedition</th>
                                                            <th class="text-center">Realisasi</th>
                                                            <th class="text-center">Penerima</th>
                                                            {{-- Kolom tidak aktif: --}}
                                                            {{-- <th class="text-center">ID Sample</th> --}}
                                                            {{-- <th class="text-center">Tanggal Penerimaan</th> --}}
                                                            {{-- <th class="text-center">QTY Sales</th> --}}
                                                            {{-- <th class="text-center">QTY Weight</th> --}}
                                                            {{-- <th class="text-center">Base Unit</th> --}}
                                                            {{-- <th class="text-center">Sales Unit</th> --}}
                                                            {{-- <th class="text-center">Keterangan</th> --}}
                                                            {{-- <th class="text-center">Status</th> --}}
                                                            {{-- <th class="text-center">Realisasi (Hari)</th> --}}
                                                            {{-- <th class="text-center">Note Admin</th> --}}
                                                        </tr>
                                                    </thead>
                                                    <tbody>

                                                        @foreach ($details[$ps->id_ps] ?? [] as $rowIndex => $row)
                                                            <tr>
                                                                <td class="align-middle text-center">{{ $rowIndex + 1 }}
                                                                </td>
                                                                <td class="align-middle text-center">{{ $row->customer }}
                                                                </td>
                                                                <td class="align-middle text-center">{{ $row->{'Id PS'} }}
                                                                </td>
                                                                <td class="align-middle text-center">
                                                                    {{ !empty($row->ps_date) ? date('d-m-Y', strtotime($row->ps_date)) : '-' }}
                                                                </td>
                                                                <td class="align-middle text-center">
                                                                    {{ $row->material_code }}</td>
                                                                <td class="align-middle text-center">{{ $row->aplikasi }}
                                                                </td>
                                                                <td class="align-middle text-center">{{ $row->detail }}
                                                                </td>
                                                                <td class="align-middle text-center">{{ $row->color }}
                                                                </td>
                                                                <td class="align-middle text-center">{{ $row->gsm }}
                                                                </td>
                                                                <td class="align-middle text-center">{{ $row->length }}
                                                                </td>
                                                                <td class="align-middle text-center">{{ $row->width }}
                                                                </td>
                                                                <td class="align-middle text-center">{{ $row->qty_sales }}
                                                                    {{ $row->uom_sample ?? '' }}</td>
                                                                <td class="align-middle text-center">
                                                                    {{ $row->sumber_material }}</td>
                                                                <td class="align-middle text-center">{{ $row->etd_date }}
                                                                </td>
                                                                <td class="align-middle text-center">
                                                                    {{ $row->nomor_roll }}</td>
                                                                <td class="align-middle text-center">
                                                                    {{ $row->nomor_jumbo }}</td>
                                                                <td class="align-middle text-center">
                                                                    {{ $row->line_produksi }}</td>
                                                                <td class="align-middle text-center">{{ $row->no_pps }}
                                                                </td>
                                                                <td class="align-middle text-center">{{ $row->refer }}
                                                                </td>
                                                                <td class="align-middle text-center">{{ $row->do_number }}
                                                                </td>
                                                                <td class="align-middle text-center">{{ $row->nomor_coa }}
                                                                </td>
                                                                <td class="align-middle text-center">
                                                                    {{ $row->tanggal_coa }}</td>
                                                                <td class="align-middle text-center">{{ $row->awb }}
                                                                </td>
                                                                <td class="align-middle text-center">
                                                                    {{ $row->expedition }}</td>
                                                                <td class="align-middle text-center">
                                                                    {{ $row->realisasi_etd ?? '-' }}</td>
                                                                <td class="align-middle text-center">{{ $row->receiver }}
                                                                </td>
                                                                {{-- Kolom tidak aktif: --}}
                                                                {{-- <td class="align-middle text-center">{{ $row->id_sample }}</td> --}}
                                                                {{-- <td class="align-middle text-center">{{ $row->receive_date }}</td> --}}
                                                                {{-- <td class="align-middle text-center">{{ $row->qty_sales }}</td> --}}
                                                                {{-- <td class="align-middle text-center">{{ $row->qty_weight }}</td> --}}
                                                                {{-- <td class="align-middle text-center">{{ $row->base_unit }}</td> --}}
                                                                {{-- <td class="align-middle text-center">{{ $row->sales_unit }}</td> --}}
                                                                {{-- <td class="align-middle text-center">{{ $row->keterangan }}</td> --}}
                                                                {{-- <td class="align-middle text-center">{{ $row->status }}</td> --}}
                                                                {{-- <td class="align-middle text-center">{{ $row->realisasi_hari }}</td> --}}
                                                                {{-- <td>{{ $row->note_admin }}</td> --}}
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>

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

                                </div>
                            @endforeach

                            <form id="psPagingForm" method="POST" action="{{ URL::to($url_menu) }}">
                                @csrf

                                {{-- page untuk paginator (dibaca dari POST) --}}
                                <input type="hidden" name="page" id="pageInput" value="{{ request('page', 1) }}">

                                {{-- bawa semua filter dari execute sebelumnya --}}
                                @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" id="noted">
                                        <code>Note : <i aria-hidden="true" style="color: #ffc2cd;"
                                                class="f                as 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>

    {{-- Export Selection Modal --}}

    {{-- 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() {
            console.log('🔵 Document Ready - Starting initialization');
            $('.ps-detail').hide();

            // Count tables
            const allTables = $('table.display');
            console.log('📊 Found tables:', allTables.length);

            // Initialize DataTables for each table in the manual layout
            $('table.display').each(function(index) {
                const tableId = $(this).attr('id');
                console.log(`🔍 Table ${index + 1}: ID = ${tableId}`);

                if (tableId && !$.fn.DataTable.isDataTable('#' + tableId)) {
                    console.log(`✅ Initializing DataTable for: ${tableId}`);

                    const dtInstance = $('#' + tableId).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)"
                        },
                        responsive: true,
                        paging: true,
                        ordering: true
                    });

                    console.log(`✅ DataTable initialized for ${tableId}`, dtInstance);
                } else {
                    console.log(`⚠️ Skipping ${tableId} - already initialized or no ID`);
                }
            });

            console.log(' DataTable initialization complete');

            // Server Side Search Logic (AJAX Smooth)
            let searchTimeout;
            let currentRequest = null;

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

            // Running find: Execute search automatically after 500ms
            $('#server-search-box').on('input', function() {
                var searchVal = $(this).val();
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function() {
                    performAjaxSearch(searchVal);
                }, 500);
            });

            $('#server-search-box').on('keypress', function(e) {
                if (e.which == 13) {
                    // Prevent form submission if any
                    e.preventDefault();
                    performAjaxSearch($(this).val());
                }
            });

            function performAjaxSearch(val) {
                var $form = $('#psPagingForm');

                // Update hidden input for search_all in the form
                var $hiddenInput = $form.find('input[name="search_all"]');
                if ($hiddenInput.length) {
                    $hiddenInput.remove();
                }
                $form.append('<input type="hidden" name="search_all" value="' + val + '">');

                // Reset page to 1
                $('#pageInput').val(1);

                // Serialize form data
                var formData = $form.serialize();
                var actionUrl = $form.attr('action');

                // UI Feedback (Optional: add loading spinner or opacity)
                $('#real-result-container').css('opacity', '0.5');

                if (currentRequest) {
                    currentRequest.abort();
                }

                currentRequest = $.ajax({
                    url: actionUrl,
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        // Extract the container content from the full page response
                        // We use a temporary div to parse the HTML string
                        var $temp = $('<div>').html(response);
                        var newContent = $temp.find('#real-result-container').html();

                        if (newContent) {
                            $('#real-result-container').html(newContent);
                        } else {
                            console.warn('Could not find #real-result-container in response');
                            // If selector fails (maybe structure changed), try replacing the old container
                            // But usually it should work if ID is present in response
                        }

                        $('#real-result-container').css('opacity', '1');
                    },
                    error: function(xhr) {
                        if (xhr.statusText !== 'abort') {
                            console.error('Search failed:', xhr);
                            $('#real-result-container').css('opacity', '1');
                        }
                    }
                });
            }
        });

        // Initialize DataTables when collapse is shown to fix alignment (Bootstrap 5 syntax)
        $(document).on('shown.bs.collapse', '.collapse', function() {
            console.log('📂 Collapse shown event triggered');
            const $table = $(this).find('table.display');
            console.log('📊 Tables in collapse:', $table.length);

            if ($table.length > 0) {
                const tableId = $table.attr('id');
                console.log('🔄 Adjusting table:', tableId);

                if ($.fn.DataTable.isDataTable('#' + tableId)) {
                    $('#' + tableId).DataTable().columns.adjust().responsive.recalc();
                    console.log('✅ Table adjusted:', tableId);
                }
            }
        });


        // Direct Export All Data - No Modal
        $('#exportAllExcel').on('click', function() {
            console.log('📊 Exporting ALL data to Excel');
            exportAllData('excel');
        });

        $('#exportAllPDF').on('click', function() {
            console.log('📄 Exporting ALL data to PDF');
            exportAllData('pdf');
        });

        $('#printAll').on('click', function() {
            console.log('🖨️ Printing ALL data');
            exportAllData('print');
        });

        // Export All Data Function - Fetches ALL from API
        function exportAllData(type) {
            console.log('🚀 Final Export All Triggered - Type:', 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);

            const exportUrl = $('#psPagingForm').attr('action') || window.location.href;
            console.log('📡 Fetching data from:', exportUrl);
            console.log('📋 Form data:', $('#psPagingForm').serialize());

            $.ajax({
                url: exportUrl,
                type: 'POST',
                data: $('#psPagingForm').serialize() + '&export_type=' + type,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    console.log('✅ Server response received:', response);
                    console.log('📊 Response type:', typeof response);
                    console.log('📊 Response.success:', response.success);
                    console.log('📊 Response.data length:', response.data ? response.data.length : 'undefined');
                    console.log('📊 Response Data:', response.data);

                    if (response.success && response.data && response.data.length > 0) {
                        console.log('📊 First row sample:', response.data[0]);
                        console.log('📊 Data keys:', Object.keys(response.data[0]));
                        processExport(type, response.data);
                    } else {
                        console.warn('⚠️ No data in response:', response);
                        Swal.fire('Info', 'No data found for the current filters.', 'info');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('❌ Ajax Error:', status, error);
                    console.error('❌ Response Text:', xhr.responseText);
                    Swal.fire('Error', 'Failed to fetch export data. Check console for details.', 'error');
                },
                complete: function() {
                    $btn.html(originalBtnHtml).prop('disabled', false);
                }
            });
        }

        // Sanitize text for Excel to prevent corruption
        function sanitizeForExcel(value) {
            if (value === null || value === undefined) {
                return '';
            }

            // Convert to string
            let str = String(value);

            // Remove or replace problematic characters
            str = str.replace(/[\x00-\x08\x0B-\x0C\x0E-\x1F\x7F]/g, ''); // Remove control characters
            str = str.replace(/"/g, '""'); // Escape double quotes for CSV/Excel

            return str;
        }

        // Process the data and trigger export
        function processExport(type, data) {
            // Define column mapping with proper order
            const columnMapping = [{
                    key: 'no',
                    header: 'No'
                },
                {
                    key: 'customer',
                    header: 'Nama Customer'
                },
                {
                    key: 'Id PS',
                    header: 'No PS'
                },
                {
                    key: 'ps_date',
                    header: 'Distribusi to QA'
                },
                {
                    key: 'material_code',
                    header: 'Item Baru'
                },
                {
                    key: 'aplikasi',
                    header: 'Aplikasi'
                },
                {
                    key: 'detail',
                    header: 'Detail'
                },
                 {
                    key: 'color',
                    header: 'Color'
                },
                {
                    key: 'gsm',
                    header: 'GSM'
                },
                {
                    key: 'length',
                    header: 'Length (m)'
                },
                {
                    key: 'width',
                    header: 'Width'
                },
                {
                    header: 'Jumlah',
                    render: (row) => `${row.qty_sales} ${row.uom_sample || ''}`
                },
                {
                    key: 'sumber_material',
                    header: 'Memo'
                },
                {
                    key: 'etd_date',
                    header: 'Target ETD'
                },
                {
                    key: 'nomor_roll',
                    header: 'No Roll'
                },
                {
                    key: 'nomor_jumbo',
                    header: 'Kode Jumbo'
                },

                {
                    key: 'line_produksi',
                    header: 'Line'
                },
                {
                    key: 'no_pps',
                    header: 'No PPS/SJS'
                },
                {
                    key: 'refer',
                    header: 'Refers'
                },
                {
                    key: 'do_number',
                    header: 'Do Number'
                },
                {
                    key: 'nomor_coa',
                    header: 'No COA'
                },
                {
                    key: 'tanggal_coa',
                    header: 'Terima COA'
                },
                {
                    key: 'awb',
                    header: 'AWB'
                },
                {
                    key: 'expedition',
                    header: 'Send By'
                },
                {
                    key: 'realisasi_etd',
                    header: 'Realisasi ETD'
                },
                {
                    header: 'Penerima',
                    render: (row) => {
                        const date = row.receive_date ? row.receive_date : '-';
                        const receiver = row.receiver ? row.receiver : '-';
                        return date + ':' + receiver;
                    }
                },


                
                // {
                //     key: 'ps_date',
                //     header: 'Distribusi to QA'
                // },
                
                
                
               

                // {
                //     key: 'etd_date',
                //     header: 'ETD Date'
                // },
                // Kolom tidak aktif:
                // { key: 'id_sample', header: 'ID Sample' },
                // { key: 'qty_sales', header: 'QTY Sales' },
                // { key: 'qty_weight', header: 'QTY Weight' },
                // { key: 'base_unit', header: 'Base Unit' },
                // { key: 'sales_unit', header: 'Sales Unit' },
                // { key: 'receive_date', header: 'Tanggal Penerimaan' },
                // { key: 'keterangan', header: 'Keterangan' },
                // { key: 'status', header: 'Status' },
                // { key: 'realisasi_hari', header: 'Realisasi (Hari)' },
                // { key: 'note_admin', header: 'Note Admin' },
            ];

            // Create temporary table with proper structure
            const tempTableId = 'tempExportTable_' + Date.now();
            let tableHTML = '<table id="' + tempTableId + '" class="display" style="display:none;"><thead><tr>';

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

            // Add data rows with sanitization
            data.forEach((row, rowIndex) => {

                tableHTML += '<tr>';
                columnMapping.forEach(col => {
                    let rawValue;

                    if (col.key === 'no') {
                        rawValue = rowIndex + 1;
                    } else if (col.render) {
                        rawValue = col.render(row); // ← ini penting
                    } else {
                        rawValue = row[col.key];
                    }

                    const cleanValue = sanitizeForExcel(rawValue);
                    tableHTML += '<td>' + $('<div>').text(cleanValue).html() + '</td>';
                });
                tableHTML += '</tr>';

                if (rowIndex % 100 === 0) {
                    console.log('📝 Processed', rowIndex, 'rows...');
                }
            });

            tableHTML += '</tbody></table>';

            console.log('✅ Table HTML created, appending to body...');
            $('body').append(tableHTML);

            console.log('🔧 Initializing DataTable...');
            const tempDT = $('#' + tempTableId).DataTable({
                dom: 'Bfrtip',
                paging: false,
                ordering: false,
                searching: false,
                buttons: [{
                    extend: type === 'excel' ? 'excelHtml5' : (type === 'pdf' ? 'pdfHtml5' : 'print'),
                    title: 'SAP Sample Report - All Data',
                    filename: 'SAP_Sample_All_Data_' + new Date().toISOString().slice(0, 10),
                    orientation: type === 'pdf' ? 'landscape' : 'portrait',
                    pageSize: type === 'pdf' ? 'A3' : 'A4'
                }]
            });

            console.log('📥 Triggering export button...');
            setTimeout(() => {
                try {
                    tempDT.button(0).trigger();
                    console.log('✅ Export triggered successfully');

                    setTimeout(() => {
                        tempDT.destroy();
                        $('#' + tempTableId).remove();
                        console.log('✅ Cleanup complete');
                    }, 2000);
                } catch (err) {
                    console.error('❌ Export error:', err);
                    Swal.fire('Error', 'Export failed: ' + err.message, 'error');
                }
            }, 500);
        }

        //function delete
        function deleteData(name, msg) {
            pesan = confirm('Apakah Anda Yakin ' + msg + ' Data ' + name + ' ini ?');
            if (pesan) return true
            else return false
        }

        $(document).on('click', '.ps-header', function() {
            const ps = $(this).data('ps');
            $(`.ps-${ps}`).toggle();
        });

        $(document).on('click', '.pagination a', function(e) {
            e.preventDefault();

            const href = $(this).attr('href');
            if (!href) return;

            const url = new URL(href, window.location.origin);
            const page = url.searchParams.get('page') || 1;

            $('#pageInput').val(page);
            $('#psPagingForm').submit();
        });
        document.addEventListener('DOMContentLoaded', function() {

            document.querySelectorAll('.collapse').forEach(function(collapseEl) {

                const header = collapseEl.previousElementSibling;
                const arrow = header.querySelector('.logo-panah');

                if (!arrow) return;

                collapseEl.addEventListener('show.bs.collapse', function() {
                    arrow.classList.add('rotate');
                });

                collapseEl.addEventListener('hide.bs.collapse', function() {
                    arrow.classList.remove('rotate');
                });
            });
        });

        @if ($is_admin)
        $('#btn-back-to-progress').on('click', function() {
            var checked = $('.sample-checkbox:checked');
            if (checked.length === 0) {
                Swal.fire('Info', 'Pilih minimal 1 sample!', 'info');
                return;
            }

            var ids = checked.map(function() { return this.value; }).get();

            Swal.fire({
                title: 'Konfirmasi',
                text: 'Kembalikan ' + ids.length + ' sample ke On Progress?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#028284',
                confirmButtonText: 'Ya, kembalikan!'
            }).then((result) => {
                if (result.isConfirmed) {
                    var form = $('<form>', {
                        'method': 'POST',
                        'action': '{{ url("rptsmp/backToProgress") }}'
                    });
                    form.append('<input type="hidden" name="_token" value="' + $('meta[name="csrf-token"]').attr('content') + '">');
                    ids.forEach(function(id) {
                        form.append($('<input>', {
                            'type': 'hidden',
                            'name': 'selected_ids[]',
                            'value': id
                        }));
                    });
                    $('body').append(form);
                    form.submit();
                }
            });
        });
        @endif
    
    </script>
    <style>
        .logo-panah {
            transition: transform 0.3s ease;
        }

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