{{--
    Bulk Actions Bar
    Appears above table when rows are selected.
    Usage:
      <x-tables.bulk-actions :actions="[
          ['label'=>'Delete Selected','action'=>'bulk-delete','variant'=>'danger'],
          ['label'=>'Export','action'=>'bulk-export'],
      ]"/>
--}}
@props(['actions' => []])

<div
    x-data="{ selected: [] }"
    x-show="document.querySelectorAll('.row-checkbox:checked').length > 0"
    class="flex items-center gap-3 px-4 py-3 bg-primary-50 dark:bg-primary-950/30 rounded-xl mb-3 border border-primary-200 dark:border-primary-800 animate-fade-in"
>
    <span class="text-sm font-medium text-primary-700 dark:text-primary-300">
        <span class="font-bold" id="selected-count">0</span> selected
    </span>

    <div class="flex items-center gap-2 ml-auto">
        @foreach($actions as $action)
            <x-buttons.{{ $action['variant'] ?? 'secondary' }} size="sm"
                type="button"
                data-bulk-action="{{ $action['action'] }}"
            >
                {{ $action['label'] }}
            </x-buttons.{{ $action['variant'] ?? 'secondary' }}>
        @endforeach
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const updateCount = () => {
        const checked = document.querySelectorAll('.row-checkbox:checked').length;
        const countEl = document.getElementById('selected-count');
        if (countEl) countEl.textContent = checked;
    };
    document.addEventListener('change', e => {
        if (e.target.classList.contains('row-checkbox') || e.target.id === 'select-all') {
            updateCount();
        }
    });
});
</script>