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

{% block title %}Import/Export Data - Sistem Keuangan HMI{% endblock %}
{% block page_title %}Import/Export Data{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">Import/Export Data Keuangan</h3>
                <p class="text-sm text-gray-600">Kelola data keuangan dengan import dan export</p>
            </div>
            
            <div class="flex items-center space-x-3">
                <a href="{% url 'keuangan:dashboard' %}" 
                   class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Kembali ke Dashboard
                </a>
            </div>
        </div>
    </div>
    
    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-exchange-alt text-2xl text-blue-600"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Total Transaksi</p>
                    <p class="text-2xl font-semibold text-gray-900">{{ total_transaksi }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-hand-holding-heart text-2xl text-purple-600"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Total Donasi</p>
                    <p class="text-2xl font-semibold text-gray-900">{{ total_donasi }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-chart-bar text-2xl text-green-600"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Total Laporan</p>
                    <p class="text-2xl font-semibold text-gray-900">{{ total_laporan }}</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Export Section -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <h4 class="text-lg font-medium text-gray-900 mb-4">
            <i class="fas fa-download mr-2"></i>
            Export Data
        </h4>
        <p class="text-sm text-gray-600 mb-6">Ekspor data keuangan dalam berbagai format</p>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Export Transaksi -->
            <div class="border border-gray-200 rounded-lg p-4">
                <h5 class="font-medium text-gray-900 mb-3">Export Transaksi</h5>
                <p class="text-sm text-gray-600 mb-4">Ekspor data transaksi keuangan</p>
                
                <div class="space-y-3">
                    <a href="{% url 'keuangan:export_transaksi' %}?format=excel" 
                       class="w-full inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                        <i class="fas fa-file-excel mr-2"></i>
                        Excel
                    </a>
                    <a href="{% url 'keuangan:export_transaksi' %}?format=csv" 
                       class="w-full inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                        <i class="fas fa-file-csv mr-2"></i>
                        CSV
                    </a>
                    <a href="{% url 'keuangan:export_transaksi' %}?format=pdf" 
                       class="w-full inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
                        <i class="fas fa-file-pdf mr-2"></i>
                        PDF
                    </a>
                </div>
            </div>
            
            <!-- Export Donasi -->
            <div class="border border-gray-200 rounded-lg p-4">
                <h5 class="font-medium text-gray-900 mb-3">Export Donasi</h5>
                <p class="text-sm text-gray-600 mb-4">Ekspor data donasi</p>
                
                <div class="space-y-3">
                    <a href="{% url 'keuangan:export_donasi' %}?format=excel" 
                       class="w-full inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                        <i class="fas fa-file-excel mr-2"></i>
                        Excel
                    </a>
                    <a href="{% url 'keuangan:export_donasi' %}?format=csv" 
                       class="w-full inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                        <i class="fas fa-file-csv mr-2"></i>
                        CSV
                    </a>
                    <a href="{% url 'keuangan:export_donasi' %}?format=pdf" 
                       class="w-full inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
                        <i class="fas fa-file-pdf mr-2"></i>
                        PDF
                    </a>
                </div>
            </div>
            
            <!-- Export Laporan -->
            <div class="border border-gray-200 rounded-lg p-4">
                <h5 class="font-medium text-gray-900 mb-3">Export Laporan</h5>
                <p class="text-sm text-gray-600 mb-4">Ekspor laporan keuangan</p>
                
                <div class="space-y-3">
                    <a href="{% url 'keuangan:export_laporan' %}?format=excel&periode=bulanan&tahun={{ current_year }}" 
                       class="w-full inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                        <i class="fas fa-file-excel mr-2"></i>
                        Excel
                    </a>
                    <a href="{% url 'keuangan:export_laporan' %}?format=pdf&periode=bulanan&tahun={{ current_year }}" 
                       class="w-full inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
                        <i class="fas fa-file-pdf mr-2"></i>
                        PDF
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Import Section -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <h4 class="text-lg font-medium text-gray-900 mb-4">
            <i class="fas fa-upload mr-2"></i>
            Import Data
        </h4>
        <p class="text-sm text-gray-600 mb-6">Impor data keuangan dari file Excel atau CSV</p>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Import Transaksi -->
            <div class="border border-gray-200 rounded-lg p-4">
                <h5 class="font-medium text-gray-900 mb-3">Import Transaksi</h5>
                <p class="text-sm text-gray-600 mb-4">Impor data transaksi dari file</p>
                
                <form method="POST" action="{% url 'keuangan:import_transaksi' %}" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="space-y-3">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Format File</label>
                            <select name="format" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                                <option value="excel">Excel (.xlsx)</option>
                                <option value="csv">CSV (.csv)</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Pilih File</label>
                            <input type="file" name="file" accept=".xlsx,.csv" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                        </div>
                        
                        <button type="submit" 
                                class="w-full inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                            <i class="fas fa-upload mr-2"></i>
                            Import Transaksi
                        </button>
                    </div>
                </form>
            </div>
            
            <!-- Import Donasi -->
            <div class="border border-gray-200 rounded-lg p-4">
                <h5 class="font-medium text-gray-900 mb-3">Import Donasi</h5>
                <p class="text-sm text-gray-600 mb-4">Impor data donasi dari file</p>
                
                <form method="POST" action="{% url 'keuangan:import_donasi' %}" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="space-y-3">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Format File</label>
                            <select name="format" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                                <option value="excel">Excel (.xlsx)</option>
                                <option value="csv">CSV (.csv)</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Pilih File</label>
                            <input type="file" name="file" accept=".xlsx,.csv" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                        </div>
                        
                        <button type="submit" 
                                class="w-full inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                            <i class="fas fa-upload mr-2"></i>
                            Import Donasi
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Template Download Section -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <h4 class="text-lg font-medium text-gray-900 mb-4">
            <i class="fas fa-file-download mr-2"></i>
            Download Template
        </h4>
        <p class="text-sm text-gray-600 mb-6">Download template untuk import data</p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="border border-gray-200 rounded-lg p-4">
                <h5 class="font-medium text-gray-900 mb-3">Template Transaksi</h5>
                <p class="text-sm text-gray-600 mb-4">Template untuk import transaksi</p>
                
                <div class="space-y-2">
                    <a href="#" onclick="downloadTemplate('transaksi', 'excel')" 
                       class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-file-excel mr-2 text-green-600"></i>
                        Template Excel
                    </a>
                    <a href="#" onclick="downloadTemplate('transaksi', 'csv')" 
                       class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-file-csv mr-2 text-blue-600"></i>
                        Template CSV
                    </a>
                </div>
            </div>
            
            <div class="border border-gray-200 rounded-lg p-4">
                <h5 class="font-medium text-gray-900 mb-3">Template Donasi</h5>
                <p class="text-sm text-gray-600 mb-4">Template untuk import donasi</p>
                
                <div class="space-y-2">
                    <a href="#" onclick="downloadTemplate('donasi', 'excel')" 
                       class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-file-excel mr-2 text-green-600"></i>
                        Template Excel
                    </a>
                    <a href="#" onclick="downloadTemplate('donasi', 'csv')" 
                       class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-file-csv mr-2 text-blue-600"></i>
                        Template CSV
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Instructions -->
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
        <h4 class="text-lg font-medium text-blue-900 mb-4">
            <i class="fas fa-info-circle mr-2"></i>
            Petunjuk Import/Export
        </h4>
        
        <div class="space-y-4 text-sm text-blue-800">
            <div>
                <h5 class="font-medium mb-2">Format File yang Didukung:</h5>
                <ul class="list-disc list-inside space-y-1 ml-4">
                    <li>Excel (.xlsx) - Format yang direkomendasikan</li>
                    <li>CSV (.csv) - Format teks dengan pemisah koma</li>
                    <li>PDF (.pdf) - Hanya untuk export laporan</li>
                </ul>
            </div>
            
            <div>
                <h5 class="font-medium mb-2">Format Data Import:</h5>
                <ul class="list-disc list-inside space-y-1 ml-4">
                    <li><strong>Transaksi:</strong> Tanggal, Judul, Kategori, Tipe, Jumlah, Deskripsi</li>
                    <li><strong>Donasi:</strong> Nama Donatur, Email, Telepon, Jumlah, Pesan</li>
                </ul>
            </div>
            
            <div>
                <h5 class="font-medium mb-2">Tips:</h5>
                <ul class="list-disc list-inside space-y-1 ml-4">
                    <li>Download template terlebih dahulu untuk format yang benar</li>
                    <li>Pastikan data tanggal dalam format DD/MM/YYYY</li>
                    <li>Kategori akan dibuat otomatis jika belum ada</li>
                    <li>Data yang diimpor akan langsung disetujui</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function downloadTemplate(type, format) {
        // Create sample data based on type
        let headers, sampleData;
        
        if (type === 'transaksi') {
            headers = ['Tanggal', 'Judul', 'Kategori', 'Tipe', 'Jumlah', 'Deskripsi'];
            sampleData = [
                ['01/01/2024', 'Contoh Transaksi', 'Operasional', 'pengeluaran', '100000', 'Deskripsi contoh'],
                ['02/01/2024', 'Pemasukan Contoh', 'Donasi', 'pemasukan', '500000', 'Pemasukan dari donasi']
            ];
        } else if (type === 'donasi') {
            headers = ['Nama Donatur', 'Email', 'Telepon', 'Jumlah', 'Pesan'];
            sampleData = [
                ['John Doe', 'john@example.com', '08123456789', '100000', 'Donasi untuk kegiatan'],
                ['Jane Smith', 'jane@example.com', '08123456790', '250000', 'Donasi untuk operasional']
            ];
        }
        
        if (format === 'csv') {
            downloadCSV(headers, sampleData, `${type}_template.csv`);
        } else if (format === 'excel') {
            downloadExcel(headers, sampleData, `${type}_template.xlsx`);
        }
    }
    
    function downloadCSV(headers, data, filename) {
        let csvContent = headers.join(',') + '\n';
        data.forEach(row => {
            csvContent += row.join(',') + '\n';
        });
        
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        link.setAttribute('download', filename);
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    
    function downloadExcel(headers, data, filename) {
        // For Excel, we'll create a simple CSV that can be opened in Excel
        // In a real implementation, you might want to use a library like SheetJS
        downloadCSV(headers, data, filename.replace('.xlsx', '.csv'));
    }
</script>
{% endblock %}