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

{% block title %}Export Data - Admin Panel{% endblock %}
{% block page_title %}Export 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, #10b981, #059669);
        transition: width 0.3s ease;
    }
</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-download mr-2 text-green-600"></i>
                Export Data
            </h2>
            <p class="mt-1 text-sm text-gray-500">
                Export data anggota ke berbagai format
            </p>
        </div>
        <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
            <a href="{% url 'admin_panel: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>

    <!-- Export Options -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Export Anggota -->
        <div class="bg-white shadow-lg rounded-xl border border-gray-100 overflow-hidden card-hover">
            <div class="bg-gradient-to-r from-blue-500 to-blue-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-users mr-2 text-blue-200"></i>
                    Export Data Anggota
                </h3>
            </div>
            <div class="p-6">
                <form method="POST" action="{% url 'admin_panel:anggota_export_data' %}" class="space-y-4">
                    {% csrf_token %}
                    
                    <!-- Format -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Format File
                        </label>
                        <select name="format" 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">
                            <option value="excel">Excel (.xlsx)</option>
                            <option value="pdf">PDF</option>
                            <option value="csv">CSV</option>
                        </select>
                    </div>
                    
                    <!-- Filter Status -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Filter Status
                        </label>
                        <select name="status" 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">
                            <option value="">Semua Status</option>
                            <option value="aktif">Aktif</option>
                            <option value="nonaktif">Nonaktif</option>
                            <option value="pending">Pending</option>
                        </select>
                    </div>
                    
                    <!-- Filter Role -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Filter Role
                        </label>
                        <select name="role" 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">
                            <option value="">Semua Role</option>
                            <option value="admin">Admin</option>
                            <option value="ketua">Ketua</option>
                            <option value="sekretaris">Sekretaris</option>
                            <option value="bendahara">Bendahara</option>
                            <option value="anggota">Anggota</option>
                        </select>
                    </div>
                    
                    <!-- Date Range -->
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Tanggal Mulai
                            </label>
                            <input type="date" name="start_date" 
                                   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">
                                Tanggal Akhir
                            </label>
                            <input type="date" name="end_date" 
                                   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>
                    
                    <button type="submit" 
                            class="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-medium py-2 px-4 rounded-md action-button">
                        <i class="fas fa-download mr-2"></i>
                        Export Data Anggota
                    </button>
                </form>
            </div>
        </div>

        <!-- Export Absensi -->
        <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-calendar-check mr-2 text-green-200"></i>
                    Export Data Absensi
                </h3>
            </div>
            <div class="p-6">
                <form method="POST" action="{% url 'admin_panel:anggota_export_data' %}" class="space-y-4">
                    {% csrf_token %}
                    
                    <!-- Format -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Format File
                        </label>
                        <select name="format" 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">
                            <option value="excel">Excel (.xlsx)</option>
                            <option value="pdf">PDF</option>
                            <option value="csv">CSV</option>
                        </select>
                    </div>
                    
                    <!-- Kegiatan -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Kegiatan
                        </label>
                        <select name="kegiatan" 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">
                            <option value="">Semua Kegiatan</option>
                            {% for event in event_list %}
                            <option value="{{ event.id }}">{{ event.judul }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- Status -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Status Absensi
                        </label>
                        <select name="status" 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">
                            <option value="">Semua Status</option>
                            <option value="hadir">Hadir</option>
                            <option value="terlambat">Terlambat</option>
                            <option value="tidak_hadir">Tidak Hadir</option>
                        </select>
                    </div>
                    
                    <!-- Date Range -->
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Tanggal Mulai
                            </label>
                            <input type="date" name="start_date" 
                                   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 Akhir
                            </label>
                            <input type="date" name="end_date" 
                                   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>
                    
                    <button type="submit" 
                            class="w-full bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-medium py-2 px-4 rounded-md action-button">
                        <i class="fas fa-download mr-2"></i>
                        Export Data Absensi
                    </button>
                </form>
            </div>
        </div>


        <!-- Export Kegiatan -->
        <div class="bg-white shadow-lg rounded-xl border border-gray-100 overflow-hidden card-hover">
            <div class="bg-gradient-to-r from-purple-500 to-purple-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-calendar-alt mr-2 text-purple-200"></i>
                    Export Data Kegiatan
                </h3>
            </div>
            <div class="p-6">
                <form method="POST" action="{% url 'admin_panel:anggota_export_data' %}" class="space-y-4">
                    {% csrf_token %}
                    
                    <!-- Format -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Format File
                        </label>
                        <select name="format" 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">
                            <option value="excel">Excel (.xlsx)</option>
                            <option value="pdf">PDF</option>
                            <option value="csv">CSV</option>
                        </select>
                    </div>
                    
                    <!-- Status -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Status Kegiatan
                        </label>
                        <select name="status" 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">
                            <option value="">Semua Status</option>
                            <option value="akan_datang">Akan Datang</option>
                            <option value="sedang_berlangsung">Sedang Berlangsung</option>
                            <option value="selesai">Selesai</option>
                            <option value="dibatalkan">Dibatalkan</option>
                        </select>
                    </div>
                    
                    <!-- Date Range -->
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Tanggal Mulai
                            </label>
                            <input type="date" name="start_date" 
                                   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">
                                Tanggal Akhir
                            </label>
                            <input type="date" name="end_date" 
                                   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>
                    
                    <button type="submit" 
                            class="w-full bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white font-medium py-2 px-4 rounded-md action-button">
                        <i class="fas fa-download mr-2"></i>
                        Export Data Kegiatan
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Export 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 Export
            </h3>
        </div>
        <div class="p-6">
            {% if export_history %}
            <div class="space-y-4">
                {% for export in export_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-{% if export.format == 'excel' %}excel{% elif export.format == 'pdf' %}pdf{% else %}csv{% endif %} text-2xl 
                                {% if export.format == 'excel' %}text-green-600{% elif export.format == 'pdf' %}text-red-600{% else %}text-blue-600{% endif %}"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-900">{{ export.filename }}</p>
                            <p class="text-sm text-gray-500">{{ export.created_at|date:"d M Y H:i" }}</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <a href="{{ export.download_url }}" 
                           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>
                        <button onclick="deleteExport({{ export.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-history text-4xl mb-2 text-gray-400"></i>
                <p>Belum ada riwayat export</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
// Delete Export Function
function deleteExport(exportId) {
    if (confirm('Hapus file export ini?')) {
        fetch(`/admin/anggota/export/delete/${exportId}/`, {
            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 file export');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat menghapus file');
        });
    }
}

// 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>Mengekspor...';
            submitBtn.disabled = true;
            
            // Re-enable button after 10 seconds (fallback)
            setTimeout(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            }, 10000);
        });
    });
});
</script>
{% endblock %}