<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames(([
    'id',
    'class' => '',
    'ajaxUrl' => null,
    'columns' => [],
    'order' => null,
    'columnDefs' => null,
    'pageLength' => 25,
    'responsive' => true,
    'serverSide' => null,
    'searchId' => null,
    'filterFormId' => null,
    'clearFiltersId' => null,
    'selectAllId' => null,
    'rowCheckboxClass' => 'row-checkbox',
    'dom' => null,
    'drawCallback' => null,
    'title' => null,         // Title for card header (matches sales report)
    'padding' => true,      // Padding p-6 around table (matches sales report)
]));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter(([
    'id',
    'class' => '',
    'ajaxUrl' => null,
    'columns' => [],
    'order' => null,
    'columnDefs' => null,
    'pageLength' => 25,
    'responsive' => true,
    'serverSide' => null,
    'searchId' => null,
    'filterFormId' => null,
    'clearFiltersId' => null,
    'selectAllId' => null,
    'rowCheckboxClass' => 'row-checkbox',
    'dom' => null,
    'drawCallback' => null,
    'title' => null,         // Title for card header (matches sales report)
    'padding' => true,      // Padding p-6 around table (matches sales report)
]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars, $__key, $__value); ?>

<!-- DataTable Card Container -->
<div class="overflow-visible rounded-2xl border border-slate-200/80 bg-white shadow-soft dark:border-slate-800 dark:bg-slate-900">
    <?php if($title): ?>
        <div class="flex items-center justify-between border-b border-slate-100 px-5 py-4 dark:border-slate-800">
            <h3 class="text-sm font-bold text-slate-900 dark:text-white"><?php echo e($title); ?></h3>
        </div>
    <?php endif; ?>
    
    <div class="<?php echo e($padding ? 'p-6' : ''); ?>">
        <div class="<?php echo e($responsive ? 'overflow-visible' : 'overflow-x-auto'); ?> rounded-2xl">
            <table id="<?php echo e($id); ?>" class="dataTable <?php echo e($class); ?> w-full">
                <thead>
                    <tr>
                        <?php echo e($thead); ?>

                    </tr>
                </thead>
                <tbody>
                    <?php echo e($slot); ?>

                </tbody>
            </table>
        </div>
    </div>
</div>


<?php if (! $__env->hasRenderedOnce('33692f14-e2a4-41bd-a2b8-22c1065187fb')): $__env->markAsRenderedOnce('33692f14-e2a4-41bd-a2b8-22c1065187fb'); ?>
    <!-- Core dependencies (loaded once per page) -->
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <?php echo $__env->make('admin.partials.datatables-styles', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
<?php endif; ?>



<script>
// Shared action-menu behavior for responsive child rows and regular table rows.
window.toggleDropdown = window.toggleDropdown || function (id) {
    const target = document.getElementById('dropdown-' + id);
    if (!target) return;

    document.querySelectorAll('[id^="dropdown-"]').forEach(function (menu) {
        if (menu !== target) menu.classList.add('hidden');
    });
    target.classList.toggle('hidden');
};

if (!window.adminDataTableDropdownDismissBound) {
    document.addEventListener('click', function (event) {
        if (!event.target.closest('[onclick*="toggleDropdown"]') && !event.target.closest('[id^="dropdown-"]')) {
            document.querySelectorAll('[id^="dropdown-"]').forEach(function (menu) {
                menu.classList.add('hidden');
            });
        }
    });
    window.adminDataTableDropdownDismissBound = true;
}

$(document).ready(function() {
    let searchDelay;

    // Determine server side setting
    let isServerSide = <?php echo json_encode($serverSide ?? ($ajaxUrl ? true : false), 15, 512) ?>;

    // Determine DOM layout (hide default search 'f' if custom search input is used)
    let domSetting = <?php echo json_encode($dom, 15, 512) ?>;
    if (!domSetting) {
        <?php if($searchId): ?>
            domSetting = '<"flex flex-wrap justify-between items-center"<"flex flex-wrap items-center gap-2"l>>rt<"flex flex-wrap justify-between items-center"ip>';
        <?php else: ?>
            domSetting = '<"flex flex-wrap justify-between items-center"<"flex flex-wrap items-center gap-2"l><"flex items-center"f>>rt<"flex flex-wrap justify-between items-center"ip>';
        <?php endif; ?>
    }

    // DataTable initialization config
    let config = {
        responsive: <?php echo json_encode($responsive, 15, 512) ?>,
        processing: isServerSide,
        serverSide: isServerSide,
        pageLength: <?php echo json_encode($pageLength, 15, 512) ?>,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        pagingType: "simple_numbers",
        dom: domSetting,
        language: {
            lengthMenu: '_MENU_ per page',
            search: '',
            searchPlaceholder: 'Search records…',
            info: 'Showing _START_–_END_ of _TOTAL_',
            infoEmpty: 'No records',
            infoFiltered: ' · filtered from _MAX_',
            emptyTable: 'No records found',
            zeroRecords: 'No matching records found',
            processing: '<i class="fa-solid fa-circle-notch fa-spin mr-2"></i> Loading',
            paginate: { next: '›', previous: '‹' }
        }
    };

    // Add AJAX source if set
    <?php if($ajaxUrl): ?>
        config.ajax = {
            url: "<?php echo e($ajaxUrl); ?>",
            type: 'GET',
            dataSrc: function(data) {
                return data.data || [];
            },
            error: function(xhr) {
                console.error('Unable to load table data', xhr.status, xhr.responseText);
                const body = $('#<?php echo e($id); ?> tbody');
                const columns = <?php echo json_encode(max(1, count($columns)), 512) ?>;
                body.html('<tr><td colspan="' + columns + '" class="py-12 text-center text-sm text-rose-600"><i class="fa-solid fa-triangle-exclamation mr-2"></i>Unable to load records. Please refresh and try again.</td></tr>');
            },
            <?php if($filterFormId): ?>
            data: function(d) {
                let formData = $('#<?php echo e($filterFormId); ?>').find('input, select').serializeArray();
                $.each(formData, function(i, field) {
                    d[field.name] = field.value;
                });
            }
            <?php endif; ?>
        };
    <?php endif; ?>

    // Add Columns mapping if provided
    <?php if(!empty($columns)): ?>
        config.columns = <?php echo json_encode($columns, 15, 512) ?>;
        config.columns.forEach(col => {
            if (col.defaultContent === undefined) {
                col.defaultContent = '';
            }
        });
    <?php endif; ?>

    // Add Order configuration if provided
    <?php if($order): ?>
        config.order = <?php echo json_encode($order, 15, 512) ?>;
    <?php endif; ?>

    // Add custom columnDefs if provided
    <?php if($columnDefs): ?>
        config.columnDefs = <?php echo json_encode($columnDefs, 15, 512) ?>;
    <?php endif; ?>

    // Custom drawCallback for closing dropdowns and custom actions
    config.drawCallback = function(settings) {
        // Re-initialize/hide dropdowns after table redraw
        $('[id^="dropdown-"]').addClass('hidden');
        
        // Sync select-all checkbox state
        <?php if($selectAllId): ?>
            let total = $('.<?php echo e($rowCheckboxClass); ?>').length;
            let checked = $('.<?php echo e($rowCheckboxClass); ?>:checked').length;
            $('#<?php echo e($selectAllId); ?>').prop('checked', total > 0 && total === checked);
        <?php endif; ?>

        // Optional custom callback
        <?php if($drawCallback): ?>
            <?php echo $drawCallback; ?>(settings);
        <?php endif; ?>
    };

    // Initialize DataTable
    let table = $('#<?php echo e($id); ?>').DataTable(config);

    // External search with 200ms debounce
    <?php if($searchId): ?>
        $('#<?php echo e($searchId); ?>').on('keyup change input', function() {
            clearTimeout(searchDelay);
            let searchTerm = this.value;
            searchDelay = setTimeout(function() {
                table.search(searchTerm).draw();
            }, 200);
        });
    <?php endif; ?>

    // External filter form change
    <?php if($filterFormId): ?>
        $('#<?php echo e($filterFormId); ?>').on('change', 'select, input', function() {
            table.ajax.reload();
        });

        $('#<?php echo e($filterFormId); ?>').on('reset', function() {
            setTimeout(function() {
                table.search('').ajax.reload();
            }, 10);
        });
    <?php endif; ?>

    // Clear filters action
    <?php if($clearFiltersId): ?>
        $('#<?php echo e($clearFiltersId); ?>').on('click', function() {
            <?php if($filterFormId): ?>
                let form = $('#<?php echo e($filterFormId); ?>');
                if (form.is('form')) {
                    form[0].reset();
                } else {
                    form.find('input, select').val('');
                }
            <?php endif; ?>
            <?php if($searchId): ?>
                $('#<?php echo e($searchId); ?>').val('');
            <?php endif; ?>
            table.search('').ajax.reload();
        });
    <?php endif; ?>

    // Select-all checkbox logic
    <?php if($selectAllId): ?>
        $('#<?php echo e($selectAllId); ?>').on('click', function() {
            $('.<?php echo e($rowCheckboxClass); ?>').prop('checked', this.checked);
        });

        $(document).on('change', '.<?php echo e($rowCheckboxClass); ?>', function() {
            let total = $('.<?php echo e($rowCheckboxClass); ?>').length;
            let checked = $('.<?php echo e($rowCheckboxClass); ?>:checked').length;
            $('#<?php echo e($selectAllId); ?>').prop('checked', total > 0 && total === checked);
        });
    <?php endif; ?>

    // Store table reference in global jQuery data for easy page-specific overrides
    $('#<?php echo e($id); ?>').data('dataTable', table);
});
</script>
<?php /**PATH /Users/mac/Documents/e-com/resources/views/components/datatable.blade.php ENDPATH**/ ?>