{% extends "admin/layout.html" %}
{% block title %}Backups - Admin{% endblock %}

{% block body %}
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="text-backups-title">{% trans %}Backups{% endtrans %}</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{% trans %}Create and manage database & file backups{% endtrans %}</p>
        </div>
        <div class="flex items-center gap-3">
            <button type="button" id="upload-backup-toggle" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 font-semibold hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-300" data-testid="button-upload-backup">
                <i class="fa fa-upload"></i> {% trans %}Upload Backup{% endtrans %}
            </button>
            <button type="button" id="create-backup-btn" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-accent hover:bg-accent-dark text-white font-semibold shadow-lg shadow-accent/30 hover:shadow-xl transition-all duration-300" data-testid="button-create-backup">
                <i class="fa fa-plus"></i> {% trans %}Create Backup{% endtrans %}
            </button>
        </div>
    </div>

    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-emerald-500/5 to-cyan-500/5">
            <div class="flex items-center gap-3">
                <i class="fa fa-info-circle text-primary"></i>
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white text-sm">{% trans %}What's included in backups?{% endtrans %}</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{% trans %}SQLite database (all settings, pages, FAQs, reviews, profiles) + uploaded files (logos, favicons, images) + blog images{% endtrans %}</p>
                </div>
            </div>
        </div>

        <div class="p-6">
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                <i class="fa fa-lightbulb text-yellow-500 mr-1"></i>
                <strong>{% trans %}Tip:{% endtrans %}</strong> {% trans %}Download your backup before deleting the Docker container. When you recreate it, use the "Upload Backup" button to upload your ZIP file, then restore it from this page.{% endtrans %}
            </p>
        </div>
    </div>

    <div id="upload-backup-panel" class="hidden rounded-xl border-2 border-dashed border-primary/30 dark:border-primary/20 bg-white dark:bg-gray-900 overflow-hidden transition-all">
        <div class="p-8 text-center">
            <form id="upload-backup-form" enctype="multipart/form-data">
                <div id="upload-drop-zone" class="relative rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-700 hover:border-primary dark:hover:border-primary bg-gray-50 dark:bg-gray-800/50 p-10 transition-all cursor-pointer group">
                    <input type="file" name="file" id="backup-file-input" accept=".zip" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" data-testid="input-upload-backup">
                    <div class="flex flex-col items-center gap-3">
                        <div class="w-16 h-16 rounded-2xl bg-primary/10 dark:bg-primary/20 flex items-center justify-center group-hover:scale-110 transition-transform">
                            <i class="fa fa-cloud-arrow-up text-primary text-2xl"></i>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900 dark:text-white" id="upload-label">{% trans %}Drop your backup ZIP here or click to browse{% endtrans %}</p>
                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{% trans %}Only .zip backup files are accepted{% endtrans %}</p>
                        </div>
                    </div>
                </div>
                <div id="upload-progress" class="hidden mt-4">
                    <div class="flex items-center justify-center gap-3">
                        <i class="fa fa-spinner fa-spin text-primary text-lg"></i>
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Uploading backup...{% endtrans %}</span>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-primary/5 to-secondary/5">
            <h3 class="font-semibold text-gray-900 dark:text-white text-sm"><i class="fa fa-archive mr-2 text-primary"></i>{% trans %}Available Backups{% endtrans %}</h3>
        </div>

        <div id="backups-list">
            {% if backups %}
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-100 dark:border-gray-800 text-left">
                        <th class="px-6 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Filename{% endtrans %}</th>
                        <th class="px-6 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Size{% endtrans %}</th>
                        <th class="px-6 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Actions{% endtrans %}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                    {% for backup in backups %}
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors backup-row" data-name="{{ backup.name }}" data-testid="row-backup-{{ loop.index }}">
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center flex-shrink-0">
                                    <i class="fa fa-file-zipper text-emerald-600 dark:text-emerald-400"></i>
                                </div>
                                <div>
                                    <div class="font-medium text-gray-900 dark:text-white text-sm" data-testid="text-backup-name">{{ backup.name }}</div>
                                    <div class="text-xs text-gray-400 dark:text-gray-500">{{ backup.date }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="text-sm text-gray-600 dark:text-gray-400" data-testid="text-backup-size">{{ backup.size }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                <a href="{{ full_url('/admin/backups/download/' ~ backup.name) }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-primary dark:text-primary-light bg-primary/10 dark:bg-primary-light/10 hover:bg-primary/20 dark:hover:bg-primary-light/20 transition-all" data-testid="button-download-{{ loop.index }}">
                                    <i class="fa fa-download"></i> {% trans %}Download{% endtrans %}
                                </a>
                                <button type="button" class="restore-backup-btn inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-yellow-600 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/20 hover:bg-yellow-100 dark:hover:bg-yellow-900/30 transition-all" data-name="{{ backup.name }}" data-testid="button-restore-{{ loop.index }}">
                                    <i class="fa fa-rotate-left"></i> {% trans %}Restore{% endtrans %}
                                </button>
                                <button type="button" class="delete-backup-btn inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 transition-all" data-name="{{ backup.name }}" data-testid="button-delete-{{ loop.index }}">
                                    <i class="fa fa-trash"></i> {% trans %}Delete{% endtrans %}
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="text-center py-12">
                <div class="w-16 h-16 mx-auto rounded-2xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4">
                    <i class="fa fa-database text-gray-400 dark:text-gray-500 text-2xl"></i>
                </div>
                <p class="text-gray-500 dark:text-gray-400 font-medium">{% trans %}No backups yet{% endtrans %}</p>
                <p class="text-gray-400 dark:text-gray-500 text-sm mt-1">{% trans %}Click "Create Backup" to make your first backup.{% endtrans %}</p>
            </div>
            {% endif %}
        </div>
    </div>
    <!-- ========================================================== -->
    <!-- Sync & Remote Backup Card -->
    <!-- ========================================================== -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme" id="sync-card">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-blue-500/5 to-purple-500/5">
            <div class="flex items-center justify-between">
                <h3 class="font-semibold text-gray-900 dark:text-white text-sm">
                    <i class="fa fa-cloud-arrow-up mr-2 text-blue-500"></i>{% trans %}Sync &amp; Remote Backup{% endtrans %}
                </h3>
                <div id="sync-status-badge" class="text-xs text-gray-400 dark:text-gray-500"></div>
            </div>
        </div>

        <div class="p-6 space-y-6">

            <!-- LOCAL SYNC -->
            <div>
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <h4 class="font-medium text-gray-900 dark:text-white text-sm">{% trans %}Local Path Sync{% endtrans %}</h4>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{% trans %}Mirror DB &amp; uploads to a local directory (e.g. mounted public_html){% endtrans %}</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" id="local-sync-enabled" class="sr-only peer" value="1"
                               {% if sync_settings.local_sync_enabled == '1' %}checked{% endif %}>
                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-accent"></div>
                    </label>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">{% trans %}Target Directory Path{% endtrans %}</label>
                        <input type="text" id="local-sync-path" placeholder="/var/www/public_html/backups"
                               value="{{ sync_settings.local_sync_path }}"
                               class="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-accent/30 focus:border-accent outline-none transition">
                        <div class="mt-2 rounded-lg border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20 p-3 space-y-2">
                            <p class="text-xs font-semibold text-blue-700 dark:text-blue-300"><i class="fa fa-lightbulb mr-1"></i>{% trans %}Recommended: use a fixed container path so your docker command is always the same{% endtrans %}</p>
                            <p class="text-xs text-blue-600 dark:text-blue-400">{% trans %}Set path to{% endtrans %} <code class="font-mono font-semibold">/website/backup</code> {% trans %}and add this volume flag to your docker run command:{% endtrans %}</p>
                            <div class="flex items-center gap-2">
                                <code class="font-mono text-xs bg-white dark:bg-gray-900 border border-blue-200 dark:border-blue-700 px-2 py-1 rounded text-blue-800 dark:text-blue-200 select-all" id="docker-volume-hint">-v $(pwd):/website/backup</code>
                                <button type="button" id="copy-volume-hint" title="{% trans %}Copy{% endtrans %}" class="flex-shrink-0 text-blue-500 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"><i class="fa fa-copy"></i></button>
                            </div>
                            <p class="text-xs text-blue-500 dark:text-blue-400">{% trans %}Run docker from your site directory and backups appear directly as{% endtrans %} <code class="font-mono">./storage/</code> {% trans %}and{% endtrans %} <code class="font-mono">./static/</code> {% trans %}— no path changes needed per site.{% endtrans %}</p>
                            <button type="button" id="use-recommended-path-btn" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-blue-600 hover:bg-blue-700 text-white transition-colors">
                                <i class="fa fa-wand-magic-sparkles"></i> {% trans %}Use recommended path (/website/backup){% endtrans %}
                            </button>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">{% trans %}Interval (seconds){% endtrans %}</label>
                        <input type="number" id="local-sync-interval" min="10" placeholder="60"
                               value="{{ sync_settings.local_sync_interval_secs }}"
                               class="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-accent/30 focus:border-accent outline-none transition">
                    </div>
                </div>
                <div class="mt-2 text-xs text-gray-400 dark:text-gray-500" id="local-last-sync"></div>
            </div>

            <hr class="border-gray-100 dark:border-gray-800">

            <!-- FTP SYNC -->
            <div>
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <h4 class="font-medium text-gray-900 dark:text-white text-sm">{% trans %}FTP Remote Backup{% endtrans %}</h4>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{% trans %}Push DB &amp; uploads to a remote FTP server{% endtrans %}</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" id="ftp-sync-enabled" class="sr-only peer" value="1"
                               {% if sync_settings.ftp_sync_enabled == '1' %}checked{% endif %}>
                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-accent"></div>
                    </label>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-4 gap-3 mb-3">
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">{% trans %}FTP Host{% endtrans %}</label>
                        <input type="text" id="ftp-host" placeholder="ftp.example.com"
                               value="{{ sync_settings.ftp_host }}"
                               class="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-accent/30 focus:border-accent outline-none transition">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">{% trans %}Port{% endtrans %}</label>
                        <input type="number" id="ftp-port" placeholder="21"
                               value="{{ sync_settings.ftp_port }}"
                               class="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-accent/30 focus:border-accent outline-none transition">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">{% trans %}Interval (min){% endtrans %}</label>
                        <input type="number" id="ftp-interval" min="1" placeholder="60"
                               value="{{ sync_settings.ftp_interval_mins }}"
                               class="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-accent/30 focus:border-accent outline-none transition">
                    </div>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-3">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">{% trans %}Username{% endtrans %}</label>
                        <input type="text" id="ftp-user" autocomplete="off"
                               value="{{ sync_settings.ftp_user }}"
                               class="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-accent/30 focus:border-accent outline-none transition">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">{% trans %}Password{% endtrans %}</label>
                        <input type="password" id="ftp-password" autocomplete="new-password"
                               class="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-accent/30 focus:border-accent outline-none transition">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">{% trans %}Remote Path{% endtrans %}</label>
                        <input type="text" id="ftp-remote-path" placeholder="/backups"
                               value="{{ sync_settings.ftp_remote_path }}"
                               class="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-accent/30 focus:border-accent outline-none transition">
                    </div>
                </div>
                <div class="mt-2 text-xs text-gray-400 dark:text-gray-500" id="ftp-last-sync"></div>
            </div>

            <hr class="border-gray-100 dark:border-gray-800">

            <!-- ACTION BUTTONS -->
            <div class="flex flex-wrap items-center gap-3">
                <button type="button" id="save-sync-settings-btn"
                        class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-accent hover:bg-accent-dark text-white text-sm font-semibold shadow-lg shadow-accent/30 hover:shadow-xl transition-all duration-300">
                    <i class="fa fa-save"></i> {% trans %}Save Settings{% endtrans %}
                </button>
                <button type="button" id="sync-now-btn"
                        class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 text-sm font-semibold hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-300">
                    <i class="fa fa-rotate"></i> {% trans %}Sync Now{% endtrans %}
                </button>
                <button type="button" id="force-sync-btn" title="{% trans %}Clears incremental state and re-copies ALL files, fixing cases where files were skipped{% endtrans %}"
                        class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 text-sm font-semibold hover:bg-amber-100 dark:hover:bg-amber-900/60 transition-all duration-300">
                    <i class="fa fa-rotate-right"></i> {% trans %}Force Full Sync{% endtrans %}
                </button>
                <button type="button" id="test-local-btn"
                        class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 text-sm font-semibold hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-300">
                    <i class="fa fa-folder-open"></i> {% trans %}Test Local Path{% endtrans %}
                </button>
                <button type="button" id="test-ftp-btn"
                        class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 text-sm font-semibold hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-300">
                    <i class="fa fa-plug"></i> {% trans %}Test FTP{% endtrans %}
                </button>
            </div>
            <div id="sync-now-result" class="hidden text-xs mt-2 p-3 rounded-lg"></div>

            <hr class="border-gray-100 dark:border-gray-800">

            <!-- RESTORE SECTION -->
            <div>
                <h4 class="font-medium text-gray-900 dark:text-white text-sm mb-1">{% trans %}Restore from Backup{% endtrans %}</h4>
                <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">{% trans %}Use these buttons to restore the database and uploaded files in case of data loss or corruption. You will be asked to confirm before any data is overwritten.{% endtrans %}</p>
                <div class="flex flex-wrap gap-3">
                    <button type="button" id="restore-local-btn"
                            class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 text-sm font-semibold hover:bg-amber-100 dark:hover:bg-amber-900/40 transition-all duration-300">
                        <i class="fa fa-folder-open"></i> {% trans %}Restore from Local Path{% endtrans %}
                    </button>
                    <button type="button" id="restore-ftp-btn"
                            class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 text-sm font-semibold hover:bg-red-100 dark:hover:bg-red-900/40 transition-all duration-300">
                        <i class="fa fa-cloud-arrow-down"></i> {% trans %}Restore from FTP{% endtrans %}
                    </button>
                </div>
                <div id="restore-result" class="mt-3 text-xs hidden"></div>
            </div>

        </div>
    </div>

</div>
{% endblock %}

{% block page_scripts %}
<script>
$(function() {
    $('#upload-backup-toggle').on('click', function() {
        $('#upload-backup-panel').toggleClass('hidden');
    });

    $('#backup-file-input').on('change', function() {
        var file = this.files[0];
        if (!file) return;
        if (!file.name.endsWith('.zip')) {
            toastr.error('Only .zip backup files are allowed');
            $(this).val('');
            return;
        }
        $('#upload-label').text(file.name);
        var formData = new FormData();
        formData.append('file', file);
        $('#upload-progress').removeClass('hidden');
        $('#upload-drop-zone').addClass('opacity-50 pointer-events-none');
        $.ajax({
            url: '/admin/backups/upload',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                if (resp.status === 'ok') {
                    toastr.success('Backup uploaded: ' + resp.name + ' (' + resp.size + ')');
                    setTimeout(function() { location.reload(); }, 1000);
                } else {
                    toastr.error(resp.message || 'Failed to upload backup');
                }
            },
            error: function(xhr) {
                var msg = 'Failed to upload backup';
                try { var data = JSON.parse(xhr.responseText); if (data.message) msg = data.message; } catch(e) {}
                toastr.error(msg);
            },
            complete: function() {
                $('#upload-progress').addClass('hidden');
                $('#upload-drop-zone').removeClass('opacity-50 pointer-events-none');
                $('#upload-label').text('Drop your backup ZIP here or click to browse');
                $('#backup-file-input').val('');
            }
        });
    });

    var $dropZone = $('#upload-drop-zone');
    $dropZone.on('dragover dragenter', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).addClass('border-primary bg-primary/5');
    });
    $dropZone.on('dragleave drop', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).removeClass('border-primary bg-primary/5');
    });
    $dropZone.on('drop', function(e) {
        var files = e.originalEvent.dataTransfer.files;
        if (files.length) {
            $('#backup-file-input')[0].files = files;
            $('#backup-file-input').trigger('change');
        }
    });

    $('#create-backup-btn').on('click', function() {
        var $btn = $(this);
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>Creating backup...');
        $.ajax({
            url: '/admin/backups/create',
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                if (resp.status === 'ok') {
                    toastr.success('Backup created: ' + resp.name + ' (' + resp.size + ')');
                    setTimeout(function() { location.reload(); }, 1000);
                } else {
                    toastr.error(resp.message || 'Failed to create backup');
                }
            },
            error: function() {
                toastr.error('Failed to create backup');
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="fa fa-plus mr-2"></i>Create Backup');
            }
        });
    });

    $('.restore-backup-btn').on('click', function() {
        var name = $(this).data('name');
        var $btn = $(this);
        window.ocConfirm('Restore backup "' + name + '"?\n\n\u2022 The CURRENT database will be overwritten immediately\n\u2022 All uploaded files will be replaced with the backup version\n\u2022 Any data created since this backup was taken will be lost', function() {
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-1"></i>Restoring...');
        $.ajax({
            url: '/admin/backups/restore/' + encodeURIComponent(name),
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                if (resp.status === 'ok') {
                    toastr.success(resp.message || 'Backup restored!');
                    setTimeout(function() { location.reload(); }, 1500);
                } else {
                    toastr.error(resp.message || 'Failed to restore backup');
                }
            },
            error: function() {
                toastr.error('Failed to restore backup');
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="fa fa-rotate-left mr-1"></i>Restore');
            }
        });
        }); /* end ocConfirm */
    });

    $('.delete-backup-btn').on('click', function() {
        var name = $(this).data('name');
        var $row = $(this).closest('tr');
        window.ocConfirm('Delete backup "' + name + '"?\n\n\u2022 This backup file will be permanently deleted\n\u2022 You will no longer be able to restore from this point', function() {
        $.ajax({
            url: '/admin/backups/delete/' + encodeURIComponent(name),
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                if (resp.status === 'ok') {
                    $row.fadeOut(300, function() { $(this).remove(); });
                    toastr.success('Backup deleted');
                } else {
                    toastr.error('Failed to delete backup');
                }
            },
            error: function() {
                toastr.error('Failed to delete backup');
            }
        });
        }); /* end ocConfirm */
    });

    // ==================== Docker volume hint ====================

    $('#copy-volume-hint').on('click', function() {
        var txt = $('#docker-volume-hint').text();
        if (!txt) return;
        navigator.clipboard.writeText(txt).then(function() {
            toastr.success('Copied to clipboard!');
        }).catch(function() {
            var $tmp = $('<textarea>').val(txt).appendTo('body').select();
            document.execCommand('copy');
            $tmp.remove();
            toastr.success('Copied!');
        });
    });

    $('#use-recommended-path-btn').on('click', function() {
        $('#local-sync-path').val('/website/backup');
        toastr.success('Path set to /website/backup — remember to click Save Settings.');
    });

    // ==================== Sync & Remote Backup JS ====================

    function loadSyncStatus() {
        $.ajax({
            url: '/admin/backups/sync-status',
            method: 'GET',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(data) {
                if (data.local_last_sync) {
                    var localErr = data.local_last_error ? ' &mdash; <span class="text-red-500">' + data.local_last_error + '</span>' : '';
                    $('#local-last-sync').html('<i class="fa fa-clock mr-1"></i>Last synced: ' + data.local_last_sync + localErr);
                }
                if (data.ftp_last_sync) {
                    var ftpErr = data.ftp_last_error ? ' &mdash; <span class="text-red-500">' + data.ftp_last_error + '</span>' : '';
                    $('#ftp-last-sync').html('<i class="fa fa-clock mr-1"></i>Last synced: ' + data.ftp_last_sync + ftpErr);
                }
            }
        });
    }

    loadSyncStatus();

    $('#save-sync-settings-btn').on('click', function() {
        var savBtn = $(this);
        savBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>Saving...');
        var payload = {
            local_sync_enabled: $('#local-sync-enabled').is(':checked') ? '1' : '0',
            local_sync_path: $('#local-sync-path').val().trim(),
            local_sync_interval_secs: $('#local-sync-interval').val() || '60',
            ftp_sync_enabled: $('#ftp-sync-enabled').is(':checked') ? '1' : '0',
            ftp_host: $('#ftp-host').val().trim(),
            ftp_port: $('#ftp-port').val() || '21',
            ftp_user: $('#ftp-user').val().trim(),
            ftp_password: $('#ftp-password').val(),
            ftp_remote_path: $('#ftp-remote-path').val().trim() || '/',
            ftp_interval_mins: $('#ftp-interval').val() || '60'
        };
        $.ajax({
            url: '/admin/backups/sync-settings',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(payload),
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                if (resp.status === 'ok') {
                    toastr.success('Sync settings saved.');
                } else {
                    toastr.error('Failed to save settings.');
                }
            },
            error: function() { toastr.error('Failed to save settings.'); },
            complete: function() {
                savBtn.prop('disabled', false).html('<i class="fa fa-save mr-2"></i>Save Settings');
            }
        });
    });

    $('#sync-now-btn').on('click', function() {
        var syncBtn = $(this);
        syncBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>Syncing...');
        $('#sync-now-result').addClass('hidden').text('');
        $.ajax({
            url: '/admin/backups/sync-now',
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                var $r = $('#sync-now-result');
                if (resp.status === 'nothing') {
                    toastr.warning(resp.message || 'No sync configured.');
                    $r.removeClass('hidden').attr('class', 'text-xs mt-2 p-3 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-400').text(resp.message);
                    return;
                }
                if (resp.status === 'ok') {
                    var lines = [];
                    $.each(resp.results || {}, function(label, res) {
                        var copied = res.copied || 0, skipped = res.skipped || 0, deleted = res.deleted || 0;
                        lines.push(label.toUpperCase() + ': ' + copied + ' copied, ' + skipped + ' skipped, ' + deleted + ' deleted');
                        if (res.errors && res.errors.length) {
                            $.each(res.errors, function(_, e) { lines.push('  ⚠ ' + e); });
                        }
                    });
                    toastr.success('Sync completed.');
                    if (lines.length) {
                        $r.removeClass('hidden').attr('class', 'text-xs mt-2 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400').html(lines.join('<br>'));
                    }
                    loadSyncStatus();
                } else {
                    var errLines = resp.errors && resp.errors.length ? resp.errors : ['Unknown error. Check that your local path is accessible inside the Docker container and the path is saved in settings.'];
                    toastr.error('Sync failed.');
                    $r.removeClass('hidden').attr('class', 'text-xs mt-2 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400').html('<b>Sync failed:</b><br>' + errLines.join('<br>'));
                }
            },
            error: function() { toastr.error('Sync request failed.'); },
            complete: function() {
                syncBtn.prop('disabled', false).html('<i class="fa fa-rotate mr-2"></i>Sync Now');
            }
        });
    });

    $('#force-sync-btn').on('click', function() {
        var btn = $(this);
        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>Syncing all files...');
        $('#sync-now-result').addClass('hidden').text('');
        $.ajax({
            url: '/admin/backups/force-sync',
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                var $r = $('#sync-now-result');
                if (resp.status === 'nothing') {
                    toastr.warning(resp.message || 'No sync configured.');
                    $r.removeClass('hidden').attr('class', 'text-xs mt-2 p-3 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-400').text(resp.message);
                    return;
                }
                if (resp.status === 'ok') {
                    var lines = [];
                    $.each(resp.results || {}, function(label, res) {
                        var copied = res.copied || 0, skipped = res.skipped || 0, deleted = res.deleted || 0;
                        lines.push(label.toUpperCase() + ': ' + copied + ' copied, ' + skipped + ' skipped, ' + deleted + ' deleted');
                        if (res.errors && res.errors.length) {
                            $.each(res.errors, function(_, e) { lines.push('  ⚠ ' + e); });
                        }
                    });
                    toastr.success('Full sync completed — all files re-copied.');
                    if (lines.length) {
                        $r.removeClass('hidden').attr('class', 'text-xs mt-2 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400').html(lines.join('<br>'));
                    }
                    loadSyncStatus();
                } else {
                    var errLines = resp.errors && resp.errors.length ? resp.errors : ['Unknown error. Check your local path is accessible inside the container.'];
                    toastr.error('Full sync failed.');
                    $r.removeClass('hidden').attr('class', 'text-xs mt-2 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400').html('<b>Force sync failed:</b><br>' + errLines.join('<br>'));
                }
            },
            error: function() { toastr.error('Force sync request failed.'); },
            complete: function() {
                btn.prop('disabled', false).html('<i class="fa fa-rotate-right mr-2"></i>Force Full Sync');
            }
        });
    });

    $('#test-local-btn').on('click', function() {
        var testLocalBtn = $(this);
        testLocalBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>Testing...');
        var payload = { local_sync_path: $('#local-sync-path').val().trim() };
        $.ajax({
            url: '/admin/backups/test-local',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(payload),
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                if (resp.status === 'ok') {
                    toastr.success('Local path is writable! ' + (resp.message || ''));
                } else {
                    toastr.error('Local path error: ' + (resp.message || 'Path is not accessible'));
                }
            },
            error: function() { toastr.error('Test request failed.'); },
            complete: function() {
                testLocalBtn.prop('disabled', false).html('<i class="fa fa-folder-open mr-2"></i>Test Local Path');
            }
        });
    });

    $('#test-ftp-btn').on('click', function() {
        var ftpTestBtn = $(this);
        ftpTestBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>Testing...');
        var payload = {
            ftp_host: $('#ftp-host').val().trim(),
            ftp_port: $('#ftp-port').val() || '21',
            ftp_user: $('#ftp-user').val().trim(),
            ftp_password: $('#ftp-password').val(),
            ftp_remote_path: $('#ftp-remote-path').val().trim() || '/'
        };
        $.ajax({
            url: '/admin/backups/test-ftp',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(payload),
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                if (resp.status === 'ok') {
                    toastr.success('FTP connection successful! ' + (resp.message || ''));
                } else {
                    toastr.error('FTP error: ' + (resp.message || 'Connection failed'));
                }
            },
            error: function() { toastr.error('FTP test request failed.'); },
            complete: function() {
                ftpTestBtn.prop('disabled', false).html('<i class="fa fa-plug mr-2"></i>Test FTP');
            }
        });
    });

    $('#restore-local-btn').on('click', function() {
        var rlBtn = $(this);
        window.ocConfirm('WARNING: Restore from local sync path?\n\n\u2022 The LIVE database will be overwritten immediately\n\u2022 All uploaded files will be replaced with the sync path versions\n\u2022 Any data created since the last sync will be lost', function() {
        rlBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-1"></i>Restoring...');
        $('#restore-result').addClass('hidden').text('');
        $.ajax({
            url: '/admin/backups/restore-local',
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                var cls = (resp.status === 'ok') ? 'mt-3 text-xs text-green-600 dark:text-green-400' : 'mt-3 text-xs text-amber-600 dark:text-amber-400';
                $('#restore-result').removeClass('hidden').attr('class', cls).text(resp.message || 'Restore completed.');
                if (resp.status === 'ok') {
                    toastr.success('Restore from local path completed! Refresh the page.');
                } else {
                    toastr.warning(resp.message || 'Restore completed with warnings.');
                }
            },
            error: function() {
                toastr.error('Restore failed. Check that the local sync path is configured and accessible.');
                $('#restore-result').removeClass('hidden').attr('class', 'mt-3 text-xs text-red-500').text('Request failed.');
            },
            complete: function() {
                rlBtn.prop('disabled', false).html('<i class="fa fa-folder-open mr-1"></i>Restore from Local Path');
            }
        });
        }); /* end ocConfirm */
    });

    $('#restore-ftp-btn').on('click', function() {
        var rfBtn = $(this);
        window.ocConfirm('WARNING: Restore from FTP server?\n\n\u2022 The LIVE database will be overwritten immediately\n\u2022 All uploaded files will be replaced with the FTP server versions\n\u2022 Any data created since the last FTP sync will be lost', function() {
        rfBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-1"></i>Restoring from FTP...');
        $('#restore-result').addClass('hidden').text('');
        $.ajax({
            url: '/admin/backups/restore-ftp',
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                var cls = (resp.status === 'ok') ? 'mt-3 text-xs text-green-600 dark:text-green-400' : 'mt-3 text-xs text-amber-600 dark:text-amber-400';
                $('#restore-result').removeClass('hidden').attr('class', cls).text(resp.message || 'Restore completed.');
                if (resp.status === 'ok') {
                    toastr.success('Restore from FTP completed! Refresh the page.');
                } else {
                    toastr.warning(resp.message || 'Restore completed with warnings.');
                }
            },
            error: function() {
                toastr.error('Restore failed. Check your FTP settings.');
                $('#restore-result').removeClass('hidden').attr('class', 'mt-3 text-xs text-red-500').text('Request failed.');
            },
            complete: function() {
                rfBtn.prop('disabled', false).html('<i class="fa fa-cloud-arrow-down mr-1"></i>Restore from FTP');
            }
        });
        }); /* end ocConfirm */
    });

});
</script>
{% endblock %}