{% extends 'admin_panel/base.html' %}
{% load static %}

{% block title %}{{ page_title }}{% endblock %}

{% block extra_css %}
<style>
    .form-section {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 25px;
    }
    
    .form-section h5 {
        color: #495057;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #007bff;
    }
    
    .module-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 15px;
        margin-top: 15px;
    }
    
    .module-item {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 15px;
        transition: all 0.3s ease;
    }
    
    .module-item:hover {
        border-color: #007bff;
        box-shadow: 0 2px 4px rgba(0,123,255,0.1);
    }
    
    .module-item input[type="checkbox"] {
        transform: scale(1.3);
        margin-right: 10px;
    }
    
    .module-item label {
        font-weight: 500;
        margin: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
    
    .module-item .help-text {
        font-size: 0.85em;
        color: #6c757d;
        margin-top: 5px;
        margin-left: 25px;
    }
    
    .reset-type-tabs {
        margin-bottom: 20px;
    }
    
    .reset-type-tabs .nav-link {
        border-radius: 6px;
        margin-right: 10px;
        font-weight: 600;
    }
    
    .reset-type-tabs .nav-link.active {
        background: #007bff;
        color: white;
    }
    
    .options-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }
    
    .option-item {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 15px;
    }
    
    .option-item input[type="checkbox"] {
        transform: scale(1.2);
        margin-right: 10px;
    }
    
    .option-item label {
        font-weight: 500;
        margin: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
    
    .option-item .help-text {
        font-size: 0.85em;
        color: #6c757d;
        margin-top: 5px;
        margin-left: 25px;
    }
    
    .form-actions {
        background: #e9ecef;
        border-radius: 8px;
        padding: 20px;
        margin-top: 30px;
    }
    
    .preview-section {
        background: #e8f4fd;
        border: 1px solid #bee5eb;
        border-radius: 8px;
        padding: 20px;
        margin-top: 20px;
        display: none;
    }
    
    .preview-section h6 {
        color: #0c5460;
        margin-bottom: 15px;
    }
    
    .selected-modules {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .selected-module {
        background: #007bff;
        color: white;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.85em;
    }
    
    .module-group-title {
        color: #495057;
        font-weight: 600;
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 1px solid #dee2e6;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-cogs"></i> {{ page_title }}</h2>
                <a href="{% url 'core:database_reset_list' %}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Kembali ke Daftar
                </a>
            </div>
            
            <form method="post" id="resetConfigForm">
                {% csrf_token %}
                
                <!-- Basic Information -->
                <div class="form-section">
                    <h5><i class="fas fa-info-circle"></i> Informasi Dasar</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>
                                {{ form.name }}
                                {% if form.name.help_text %}
                                    <small class="form-text text-muted">{{ form.name.help_text }}</small>
                                {% endif %}
                                {% if form.name.errors %}
                                    <div class="text-danger">{{ form.name.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="{{ form.reset_type.id_for_label }}">{{ form.reset_type.label }}</label>
                                {{ form.reset_type }}
                                {% if form.reset_type.help_text %}
                                    <small class="form-text text-muted">{{ form.reset_type.help_text }}</small>
                                {% endif %}
                                {% if form.reset_type.errors %}
                                    <div class="text-danger">{{ form.reset_type.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="{{ form.description.id_for_label }}">{{ form.description.label }}</label>
                        {{ form.description }}
                        {% if form.description.help_text %}
                            <small class="form-text text-muted">{{ form.description.help_text }}</small>
                        {% endif %}
                        {% if form.description.errors %}
                            <div class="text-danger">{{ form.description.errors }}</div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Reset Type Selection -->
                <div class="form-section">
                    <h5><i class="fas fa-list"></i> Tipe Reset</h5>
                    <ul class="nav nav-pills reset-type-tabs" id="resetTypeTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="selective-tab" data-toggle="pill" href="#selective" role="tab">
                                <i class="fas fa-check-square"></i> Reset Selektif
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="full-tab" data-toggle="pill" href="#full" role="tab">
                                <i class="fas fa-trash-alt"></i> Reset Lengkap
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="custom-tab" data-toggle="pill" href="#custom" role="tab">
                                <i class="fas fa-cog"></i> Reset Kustom
                            </a>
                        </li>
                    </ul>
                    
                    <div class="tab-content" id="resetTypeTabContent">
                        <div class="tab-pane fade show active" id="selective" role="tabpanel">
                            <p class="text-muted">Pilih modul-modul tertentu yang akan di-reset. Data dari modul lain akan tetap tersimpan.</p>
                        </div>
                        <div class="tab-pane fade" id="full" role="tabpanel">
                            <div class="alert alert-warning">
                                <i class="fas fa-exclamation-triangle"></i>
                                <strong>Peringatan!</strong> Reset lengkap akan menghapus SEMUA data dari database kecuali data pengguna dan pengaturan (jika dipilih).
                            </div>
                        </div>
                        <div class="tab-pane fade" id="custom" role="tabpanel">
                            <p class="text-muted">Konfigurasi reset dengan opsi yang lebih detail dan spesifik.</p>
                        </div>
                    </div>
                </div>
                
                <!-- Module Selection -->
                <div class="form-section" id="moduleSelection">
                    <h5><i class="fas fa-cubes"></i> Pilih Modul yang akan di-Reset</h5>
                    
                    <!-- Core Modules -->
                    <div class="module-group-title">Modul Core</div>
                    <div class="module-grid">
                        <div class="module-item">
                            <label for="{{ form.reset_penduduk.id_for_label }}">
                                {{ form.reset_penduduk }}
                                <i class="fas fa-users"></i> Data Penduduk
                            </label>
                            <div class="help-text">{{ form.reset_penduduk.help_text }}</div>
                        </div>
                        <div class="module-item">
                            <label for="{{ form.reset_dusun.id_for_label }}">
                                {{ form.reset_dusun }}
                                <i class="fas fa-map-marker-alt"></i> Data Dusun
                            </label>
                            <div class="help-text">{{ form.reset_dusun.help_text }}</div>
                        </div>
                        <div class="module-item">
                            <label for="{{ form.reset_lorong.id_for_label }}">
                                {{ form.reset_lorong }}
                                <i class="fas fa-road"></i> Data Lorong
                            </label>
                            <div class="help-text">{{ form.reset_lorong.help_text }}</div>
                        </div>
                        <div class="module-item">
                            <label for="{{ form.reset_rt_rw.id_for_label }}">
                                {{ form.reset_rt_rw }}
                                <i class="fas fa-sitemap"></i> Data RT/RW
                            </label>
                            <div class="help-text">{{ form.reset_rt_rw.help_text }}</div>
                        </div>
                        <div class="module-item">
                            <label for="{{ form.reset_keluarga.id_for_label }}">
                                {{ form.reset_keluarga }}
                                <i class="fas fa-home"></i> Data Keluarga
                            </label>
                            <div class="help-text">{{ form.reset_keluarga.help_text }}</div>
                        </div>
                        <div class="module-item">
                            <label for="{{ form.reset_pelajar.id_for_label }}">
                                {{ form.reset_pelajar }}
                                <i class="fas fa-graduation-cap"></i> Data Pelajar
                            </label>
                            <div class="help-text">{{ form.reset_pelajar.help_text }}</div>
                        </div>
                        <div class="module-item">
                            <label for="{{ form.reset_disabilitas.id_for_label }}">
                                {{ form.reset_disabilitas }}
                                <i class="fas fa-wheelchair"></i> Data Disabilitas
                            </label>
                            <div class="help-text">{{ form.reset_disabilitas.help_text }}</div>
                        </div>
                    </div>
                    
                    <!-- External Modules -->
                    <div class="module-group-title">Modul Eksternal</div>
                    <div class="module-grid">
                        <div class="module-item">
                            <label for="{{ form.reset_beneficiaries.id_for_label }}">
                                {{ form.reset_beneficiaries }}
                                <i class="fas fa-hand-holding-heart"></i> Data Penerima Bantuan
                            </label>
                            <div class="help-text">{{ form.reset_beneficiaries.help_text }}</div>
                        </div>
                        <div class="module-item">
                            <label for="{{ form.reset_business.id_for_label }}">
                                {{ form.reset_business }}
                                <i class="fas fa-store"></i> Data Usaha
                            </label>
                            <div class="help-text">{{ form.reset_business.help_text }}</div>
                        </div>
                        <div class="module-item">
                            <label for="{{ form.reset_complaints.id_for_label }}">
                                {{ form.reset_complaints }}
                                <i class="fas fa-exclamation-circle"></i> Data Keluhan
                            </label>
                            <div class="help-text">{{ form.reset_complaints.help_text }}</div>
                        </div>
                        <div class="module-item">
                            <label for="{{ form.reset_documents.id_for_label }}">
                                {{ form.reset_documents }}
                                <i class="fas fa-file-alt"></i> Data Dokumen
                            </label>
                            <div class="help-text">{{ form.reset_documents.help_text }}</div>
                        </div>
                        <div class="module-item">
                            <label for="{{ form.reset_tourism.id_for_label }}">
                                {{ form.reset_tourism }}
                                <i class="fas fa-camera"></i> Data Wisata
                            </label>
                            <div class="help-text">{{ form.reset_tourism.help_text }}</div>
                        </div>
                        <div class="module-item">
                            <label for="{{ form.reset_posyandu.id_for_label }}">
                                {{ form.reset_posyandu }}
                                <i class="fas fa-heartbeat"></i> Data Posyandu
                            </label>
                            <div class="help-text">{{ form.reset_posyandu.help_text }}</div>
                        </div>
                        <div class="module-item">
                            <label for="{{ form.reset_news.id_for_label }}">
                                {{ form.reset_news }}
                                <i class="fas fa-newspaper"></i> Data Berita
                            </label>
                            <div class="help-text">{{ form.reset_news.help_text }}</div>
                        </div>
                        <div class="module-item">
                            <label for="{{ form.reset_organization.id_for_label }}">
                                {{ form.reset_organization }}
                                <i class="fas fa-building"></i> Data Organisasi
                            </label>
                            <div class="help-text">{{ form.reset_organization.help_text }}</div>
                        </div>
                        <div class="module-item">
                            <label for="{{ form.reset_layanan.id_for_label }}">
                                {{ form.reset_layanan }}
                                <i class="fas fa-concierge-bell"></i> Data Layanan
                            </label>
                            <div class="help-text">{{ form.reset_layanan.help_text }}</div>
                        </div>
                        <div class="module-item">
                            <label for="{{ form.reset_letters.id_for_label }}">
                                {{ form.reset_letters }}
                                <i class="fas fa-envelope"></i> Data Surat Menyurat
                            </label>
                            <div class="help-text">{{ form.reset_letters.help_text }}</div>
                        </div>
                    </div>
                </div>
                
                <!-- Options -->
                <div class="form-section">
                    <h5><i class="fas fa-sliders-h"></i> Opsi Tambahan</h5>
                    <div class="options-grid">
                        <div class="option-item">
                            <label for="{{ form.backup_before_reset.id_for_label }}">
                                {{ form.backup_before_reset }}
                                <i class="fas fa-save"></i> Backup Sebelum Reset
                            </label>
                            <div class="help-text">{{ form.backup_before_reset.help_text }}</div>
                        </div>
                        <div class="option-item">
                            <label for="{{ form.keep_users.id_for_label }}">
                                {{ form.keep_users }}
                                <i class="fas fa-user-shield"></i> Tetap Simpan Data Pengguna
                            </label>
                            <div class="help-text">{{ form.keep_users.help_text }}</div>
                        </div>
                        <div class="option-item">
                            <label for="{{ form.keep_settings.id_for_label }}">
                                {{ form.keep_settings }}
                                <i class="fas fa-cog"></i> Tetap Simpan Pengaturan
                            </label>
                            <div class="help-text">{{ form.keep_settings.help_text }}</div>
                        </div>
                        <div class="option-item">
                            <label for="{{ form.keep_media.id_for_label }}">
                                {{ form.keep_media }}
                                <i class="fas fa-images"></i> Tetap Simpan File Media
                            </label>
                            <div class="help-text">{{ form.keep_media.help_text }}</div>
                        </div>
                    </div>
                </div>
                
                <!-- Preview -->
                <div class="preview-section" id="previewSection">
                    <h6><i class="fas fa-eye"></i> Preview Konfigurasi</h6>
                    <div class="row">
                        <div class="col-md-6">
                            <strong>Nama:</strong> <span id="previewName"></span><br>
                            <strong>Tipe:</strong> <span id="previewType"></span><br>
                            <strong>Modul yang dipilih:</strong>
                            <div class="selected-modules" id="previewModules"></div>
                        </div>
                        <div class="col-md-6">
                            <strong>Opsi:</strong><br>
                            <span id="previewOptions"></span>
                        </div>
                    </div>
                </div>
                
                <!-- Form Actions -->
                <div class="form-actions">
                    <div class="d-flex justify-content-between">
                        <div>
                            <button type="button" class="btn btn-outline-info" onclick="updatePreview()">
                                <i class="fas fa-eye"></i> Preview
                            </button>
                            <button type="button" class="btn btn-outline-secondary" onclick="resetForm()">
                                <i class="fas fa-undo"></i> Reset Form
                            </button>
                        </div>
                        <div>
                            <a href="{% url 'core:database_reset_list' %}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Batal
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Simpan Konfigurasi
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Handle reset type change
document.getElementById('resetTypeTabs').addEventListener('click', function(e) {
    if (e.target.getAttribute('href') === '#full') {
        document.getElementById('moduleSelection').style.display = 'none';
    } else {
        document.getElementById('moduleSelection').style.display = 'block';
    }
});

// Update preview
function updatePreview() {
    const form = document.getElementById('resetConfigForm');
    const formData = new FormData(form);
    
    // Update basic info
    document.getElementById('previewName').textContent = formData.get('name') || 'Tidak ada nama';
    document.getElementById('previewType').textContent = formData.get('reset_type') || 'selective';
    
    // Update selected modules
    const selectedModules = [];
    const moduleCheckboxes = form.querySelectorAll('input[type="checkbox"]:checked');
    moduleCheckboxes.forEach(checkbox => {
        if (checkbox.name.startsWith('reset_') && checkbox.name !== 'reset_type') {
            const label = checkbox.closest('label').textContent.trim();
            selectedModules.push(label);
        }
    });
    
    const previewModules = document.getElementById('previewModules');
    previewModules.innerHTML = '';
    if (selectedModules.length > 0) {
        selectedModules.forEach(module => {
            const span = document.createElement('span');
            span.className = 'selected-module';
            span.textContent = module;
            previewModules.appendChild(span);
        });
    } else {
        previewModules.innerHTML = '<span class="text-muted">Tidak ada modul yang dipilih</span>';
    }
    
    // Update options
    const options = [];
    if (formData.get('backup_before_reset')) options.push('Backup sebelum reset');
    if (formData.get('keep_users')) options.push('Tetap simpan data pengguna');
    if (formData.get('keep_settings')) options.push('Tetap simpan pengaturan');
    if (formData.get('keep_media')) options.push('Tetap simpan file media');
    
    document.getElementById('previewOptions').innerHTML = options.length > 0 ? 
        options.join('<br>') : '<span class="text-muted">Tidak ada opsi yang dipilih</span>';
    
    // Show preview section
    document.getElementById('previewSection').style.display = 'block';
}

// Reset form
function resetForm() {
    if (confirm('Apakah Anda yakin ingin mereset form? Semua data yang sudah diisi akan hilang.')) {
        document.getElementById('resetConfigForm').reset();
        document.getElementById('previewSection').style.display = 'none';
    }
}

// Form validation
document.getElementById('resetConfigForm').addEventListener('submit', function(e) {
    const resetType = document.querySelector('input[name="reset_type"]:checked') || 
                     document.querySelector('select[name="reset_type"]');
    
    if (resetType && resetType.value === 'selective') {
        const moduleCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked');
        const hasSelectedModule = Array.from(moduleCheckboxes).some(cb => 
            cb.name.startsWith('reset_') && cb.name !== 'reset_type'
        );
        
        if (!hasSelectedModule) {
            e.preventDefault();
            alert('Untuk reset selektif, minimal satu modul harus dipilih!');
            return false;
        }
    }
    
    // Final confirmation
    if (!confirm('Apakah Anda yakin ingin menyimpan konfigurasi reset ini?')) {
        e.preventDefault();
        return false;
    }
});

// Auto-update preview when form changes
document.getElementById('resetConfigForm').addEventListener('change', function() {
    setTimeout(updatePreview, 100);
});
</script>
{% endblock %}