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


{% block page_title %}
    <i class="fas fa-user-plus text-green-600 mr-2"></i>
    Tambah Registrasi Event
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8">
        <div>
            <p class="text-gray-600">Tambah registrasi baru untuk event</p>
        </div>
        <div class="mt-4 sm:mt-0">
            <a href="{% url 'event_admin:all_registrations' %}" 
               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">
                <i class="fas fa-arrow-left mr-2"></i>
                Kembali ke Semua Registrasi
            </a>
        </div>
    </div>

    <!-- Form -->
    <form method="POST" enctype="multipart/form-data" class="space-y-6" id="registrationForm">
        {% csrf_token %}
        
        <!-- Event Selection dengan Search -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">
                <i class="fas fa-calendar-alt text-blue-500 mr-2"></i>
                Pilih Event
            </h2>
            
            <div class="relative">
                <label for="event-search" class="block text-sm font-medium text-gray-700 mb-2">
                    Cari Event <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                    <input type="text" 
                           id="event-search" 
                           class="w-full px-4 py-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                           placeholder="Ketik untuk mencari event (judul, lokasi, kategori)..."
                           autocomplete="off">
                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    <div id="event-search-results" class="hidden absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-96 overflow-y-auto">
                        <!-- Results will be populated by AJAX -->
                    </div>
                </div>
                <div id="selected-event-info" class="hidden mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h3 class="font-semibold text-gray-900" id="selected-event-title"></h3>
                            <div class="mt-2 space-y-1 text-sm text-gray-600">
                                <p><i class="fas fa-map-marker-alt mr-2"></i><span id="selected-event-location"></span></p>
                                <p><i class="fas fa-calendar mr-2"></i><span id="selected-event-date"></span></p>
                                <p><i class="fas fa-money-bill-wave mr-2"></i><span id="selected-event-price"></span></p>
                                <p><i class="fas fa-users mr-2"></i>Kuota: <span id="selected-event-quota"></span></p>
                            </div>
                        </div>
                        <button type="button" id="clear-event" class="ml-4 text-red-500 hover:text-red-700">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                {{ form.event }}
                {% if form.event.errors %}
                    <p class="mt-1 text-sm text-red-600">{{ form.event.errors.0 }}</p>
                {% endif %}
            </div>
        </div>

        <!-- Informasi Pribadi -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">
                <i class="fas fa-user text-green-500 mr-2"></i>
                Informasi Pribadi
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="{{ form.nama_lengkap.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Nama Lengkap <span class="text-red-500">*</span>
                    </label>
                    {{ form.nama_lengkap }}
                    {% if form.nama_lengkap.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.nama_lengkap.errors.0 }}</p>
                    {% endif %}
                </div>

                <div>
                    <label for="{{ form.email.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Email <span class="text-red-500">*</span>
                    </label>
                    {{ form.email }}
                    {% if form.email.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.email.errors.0 }}</p>
                    {% endif %}
                </div>

                <div>
                    <label for="{{ form.no_telepon.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        No. Telepon <span class="text-red-500">*</span>
                    </label>
                    {{ form.no_telepon }}
                    {% if form.no_telepon.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.no_telepon.errors.0 }}</p>
                    {% endif %}
                </div>

                <div>
                    <label for="{{ form.jenis_kelamin.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Jenis Kelamin <span class="text-gray-500 text-xs">(Opsional)</span>
                    </label>
                    {{ form.jenis_kelamin }}
                    {% if form.jenis_kelamin.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.jenis_kelamin.errors.0 }}</p>
                    {% endif %}
                </div>

                <div>
                    <label for="{{ form.tanggal_lahir.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Tanggal Lahir <span class="text-gray-500 text-xs">(Opsional)</span>
                    </label>
                    {{ form.tanggal_lahir }}
                    {% if form.tanggal_lahir.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.tanggal_lahir.errors.0 }}</p>
                    {% endif %}
                </div>

                <div>
                    <label for="{{ form.no_ktp.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        No. KTP <span class="text-gray-500 text-xs">(Opsional)</span>
                    </label>
                    {{ form.no_ktp }}
                    {% if form.no_ktp.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.no_ktp.errors.0 }}</p>
                    {% endif %}
                </div>

                <div class="md:col-span-2">
                    <label for="{{ form.alamat.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Alamat <span class="text-red-500">*</span>
                    </label>
                    {{ form.alamat }}
                    {% if form.alamat.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.alamat.errors.0 }}</p>
                    {% endif %}
                </div>

                <div class="md:col-span-2">
                    <label for="{{ form.instansi.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Instansi/Universitas/Sekolah <span class="text-gray-500 text-xs">(Opsional)</span>
                    </label>
                    {{ form.instansi }}
                    {% if form.instansi.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.instansi.errors.0 }}</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Informasi Pembayaran -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6" id="payment-section">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">
                <i class="fas fa-money-bill-wave text-yellow-500 mr-2"></i>
                Informasi Pembayaran
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="{{ form.biaya_pendaftaran.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Biaya Pendaftaran
                    </label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">Rp</span>
                        {{ form.biaya_pendaftaran }}
                    </div>
                    {% if form.biaya_pendaftaran.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.biaya_pendaftaran.errors.0 }}</p>
                    {% endif %}
                    <p class="mt-1 text-xs text-gray-500">Biaya akan otomatis terisi saat memilih event</p>
                </div>

                <div>
                    <label for="{{ form.payment_status.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Status Pembayaran <span class="text-gray-500 text-xs">(Opsional)</span>
                    </label>
                    {{ form.payment_status }}
                    {% if form.payment_status.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.payment_status.errors.0 }}</p>
                    {% endif %}
                </div>

                <div>
                    <label for="{{ form.payment_method.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Metode Pembayaran <span class="text-gray-500 text-xs">(Opsional)</span>
                    </label>
                    {{ form.payment_method }}
                    {% if form.payment_method.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.payment_method.errors.0 }}</p>
                    {% endif %}
                </div>

                <div>
                    <label for="{{ form.payment_reference.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Nomor Referensi Pembayaran <span class="text-gray-500 text-xs">(Opsional)</span>
                    </label>
                    {{ form.payment_reference }}
                    {% if form.payment_reference.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.payment_reference.errors.0 }}</p>
                    {% endif %}
                    <p class="mt-1 text-xs text-gray-500">Nomor rekening atau referensi transfer</p>
                </div>

                <div class="md:col-span-2">
                    <label for="{{ form.bukti_pembayaran.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Bukti Pembayaran <span class="text-gray-500 text-xs">(Opsional)</span>
                    </label>
                    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md hover:border-blue-400 transition-colors">
                        <div class="space-y-1 text-center">
                            <i class="fas fa-cloud-upload-alt text-gray-400 text-4xl"></i>
                            <div class="flex text-sm text-gray-600">
                                <label for="{{ form.bukti_pembayaran.id_for_label }}" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
                                    <span>Upload file</span>
                                    {{ form.bukti_pembayaran }}
                                </label>
                                <p class="pl-1">atau drag and drop</p>
                            </div>
                            <p class="text-xs text-gray-500">PNG, JPG, GIF hingga 10MB</p>
                        </div>
                    </div>
                    {% if form.bukti_pembayaran.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.bukti_pembayaran.errors.0 }}</p>
                    {% endif %}
                </div>
            </div>

            <!-- Informasi Rekening Bank -->
            {% if bank_accounts %}
            <div class="mt-6 p-4 bg-gray-50 border border-gray-200 rounded-lg">
                <h3 class="text-sm font-semibold text-gray-900 mb-3">
                    <i class="fas fa-university mr-2"></i>
                    Rekening Pembayaran
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% for rekening in bank_accounts %}
                    <div class="bg-white p-4 rounded-lg border border-gray-200 hover:shadow-md transition-shadow">
                        <div class="flex items-start justify-between mb-2">
                            <h4 class="font-semibold text-gray-900 text-sm">{{ rekening.nama_bank }}</h4>
                            {% if rekening.is_active %}
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                Aktif
                            </span>
                            {% endif %}
                        </div>
                        <div class="space-y-1">
                            <p class="text-sm 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-sm 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>

        <!-- Dokumen Pendukung -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">
                <i class="fas fa-file-alt text-purple-500 mr-2"></i>
                Dokumen Pendukung <span class="text-gray-500 text-sm font-normal">(Semua Opsional)</span>
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="{{ form.foto_ktm.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-id-card text-blue-500 mr-1"></i>
                        Kartu Tanda Mahasiswa (KTM)
                        <span class="text-gray-500 text-xs font-normal">(Opsional)</span>
                    </label>
                    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md hover:border-blue-400 transition-colors">
                        <div class="space-y-1 text-center">
                            <i class="fas fa-id-card text-gray-400 text-3xl"></i>
                            <div class="flex text-sm text-gray-600">
                                <label for="{{ form.foto_ktm.id_for_label }}" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500">
                                    <span>Upload KTM</span>
                                    {{ form.foto_ktm }}
                                </label>
                            </div>
                            <p class="text-xs text-gray-500">JPG, PNG hingga 5MB</p>
                        </div>
                    </div>
                    {% if form.foto_ktm.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.foto_ktm.errors.0 }}</p>
                    {% endif %}
                </div>

                <div>
                    <label for="{{ form.foto_ktp.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-id-badge text-green-500 mr-1"></i>
                        Foto KTP
                        <span class="text-gray-500 text-xs font-normal">(Opsional)</span>
                    </label>
                    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md hover:border-blue-400 transition-colors">
                        <div class="space-y-1 text-center">
                            <i class="fas fa-id-badge text-gray-400 text-3xl"></i>
                            <div class="flex text-sm text-gray-600">
                                <label for="{{ form.foto_ktp.id_for_label }}" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500">
                                    <span>Upload KTP</span>
                                    {{ form.foto_ktp }}
                                </label>
                            </div>
                            <p class="text-xs text-gray-500">JPG, PNG hingga 5MB</p>
                        </div>
                    </div>
                    {% if form.foto_ktp.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.foto_ktp.errors.0 }}</p>
                    {% endif %}
                </div>

                <div>
                    <label for="{{ form.surat_rekomendasi.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-file-pdf text-red-500 mr-1"></i>
                        Surat Rekomendasi
                        <span class="text-gray-500 text-xs font-normal">(Opsional)</span>
                    </label>
                    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md hover:border-blue-400 transition-colors">
                        <div class="space-y-1 text-center">
                            <i class="fas fa-file-pdf text-gray-400 text-3xl"></i>
                            <div class="flex text-sm text-gray-600">
                                <label for="{{ form.surat_rekomendasi.id_for_label }}" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500">
                                    <span>Upload File</span>
                                    {{ form.surat_rekomendasi }}
                                </label>
                            </div>
                            <p class="text-xs text-gray-500">PDF, DOC, DOCX hingga 10MB</p>
                        </div>
                    </div>
                    {% if form.surat_rekomendasi.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.surat_rekomendasi.errors.0 }}</p>
                    {% endif %}
                </div>

                <div>
                    <label for="{{ form.dokumen_lainnya.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-file-upload text-purple-500 mr-1"></i>
                        Dokumen Lainnya
                        <span class="text-gray-500 text-xs font-normal">(Opsional)</span>
                    </label>
                    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md hover:border-blue-400 transition-colors">
                        <div class="space-y-1 text-center">
                            <i class="fas fa-file-upload text-gray-400 text-3xl"></i>
                            <div class="flex text-sm text-gray-600">
                                <label for="{{ form.dokumen_lainnya.id_for_label }}" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500">
                                    <span>Upload File</span>
                                    {{ form.dokumen_lainnya }}
                                </label>
                            </div>
                            <p class="text-xs text-gray-500">PDF, DOC, DOCX, JPG, PNG hingga 10MB</p>
                        </div>
                    </div>
                    {% if form.dokumen_lainnya.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.dokumen_lainnya.errors.0 }}</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Catatan -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">
                <i class="fas fa-sticky-note text-orange-500 mr-2"></i>
                Catatan <span class="text-gray-500 text-sm font-normal">(Opsional)</span>
            </h2>
            
            <div>
                <label for="{{ form.catatan.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                    Catatan Tambahan
                </label>
                {{ form.catatan }}
                {% if form.catatan.errors %}
                    <p class="mt-1 text-sm text-red-600">{{ form.catatan.errors.0 }}</p>
                {% endif %}
                <p class="mt-1 text-xs text-gray-500">Berikan informasi tambahan yang mungkin berguna untuk panitia.</p>
            </div>
        </div>

        <!-- Submit Buttons -->
        <div class="flex justify-end space-x-3">
            <a href="{% url 'event_admin:all_registrations' %}" 
               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">
                <i class="fas fa-times mr-2"></i>
                Batal
            </a>
            <button type="submit" 
                    class="inline-flex items-center px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700">
                <i class="fas fa-save mr-2"></i>
                Simpan Registrasi
            </button>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const eventSearch = document.getElementById('event-search');
    const eventSearchResults = document.getElementById('event-search-results');
    const selectedEventInfo = document.getElementById('selected-event-info');
    const eventInput = document.getElementById('id_event');
    const biayaInput = document.getElementById('id_biaya_pendaftaran');
    const paymentSection = document.getElementById('payment-section');
    let searchTimeout;

    // Event search dengan debounce
    eventSearch.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        const query = this.value.trim();
        
        if (query.length < 2) {
            eventSearchResults.classList.add('hidden');
            return;
        }
        
        searchTimeout = setTimeout(function() {
            searchEvents(query);
        }, 300);
    });

    // Hide results when clicking outside
    document.addEventListener('click', function(e) {
        if (!eventSearch.contains(e.target) && !eventSearchResults.contains(e.target)) {
            eventSearchResults.classList.add('hidden');
        }
    });

    function searchEvents(query) {
        const searchUrl = '{% url "event_admin:api_search_events" %}';
        fetch(`${searchUrl}?q=${encodeURIComponent(query)}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.results.length > 0) {
                displaySearchResults(data.results);
            } else {
                eventSearchResults.innerHTML = '<div class="p-4 text-center text-gray-500">Tidak ada event ditemukan</div>';
                eventSearchResults.classList.remove('hidden');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            eventSearchResults.innerHTML = '<div class="p-4 text-center text-red-500">Error saat mencari event</div>';
            eventSearchResults.classList.remove('hidden');
        });
    }

    function displaySearchResults(results) {
        let html = '';
        results.forEach(event => {
            const priceText = event.tipe === 'gratis' ? 'Gratis' : `Rp ${event.biaya_pendaftaran.toLocaleString('id-ID')}`;
            const quotaText = event.is_full ? 
                `<span class="text-red-600">Penuh</span>` : 
                `${event.sisa_kuota} dari ${event.kuota}`;
            
            html += `
                <div class="p-3 hover:bg-gray-50 cursor-pointer border-b border-gray-200 event-result-item" 
                     data-event-id="${event.id}"
                     data-event-price="${event.biaya_pendaftaran}">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <h4 class="font-semibold text-gray-900">${event.judul}</h4>
                            <p class="text-sm text-gray-600 mt-1">
                                <i class="fas fa-map-marker-alt mr-1"></i>${event.lokasi}
                            </p>
                            <p class="text-sm text-gray-600">
                                <i class="fas fa-calendar mr-1"></i>${event.tanggal_mulai}
                            </p>
                            <div class="flex items-center gap-4 mt-2 text-xs">
                                <span class="text-blue-600">${event.kategori}</span>
                                <span class="text-green-600">${priceText}</span>
                                <span>${quotaText}</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });
        
        eventSearchResults.innerHTML = html;
        eventSearchResults.classList.remove('hidden');
        
        // Add click handlers
        document.querySelectorAll('.event-result-item').forEach(item => {
            item.addEventListener('click', function() {
                const eventId = this.getAttribute('data-event-id');
                const eventPrice = this.getAttribute('data-event-price');
                selectEvent(eventId, eventPrice, results.find(e => e.id == eventId));
            });
        });
    }

    function selectEvent(eventId, eventPrice, eventData) {
        eventInput.value = eventId;
        biayaInput.value = eventPrice;
        eventSearch.value = eventData.judul;
        eventSearchResults.classList.add('hidden');
        
        // Update selected event info
        document.getElementById('selected-event-title').textContent = eventData.judul;
        document.getElementById('selected-event-location').textContent = eventData.lokasi;
        document.getElementById('selected-event-date').textContent = `${eventData.tanggal_mulai} - ${eventData.tanggal_selesai}`;
        const priceText = eventData.tipe === 'gratis' ? 'Gratis' : `Rp ${parseFloat(eventPrice).toLocaleString('id-ID')}`;
        document.getElementById('selected-event-price').textContent = priceText;
        document.getElementById('selected-event-quota').textContent = `${eventData.sisa_kuota} dari ${eventData.kuota}`;
        selectedEventInfo.classList.remove('hidden');
        
        // Show/hide payment section based on event type
        if (eventData.tipe === 'berbayar' && parseFloat(eventPrice) > 0) {
            paymentSection.classList.remove('hidden');
        } else {
            paymentSection.classList.add('hidden');
        }
        
        // Fetch full event details
        const detailsUrl = `/admin/event/api/event/${eventId}/details/`;
        fetch(detailsUrl)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Update any additional fields if needed
                }
            });
    }

    // Clear event selection
    document.getElementById('clear-event')?.addEventListener('click', function() {
        eventInput.value = '';
        biayaInput.value = '';
        eventSearch.value = '';
        selectedEventInfo.classList.add('hidden');
        paymentSection.classList.add('hidden');
    });

    // Format currency input
    biayaInput.addEventListener('input', function() {
        const value = this.value.replace(/[^\d.]/g, '');
        this.value = value;
    });
});
</script>

<style>
#event-search-results {
    max-height: 400px;
}

.event-result-item:hover {
    background-color: #f9fafb;
}

.event-result-item:last-child {
    border-bottom: none;
}
</style>
{% endblock %}