@props([
    'id' => 'dataTable',
    'exportColumns' => '[]',
    'order' => '[[0, "asc"]]',
    'title' => 'Data SIAD',
    'placeholder' => 'Cari data...',
    'class' => '',
    'showExport' => true
])

@php
    $exportColsJson = is_array($exportColumns) ? json_encode($exportColumns) : $exportColumns;
    $orderJson = is_array($order) ? json_encode($order) : $order;
@endphp

<div class="card border-0 shadow-sm rounded-xl mb-4" style="border-radius: 12px; overflow: hidden; background: #ffffff;">
    <div class="card-body p-4">
        @if (isset($filters) || isset($placeholder))
            <x-filter-bar :id="$id" :placeholder="$placeholder" :show-export="$showExport">
                {{ $filters ?? '' }}
            </x-filter-bar>
        @endif

        <div class="table-responsive">
            <table id="{{ $id }}" class="table table-custom-style w-100 {{ $class }}">
                {{ $slot }}
            </table>
        </div>
    </div>
</div>

@section('js')
    @parent
    <script>
    $(document).ready(function() {
        let exportCols = {!! $exportColsJson !!};
        let tableOrder = {!! $orderJson !!};
        let showExport = {{ $showExport ? 'true' : 'false' }};

        let tableOpts = { order: tableOrder };

        if (showExport) {
            tableOpts.buttons = [
                {
                    extend: 'excel',
                    exportOptions: { columns: exportCols },
                    title: '{{ $title }}'
                },
                {
                    extend: 'print',
                    exportOptions: { columns: exportCols },
                    title: '{{ $title }}'
                }
            ];
        }

        let table = $.fn.dataTable.isDataTable('#{{ $id }}')
            ? $('#{{ $id }}').DataTable()
            : $('#{{ $id }}').DataTable(tableOpts);

        // Custom search binding
        $('#{{ $id }}_search').on('keyup change clear', function() {
            table.search(this.value).draw();
        });

        if (showExport) {
            $('#{{ $id }}_btn_excel').on('click', function() {
                table.button('.buttons-excel').trigger();
            });
            $('#{{ $id }}_btn_print').on('click', function() {
                table.button('.buttons-print').trigger();
            });
        }

        $(document).trigger('datatable:initialized:{{ $id }}', [table]);
    });
    </script>
@stop