{% extends 'anggota/base.html' %}
{% load static %}
{% load currency_filters %}
{% load widget_tweaks %}

{% block title %}Daftar Event - {{ event.judul }} - {{ block.super }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Breadcrumb -->
        <nav class="flex mb-8" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    <a href="{% url 'anggota:dashboard' %}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600">
                        <i class="fas fa-home mr-2"></i>Dashboard
                    </a>
                </li>
                <li><i class="fas fa-chevron-right text-xs"></i></li>
                <li>
                    <a href="{% url 'anggota:event_list' %}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600">
                        <i class="fas fa-calendar-alt mr-2"></i>Event
                    </a>
                </li>
                <li><i class="fas fa-chevron-right text-xs"></i></li>
                <li class="text-gray-900">Daftar Event</li>
            </ol>
        </nav>

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- Registration Form -->
            <div class="lg:col-span-3">
                <div class="bg-white rounded-lg shadow-md p-8">
                    <div class="text-center mb-8">
                        <h1 class="text-3xl font-bold text-gray-900 mb-2">Daftar Event</h1>
                        <h2 class="text-xl text-gray-600">{{ event.judul }}</h2>
                        <div class="mt-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                                <i class="fas fa-user mr-1"></i>Pendaftaran Khusus Anggota
                            </span>
                        </div>
                    </div>

                    <form method="post" enctype="multipart/form-data" id="registrationForm">
                        {% csrf_token %}
                        
                        <!-- Informasi Pribadi (Pre-filled) -->
                        <div class="bg-blue-50 rounded-lg p-6 mb-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                                <i class="fas fa-user mr-2 text-blue-500"></i>Informasi Pribadi
                                <span class="text-sm text-blue-600 ml-2">(Data dari profil anggota)</span>
                            </h3>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        Nama Lengkap <span class="text-red-500">*</span>
                                    </label>
                                    {% render_field form.nama_lengkap class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors bg-gray-100" readonly="readonly" %}
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        Email <span class="text-red-500">*</span>
                                    </label>
                                    {% render_field form.email class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors bg-gray-100" readonly="readonly" %}
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        No. Telepon <span class="text-red-500">*</span>
                                    </label>
                                    {% render_field form.no_telepon class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors bg-gray-100" readonly="readonly" %}
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        Instansi/Universitas
                                    </label>
                                    {% render_field form.instansi class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors bg-gray-100" readonly="readonly" %}
                                </div>
                            </div>
                            
                            <div class="mt-6">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Alamat Lengkap
                                </label>
                                {% render_field form.alamat class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors resize-none bg-gray-100" readonly="readonly" %}
                            </div>
                        </div>

                        <!-- Informasi Tambahan -->
                        <div class="bg-gray-50 rounded-lg p-6 mb-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                                <i class="fas fa-info-circle mr-2 text-blue-500"></i>Informasi Tambahan
                            </h3>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="{{ form.jenis_kelamin.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        Jenis Kelamin
                                    </label>
                                    {% render_field form.jenis_kelamin class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" %}
                                </div>
                                
                                <div>
                                    <label for="{{ form.tanggal_lahir.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        Tanggal Lahir
                                    </label>
                                    {% render_field form.tanggal_lahir class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" %}
                                </div>
                                
                                <div>
                                    <label for="{{ form.no_ktp.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        No. KTP
                                    </label>
                                    {% render_field form.no_ktp class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" %}
                                </div>
                            </div>
                            
                            <div class="mt-6">
                                <label for="{{ form.catatan.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    Catatan/Komentar
                                </label>
                                {% render_field form.catatan class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors resize-none" %}
                                <p class="mt-1 text-sm text-gray-500">Berikan informasi tambahan yang mungkin berguna untuk panitia.</p>
                            </div>
                        </div>

                        <!-- Payment Information -->
                        {% if event.tipe == 'berbayar' and event.biaya_pendaftaran > 0 %}
                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 mb-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                                <i class="fas fa-credit-card mr-2 text-yellow-500"></i>Informasi Pembayaran
                            </h3>
                            <div class="bg-white rounded-lg p-4 mb-6">
                                <div class="flex justify-between items-center mb-4">
                                    <span class="text-lg font-semibold text-gray-900">Total Pembayaran:</span>
                                    <span class="text-2xl font-bold text-green-600">{{ event.biaya_pendaftaran|currency_idr }}</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-4">
                                    Silakan lakukan pembayaran dan upload bukti pembayaran di bawah ini.
                                </p>
                            </div>
                            
                            <!-- Rekening Pembayaran -->
                            {% if bank_accounts %}
                            <div class="bg-white rounded-lg p-4 mb-6 border border-gray-200">
                                <h4 class="text-sm font-semibold text-gray-900 mb-3">
                                    <i class="fas fa-university mr-2 text-blue-500"></i>
                                    Rekening Pembayaran
                                </h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                    {% for rekening in bank_accounts %}
                                    <div class="bg-gray-50 p-3 rounded-lg border border-gray-200 hover:shadow-md transition-shadow">
                                        <div class="flex items-start justify-between mb-2">
                                            <h5 class="font-semibold text-gray-900 text-sm">{{ rekening.nama_bank }}</h5>
                                            {% if rekening.is_active %}
                                            <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                                Aktif
                                            </span>
                                            {% endif %}
                                        </div>
                                        <div class="space-y-1">
                                            <p class="text-xs text-gray-600">
                                                <span class="font-medium">No. Rekening:</span>
                                                <span class="font-mono text-gray-900">{{ rekening.nomor_rekening }}</span>
                                            </p>
                                            <p class="text-xs text-gray-600">
                                                <span class="font-medium">Atas Nama:</span>
                                                <span class="text-gray-900">{{ rekening.nama_pemilik }}</span>
                                            </p>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            {% endif %}
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="{{ form.payment_method.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        Metode Pembayaran
                                    </label>
                                    {% render_field form.payment_method class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" %}
                                </div>
                                
                                <div>
                                    <label for="{{ form.payment_reference.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        Nomor Referensi
                                    </label>
                                    {% render_field form.payment_reference class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" %}
                                </div>
                            </div>
                            
                            <div class="mt-6">
                                <label for="{{ form.bukti_pembayaran.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    Upload Bukti Pembayaran <span class="text-red-500">*</span>
                                </label>
                                {% render_field form.bukti_pembayaran class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" %}
                                <p class="mt-1 text-sm text-gray-500">Format: JPG, PNG, PDF (Max 5MB)</p>
                                <div id="bukti_pembayaran_preview" class="mt-2 hidden">
                                    <img id="bukti_pembayaran_img" src="" alt="Preview" class="w-32 h-20 object-cover rounded-lg border">
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        
                        <!-- Dokumen Pendukung -->
                        <div class="bg-gray-50 rounded-lg p-6 mb-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                                <i class="fas fa-file-upload mr-2 text-blue-500"></i>Dokumen Pendukung
                            </h3>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="{{ form.foto_ktp.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        Foto KTP
                                    </label>
                                    {% render_field form.foto_ktp class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" %}
                                    <p class="mt-1 text-sm text-gray-500">Format: JPG, PNG (Max 5MB)</p>
                                    <div id="foto_ktp_preview" class="mt-2 hidden">
                                        <img id="foto_ktp_img" src="" alt="Preview" class="w-32 h-20 object-cover rounded-lg border">
                                    </div>
                                </div>
                                
                                <div>
                                    <label for="{{ form.surat_rekomendasi.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        Surat Rekomendasi
                                    </label>
                                    {% render_field form.surat_rekomendasi class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" %}
                                    <p class="mt-1 text-sm text-gray-500">Format: PDF, DOC, DOCX (Max 10MB)</p>
                                    <div id="surat_rekomendasi_preview" class="mt-2 hidden">
                                        <div id="surat_rekomendasi_file" class="flex items-center p-2 bg-gray-100 rounded-lg">
                                            <i class="fas fa-file-pdf text-red-500 mr-2"></i>
                                            <span class="text-sm text-gray-700">File terpilih</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mt-6">
                                <label for="{{ form.dokumen_lainnya.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    Dokumen Lainnya
                                </label>
                                {% render_field form.dokumen_lainnya class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" %}
                                <p class="mt-1 text-sm text-gray-500">Format: PDF, DOC, DOCX, JPG, PNG (Max 10MB)</p>
                                <div id="dokumen_lainnya_preview" class="mt-2 hidden">
                                    <div id="dokumen_lainnya_file" class="flex items-center p-2 bg-gray-100 rounded-lg">
                                        <i class="fas fa-file text-blue-500 mr-2"></i>
                                        <span class="text-sm text-gray-700">File terpilih</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Terms and Conditions -->
                        <div class="bg-gray-50 rounded-lg p-6 mb-8">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                                <i class="fas fa-file-contract mr-2 text-blue-500"></i>Syarat dan Ketentuan
                            </h3>
                            <div class="space-y-3 text-sm text-gray-700">
                                <p>• Dengan mendaftar, saya menyatakan bahwa data yang diisi adalah benar dan dapat dipertanggungjawabkan.</p>
                                <p>• Saya bersedia mengikuti semua aturan dan ketentuan yang berlaku dalam event ini.</p>
                                <p>• Saya memahami bahwa pendaftaran ini tidak dapat dibatalkan setelah dikonfirmasi oleh panitia.</p>
                                <p>• Saya bersedia menerima informasi terkait event melalui email yang telah saya berikan.</p>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="flex flex-col sm:flex-row gap-4">
                            <button type="submit" 
                                    class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200 flex items-center justify-center">
                                <i class="fas fa-paper-plane mr-2"></i>
                                Daftar Event
                            </button>
                            <a href="{% url 'anggota:event_list' %}" 
                               class="flex-1 bg-gray-500 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200 flex items-center justify-center">
                                <i class="fas fa-arrow-left mr-2"></i>Kembali ke Daftar Event
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Event Summary Sidebar -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-lg shadow-md p-6 sticky top-8">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Ringkasan Event</h3>
                    
                    <!-- Event Image -->
                    <div class="mb-4">
                        {% if event.gambar_utama %}
                            <img src="{{ event.gambar_utama.url }}" alt="{{ event.judul }}" class="w-full h-48 object-cover rounded-lg">
                        {% else %}
                            <div class="w-full h-48 bg-gray-200 rounded-lg flex items-center justify-center">
                                <i class="fas fa-calendar-alt text-4xl text-gray-400"></i>
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- Event Details -->
                    <div class="space-y-3 text-sm">
                        <div class="flex items-center">
                            <i class="fas fa-map-marker-alt text-blue-500 mr-3 w-4"></i>
                            <span class="text-gray-700">{{ event.lokasi }}</span>
                        </div>
                        
                        <div class="flex items-center">
                            <i class="fas fa-calendar text-blue-500 mr-3 w-4"></i>
                            <span class="text-gray-700">{{ event.tanggal_mulai|date:"d M Y, H:i" }}</span>
                        </div>
                        
                        <div class="flex items-center">
                            <i class="fas fa-users text-blue-500 mr-3 w-4"></i>
                            <span class="text-gray-700">{{ event.pendaftaran_set.count }}/{{ event.kuota }} peserta</span>
                        </div>
                        
                        <div class="flex items-center">
                            <i class="fas fa-money-bill-wave text-blue-500 mr-3 w-4"></i>
                            <span class="text-gray-700">{{ event.harga|currency_idr }}</span>
                        </div>
                    </div>
                    
                    <!-- Registration Status -->
                    <div class="mt-6 p-4 bg-green-50 rounded-lg">
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
                            <span class="text-green-800 font-medium">Pendaftaran Dibuka</span>
                        </div>
                        <p class="text-sm text-green-600 mt-1">Sisa kuota: {{ event.sisa_kuota }} peserta</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // File preview functionality
    function setupFilePreview(inputId, previewId, isImage = true) {
        const input = document.getElementById(inputId);
        const preview = document.getElementById(previewId);
        
        if (input && preview) {
            input.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    if (isImage) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const img = preview.querySelector('img');
                            if (img) {
                                img.src = e.target.result;
                                preview.classList.remove('hidden');
                            }
                        };
                        reader.readAsDataURL(file);
                    } else {
                        const fileDiv = preview.querySelector('div');
                        if (fileDiv) {
                            const icon = fileDiv.querySelector('i');
                            const text = fileDiv.querySelector('span');
                            
                            // Change icon based on file type
                            if (file.type.includes('pdf')) {
                                icon.className = 'fas fa-file-pdf text-red-500 mr-2';
                            } else if (file.type.includes('word') || file.type.includes('document')) {
                                icon.className = 'fas fa-file-word text-blue-500 mr-2';
                            } else if (file.type.includes('image')) {
                                icon.className = 'fas fa-file-image text-green-500 mr-2';
                            } else {
                                icon.className = 'fas fa-file text-gray-500 mr-2';
                            }
                            
                            text.textContent = file.name;
                            preview.classList.remove('hidden');
                        }
                    }
                } else {
                    preview.classList.add('hidden');
                }
            });
        }
    }
    
    // Setup previews for all file inputs
    setupFilePreview('id_bukti_pembayaran', 'bukti_pembayaran_preview', true);
    setupFilePreview('id_foto_ktp', 'foto_ktp_preview', true);
    setupFilePreview('id_surat_rekomendasi', 'surat_rekomendasi_preview', false);
    setupFilePreview('id_dokumen_lainnya', 'dokumen_lainnya_preview', false);
    
    // Form validation
    const form = document.getElementById('registrationForm');
    form.addEventListener('submit', function(e) {
        let isValid = true;
        const requiredFields = form.querySelectorAll('input[required], textarea[required], select[required]');
        
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                field.classList.add('border-red-500');
                isValid = false;
            } else {
                field.classList.remove('border-red-500');
            }
        });
        
        if (!isValid) {
            e.preventDefault();
            alert('Mohon lengkapi semua field yang wajib diisi.');
        }
    });
    
    // Remove error styling on input
    form.addEventListener('input', function(e) {
        if (e.target.classList.contains('border-red-500')) {
            e.target.classList.remove('border-red-500');
        }
    });
});
</script>
{% endblock %}