{{-- resources/views/pasien/riwayat-penghapusan/index.blade.php --}}
<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h2 class="font-semibold text-xl md:text-2xl text-white leading-tight">
                    {{ __('Riwayat Penghapusan Pasien') }}
                </h2>
                <p class="text-teal-100 text-sm mt-1">Kelola dan restore pasien yang telah dihapus</p>
            </div>
        </div>
    </x-slot>

    <div class="py-6 md:py-8">
        <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6">
            <!-- Alert Messages -->
            @if(session('success'))
            <div class="mb-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200 px-4 py-3 rounded-lg flex items-start" role="alert">
                <i class="fas fa-check-circle mt-0.5 mr-3 text-green-500"></i>
                <div class="flex-1">
                    <p class="font-medium">Berhasil!</p>
                    <p class="text-sm">{{ session('success') }}</p>
                </div>
                <button onclick="this.parentElement.remove()" class="ml-4 text-green-500 hover:text-green-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            @endif

            @if(session('error'))
            <div class="mb-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 px-4 py-3 rounded-lg flex items-start" role="alert">
                <i class="fas fa-exclamation-circle mt-0.5 mr-3 text-red-500"></i>
                <div class="flex-1">
                    <p class="font-medium">Error!</p>
                    <p class="text-sm">{{ session('error') }}</p>
                </div>
                <button onclick="this.parentElement.remove()" class="ml-4 text-red-500 hover:text-red-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            @endif

            <!-- Info Cards -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 mb-6">
                <!-- Total Dihapus -->
                <div class="bg-white dark:bg-slate-800 p-4 rounded-xl shadow-sm border border-gray-200 dark:border-slate-700 hover:shadow-md transition-shadow">
                    <div class="flex items-center">
                        <div class="p-2.5 sm:p-3 rounded-xl bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-orange-900/10 mr-3 sm:mr-4">
                            <i class="fas fa-history text-orange-600 dark:text-orange-400 text-lg sm:text-xl"></i>
                        </div>
                        <div>
                            <p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400">Total Dihapus</p>
                            <p id="totalDihapus" class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">-</p>
                        </div>
                    </div>
                </div>

                <!-- Dapat Dipulihkan -->
                <div class="bg-white dark:bg-slate-800 p-4 rounded-xl shadow-sm border border-gray-200 dark:border-slate-700 hover:shadow-md transition-shadow">
                    <div class="flex items-center">
                        <div class="p-2.5 sm:p-3 rounded-xl bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-900/20 dark:to-yellow-900/10 mr-3 sm:mr-4">
                            <i class="fas fa-undo text-yellow-600 dark:text-yellow-400 text-lg sm:text-xl"></i>
                        </div>
                        <div>
                            <p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400">Dapat di-Restore</p>
                            <p id="totalDapatDipulihkan" class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">-</p>
                        </div>
                    </div>
                </div>

                <!-- Sudah Restore -->
                <div class="bg-white dark:bg-slate-800 p-4 rounded-xl shadow-sm border border-gray-200 dark:border-slate-700 hover:shadow-md transition-shadow">
                    <div class="flex items-center">
                        <div class="p-2.5 sm:p-3 rounded-xl bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-900/10 mr-3 sm:mr-4">
                            <i class="fas fa-check-circle text-green-600 dark:text-green-400 text-lg sm:text-xl"></i>
                        </div>
                        <div>
                            <p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400">Sudah di-Restore</p>
                            <p id="totalSudahRestore" class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">-</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Main Card -->
            <div class="bg-white dark:bg-slate-800 overflow-hidden shadow-xl sm:rounded-lg">
                <div class="p-4 sm:p-6">
                    
                    <!-- Filters -->
                    <div class="mb-4 sm:mb-6 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-slate-700 dark:to-slate-800 p-4 sm:p-5 rounded-xl border border-gray-200 dark:border-slate-600 shadow-sm">
                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
                            <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-200 flex items-center">
                                <i class="fas fa-filter mr-2 text-teal-500 text-sm sm:text-base"></i>
                                Filter Data
                            </h3>
                        </div>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
                            <!-- Status Pemulihan Filter -->
                            <div>
                                <label class="block text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5 sm:mb-2">
                                    <i class="fas fa-tag mr-1.5 text-teal-500 text-xs sm:text-sm"></i>
                                    Status Pemulihan
                                </label>
                                <select id="statusPemulihanFilter" 
                                        class="w-full text-xs sm:text-sm px-3 py-2 border border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white rounded-lg shadow-sm focus:outline-none focus:border-teal-500 focus:ring-1 focus:ring-teal-500 transition-all duration-200">
                                    <option value="">Semua Status</option>
                                    <option value="DAPAT_DIPULIHKAN">Dapat di-Restore</option>
                                    <option value="SUDAH_DI_RESTORE">Sudah di-Restore</option>
                                    <option value="TIDAK_REVERSIBLE">Permanen</option>
                                </select>
                            </div>

                            <!-- Tipe Penghapusan Filter -->
                            <div>
                                <label class="block text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5 sm:mb-2">
                                    <i class="fas fa-trash mr-1.5 text-teal-500 text-xs sm:text-sm"></i>
                                    Tipe Penghapusan
                                </label>
                                <select id="tipePenghapusanFilter" 
                                        class="w-full text-xs sm:text-sm px-3 py-2 border border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white rounded-lg shadow-sm focus:outline-none focus:border-teal-500 focus:ring-1 focus:ring-teal-500 transition-all duration-200">
                                    <option value="">Semua Tipe</option>
                                    <option value="SOFT_DELETE">Soft Delete (Riwayat)</option>
                                    <option value="HARD_DELETE">Hard Delete (Permanen)</option>
                                </select>
                            </div>

                            <!-- Reset Button -->
                            <div class="flex flex-col sm:col-span-2 lg:col-span-2 gap-2">
                                <button id="resetFilters" 
                                        class="w-full px-4 py-2.5 text-xs sm:text-sm bg-gradient-to-r from-gray-200 to-gray-300 dark:from-slate-600 dark:to-slate-700 text-gray-700 dark:text-gray-300 rounded-lg hover:from-gray-300 hover:to-gray-400 dark:hover:from-slate-500 dark:hover:to-slate-600 transition-all duration-200 flex items-center justify-center font-medium shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
                                    <i class="fas fa-redo mr-2"></i> Reset Filter
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Table Container -->
                    <div class="overflow-x-auto rounded-xl border border-gray-200 dark:border-slate-700 shadow-sm">
                        <table id="riwayatTable" class="w-full table-auto display responsive nowrap" style="width:100%">
                            <thead class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-slate-700 dark:to-slate-800">
                                <tr>
                                    <th class="px-3 sm:px-4 py-3 text-left text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider whitespace-nowrap">
                                        No. RM
                                    </th>
                                    <th class="px-3 sm:px-4 py-3 text-left text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider whitespace-nowrap">
                                        Nama Pasien
                                    </th>
                                    <th class="px-3 sm:px-4 py-3 text-left text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider whitespace-nowrap">
                                        Tanggal Dihapus
                                    </th>
                                    <th class="px-3 sm:px-4 py-3 text-left text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider whitespace-nowrap">
                                        Dihapus Oleh
                                    </th>
                                    <th class="px-3 sm:px-4 py-3 text-left text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider whitespace-nowrap">
                                        Status
                                    </th>
                                    <th class="px-3 sm:px-4 py-3 text-center text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider whitespace-nowrap">
                                        Aksi
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
                                <!-- Data akan diisi oleh DataTables -->
                            </tbody>
                        </table>
                    </div>

                    <!-- Info Stats -->
                    <div class="mt-4 sm:mt-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 text-xs sm:text-sm text-gray-600 dark:text-gray-400">
                        <div class="flex items-center">
                            <i class="fas fa-info-circle text-teal-500 mr-2 text-xs sm:text-sm"></i>
                            <span id="tableInfo" class="font-medium">Memuat data...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
    
    <style>
        .dataTables_wrapper {
            @apply text-gray-700 dark:text-gray-300;
        }
        
        .dataTables_wrapper .dataTables_length select,
        .dataTables_wrapper .dataTables_filter input {
            @apply border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white rounded-lg focus:border-teal-500 focus:ring-teal-500 transition-all;
        }

        .dataTables_wrapper .dataTables_filter input {
            @apply px-4 py-2 pl-10 shadow-sm;
        }
        
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            @apply px-3 py-2 rounded-lg border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-gray-300 hover:bg-teal-50 dark:hover:bg-slate-700 transition-all mx-1;
        }
        
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            @apply bg-teal-500 text-white border-teal-500 hover:bg-teal-600 dark:hover:bg-teal-600;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            @apply opacity-50 cursor-not-allowed;
        }
        
        #riwayatTable tbody tr {
            transition: all 0.2s ease;
        }
        
        #riwayatTable tbody tr:hover {
            @apply bg-teal-50 dark:bg-slate-700;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(20, 184, 166, 0.1);
        }
        
        .action-btn {
            transition: all 0.2s ease;
        }
        
        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        @media (max-width: 768px) {
            .dataTables_wrapper .dataTables_length,
            .dataTables_wrapper .dataTables_filter {
                @apply mb-4;
            }
        }

        .dataTables_filter {
            position: relative;
        }

        .dataTables_filter::before {
            content: "\f002";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            pointer-events: none;
        }
    </style>
    @endpush

    @push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <script>
        // Global functions - define outside of document.ready
        function updateStats() {
            $.ajax({
                url: "{{ route('pasien.riwayat-penghapusan.index') }}",
                type: 'GET',
                data: {
                    stats: 1
                },
                dataType: 'json',
                success: function(data) {
                    $('#totalDihapus').text(data.total || 0);
                    $('#totalDapatDipulihkan').text(data.dapat_dipulihkan || 0);
                    $('#totalSudahRestore').text(data.sudah_restore || 0);
                },
                error: function() {
                    console.error('Failed to update stats');
                }
            });
        }

        function showToast(message, type = 'info') {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                background: document.documentElement.classList.contains('dark') ? '#1e293b' : '#fff',
                color: document.documentElement.classList.contains('dark') ? '#fff' : '#000',
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer);
                    toast.addEventListener('mouseleave', Swal.resumeTimer);
                }
            });

            Toast.fire({
                icon: type,
                title: message
            });
        }

        $(document).ready(function() {
            
            // Update stats on first load
            updateStats();
            
            // Initialize DataTable
            let table = $('#riwayatTable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: "{{ route('pasien.riwayat-penghapusan.datatable') }}",
                    type: 'GET',
                    data: function (d) {
                        d.status_pemulihan = $('#statusPemulihanFilter').val();
                        d.tipe_penghapusan = $('#tipePenghapusanFilter').val();
                    }
                },
                columns: [
                    { 
                        data: 'no_rekam_medis', 
                        name: 'no_rekam_medis',
                        className: 'font-mono text-xs sm:text-sm'
                    },
                    { 
                        data: 'nama_pasien', 
                        name: 'nama_pasien',
                        className: 'font-medium text-xs sm:text-sm'
                    },
                    { 
                        data: 'waktu_penghapusan_formatted', 
                        name: 'waktu_penghapusan',
                        className: 'text-xs sm:text-sm'
                    },
                    { 
                        data: 'penghapus_nama', 
                        name: 'dihapus_oleh',
                        orderable: false,
                        className: 'text-xs sm:text-sm'
                    },
                    { 
                        data: 'status_badge', 
                        name: 'status_pemulihan',
                        orderable: false,
                        className: 'text-xs sm:text-sm'
                    },
                    { 
                        data: 'aksi', 
                        name: 'aksi', 
                        orderable: false, 
                        searchable: false,
                        className: 'text-center'
                    }
                ],
                language: {
                    processing: '<div class="flex items-center justify-center"><i class="fas fa-spinner fa-spin mr-2 text-teal-500"></i> <span class="font-medium">Memuat data...</span></div>',
                    lengthMenu: "Tampilkan _MENU_ data per halaman",
                    zeroRecords: '<div class="text-center py-8"><i class="fas fa-inbox text-gray-400 text-4xl mb-3"></i><p class="text-gray-600 dark:text-gray-400 font-medium">Tidak ada riwayat penghapusan</p></div>',
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                    infoFiltered: "(disaring dari _MAX_ total data)",
                    search: "",
                    searchPlaceholder: "Cari nama, NIK, no. RM...",
                    paginate: {
                        first: '<i class="fas fa-angle-double-left"></i>',
                        last: '<i class="fas fa-angle-double-right"></i>',
                        next: '<i class="fas fa-chevron-right"></i>',
                        previous: '<i class="fas fa-chevron-left"></i>'
                    }
                },
                pageLength: 10,
                lengthMenu: [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "Semua"]],
                order: [[2, 'desc']]
            });

            // Filter events
            $('#statusPemulihanFilter, #tipePenghapusanFilter').on('change', function() {
                table.ajax.reload(null, false);
                updateStats();
            });

            // Reset filters
            $('#resetFilters').on('click', function() {
                $('#statusPemulihanFilter').val('');
                $('#tipePenghapusanFilter').val('');
                table.ajax.reload(null, false);
                updateStats();
                showToast('Filter direset', 'success');
            });

            // Event delegation untuk restore button (dynamically generated)
            $(document).on('click', '.restore-btn', function() {
                const id = $(this).data('id');
                const row = $(this).closest('tr');
                const nama = row.find('td:eq(1)').text(); // Nama pasien di kolom 2
                confirmRestore(id, nama);
            });

            // Event delegation untuk hard delete button (dynamically generated)
            $(document).on('click', '.hard-delete-btn', function() {
                const id = $(this).data('id');
                const row = $(this).closest('tr');
                const nama = row.find('td:eq(1)').text(); // Nama pasien di kolom 2
                confirmHardDelete(id, nama);
            });
        });

        // Restore function
        function confirmRestore(id, nama) {
            Swal.fire({
                title: 'Restore Pasien?',
                html: `<div class="text-left">
                    <p class="mb-2 text-sm">Pasien akan di-restore beserta semua data terkaitnya:</p>
                    <p class="font-bold text-base mb-3">${nama}</p>
                    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
                        <i class="fas fa-info-circle mr-2 text-blue-600"></i>
                        <span class="text-xs text-blue-600 dark:text-blue-400">
                            Pemeriksaan, pembayaran, dan data lainnya akan di-restore.
                        </span>
                    </div>
                </div>`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#f59e0b',
                cancelButtonColor: '#6b7280',
                confirmButtonText: '<i class="fas fa-undo mr-2"></i>Ya, Restore',
                cancelButtonText: '<i class="fas fa-times mr-2"></i>Batal',
                background: document.documentElement.classList.contains('dark') ? '#1e293b' : '#fff',
                color: document.documentElement.classList.contains('dark') ? '#fff' : '#000',
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    return fetch(`/pasien/riwayat-penghapusan/${id}/restore`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .catch(error => {
                        Swal.showValidationMessage(`${error}`);
                    });
                }
            }).then((result) => {
                if (result.isConfirmed && result.value.success) {
                    Swal.fire({
                        title: 'Berhasil!',
                        text: result.value.message,
                        icon: 'success',
                        confirmButtonColor: '#14b8a6',
                        timer: 2000,
                        timerProgressBar: true,
                        background: document.documentElement.classList.contains('dark') ? '#1e293b' : '#fff',
                        color: document.documentElement.classList.contains('dark') ? '#fff' : '#000',
                    }).then(() => {
                        $('#riwayatTable').DataTable().ajax.reload();
                    });
                } else if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Gagal!',
                        text: result.value?.message || 'Terjadi kesalahan',
                        icon: 'error',
                        confirmButtonColor: '#14b8a6',
                        background: document.documentElement.classList.contains('dark') ? '#1e293b' : '#fff',
                        color: document.documentElement.classList.contains('dark') ? '#fff' : '#000',
                    });
                }
            });
        }

        // Hard delete function
        function confirmHardDelete(id, nama) {
            Swal.fire({
                title: 'Hapus Permanen?',
                html: `<div class="text-left">
                    <div class="bg-red-50 dark:bg-red-900/20 border border-red-300 dark:border-red-800 rounded-lg p-4 mb-4">
                        <i class="fas fa-exclamation-triangle text-red-600 dark:text-red-400 mr-2"></i>
                        <span class="text-sm text-red-700 dark:text-red-300 font-medium">Tindakan ini TIDAK dapat dibatalkan!</span>
                    </div>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Pasien dan semua data akan dihapus permanen:</p>
                    <p class="font-bold text-base mt-2">${nama}</p>
                </div>`,
                icon: 'error',
                showCancelButton: true,
                confirmButtonColor: '#dc2626',
                cancelButtonColor: '#6b7280',
                confirmButtonText: '<i class="fas fa-trash mr-2"></i>Ya, Hapus Permanen',
                cancelButtonText: '<i class="fas fa-times mr-2"></i>Batal',
                background: document.documentElement.classList.contains('dark') ? '#1e293b' : '#fff',
                color: document.documentElement.classList.contains('dark') ? '#fff' : '#000',
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    return Swal.fire({
                        title: 'Konfirmasi dengan Password',
                        html: `<input type="password" id="hardDelPass" class="w-full text-sm border border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white rounded-lg p-2.5 focus:border-red-500 focus:ring-red-500" placeholder="Masukkan password..." autocomplete="off">`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#dc2626',
                        confirmButtonText: 'Hapus',
                        cancelButtonText: 'Batal',
                        background: document.documentElement.classList.contains('dark') ? '#1e293b' : '#fff',
                        color: document.documentElement.classList.contains('dark') ? '#fff' : '#000',
                        preConfirm: () => {
                            const pass = document.getElementById('hardDelPass')?.value;
                            if (!pass) {
                                Swal.showValidationMessage('Masukkan password');
                                return false;
                            }
                            return pass;
                        }
                    }).then(res => {
                        if (!res.isConfirmed) return false;
                        
                        return fetch(`/pasien/riwayat-penghapusan/${id}/hard-delete`, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json',
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                password: res.value
                            })
                        })
                        .then(response => response.json())
                        .catch(error => {
                            Swal.showValidationMessage(`${error}`);
                        });
                    });
                }
            }).then((result) => {
                if (result.isConfirmed && result.value?.success) {
                    Swal.fire({
                        title: 'Terhapus!',
                        text: result.value.message,
                        icon: 'success',
                        confirmButtonColor: '#14b8a6',
                        timer: 2000,
                        timerProgressBar: true,
                        background: document.documentElement.classList.contains('dark') ? '#1e293b' : '#fff',
                        color: document.documentElement.classList.contains('dark') ? '#fff' : '#000',
                    }).then(() => {
                        $('#riwayatTable').DataTable().ajax.reload();
                    });
                }
            });
        }

        window.confirmRestore = confirmRestore;
        window.confirmHardDelete = confirmHardDelete;
    </script>
    @endpush
</x-app-layout>
