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

{% block title %}Import Data - Admin Panel{% endblock %}
{% block page_title %}Import Data{% 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%);
    }
    
    .progress-bar {
        background: linear-gradient(90deg, #3b82f6, #1d4ed8);
        transition: width 0.3s ease;
    }
    
    .drop-zone {
        border: 2px dashed #d1d5db;
        transition: all 0.3s ease;
    }
    
    .drop-zone.dragover {
        border-color: #3b82f6;
        background-color: #eff6ff;
    }
</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-upload mr-2 text-blue-600"></i>
                Import Data
            </h2>
            <p class="mt-1 text-sm text-gray-500">
                Import data anggota dari file Excel
            </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>

    <!-- Import Form -->
    <div class="bg-white shadow-lg rounded-xl border border-gray-100 overflow-hidden card-hover">
        <form method="POST" enctype="multipart/form-data" id="importForm" class="space-y-6 p-6">
            {% csrf_token %}
            
            <!-- Display form errors -->
            {% if form.non_field_errors %}
            <div class="bg-red-50 border border-red-200 rounded-md p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-circle text-red-400"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-red-800">
                            Terjadi kesalahan
                        </h3>
                        <div class="mt-2 text-sm text-red-700">
                            <ul class="list-disc list-inside space-y-1">
                                {% for error in form.non_field_errors %}
                                    <li>{{ error }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
            
            <!-- File Upload -->
            <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-file-excel mr-2 text-blue-500"></i>
                    Upload File Excel
                </h3>
                
                <!-- Drop Zone -->
                <div id="dropZone" class="drop-zone rounded-lg p-8 text-center cursor-pointer hover:bg-gray-50">
                    <div class="space-y-4">
                        <div class="mx-auto w-12 h-12 text-gray-400">
                            <i class="fas fa-cloud-upload-alt text-4xl"></i>
                        </div>
                        <div>
                            <p class="text-lg font-medium text-gray-900">Drag & drop file Excel di sini</p>
                            <p class="text-sm text-gray-500">atau klik untuk memilih file</p>
                        </div>
                        <div class="flex items-center justify-center space-x-2">
                            <i class="fas fa-file-excel text-green-600"></i>
                            <span class="text-sm text-gray-500">Format yang didukung: .xlsx, .xls</span>
                        </div>
                    </div>
                </div>
                
                <!-- File Input -->
                <input type="file" name="file" id="fileInput" accept=".xlsx,.xls" class="hidden" required>
                
                <!-- Selected File Info -->
                <div id="fileInfo" class="hidden mt-4 p-4 bg-blue-50 rounded-lg">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-file-excel text-green-600 text-xl"></i>
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-900" id="fileName"></p>
                            <p class="text-xs text-gray-500" id="fileSize"></p>
                        </div>
                        <button type="button" onclick="removeFile()" 
                                class="text-red-600 hover:text-red-800">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                
                {% if form.file.errors %}
                <div class="mt-2 text-sm text-red-600">
                    {% for error in form.file.errors %}
                        <p><i class="fas fa-exclamation-triangle mr-1"></i>{{ error }}</p>
                    {% endfor %}
                </div>
                {% endif %}
            </div>

            <!-- Import Options -->
            <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-cog mr-2 text-green-500"></i>
                    Opsi Import
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Update Existing -->
                    <div>
                        <label class="flex items-center space-x-3">
                            <input type="checkbox" name="update_existing" 
                                   class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                            <div>
                                <p class="text-sm font-medium text-gray-900">Update data yang sudah ada</p>
                                <p class="text-xs text-gray-500">Jika data dengan NIM yang sama sudah ada, update data tersebut</p>
                            </div>
                        </label>
                    </div>
                    
                    <!-- Skip Errors -->
                    <div>
                        <label class="flex items-center space-x-3">
                            <input type="checkbox" name="skip_errors" checked
                                   class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                            <div>
                                <p class="text-sm font-medium text-gray-900">Skip baris dengan error</p>
                                <p class="text-xs text-gray-500">Lanjutkan import meskipun ada baris yang error</p>
                            </div>
                        </label>
                    </div>
                    
                    <!-- Send Notifications -->
                    <div>
                        <label class="flex items-center space-x-3">
                            <input type="checkbox" name="send_notifications" 
                                   class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                            <div>
                                <p class="text-sm font-medium text-gray-900">Kirim notifikasi</p>
                                <p class="text-xs text-gray-500">Kirim email notifikasi ke anggota yang diimport</p>
                            </div>
                        </label>
                    </div>
                    
                    <!-- Auto Generate Password -->
                    <div>
                        <label class="flex items-center space-x-3">
                            <input type="checkbox" name="auto_generate_password" checked
                                   class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                            <div>
                                <p class="text-sm font-medium text-gray-900">Generate password otomatis</p>
                                <p class="text-xs text-gray-500">Generate password untuk anggota baru</p>
                            </div>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Progress Bar (Hidden by default) -->
            <div id="progressSection" class="hidden">
                <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-spinner fa-spin mr-2 text-purple-500"></i>
                        Memproses Import
                    </h3>
                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div id="progressBar" class="progress-bar h-2.5 rounded-full" style="width: 0%"></div>
                    </div>
                    <p id="progressText" class="mt-2 text-sm text-gray-600">Memulai proses...</p>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex items-center justify-end pt-6 border-t border-gray-200 bg-gradient-to-r from-gray-50 to-gray-100 -mx-6 -mb-6 px-6 py-4">
                <a href="{% url 'admin_panel:anggota_dashboard' %}" 
                   class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md mr-3 action-button">
                    <i class="fas fa-times mr-2"></i>
                    Batal
                </a>
                <button type="submit" id="submitBtn"
                        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-upload mr-2"></i>
                    Import Data
                </button>
            </div>
        </form>
    </div>

    <!-- Template Download -->
    <div class="bg-white shadow-lg rounded-xl border border-gray-100 overflow-hidden card-hover">
        <div class="bg-gradient-to-r from-green-500 to-green-600 px-4 py-3 sm:px-6 sm:py-4">
            <h3 class="text-lg font-semibold text-white flex items-center">
                <i class="fas fa-download mr-2 text-green-200"></i>
                Template Excel
            </h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <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-file-excel text-green-600 text-2xl"></i>
                        <div>
                            <p class="text-sm font-medium text-gray-900">Template Anggota</p>
                            <p class="text-xs text-gray-500">Format untuk import data anggota</p>
                        </div>
                    </div>
                    <a href="{% url 'admin_panel:anggota_download_template' 'anggota' %}" 
                       class="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                        <i class="fas fa-download mr-1"></i>
                        Download
                    </a>
                </div>
                
                <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-file-excel text-blue-600 text-2xl"></i>
                        <div>
                            <p class="text-sm font-medium text-gray-900">Template Absensi</p>
                            <p class="text-xs text-gray-500">Format untuk import data absensi</p>
                        </div>
                    </div>
                    <a href="{% url 'admin_panel:anggota_download_template' 'absensi' %}" 
                       class="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                        <i class="fas fa-download mr-1"></i>
                        Download
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Import History -->
    <div class="bg-white shadow-lg rounded-xl border border-gray-100 overflow-hidden card-hover">
        <div class="bg-gradient-to-r from-gray-500 to-gray-600 px-4 py-3 sm:px-6 sm:py-4">
            <h3 class="text-lg font-semibold text-white flex items-center">
                <i class="fas fa-history mr-2 text-gray-200"></i>
                Riwayat Import
            </h3>
        </div>
        <div class="p-6">
            {% if import_history %}
            <div class="space-y-4">
                {% for import in import_history %}
                <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                    <div class="flex items-center space-x-3">
                        <div class="flex-shrink-0">
                            <i class="fas fa-file-excel text-green-600 text-2xl"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-900">{{ import.filename }}</p>
                            <p class="text-sm text-gray-500">{{ import.created_at|date:"d M Y H:i" }}</p>
                            <p class="text-xs text-gray-500">
                                Status: 
                                <span class="{% if import.status == 'success' %}text-green-600{% elif import.status == 'error' %}text-red-600{% else %}text-yellow-600{% endif %}">
                                    {{ import.get_status_display }}
                                </span>
                            </p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        {% if import.status == 'success' %}
                        <span class="text-sm text-green-600">
                            <i class="fas fa-check mr-1"></i>
                            {{ import.success_count }} berhasil
                        </span>
                        {% endif %}
                        {% if import.error_count > 0 %}
                        <span class="text-sm text-red-600">
                            <i class="fas fa-exclamation-triangle mr-1"></i>
                            {{ import.error_count }} error
                        </span>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center text-gray-500">
                <i class="fas fa-history text-4xl mb-2 text-gray-400"></i>
                <p>Belum ada riwayat import</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
// File upload handling
document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const fileInfo = document.getElementById('fileInfo');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');
    
    // Click to select file
    dropZone.addEventListener('click', function() {
        fileInput.click();
    });
    
    // Drag and drop
    dropZone.addEventListener('dragover', function(e) {
        e.preventDefault();
        dropZone.classList.add('dragover');
    });
    
    dropZone.addEventListener('dragleave', function(e) {
        e.preventDefault();
        dropZone.classList.remove('dragover');
    });
    
    dropZone.addEventListener('drop', function(e) {
        e.preventDefault();
        dropZone.classList.remove('dragover');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            handleFile(files[0]);
        }
    });
    
    // File input change
    fileInput.addEventListener('change', function(e) {
        if (e.target.files.length > 0) {
            handleFile(e.target.files[0]);
        }
    });
    
    function handleFile(file) {
        // Validate file type
        const allowedTypes = ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'];
        if (!allowedTypes.includes(file.type)) {
            alert('File harus berupa Excel (.xlsx atau .xls)');
            return;
        }
        
        // Validate file size (max 10MB)
        if (file.size > 10 * 1024 * 1024) {
            alert('File terlalu besar. Maksimal 10MB');
            return;
        }
        
        // Show file info
        fileName.textContent = file.name;
        fileSize.textContent = formatFileSize(file.size);
        fileInfo.classList.remove('hidden');
        dropZone.classList.add('hidden');
    }
    
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
});

// Remove file
function removeFile() {
    document.getElementById('fileInput').value = '';
    document.getElementById('fileInfo').classList.add('hidden');
    document.getElementById('dropZone').classList.remove('hidden');
}

// Form submission with progress
document.getElementById('importForm').addEventListener('submit', function(e) {
    const fileInput = document.getElementById('fileInput');
    if (!fileInput.files.length) {
        e.preventDefault();
        alert('Pilih file Excel terlebih dahulu!');
        return;
    }
    
    if (confirm('Import data dari file Excel?')) {
        // Show progress section
        document.getElementById('progressSection').classList.remove('hidden');
        document.getElementById('submitBtn').disabled = true;
        document.getElementById('submitBtn').innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Mengimport...';
        
        // Simulate progress
        let progress = 0;
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        
        const interval = setInterval(() => {
            progress += Math.random() * 15;
            if (progress > 100) progress = 100;
            
            progressBar.style.width = progress + '%';
            progressText.textContent = `Mengimport ${Math.floor(progress)}%...`;
            
            if (progress >= 100) {
                clearInterval(interval);
                progressText.textContent = 'Selesai! Memproses data...';
            }
        }, 200);
    }
});
</script>
{% endblock %}