<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 leading-tight">
                    📦 {{ __('Backup & Restore') }}
                </h2>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    <a href="{{ route('dashboard') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Dashboard</a>
                    <span class="mx-2">/</span>
                    <a href="{{ route('admin.dashboard') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Admin</a>
                    <span class="mx-2">/</span>
                    <span>Backup-uri</span>
                </p>
            </div>
            <a href="{{ route('admin.dashboard') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200" title="Înapoi">
                <i class="fas fa-arrow-left"></i>
            </a>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

            <!-- Tabs Navigation -->
            <div class="mb-6">
                <div class="border-b border-gray-200 dark:border-gray-700">
                    <nav class="-mb-px flex space-x-8">
                        <a href="{{ route('admin.backups.index') }}"
                           class="border-b-2 border-blue-500 py-4 px-1 text-sm font-medium text-blue-600 dark:text-blue-400">
                            <i class="fas fa-list mr-2"></i>Backup-uri
                        </a>
                        <a href="{{ route('admin.backups.schedules') }}"
                           class="border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600">
                            <i class="fas fa-clock mr-2"></i>Programări Automate
                        </a>
                        <a href="{{ route('admin.backups.activity-log') }}"
                           class="border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600">
                            <i class="fas fa-history mr-2"></i>Jurnal Activitate
                        </a>
                        <a href="{{ route('admin.backups.settings') }}"
                           class="border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600">
                            <i class="fas fa-cog mr-2"></i>Setări & Destinații
                        </a>
                    </nav>
                </div>
            </div>

            <!-- Statistici -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
                                <i class="fas fa-database text-white text-2xl"></i>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Backup-uri</p>
                                <p class="text-2xl font-semibold text-gray-900 dark:text-gray-100">{{ $stats['total'] }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
                                <i class="fas fa-hdd text-white text-2xl"></i>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Spațiu Utilizat</p>
                                <p class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
                                    {{ number_format($stats['total_size'] / 1024 / 1024, 2) }} MB
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
                                <i class="fas fa-clock text-white text-2xl"></i>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Ultimul Backup</p>
                                <p class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                                    @if($stats['last_backup'])
                                        {{ $stats['last_backup']->created_at->diffForHumans() }}
                                    @else
                                        N/A
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Buton Backup Nou -->
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg mb-6">
                <div class="p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                        <i class="fas fa-plus-circle text-blue-600"></i> Creează Backup Nou
                    </h3>

                    <form action="{{ route('admin.backups.store') }}" method="POST" class="space-y-4">
                        @csrf

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- Tip Backup -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Tip Backup
                                </label>
                                <select name="type" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                    <option value="full">Full (Complet)</option>
                                    <option value="incremental">Incremental (Doar modificări)</option>
                                </select>
                            </div>

                            <!-- Opțiuni -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Conținut
                                </label>
                                <div class="space-y-2">
                                    <label class="inline-flex items-center">
                                        <input type="checkbox" name="include_database" value="1" checked class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Include Baza de Date</span>
                                    </label>
                                    <br>
                                    <label class="inline-flex items-center">
                                        <input type="checkbox" name="include_files" value="1" checked class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Include Fișiere</span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="flex items-center justify-end">
                            <button type="submit" class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition">
                                <i class="fas fa-save mr-2"></i>
                                Creează Backup
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Lista Backup-uri -->
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                            <i class="fas fa-list text-gray-600"></i> Istoric Backup-uri
                        </h3>

                        <!-- Bulk Actions Bar (hidden by default) -->
                        <div id="bulkActionsBar" class="hidden flex items-center space-x-3">
                            <span class="text-sm text-gray-600 dark:text-gray-400">
                                <span id="selectedCount">0</span> selectate
                            </span>
                            <button type="button" onclick="deselectAll()" class="inline-flex items-center px-3 py-1.5 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition text-sm font-medium">
                                <i class="fas fa-times mr-1.5"></i>
                                Deselectează
                            </button>
                            <button type="button" onclick="openBulkDeleteModal()" class="inline-flex items-center px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white rounded-lg transition text-sm font-medium">
                                <i class="fas fa-trash mr-1.5"></i>
                                Șterge selecționate
                            </button>
                        </div>
                    </div>

                    @if($backups->count() > 0)
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                                <thead class="bg-gray-50 dark:bg-gray-900">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-12">
                                            <input type="checkbox" id="selectAll" onchange="toggleSelectAll(this)" class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500 dark:bg-gray-700">
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                            ID
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                            Tip
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                            Fișier
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                            Dimensiune
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                            Status
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                            Creat de
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                            Data
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                            Acțiuni
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                                    @foreach($backups as $backup)
                                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700" data-backup-id="{{ $backup->id }}">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <input type="checkbox" class="backup-checkbox rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500 dark:bg-gray-700" value="{{ $backup->id }}" data-filename="{{ $backup->filename }}" onchange="updateBulkActions()">
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                            #{{ $backup->id }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            @if($backup->type === 'full')
                                                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800">
                                                    <i class="fas fa-database mr-1"></i> Full
                                                </span>
                                            @else
                                                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 border border-green-200 dark:border-green-800">
                                                    <i class="fas fa-layer-group mr-1"></i> Incremental
                                                </span>
                                            @endif
                                        </td>
                                        <td class="px-6 py-4 text-sm text-gray-900 dark:text-gray-100">
                                            <div class="flex items-center">
                                                <i class="fas fa-file-archive text-gray-400 mr-2"></i>
                                                {{ $backup->filename }}
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                            {{ $backup->file_size_human }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            @if($backup->status === 'completed')
                                                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 border border-green-200 dark:border-green-800">
                                                    <i class="fas fa-check-circle mr-1"></i> Complet
                                                </span>
                                            @elseif($backup->status === 'in_progress')
                                                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-300 border border-yellow-200 dark:border-yellow-800">
                                                    <i class="fas fa-spinner fa-spin mr-1"></i> În progres
                                                </span>
                                            @elseif($backup->status === 'failed')
                                                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 border border-red-200 dark:border-red-800">
                                                    <i class="fas fa-times-circle mr-1"></i> Eșuat
                                                </span>
                                            @else
                                                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-gray-50 dark:bg-gray-900/50 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700">
                                                    {{ $backup->status }}
                                                </span>
                                            @endif
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                            {{ $backup->creator->name ?? 'System' }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                            <div>{{ $backup->created_at->format('d.m.Y') }}</div>
                                            <div class="text-xs text-gray-500">{{ $backup->created_at->format('H:i:s') }}</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <div class="flex items-center justify-end space-x-1.5">
                                                @if($backup->status === 'completed')
                                                    <a href="{{ route('admin.backups.download', $backup) }}"
                                                       class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/40 border border-blue-200 dark:border-blue-800 transition"
                                                       title="Descarcă">
                                                        <i class="fas fa-download"></i>
                                                    </a>

                                                    <form action="{{ route('admin.backups.restore', $backup) }}"
                                                          method="POST"
                                                          class="inline"
                                                          onsubmit="return confirm('ATENȚIE! Restore-ul va suprascrie datele actuale. Sigur vrei să continui?')">
                                                        @csrf
                                                        <button type="submit"
                                                                class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/40 border border-green-200 dark:border-green-800 transition"
                                                                title="Restore">
                                                            <i class="fas fa-undo"></i>
                                                        </button>
                                                    </form>
                                                @endif

                                                <form action="{{ route('admin.backups.destroy', $backup) }}"
                                                      method="POST"
                                                      class="inline"
                                                      onsubmit="return confirm('Sigur vrei să ștergi acest backup?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit"
                                                            class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/40 border border-red-200 dark:border-red-800 transition"
                                                            title="Șterge">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        <div class="mt-4">
                            {{ $backups->links() }}
                        </div>
                    @else
                        <div class="text-center py-12">
                            <i class="fas fa-inbox text-gray-400 dark:text-gray-600 text-6xl mb-4"></i>
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Nu există backup-uri</h3>
                            <p class="text-gray-600 dark:text-gray-400">Creează primul backup pentru a începe.</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Info despre comenzi artisan -->
            <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6 mt-6">
                <h3 class="text-lg font-semibold text-blue-900 dark:text-blue-100 mb-3">
                    <i class="fas fa-terminal"></i> Comenzi Artisan
                </h3>
                <div class="space-y-2 text-sm text-blue-800 dark:text-blue-200">
                    <p><code class="bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded">php artisan backup:database --type=full</code> - Backup complet</p>
                    <p><code class="bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded">php artisan backup:database --type=incremental</code> - Backup incremental</p>
                    <p><code class="bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded">php artisan backup:cleanup --days=10</code> - Cleanup backup-uri vechi</p>
                </div>
            </div>

        </div>
    </div>

    <!-- Bulk Delete Modal -->
    <div id="bulkDeleteModal" class="hidden fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 z-50 flex items-center justify-center p-4" onclick="if(event.target === this) closeBulkDeleteModal()">
        <div class="relative w-full max-w-2xl max-h-[85vh] overflow-y-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl" onclick="event.stopPropagation()">
            <div class="p-6">
                <!-- Header -->
                <div class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
                        <i class="fas fa-exclamation-triangle text-red-600 dark:text-red-400 mr-2"></i>
                        Confirmare Ștergere în Masă
                    </h3>
                    <button onclick="closeBulkDeleteModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition">
                        <i class="fas fa-times text-2xl"></i>
                    </button>
                </div>

                <!-- Content -->
                <div class="py-6">
                    <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4">
                        <p class="text-sm text-red-800 dark:text-red-200">
                            <i class="fas fa-exclamation-circle mr-2"></i>
                            <strong>Atenție!</strong> Această acțiune este ireversibilă!
                        </p>
                    </div>

                    <p class="text-gray-700 dark:text-gray-300 mb-4">
                        Ești sigur că vrei să ștergi <strong id="bulkDeleteCount" class="text-red-600 dark:text-red-400">0</strong> backup-uri?
                    </p>

                    <div class="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4 max-h-64 overflow-y-auto">
                        <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Backup-uri care vor fi șterse:</h4>
                        <ul id="bulkDeleteList" class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
                            <!-- Lista va fi populată din JavaScript -->
                        </ul>
                    </div>
                </div>

                <!-- Footer -->
                <div class="flex items-center justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <button onclick="closeBulkDeleteModal()" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition">
                        <i class="fas fa-times mr-2"></i>
                        Anulează
                    </button>
                    <button onclick="confirmBulkDelete()" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition">
                        <i class="fas fa-trash mr-2"></i>
                        Șterge Backup-urile
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function toggleSelectAll(checkbox) {
            const checkboxes = document.querySelectorAll('.backup-checkbox');
            checkboxes.forEach(cb => cb.checked = checkbox.checked);
            updateBulkActions();
        }

        function updateBulkActions() {
            const checkboxes = document.querySelectorAll('.backup-checkbox:checked');
            const count = checkboxes.length;
            const bulkActionsBar = document.getElementById('bulkActionsBar');
            const selectedCountSpan = document.getElementById('selectedCount');
            const selectAllCheckbox = document.getElementById('selectAll');

            selectedCountSpan.textContent = count;

            if (count > 0) {
                bulkActionsBar.classList.remove('hidden');
                bulkActionsBar.classList.add('flex');
            } else {
                bulkActionsBar.classList.add('hidden');
                bulkActionsBar.classList.remove('flex');
            }

            // Update select all checkbox state
            const allCheckboxes = document.querySelectorAll('.backup-checkbox');
            selectAllCheckbox.checked = allCheckboxes.length === count && count > 0;
            selectAllCheckbox.indeterminate = count > 0 && count < allCheckboxes.length;
        }

        function deselectAll() {
            document.querySelectorAll('.backup-checkbox').forEach(cb => cb.checked = false);
            document.getElementById('selectAll').checked = false;
            updateBulkActions();
        }

        function openBulkDeleteModal() {
            const checkboxes = document.querySelectorAll('.backup-checkbox:checked');
            const count = checkboxes.length;

            if (count === 0) {
                alert('Te rog selectează cel puțin un backup pentru a șterge.');
                return;
            }

            if (count > 50) {
                alert('Poți șterge maximum 50 de backup-uri simultan. Ai selectat ' + count + '.');
                return;
            }

            // Update count
            document.getElementById('bulkDeleteCount').textContent = count;

            // Build list
            const list = document.getElementById('bulkDeleteList');
            list.innerHTML = '';
            checkboxes.forEach(checkbox => {
                const li = document.createElement('li');
                li.className = 'flex items-center';
                li.innerHTML = `<i class="fas fa-file-archive text-gray-400 mr-2"></i>${checkbox.dataset.filename}`;
                list.appendChild(li);
            });

            // Show modal
            document.getElementById('bulkDeleteModal').classList.remove('hidden');
        }

        function closeBulkDeleteModal() {
            document.getElementById('bulkDeleteModal').classList.add('hidden');
        }

        function confirmBulkDelete() {
            const checkboxes = document.querySelectorAll('.backup-checkbox:checked');
            const ids = Array.from(checkboxes).map(cb => cb.value);

            if (ids.length === 0) return;

            // Create form and submit
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route("admin.backups.bulk-delete") }}';

            // CSRF token
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = '{{ csrf_token() }}';
            form.appendChild(csrfInput);

            // IDs
            ids.forEach(id => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'backup_ids[]';
                input.value = id;
                form.appendChild(input);
            });

            document.body.appendChild(form);
            form.submit();
        }

        // Close modal on ESC key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && !document.getElementById('bulkDeleteModal').classList.contains('hidden')) {
                closeBulkDeleteModal();
            }
        });
    </script>
</x-app-layout>
