{% extends 'superuser/base_super_user.html' %}
{% block title %}System Backup & Restore | School Command{% endblock %}
{% block page_title %}Backup & Restore{% endblock %}
{% block page_subtitle %}Manage global database checkpoints and system recovery.{% endblock %}

{% block content %}
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
    
    <!-- Backup Generation Card -->
    <div class="card" style="display: flex; flex-direction: column; align-items: center; text-align: center; padding: 50px 30px;">
        <div style="width: 80px; height: 80px; border-radius: 50%; background: rgba(16, 185, 129, 0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
            <i class="fas fa-cloud-download-alt" style="font-size: 2rem; color: #10b981;"></i>
        </div>
        <h3 style="font-weight: 800; font-size: 1.2rem; margin-bottom: 15px;">Generate System Backup</h3>
        <p style="color: #64748b; font-size: 0.85rem; line-height: 1.6; margin-bottom: 30px;">
            Extract all interconnected data models, including active logs, user details, institutional settings, and device relationships securely into an encrypted JSON format.
        </p>
        
        <form method="post" action="{% url 'super_backup' %}" id="backup-form">
            {% csrf_token %}
            <input type="hidden" name="action" value="generate">
            <button type="submit" class="btn" style="background: #10b981; color: #fff; padding: 15px 30px; border-radius: 12px; font-size: 0.9rem; font-weight: 800; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);" onclick="this.innerHTML='<i class=\'fas fa-spinner fa-spin\'></i> COMPILING...'">
                <i class="fas fa-download"></i> DOWNLOAD FULL BACKUP
            </button>
        </form>
    </div>

    <!-- Restore System Card -->
    <div class="card" style="display: flex; flex-direction: column; align-items: center; text-align: center; padding: 50px 30px; border: 1px solid #fee2e2;">
        <div style="width: 80px; height: 80px; border-radius: 50%; background: rgba(239, 68, 68, 0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
            <i class="fas fa-database" style="font-size: 2rem; color: #ef4444;"></i>
        </div>
        <h3 style="font-weight: 800; font-size: 1.2rem; margin-bottom: 15px; color: #991b1b;">Restore Platform</h3>
        <p style="color: #64748b; font-size: 0.85rem; line-height: 1.6; margin-bottom: 30px;">
            DANGER: Restoring a database file will completely overwrite existing system entities and re-sync primary key matrices. Proceed with extreme caution.
        </p>
        
        <form method="post" action="{% url 'super_backup' %}" enctype="multipart/form-data" id="restore-form" style="width: 100%;">
            {% csrf_token %}
            <input type="hidden" name="action" value="restore">
            
            <div style="text-align: left; margin-bottom: 20px;">
                <label style="display: block; font-size: 0.75rem; font-weight: 800; color: #475569; margin-bottom: 8px;">SELECT BACKUP FILE (.JSON)</label>
                <input type="file" name="backup_file" accept=".json" required style="width: 100%; padding: 12px; border: 2px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; font-size: 0.85rem; color: #0f172a;">
            </div>

            <button type="button" onclick="confirmRestore()" class="btn btn-danger" style="width: 100%; justify-content: center; padding: 15px; border-radius: 12px; font-weight: 800; border: 1px solid rgba(239, 68, 68, 0.2);">
                <i class="fas fa-exclamation-triangle"></i> INITIALIZE OVERWRITE
            </button>
        </form>
    </div>

</div>

<script>
    function confirmRestore() {
        if(confirm("CRITICAL WARNING: This action will restore the database to the exact state of the loaded backup file. Any changes made since the backup will be permanently lost or merged aggressively. Are you absolutely certain you want to proceed?")) {
            const btn = document.querySelector('#restore-form button[type="button"]');
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> PARSING BACKUP...';
            btn.style.opacity = '0.7';
            btn.style.pointerEvents = 'none';
            document.getElementById('restore-form').submit();
        }
    }
</script>
{% endblock %}