{% extends 'admin/base.html' %}

{% block title %}Pengaturan Sistem - Admin Panel{% endblock %}
{% block page_title %}Pengaturan Sistem{% endblock %}

{% block extra_css %}
<style>
    .card-hover {
        transition: all 0.3s ease;
    }
    
    .card-hover:hover {
        transform: translateY(-2px);
    }
    
    .info-card {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-left: 4px solid;
        transition: all 0.3s ease;
    }
    
    .info-card:hover {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        transform: translateX(4px);
    }
    
    .action-button {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }
    
    .action-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }
    
    .action-button:hover::before {
        left: 100%;
    }
    
    .action-button:hover {
        transform: translateY(-2px) scale(1.05);
    }
    
    .form-section {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-left: 4px solid;
        transition: all 0.3s ease;
    }
    
    .form-section:hover {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    }
    
    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }
    
    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 34px;
    }
    
    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }
    
    input:checked + .slider {
        background-color: #2196F3;
    }
    
    input:checked + .slider:before {
        transform: translateX(26px);
    }
</style>
{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="md:flex md:items-center md:justify-between">
        <div class="flex-1 min-w-0">
            <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
                <i class="fas fa-cog mr-2 text-gray-600"></i>
                Pengaturan Sistem
            </h2>
            <p class="mt-1 text-sm text-gray-500">
                Konfigurasi sistem dan pengaturan aplikasi
            </p>
        </div>
        <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
            <a href="{% url 'admin_panel:anggota_dashboard' %}" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 action-button">
                <i class="fas fa-arrow-left mr-2"></i>
                Kembali ke Dashboard
            </a>
        </div>
    </div>

    <!-- Settings Tabs -->
    <div class="bg-white shadow-lg rounded-xl border border-gray-100 overflow-hidden card-hover">
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex space-x-8 px-6" aria-label="Tabs">
                <button onclick="showTab('general')" id="tab-general" 
                        class="tab-button py-4 px-1 border-b-2 border-blue-500 font-medium text-sm text-blue-600">
                    <i class="fas fa-cog mr-2"></i>
                    Umum
                </button>
                <button onclick="showTab('email')" id="tab-email" 
                        class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-envelope mr-2"></i>
                    Email
                </button>
                <button onclick="showTab('notifications')" id="tab-notifications" 
                        class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-bell mr-2"></i>
                    Notifikasi
                </button>
                <button onclick="showTab('security')" id="tab-security" 
                        class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-shield-alt mr-2"></i>
                    Keamanan
                </button>
                <button onclick="showTab('backup')" id="tab-backup" 
                        class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-database mr-2"></i>
                    Backup
                </button>
            </nav>
        </div>

        <!-- General Settings -->
        <div id="content-general" class="tab-content p-6">
            <form method="POST" action="{% url 'admin_panel:anggota_settings_save' 'general' %}" class="space-y-6">
                {% csrf_token %}
                
                <div class="form-section rounded-lg p-6 border-l-4 border-blue-500">
                    <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-info-circle mr-2 text-blue-500"></i>
                        Informasi Organisasi
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Nama Organisasi
                            </label>
                            <input type="text" name="org_name" value="{{ settings.org_name }}" 
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Alamat Organisasi
                            </label>
                            <input type="text" name="org_address" value="{{ settings.org_address }}" 
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Email Organisasi
                            </label>
                            <input type="email" name="org_email" value="{{ settings.org_email }}" 
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Telepon Organisasi
                            </label>
                            <input type="tel" name="org_phone" value="{{ settings.org_phone }}" 
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        </div>
                    </div>
                </div>

                <div class="form-section rounded-lg p-6 border-l-4 border-green-500">
                    <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-calendar mr-2 text-green-500"></i>
                        Pengaturan Iuran
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Jumlah Iuran Bulanan (Rp)
                            </label>
                            <input type="number" name="monthly_fee" value="{{ settings.monthly_fee }}" 
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Tanggal Jatuh Tempo
                            </label>
                            <input type="number" name="due_date" value="{{ settings.due_date }}" min="1" max="31" 
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
                        </div>
                    </div>
                </div>

                <div class="flex items-center justify-end pt-6 border-t border-gray-200">
                    <button type="submit" 
                            class="px-6 py-2 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 rounded-md action-button">
                        <i class="fas fa-save mr-2"></i>
                        Simpan Pengaturan
                    </button>
                </div>
            </form>
        </div>

        <!-- Email Settings -->
        <div id="content-email" class="tab-content p-6 hidden">
            <form method="POST" action="{% url 'admin_panel:anggota_settings_save' 'email' %}" class="space-y-6">
                {% csrf_token %}
                
                <div class="form-section rounded-lg p-6 border-l-4 border-purple-500">
                    <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-envelope mr-2 text-purple-500"></i>
                        Konfigurasi Email
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                SMTP Host
                            </label>
                            <input type="text" name="smtp_host" value="{{ settings.smtp_host }}" 
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                SMTP Port
                            </label>
                            <input type="number" name="smtp_port" value="{{ settings.smtp_port }}" 
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Email Username
                            </label>
                            <input type="email" name="email_username" value="{{ settings.email_username }}" 
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Email Password
                            </label>
                            <input type="password" name="email_password" value="{{ settings.email_password }}" 
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500">
                        </div>
                    </div>
                </div>

                <div class="flex items-center justify-end pt-6 border-t border-gray-200">
                    <button type="submit" 
                            class="px-6 py-2 text-sm font-medium text-white bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 rounded-md action-button">
                        <i class="fas fa-save mr-2"></i>
                        Simpan Pengaturan
                    </button>
                </div>
            </form>
        </div>

        <!-- Notification Settings -->
        <div id="content-notifications" class="tab-content p-6 hidden">
            <form method="POST" action="{% url 'admin_panel:anggota_settings_save' 'notifications' %}" class="space-y-6">
                {% csrf_token %}
                
                <div class="form-section rounded-lg p-6 border-l-4 border-yellow-500">
                    <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-bell mr-2 text-yellow-500"></i>
                        Pengaturan Notifikasi
                    </h3>
                    
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-900">Email Notifikasi</p>
                                <p class="text-sm text-gray-500">Kirim notifikasi via email</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" name="email_notifications" {% if settings.email_notifications %}checked{% endif %}>
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-900">SMS Notifikasi</p>
                                <p class="text-sm text-gray-500">Kirim notifikasi via SMS</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" name="sms_notifications" {% if settings.sms_notifications %}checked{% endif %}>
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-900">Push Notifikasi</p>
                                <p class="text-sm text-gray-500">Kirim notifikasi push ke browser</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" name="push_notifications" {% if settings.push_notifications %}checked{% endif %}>
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="flex items-center justify-end pt-6 border-t border-gray-200">
                    <button type="submit" 
                            class="px-6 py-2 text-sm font-medium text-white bg-gradient-to-r from-yellow-600 to-yellow-700 hover:from-yellow-700 hover:to-yellow-800 rounded-md action-button">
                        <i class="fas fa-save mr-2"></i>
                        Simpan Pengaturan
                    </button>
                </div>
            </form>
        </div>

        <!-- Security Settings -->
        <div id="content-security" class="tab-content p-6 hidden">
            <form method="POST" action="{% url 'admin_panel:anggota_settings_save' 'security' %}" class="space-y-6">
                {% csrf_token %}
                
                <div class="form-section rounded-lg p-6 border-l-4 border-red-500">
                    <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-shield-alt mr-2 text-red-500"></i>
                        Pengaturan Keamanan
                    </h3>
                    
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-900">Two-Factor Authentication</p>
                                <p class="text-sm text-gray-500">Wajibkan 2FA untuk semua user</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" name="require_2fa" {% if settings.require_2fa %}checked{% endif %}>
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-900">Session Timeout</p>
                                <p class="text-sm text-gray-500">Otomatis logout setelah tidak aktif</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" name="session_timeout" {% if settings.session_timeout %}checked{% endif %}>
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Session Timeout (menit)
                            </label>
                            <input type="number" name="session_timeout_minutes" value="{{ settings.session_timeout_minutes }}" 
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-red-500 focus:border-red-500">
                        </div>
                    </div>
                </div>

                <div class="flex items-center justify-end pt-6 border-t border-gray-200">
                    <button type="submit" 
                            class="px-6 py-2 text-sm font-medium text-white bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 rounded-md action-button">
                        <i class="fas fa-save mr-2"></i>
                        Simpan Pengaturan
                    </button>
                </div>
            </form>
        </div>

        <!-- Backup Settings -->
        <div id="content-backup" class="tab-content p-6 hidden">
            <div class="space-y-6">
                <div class="form-section rounded-lg p-6 border-l-4 border-indigo-500">
                    <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-database mr-2 text-indigo-500"></i>
                        Backup Database
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <button onclick="createBackup()" 
                                class="group bg-gradient-to-r from-indigo-500 to-indigo-600 hover:from-indigo-600 hover:to-indigo-700 text-white rounded-lg p-4 transition-all duration-300 transform hover:scale-105 hover:shadow-lg action-button">
                            <div class="flex items-center justify-center">
                                <i class="fas fa-download mr-2 text-indigo-200 group-hover:text-white"></i>
                                <span class="text-sm font-semibold">Buat Backup</span>
                            </div>
                        </button>

                        <button onclick="restoreBackup()" 
                                class="group bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white rounded-lg p-4 transition-all duration-300 transform hover:scale-105 hover:shadow-lg action-button">
                            <div class="flex items-center justify-center">
                                <i class="fas fa-upload mr-2 text-green-200 group-hover:text-white"></i>
                                <span class="text-sm font-semibold">Restore Backup</span>
                            </div>
                        </button>
                    </div>
                </div>

                <!-- Backup History -->
                <div class="form-section rounded-lg p-6 border-l-4 border-gray-500">
                    <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-history mr-2 text-gray-500"></i>
                        Riwayat Backup
                    </h3>
                    
                    {% if backup_history %}
                    <div class="space-y-4">
                        {% for backup in backup_history %}
                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                            <div class="flex items-center space-x-3">
                                <i class="fas fa-database text-indigo-600 text-2xl"></i>
                                <div>
                                    <p class="text-sm font-medium text-gray-900">{{ backup.filename }}</p>
                                    <p class="text-sm text-gray-500">{{ backup.created_at|date:"d M Y H:i" }}</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <a href="{{ backup.download_url }}" 
                                   class="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                                    <i class="fas fa-download mr-1"></i>
                                    Download
                                </a>
                                <button onclick="deleteBackup({{ backup.id }})" 
                                        class="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
                                    <i class="fas fa-trash mr-1"></i>
                                    Hapus
                                </button>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center text-gray-500">
                        <i class="fas fa-database text-4xl mb-2 text-gray-400"></i>
                        <p>Belum ada backup</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Tab switching
function showTab(tabName) {
    // Hide all tab contents
    const contents = document.querySelectorAll('.tab-content');
    contents.forEach(content => content.classList.add('hidden'));
    
    // Remove active class from all tabs
    const tabs = document.querySelectorAll('.tab-button');
    tabs.forEach(tab => {
        tab.classList.remove('border-blue-500', 'text-blue-600');
        tab.classList.add('border-transparent', 'text-gray-500');
    });
    
    // Show selected tab content
    document.getElementById('content-' + tabName).classList.remove('hidden');
    
    // Add active class to selected tab
    const activeTab = document.getElementById('tab-' + tabName);
    activeTab.classList.remove('border-transparent', 'text-gray-500');
    activeTab.classList.add('border-blue-500', 'text-blue-600');
}

// Backup functions
function createBackup() {
    if (confirm('Buat backup database sekarang?')) {
        fetch('/admin/anggota/backup/create/', {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Backup berhasil dibuat!');
                location.reload();
            } else {
                alert('Gagal membuat backup: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat membuat backup');
        });
    }
}

function restoreBackup() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.sql,.db';
    input.onchange = function(e) {
        const file = e.target.files[0];
        if (file) {
            if (confirm('Restore backup dari file ' + file.name + '?')) {
                const formData = new FormData();
                formData.append('file', file);
                
                fetch('/admin/anggota/backup/restore/', {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                    },
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('Backup berhasil di-restore!');
                        location.reload();
                    } else {
                        alert('Gagal restore backup: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Terjadi kesalahan saat restore backup');
                });
            }
        }
    };
    input.click();
}

function deleteBackup(backupId) {
    if (confirm('Hapus backup ini?')) {
        fetch(`/admin/anggota/backup/delete/${backupId}/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Gagal menghapus backup');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat menghapus backup');
        });
    }
}

// Form validation
document.addEventListener('DOMContentLoaded', function() {
    const forms = document.querySelectorAll('form');
    
    forms.forEach(form => {
        form.addEventListener('submit', function(e) {
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Menyimpan...';
            submitBtn.disabled = true;
            
            // Re-enable button after 10 seconds (fallback)
            setTimeout(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            }, 10000);
        });
    });
});
</script>
{% endblock %}