@extends('layouts.app')

@section('title', 'Backup & Import Database - SIAKAD')
@section('page-title', 'Backup & Import Database')

@push('styles')
<style>
    .backup-card {
        background: white;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }

    .backup-header {
        background: linear-gradient(135deg, var(--primary) 0%, #5a5fe0 100%);
        color: white;
        padding: 1.5rem;
    }

    .backup-header-icon {
        width: 56px;
        height: 56px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .backup-header h4 {
        font-weight: 700;
        margin-bottom: 0.25rem;
    }

    .backup-header p {
        opacity: 0.85;
        margin: 0;
        font-size: 0.9rem;
    }

    .backup-body {
        padding: 1.5rem;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .stat-box {
        background: var(--gray-100);
        border-radius: 0.75rem;
        padding: 1.25rem;
        text-align: center;
    }

    .stat-box-icon {
        width: 40px;
        height: 40px;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 0.75rem;
        font-size: 1.125rem;
    }

    .stat-box-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--gray-800);
    }

    .stat-box-label {
        font-size: 0.8rem;
        color: var(--gray-500);
        margin: 0;
    }

    .backup-list {
        border: 1px solid var(--gray-200);
        border-radius: 0.75rem;
        overflow: hidden;
    }

    .backup-list-header {
        background: var(--gray-100);
        padding: 0.875rem 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .backup-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid var(--gray-100);
        transition: background 0.2s;
    }

    .backup-item:last-child {
        border-bottom: none;
    }

    .backup-item:hover {
        background: var(--gray-100);
    }

    .backup-file-icon {
        width: 44px;
        height: 44px;
        background: rgba(105, 108, 255, 0.1);
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .backup-file-icon.full {
        background: rgba(2, 195, 154, 0.1);
        color: var(--success);
    }

    .backup-file-info {
        flex-grow: 1;
        min-width: 0;
        margin-left: 1rem;
    }

    .backup-file-name {
        font-weight: 600;
        color: var(--gray-800);
        font-size: 0.9rem;
        word-break: break-all;
    }

    .backup-file-meta {
        font-size: 0.8rem;
        color: var(--gray-500);
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 0.25rem;
        flex-wrap: wrap;
    }

    .backup-file-meta span {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .backup-actions {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .btn-action {
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-action.download {
        background: rgba(105, 108, 255, 0.1);
        color: var(--primary);
    }

    .btn-action.download:hover {
        background: var(--primary);
        color: white;
    }

    .btn-action.delete {
        background: rgba(255, 75, 75, 0.1);
        color: var(--danger);
    }

    .btn-action.delete:hover {
        background: var(--danger);
        color: white;
    }

    .btn-action.restore {
        background: rgba(2, 195, 154, 0.1);
        color: var(--success);
    }

    .btn-action.restore:hover {
        background: var(--success);
        color: white;
    }

    .empty-state {
        padding: 3rem 2rem;
        text-align: center;
        color: var(--gray-500);
    }

    .empty-state-icon {
        width: 64px;
        height: 64px;
        background: var(--gray-100);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-size: 1.5rem;
        color: var(--gray-400);
    }

    .empty-state h6 {
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--gray-700);
    }

    .empty-state p {
        font-size: 0.9rem;
        margin: 0;
    }

    /* Import Form */
    .import-form-card {
        background: var(--gray-100);
        border-radius: 0.75rem;
        padding: 1.5rem;
        border: 2px dashed var(--gray-300);
        transition: all 0.3s;
    }

    .import-form-card:hover {
        border-color: var(--primary);
        background: rgba(105, 108, 255, 0.05);
    }

    .import-form-card.dragover {
        border-color: var(--primary);
        background: rgba(105, 108, 255, 0.1);
    }

    .file-input-wrapper {
        position: relative;
    }

    .file-input {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .file-drop-zone {
        text-align: center;
        padding: 2rem;
    }

    .file-drop-zone i {
        font-size: 2.5rem;
        color: var(--gray-400);
        margin-bottom: 1rem;
    }

    .file-drop-zone h6 {
        font-weight: 600;
        color: var(--gray-700);
        margin-bottom: 0.5rem;
    }

    .file-drop-zone p {
        font-size: 0.85rem;
        color: var(--gray-500);
        margin: 0;
    }

    .file-drop-zone .btn {
        margin-top: 1rem;
    }

    /* Restore Modal */
    .restore-warning {
        background: rgba(255, 75, 75, 0.1);
        border: 1px solid rgba(255, 75, 75, 0.3);
        border-radius: 0.75rem;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .restore-warning-icon {
        width: 40px;
        height: 40px;
        background: rgba(255, 75, 75, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--danger);
        margin-bottom: 0.75rem;
    }

    .restore-warning h6 {
        font-weight: 600;
        color: var(--danger);
        margin-bottom: 0.5rem;
    }

    .restore-warning p {
        font-size: 0.85rem;
        color: var(--gray-700);
        margin: 0;
    }

    .confirm-input {
        font-family: monospace;
        font-size: 1.1rem;
        letter-spacing: 0.05em;
    }

    .backup-section-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--gray-700);
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .backup-section-title i {
        color: var(--primary);
    }

    .full-backup-badge {
        background: linear-gradient(135deg, var(--success), #02c99a);
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 1rem;
        font-size: 0.7rem;
        font-weight: 600;
    }

    @media (max-width: 992px) {
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .stats-grid {
            grid-template-columns: 1fr;
        }

        .backup-file-meta {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.25rem;
        }

        .backup-actions {
            flex-direction: column;
        }
    }
</style>
@endpush

@section('content')
<!-- Page Header -->
<div class="backup-card mb-4">
    <div class="backup-header">
        <div class="backup-header-icon">
            <i class="bi bi-database-fill-lock"></i>
        </div>
        <h4>Backup & Restore Database</h4>
        <p>Kelola backup database dan file aplikasi untuk keamanan data akademik</p>
    </div>
</div>

<!-- Stats -->
<div class="stats-grid mb-4">
    <div class="stat-box">
        <div class="stat-box-icon" style="background: rgba(105, 108, 255, 0.1); color: var(--primary);">
            <i class="bi bi-file-earmark-zip"></i>
        </div>
        <div class="stat-box-value">{{ $backupCount }}</div>
        <p class="stat-box-label mb-0">Backup Database</p>
    </div>
    <div class="stat-box">
        <div class="stat-box-icon" style="background: rgba(2, 195, 154, 0.1); color: var(--success);">
            <i class="bi bi-folder-zip"></i>
        </div>
        <div class="stat-box-value">{{ $fullBackupCount }}</div>
        <p class="stat-box-label mb-0">Full Backup</p>
    </div>
    <div class="stat-box">
        <div class="stat-box-icon" style="background: rgba(252, 176, 44, 0.1); color: var(--warning);">
            <i class="bi bi-hdd"></i>
        </div>
        <div class="stat-box-value">{{ $diskUsed['formatted'] }}</div>
        <p class="stat-box-label mb-0">Disk Usage</p>
    </div>
    <div class="stat-box">
        <div class="stat-box-icon" style="background: rgba(255, 107, 107, 0.1); color: var(--danger);">
            <i class="bi bi-database"></i>
        </div>
        <div class="stat-box-value">MySQL</div>
        <p class="stat-box-label mb-0">Database Type</p>
    </div>
</div>

<div class="row">
    <!-- Backup List -->
    <div class="col-lg-8">
        <!-- Database Backup Section -->
        <div class="backup-card mb-4">
            <div class="backup-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">
                        <i class="bi bi-database me-2"></i>Backup Database (.sql)
                    </h5>
                    <form action="{{ route('admin.backup.create') }}" method="POST" class="d-inline" id="createBackupForm">
                        @csrf
                        <button type="submit" class="btn btn-outline-primary" id="createBackupBtn">
                            <i class="bi bi-database-add me-2"></i>Backup Database
                        </button>
                    </form>
                </div>

                <p class="text-muted small mb-3">Backup hanya menyertakan struktur dan data database saja. Untuk backup lengkap (database + file), gunakan Full Backup.</p>

                <div class="backup-list">
                    <div class="backup-list-header">
                        <i class="bi bi-file-earmark-code"></i>
                        <span>File Database</span>
                        <span class="ms-auto">Aksi</span>
                    </div>

                    @forelse($backups as $backup)
                    <div class="backup-item">
                        <div class="backup-file-icon">
                            <i class="bi bi-file-earmark-code"></i>
                        </div>
                        <div class="backup-file-info">
                            <div class="backup-file-name">{{ $backup['filename'] }}</div>
                            <div class="backup-file-meta">
                                <span><i class="bi bi-calendar3"></i> {{ \Carbon\Carbon::parse($backup['created_at'])->format('d M Y, H:i') }}</span>
                                <span><i class="bi bi-files"></i> {{ $backup['size'] > 1048576 ? round($backup['size'] / 1048576, 2) . ' MB' : round($backup['size'] / 1024, 2) . ' KB' }}</span>
                                <span class="badge bg-light text-dark">DATABASE ONLY</span>
                            </div>
                        </div>
                        <div class="backup-actions">
                            <a href="{{ route('admin.backup.download', urlencode($backup['filename'])) }}" class="btn-action download" title="Download">
                                <i class="bi bi-download"></i>
                            </a>
                            <button type="button" class="btn-action restore" title="Restore" onclick="showRestoreModal('{{ urlencode($backup['filename']) }}', '{{ addslashes($backup['filename']) }}', 'database')">
                                <i class="bi bi-arrow-counterclockwise"></i>
                            </button>
                            <button type="button" class="btn-action delete" title="Hapus" onclick="confirmDelete('{{ urlencode($backup['filename']) }}', '{{ addslashes($backup['filename']) }}', 'database')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </div>
                    @empty
                    <div class="empty-state">
                        <div class="empty-state-icon">
                            <i class="bi bi-database-fill-x"></i>
                        </div>
                        <h6>Belum Ada Backup Database</h6>
                        <p>Klik tombol "Backup Database" untuk membuat backup database pertama</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Full Backup Section -->
        <div class="backup-card">
            <div class="backup-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">
                        <i class="bi bi-folder-zip me-2"></i>Full Backup (Database + File)
                    </h5>
                    <form action="{{ route('admin.backup.createFull') }}" method="POST" class="d-inline" id="createFullBackupForm">
                        @csrf
                        <button type="submit" class="btn btn-success" id="createFullBackupBtn">
                            <i class="bi bi-cloud-download me-2"></i>Full Backup
                        </button>
                    </form>
                </div>

                <p class="text-muted small mb-3">
                    <i class="bi bi-info-circle me-1"></i>
                    Full backup menyertakan: <strong>Database SQL</strong>, <strong>public/img</strong> (foto, logo), <strong>storage/app</strong>, <strong>bootstrap</strong>, <strong>config</strong>, dan <strong>.env.example</strong>.
                </p>

                <div class="backup-list">
                    <div class="backup-list-header">
                        <i class="bi bi-file-earmark-zip"></i>
                        <span>File Full Backup</span>
                        <span class="ms-auto">Aksi</span>
                    </div>

                    @forelse($fullBackups as $backup)
                    <div class="backup-item">
                        <div class="backup-file-icon full">
                            <i class="bi bi-file-earmark-zip-fill"></i>
                        </div>
                        <div class="backup-file-info">
                            <div class="backup-file-name">
                                {{ $backup['filename'] }}
                                <span class="full-backup-badge">FULL</span>
                            </div>
                            <div class="backup-file-meta">
                                <span><i class="bi bi-calendar3"></i> {{ \Carbon\Carbon::parse($backup['created_at'])->format('d M Y, H:i') }}</span>
                                <span><i class="bi bi-files"></i> {{ $backup['size'] > 1048576 ? round($backup['size'] / 1048576, 2) . ' MB' : round($backup['size'] / 1024, 2) . ' KB' }}</span>
                                <span class="badge bg-success">DATABASE + FILES</span>
                            </div>
                        </div>
                        <div class="backup-actions">
                            <a href="{{ route('admin.backup.downloadFull', urlencode($backup['filename'])) }}" class="btn-action download" title="Download">
                                <i class="bi bi-download"></i>
                            </a>
                            <button type="button" class="btn-action restore" title="Restore" onclick="showRestoreModal('{{ urlencode($backup['filename']) }}', '{{ addslashes($backup['filename']) }}', 'full')">
                                <i class="bi bi-arrow-counterclockwise"></i>
                            </button>
                            <button type="button" class="btn-action delete" title="Hapus" onclick="confirmDelete('{{ urlencode($backup['filename']) }}', '{{ addslashes($backup['filename']) }}', 'full')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </div>
                    @empty
                    <div class="empty-state">
                        <div class="empty-state-icon">
                            <i class="bi bi-folder-fill-x"></i>
                        </div>
                        <h6>Belum Ada Full Backup</h6>
                        <p>Klik tombol "Full Backup" untuk membuat backup lengkap aplikasi</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <!-- Import Form -->
    <div class="col-lg-4">
        <div class="backup-card">
            <div class="backup-body">
                <h5 class="mb-3">
                    <i class="bi bi-upload me-2"></i>Import Database
                </h5>

                <form action="{{ route('admin.backup.import') }}" method="POST" enctype="multipart/form-data" id="importForm">
                    @csrf
                    <div class="import-form-card" id="dropZone">
                        <div class="file-input-wrapper">
                            <input type="file" name="backup_file" class="file-input" id="backupFile" accept=".sql,.sqlite,.db" required>
                            <div class="file-drop-zone">
                                <i class="bi bi-cloud-arrow-up"></i>
                                <h6>Drag & Drop atau Klik</h6>
                                <p>File backup (.sql, .sqlite, atau .db)</p>
                                <div id="selectedFile" class="mt-2"></div>
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="document.getElementById('backupFile').click()">
                                    <i class="bi bi-folder2-open me-1"></i>Pilih File
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-info mt-3">
                        <i class="bi bi-info-circle me-2"></i>
                        <small>
                            <strong>Catatan:</strong> File import akan otomatis direstore ke database. Backup otomatis dari database saat ini akan dibuat sebelum proses import.
                        </small>
                    </div>

                    <button type="submit" class="btn btn-success w-100 mt-3" id="importBtn" disabled>
                        <i class="bi bi-upload me-2"></i>Import & Restore
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Restore Modal -->
<div class="modal fade" id="restoreModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(135deg, var(--danger) 0%, #ff3535 100%); color: white;">
                <h5 class="modal-title text-white">
                    <i class="bi bi-exclamation-triangle me-2"></i>Konfirmasi Restore
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="" method="POST" id="restoreForm">
                @csrf
                <div class="modal-body">
                    <div class="restore-warning">
                        <div class="restore-warning-icon">
                            <i class="bi bi-exclamation-octagon"></i>
                        </div>
                        <h6>Peringatan! Data Akan Dihapus</h6>
                        <p id="restoreWarningText">Melakukan restore akan MENGGANTIKAN seluruh data saat ini dengan data dari backup. Proses ini tidak dapat dibatalkan. Pastikan Anda telah membackup data sebelum melanjutkan.</p>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">File Backup</label>
                        <input type="text" class="form-control" id="restoreFilename" readonly>
                        <input type="hidden" name="filename" id="restoreFilenameHidden">
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Konfirmasi</label>
                        <p class="small text-muted mb-2">Ketik <strong class="text-danger">restore</strong> untuk melanjutkan:</p>
                        <input type="text" name="confirm" class="form-control confirm-input" placeholder="Ketik 'restore'" required autocomplete="off">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger" id="restoreSubmitBtn">
                        <i class="bi bi-arrow-counterclockwise me-2"></i>Restore Sekarang
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-header" style="background: var(--danger); color: white;">
                <h5 class="modal-title text-white">
                    <i class="bi bi-trash me-2"></i>Hapus Backup
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <p>Apakah Anda yakin ingin menghapus backup:</p>
                <p class="fw-bold text-danger" id="deleteFilename"></p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <form action="" method="POST" id="deleteForm">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-trash me-2"></i>Hapus
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // File input handling
    const fileInput = document.getElementById('backupFile');
    const selectedFile = document.getElementById('selectedFile');
    const importBtn = document.getElementById('importBtn');
    const dropZone = document.getElementById('dropZone');
    const createBackupForm = document.getElementById('createBackupForm');
    const createBackupBtn = document.getElementById('createBackupBtn');
    const createFullBackupForm = document.getElementById('createFullBackupForm');
    const createFullBackupBtn = document.getElementById('createFullBackupBtn');

    fileInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            const file = this.files[0];
            selectedFile.innerHTML = `
                <div class="alert alert-success py-2 px-3 mb-0">
                    <i class="bi bi-file-earmark-check me-2"></i>${file.name}
                    <small class="d-block text-muted">${(file.size / 1024).toFixed(2)} KB</small>
                </div>
            `;
            importBtn.disabled = false;
        } else {
            selectedFile.innerHTML = '';
            importBtn.disabled = true;
        }
    });

    // Drag and drop
    dropZone.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.classList.add('dragover');
    });

    dropZone.addEventListener('dragleave', function(e) {
        e.preventDefault();
        this.classList.remove('dragover');
    });

    dropZone.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('dragover');

        if (e.dataTransfer.files.length > 0) {
            fileInput.files = e.dataTransfer.files;
            fileInput.dispatchEvent(new Event('change'));
        }
    });

    // Create Backup Form Handler
    createBackupForm.addEventListener('submit', function(e) {
        setTimeout(function() {
            if (createBackupBtn) {
                createBackupBtn.disabled = true;
                createBackupBtn.innerHTML = '<i class="bi bi-arrow-repeat me-2"></i>Membuat Backup...';
            }
        }, 100);
    });

    // Create Full Backup Form Handler
    createFullBackupForm.addEventListener('submit', function(e) {
        setTimeout(function() {
            if (createFullBackupBtn) {
                createFullBackupBtn.disabled = true;
                createFullBackupBtn.innerHTML = '<i class="bi bi-arrow-repeat me-2"></i>Membuat Full Backup...';
            }
        }, 100);
    });

    // Import Form Handler
    document.getElementById('importForm').addEventListener('submit', function(e) {
        setTimeout(function() {
            if (importBtn) {
                importBtn.disabled = true;
                importBtn.innerHTML = '<i class="bi bi-arrow-repeat me-2"></i>Mengimport...';
            }
        }, 100);
    });

    // Restore modal
    function showRestoreModal(encodedFilename, displayFilename, type) {
        document.getElementById('restoreFilename').value = displayFilename;
        document.getElementById('restoreFilenameHidden').value = encodedFilename;

        let actionUrl;
        let warningText;

        if (type === 'full') {
            actionUrl = '{{ route('admin.backup.restoreFull', '') }}/' + encodedFilename;
            warningText = '<strong>Peringatan untuk Full Backup!</strong> Restore ini akan mengganti SEMUA data: database, foto, logo, dan file konfigurasi. Pastikan Anda memiliki backup terbaru. Proses ini tidak dapat dibatalkan.';
        } else {
            actionUrl = '{{ route('admin.backup.restore', '') }}/' + encodedFilename;
            warningText = 'Melakukan restore akan MENGGANTIKAN seluruh data saat ini dengan data dari backup. Proses ini tidak dapat dibatalkan. Pastikan Anda telah membackup data sebelum melanjutkan.';
        }

        document.getElementById('restoreForm').action = actionUrl;
        document.getElementById('restoreWarningText').innerHTML = warningText;

        // Reset submit button
        const restoreBtn = document.getElementById('restoreSubmitBtn');
        if (restoreBtn) {
            restoreBtn.disabled = false;
            restoreBtn.innerHTML = '<i class="bi bi-arrow-counterclockwise me-2"></i>Restore Sekarang';
        }

        const modal = new bootstrap.Modal(document.getElementById('restoreModal'));
        modal.show();
    }

    // Restore Form Handler
    document.getElementById('restoreForm').addEventListener('submit', function(e) {
        const confirmInput = document.querySelector('input[name="confirm"]');
        if (confirmInput && confirmInput.value.toLowerCase() !== 'restore') {
            e.preventDefault();
            alert('Ketik "restore" untuk melanjutkan');
            return;
        }

        const restoreBtn = document.getElementById('restoreSubmitBtn');
        if (restoreBtn) {
            restoreBtn.disabled = true;
            restoreBtn.innerHTML = '<i class="bi bi-arrow-repeat me-2"></i>Merestore...';
        }
    });

    // Delete confirmation
    function confirmDelete(encodedFilename, displayFilename, type) {
        document.getElementById('deleteFilename').textContent = displayFilename;

        let actionUrl;
        if (type === 'full') {
            actionUrl = '{{ route('admin.backup.destroyFull', '') }}/' + encodedFilename;
        } else {
            actionUrl = '{{ route('admin.backup.destroy', '') }}/' + encodedFilename;
        }

        document.getElementById('deleteForm').action = actionUrl;

        const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
        modal.show();
    }
</script>
@endpush