@extends('layouts.app')

@section('title', 'Upload Data Penduduk')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Upload Data Penduduk</h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-2">
                    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6">
                        <h5 class="flex items-center text-blue-800 dark:text-blue-200 font-medium mb-3">
                            <i class="fas fa-info-circle mr-2"></i> Petunjuk Upload Data Penduduk
                        </h5>
                        <ul class="text-blue-700 dark:text-blue-300 space-y-1 text-sm">
                            <li>• File harus berformat Excel (.xlsx, .xls) atau CSV</li>
                            <li>• Ukuran file maksimal 10MB</li>
                            <li>• Data akan diproses berdasarkan template yang disediakan</li>
                            <li>• Kolom <strong>Tanggal Mulai Tinggal</strong> dapat diisi dengan format YYYY-MM-DD (contoh: 2020-01-15). Jika kosong, akan menggunakan tanggal hari ini.</li>
                            <li>• Jika data sudah ada (berdasarkan NIK), maka data akan diperbarui</li>
                        </ul>
                    </div>

                    <form id="uploadForm" enctype="multipart/form-data" class="space-y-4">
                        @csrf
                        <div>
                            <label for="file" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Pilih File Data Penduduk
                            </label>
                            <div class="flex">
                                <div class="flex-1">
                                    <input type="file" 
                                           class="block w-full text-sm text-gray-500 dark:text-gray-400
                                                  file:mr-4 file:py-2 file:px-4
                                                  file:rounded-l-lg file:border-0
                                                  file:text-sm file:font-medium
                                                  file:bg-blue-50 file:text-blue-700
                                                  hover:file:bg-blue-100
                                                  dark:file:bg-blue-900/20 dark:file:text-blue-300
                                                  border border-gray-300 dark:border-gray-600 rounded-lg
                                                  bg-white dark:bg-gray-700"
                                           id="file" name="file" accept=".xlsx,.xls,.csv">
                                </div>
                                <button type="submit" 
                                        class="ml-2 inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 
                                               text-white text-sm font-medium rounded-lg transition-colors duration-200
                                               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
                                               dark:focus:ring-offset-gray-800" 
                                        id="uploadBtn">
                                    <i class="fas fa-upload mr-2"></i> Upload
                                </button>
                            </div>
                        </div>
                    </form>

                    <div id="uploadProgress" class="mt-4 hidden">
                        <div class="bg-blue-200 dark:bg-blue-800 rounded-full h-2 overflow-hidden">
                            <div class="bg-blue-600 dark:bg-blue-400 h-full rounded-full animate-pulse">
                            </div>
                        </div>
                        <p class="text-sm text-blue-600 dark:text-blue-400 mt-2">Memproses file...</p>
                    </div>

                    <div id="uploadResult" class="mt-4"></div>
                </div>

                <div class="space-y-6">
                    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
                        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                            <h3 class="text-sm font-medium text-gray-900 dark:text-white">Template File</h3>
                        </div>
                        <div class="p-4">
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                                Download template file untuk memastikan format data sesuai:
                            </p>
                            <a href="{{ route('admin.upload-penduduk.template') }}" 
                               class="w-full inline-flex items-center justify-center px-4 py-2 bg-green-600 hover:bg-green-700 
                                      text-white text-sm font-medium rounded-lg transition-colors duration-200
                                      focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2
                                      dark:focus:ring-offset-gray-800">
                                <i class="fas fa-download mr-2"></i> Download Template
                            </a>
                        </div>
                    </div>

                    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
                        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                            <h3 class="text-sm font-medium text-gray-900 dark:text-white">Format Kolom</h3>
                        </div>
                        <div class="p-4">
                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                <p class="font-medium mb-2">Kolom yang diperlukan:</p>
                                <div class="space-y-1">
                                    <div>1. Nomor KK</div>
                                    <div>2. Nama Kepala Keluarga</div>
                                    <div>3. Alamat Rumah</div>
                                    <div>4. RT</div>
                                    <div>5. RW</div>
                                    <div>6. Kelurahan</div>
                                    <div>7. Kecamatan</div>
                                    <div>8. Kota</div>
                                    <div>9. Provinsi</div>
                                    <div>10. Kode Pos</div>
                                    <div>11. NIK</div>
                                    <div>12. Nama Lengkap</div>
                                    <div>13. Jenis Kelamin</div>
                                    <div>14. Tempat Lahir</div>
                                    <div>15. Tanggal Lahir</div>
                                    <div>16. Agama</div>
                                    <div>17. Pendidikan</div>
                                    <div>18. Jenis Pekerjaan</div>
                                    <div>19. Golongan Darah</div>
                                    <div>20. Status Perkawinan</div>
                                    <div>21. Status Hubungan Keluarga</div>
                                    <div class="italic">...dan kolom lainnya sesuai template</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Handle form submission
    $('#uploadForm').on('submit', function(e) {
        e.preventDefault();
        
        let fileInput = $('#file')[0];
        if (!fileInput.files.length) {
            Swal.fire({
                icon: 'warning',
                title: 'Peringatan',
                text: 'Silakan pilih file terlebih dahulu!'
            });
            return;
        }

        let formData = new FormData(this);
        
        // Show progress
        $('#uploadProgress').removeClass('hidden');
        $('#uploadBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i> Memproses...');
        $('#uploadResult').empty();

        $.ajax({
            url: '{{ route("admin.upload-penduduk.upload") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#uploadProgress').addClass('hidden');
                $('#uploadBtn').prop('disabled', false).html('<i class="fas fa-upload mr-2"></i> Upload');
                
                if (response.success) {
                    let alertClass = response.data.error_count > 0 ? 'bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-900/20 dark:border-yellow-800 dark:text-yellow-200' : 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200';
                    let iconClass = response.data.error_count > 0 ? 'fas fa-exclamation-triangle' : 'fas fa-check-circle';
                    let resultHtml = `
                        <div class="border rounded-lg p-4 ${alertClass}">
                            <h5 class="flex items-center font-medium mb-2">
                                <i class="${iconClass} mr-2"></i> ${response.message}
                            </h5>
                            <p><strong>Data berhasil diproses:</strong> ${response.data.success_count}</p>
                            ${response.data.error_count > 0 ? `<p><strong>Data gagal diproses:</strong> ${response.data.error_count}</p>` : ''}
                        </div>
                    `;
                    
                    if (response.data.errors && response.data.errors.length > 0) {
                        resultHtml += `
                            <div class="mt-4 bg-red-50 border border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200 rounded-lg p-4">
                                <h6 class="font-medium mb-2">Detail Error:</h6>
                                <ul class="list-disc list-inside space-y-1 text-sm">
                        `;
                        response.data.errors.forEach(function(error) {
                            resultHtml += `<li>${error}</li>`;
                        });
                        resultHtml += `</ul></div>`;
                    }
                    
                    $('#uploadResult').html(resultHtml);
                    
                    // Reset form if fully successful
                    if (response.data.error_count === 0) {
                        $('#uploadForm')[0].reset();
                    }
                } else {
                    $('#uploadResult').html(`
                        <div class="bg-red-50 border border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200 rounded-lg p-4">
                            <h5 class="flex items-center font-medium mb-2">
                                <i class="fas fa-exclamation-triangle mr-2"></i> Upload Gagal
                            </h5>
                            <p>${response.message}</p>
                        </div>
                    `);
                }
            },
            error: function(xhr) {
                $('#uploadProgress').addClass('hidden');
                $('#uploadBtn').prop('disabled', false).html('<i class="fas fa-upload mr-2"></i> Upload');
                
                let errorMessage = 'Terjadi kesalahan saat upload file.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                
                $('#uploadResult').html(`
                    <div class="bg-red-50 border border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200 rounded-lg p-4">
                        <h5 class="flex items-center font-medium mb-2">
                            <i class="fas fa-exclamation-triangle mr-2"></i> Error
                        </h5>
                        <p>${errorMessage}</p>
                    </div>
                `);
            }
        });
    });
});
</script>
@endsection