@props([
    'tableId'     => 'export-table',
    'exportTitle' => config('app.name'),
    'excludeLast' => 0,   // number of trailing columns to hide in exports (e.g. Actions)
])

<div class="flex items-center gap-1">
    <flux:button type="button" variant="danger" onclick="window.dtExport('{{ $tableId }}', 'pdf')" class="text-xs">
        <i class="fas fa-file-pdf"></i>
        {{ __('PDF') }}
    </flux:button>
    <flux:button type="button" variant="primary" class="bg-emerald-600 hover:bg-emerald-700 text-xs" onclick="window.dtExport('{{ $tableId }}', 'excel')">
        <i class="fas fa-file-excel"></i>
        {{ __('Excel') }}
    </flux:button>
    <flux:button type="button" variant="outline" onclick="window.dtExport('{{ $tableId }}', 'print')" class="text-xs">
        <i class="fas fa-print"></i>
        {{ __('Print') }}
    </flux:button>
</div>

@once
@push('scripts')
<script>
/**
 * Global DataTables export helper.
 * Lazily initialises a DataTable (with hidden export buttons) on first use,
 * then triggers the requested export type.
 */
window._dtInstances = window._dtInstances || {};

window.dtExport = function (tableId, type) {
    if (typeof $ === 'undefined' || !$.fn || !$.fn.dataTable) {
        alert('Export library not ready yet — please try again in a moment.');
        return;
    }

    var $table = $('#' + tableId);
    if (!$table.length) return;

    var config = $table.data('export-config') || {};
    var title   = config.title       || document.title;
    var exclude = parseInt(config.excludeLast || 0, 10);

    // Build column indices, omitting last N columns
    var colCount  = $table.find('thead th').length;
    var exportCols = [];
    for (var i = 0; i < colCount - exclude; i++) { exportCols.push(i); }

    // Initialise DataTable only once per table
    if (!$.fn.DataTable.isDataTable($table)) {
        $table.DataTable({
            dom: 'lrtip',   // hide default button bar; we draw our own
            paging:   false,
            ordering: true,
            searching: false,
            info:     false,
            buttons: [
                {
                    extend: 'pdfHtml5',
                    title:   title,
                    columns: exportCols,
                    customize: function (doc) {
                        doc.defaultStyle.fontSize = 9;
                        doc.styles.tableHeader.fillColor = '#1d4ed8';
                        doc.styles.tableHeader.color     = '#ffffff';
                    }
                },
                {
                    extend:  'excelHtml5',
                    title:   title,
                    columns: exportCols
                },
                {
                    extend:  'print',
                    title:   title,
                    columns: exportCols,
                    customize: function (win) {
                        $(win.document.body)
                            .css('font-size', '10pt')
                            .prepend('<h4 style="text-align:center;margin-bottom:12px">' + title + '</h4>');
                    }
                }
            ]
        });
        window._dtInstances[tableId] = $table.DataTable();
    }

    var dt      = window._dtInstances[tableId] || $table.DataTable();
    var btnMap  = { pdf: 0, excel: 1, print: 2 };
    dt.button(btnMap[type]).trigger();
};

// Wire up data-export-config attributes after DOM is ready
document.addEventListener('DOMContentLoaded', function () {
    // nothing needed — config is read lazily on first click
});
</script>
@endpush
@endonce

{{-- Embed per-table config so the global helper knows title & excludeLast --}}
<script>
(function () {
    document.addEventListener('DOMContentLoaded', function () {
        var el = document.getElementById('{{ $tableId }}');
        if (el) {
            el.dataset.exportConfig = JSON.stringify({
                title:       '{{ addslashes($exportTitle) }}',
                excludeLast: {{ (int) $excludeLast }}
            });
        }
    });
})();
</script>