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


{% block extra_css %}
{{ form.media.css }}
<style>
    .preview-image {
        max-width: 200px;
        max-height: 200px;
        object-fit: cover;
        border-radius: 8px;
    }
    
    .preview-video {
        max-width: 300px;
        max-height: 200px;
        border-radius: 8px;
    }
    
    .date-error-message {
        animation: fadeIn 0.3s ease-in-out;
        font-weight: 500;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .border-red-500 {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
    }
</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-calendar-alt mr-2 text-blue-600"></i>
                {{ title }}
            </h2>
            <p class="mt-1 text-sm text-gray-500">
                {% if action == 'create' %}Buat event baru dengan fitur lengkap{% else %}Edit event yang sudah ada{% endif %}
            </p>
        </div>
        <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
            <a href="{% url 'event_admin:event_list' %}" 
               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
            </a>
            {% if action == 'edit' %}
            <div class="relative">
                <button type="button" 
                        class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 action-button"
                        onclick="toggleDropdown('detailDropdown')">
                    <i class="fas fa-eye mr-2"></i>
                    Detail
                    <i class="fas fa-chevron-down ml-2"></i>
                </button>
                <div id="detailDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
                    <div class="py-1">
                        <a href="{% url 'event_admin:event_detail' event.id %}" 
                           class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-info-circle mr-2"></i>
                            Informasi Event
                        </a>
                        <a href="{% url 'event_admin:event_registrations' event.id %}" 
                           class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-users mr-2"></i>
                            Daftar Peserta
                        </a>
                        <a href="{% url 'event_admin:event_analytics' event.id %}" 
                           class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-chart-bar mr-2"></i>
                            Analytics
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="relative">
                <button type="button" 
                        class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 action-button"
                        onclick="toggleDropdown('previewDropdown')">
                    <i class="fas fa-external-link-alt mr-2"></i>
                    Preview
                    <i class="fas fa-chevron-down ml-2"></i>
                </button>
                <div id="previewDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
                    <div class="py-1">
                        <a href="{% url 'event:event_detail' event.slug %}" 
                           target="_blank"
                           class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-eye mr-2"></i>
                            Lihat Event
                        </a>
                        {% if event and event.slug %}
                        <a href="{% url 'event:event_register' event.slug %}" 
                           target="_blank"
                           class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-user-plus mr-2"></i>
                            Link Registrasi
                        </a>
                        <button onclick="copyRegistrationLink()" 
                                class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-copy mr-2"></i>
                            Copy Link Registrasi
                        </button>
                        {% else %}
                        <div class="block px-4 py-2 text-sm text-gray-400">
                            <i class="fas fa-info-circle mr-2"></i>
                            Simpan event terlebih dahulu untuk melihat link registrasi
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    
    <!-- Form -->
    <form method="POST" enctype="multipart/form-data" id="eventForm" class="space-y-6">
        {% csrf_token %}
        
        <!-- Informasi Dasar -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 card-hover">
            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center border-b border-gray-200 pb-3">
                <i class="fas fa-info-circle text-blue-500 mr-3"></i>
                Informasi Dasar
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="md:col-span-2">
                    <label for="{{ form.judul.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-heading text-blue-500 mr-2"></i>
                        Judul Event *
                    </label>
                    <input type="text" 
                           name="judul" 
                           id="{{ form.judul.id_for_label }}" 
                           value="{{ form.judul.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                           placeholder="Masukkan judul event">
                    {% if form.judul.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.judul.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div>
                    <label for="{{ form.slug.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-link text-green-500 mr-2"></i>
                        Slug URL
                    </label>
                    <input type="text" 
                           name="slug" 
                           id="{{ form.slug.id_for_label }}" 
                           value="{{ form.slug.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors"
                           placeholder="url-slug-event">
                    {% if form.slug.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.slug.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div>
                    <label for="{{ form.kategori.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-tags text-purple-500 mr-2"></i>
                        Kategori
                    </label>
                    <select name="kategori" 
                            id="{{ form.kategori.id_for_label }}"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors">
                        <option value="">Pilih Kategori</option>
                        <option value="seminar" {% if form.kategori.value == 'seminar' %}selected{% endif %}>Seminar</option>
                        <option value="workshop" {% if form.kategori.value == 'workshop' %}selected{% endif %}>Workshop</option>
                        <option value="pelatihan" {% if form.kategori.value == 'pelatihan' %}selected{% endif %}>Pelatihan</option>
                        <option value="konferensi" {% if form.kategori.value == 'konferensi' %}selected{% endif %}>Konferensi</option>
                        <option value="webinar" {% if form.kategori.value == 'webinar' %}selected{% endif %}>Webinar</option>
                        <option value="lomba" {% if form.kategori.value == 'lomba' %}selected{% endif %}>Lomba</option>
                        <option value="festival" {% if form.kategori.value == 'festival' %}selected{% endif %}>Festival</option>
                        <option value="lainnya" {% if form.kategori.value == 'lainnya' %}selected{% endif %}>Lainnya</option>
                    </select>
                    {% if form.kategori.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.kategori.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div class="md:col-span-2">
                    <label for="{{ form.deskripsi_singkat.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-align-left text-orange-500 mr-2"></i>
                        Deskripsi Singkat
                    </label>
                    <input type="text" 
                           name="deskripsi_singkat" 
                           id="{{ form.deskripsi_singkat.id_for_label }}" 
                           value="{{ form.deskripsi_singkat.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors"
                           placeholder="Deskripsi singkat event">
                    {% if form.deskripsi_singkat.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.deskripsi_singkat.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div class="md:col-span-2">
                    <label for="{{ form.deskripsi.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-file-alt text-indigo-500 mr-2"></i>
                        Deskripsi Lengkap *
                    </label>
                    {{ form.deskripsi }}
                    {% if form.deskripsi.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.deskripsi.errors.0 }}
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Lokasi & Waktu -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 card-hover">
            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center border-b border-gray-200 pb-3">
                <i class="fas fa-map-marker-alt text-red-500 mr-3"></i>
                Lokasi & Waktu
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="{{ form.lokasi.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-building text-red-500 mr-2"></i>
                        Lokasi *
                    </label>
                    <input type="text" 
                           name="lokasi" 
                           id="{{ form.lokasi.id_for_label }}" 
                           value="{{ form.lokasi.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors"
                           placeholder="Masukkan lokasi event">
                    {% if form.lokasi.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.lokasi.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-globe text-blue-500 mr-2"></i>
                        Event Online
                    </label>
                    <div class="flex items-center p-4 bg-gray-50 rounded-lg">
                        <input type="checkbox" 
                               name="is_online" 
                               id="{{ form.is_online.id_for_label }}" 
                               {% if form.is_online.value %}checked{% endif %}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="{{ form.is_online.id_for_label }}" class="ml-3 text-sm text-gray-700">
                            Centang jika event online
                        </label>
                    </div>
                </div>
                
                <div class="md:col-span-2">
                    <label for="{{ form.alamat_lengkap.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-map text-gray-500 mr-2"></i>
                        Alamat Lengkap
                    </label>
                    <textarea name="alamat_lengkap" 
                              id="{{ form.alamat_lengkap.id_for_label }}" 
                              rows="3"
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-gray-500 transition-colors resize-none"
                              placeholder="Masukkan alamat lengkap event">{{ form.alamat_lengkap.value|default:'' }}</textarea>
                    {% if form.alamat_lengkap.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.alamat_lengkap.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div>
                    <label for="{{ form.tanggal_mulai.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-calendar text-green-500 mr-2"></i>
                        Tanggal Mulai *
                    </label>
                    <input type="datetime-local" 
                           name="tanggal_mulai" 
                           id="{{ form.tanggal_mulai.id_for_label }}" 
                           value="{{ form.tanggal_mulai.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors">
                    {% if form.tanggal_mulai.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.tanggal_mulai.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div>
                    <label for="{{ form.tanggal_selesai.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-calendar text-green-500 mr-2"></i>
                        Tanggal Selesai *
                    </label>
                    <input type="datetime-local" 
                           name="tanggal_selesai" 
                           id="{{ form.tanggal_selesai.id_for_label }}" 
                           value="{{ form.tanggal_selesai.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors">
                    {% if form.tanggal_selesai.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.tanggal_selesai.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div>
                    <label for="{{ form.waktu_mulai.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-clock text-blue-500 mr-2"></i>
                        Waktu Mulai
                    </label>
                    <input type="time" 
                           name="waktu_mulai" 
                           id="{{ form.waktu_mulai.id_for_label }}" 
                           value="{{ form.waktu_mulai.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                    {% if form.waktu_mulai.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.waktu_mulai.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div>
                    <label for="{{ form.waktu_selesai.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-clock text-blue-500 mr-2"></i>
                        Waktu Selesai
                    </label>
                    <input type="time" 
                           name="waktu_selesai" 
                           id="{{ form.waktu_selesai.id_for_label }}" 
                           value="{{ form.waktu_selesai.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                    {% if form.waktu_selesai.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.waktu_selesai.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div class="md:col-span-2">
                    <label for="{{ form.batas_pendaftaran.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-stopwatch text-orange-500 mr-2"></i>
                        Batas Pendaftaran *
                    </label>
                    <input type="datetime-local" 
                           name="batas_pendaftaran" 
                           id="{{ form.batas_pendaftaran.id_for_label }}" 
                           value="{{ form.batas_pendaftaran.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
                    {% if form.batas_pendaftaran.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.batas_pendaftaran.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div id="link-meeting-field" style="display: none;" class="md:col-span-2">
                    <label for="{{ form.link_meeting.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-video text-purple-500 mr-2"></i>
                        Link Meeting
                    </label>
                    <input type="url" 
                           name="link_meeting" 
                           id="{{ form.link_meeting.id_for_label }}" 
                           value="{{ form.link_meeting.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors"
                           placeholder="https://zoom.us/j/... atau https://meet.google.com/...">
                    {% if form.link_meeting.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.link_meeting.errors.0 }}
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Pendaftaran & Harga -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 card-hover">
            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center border-b border-gray-200 pb-3">
                <i class="fas fa-users text-green-500 mr-3"></i>
                Pendaftaran & Harga
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="{{ form.kuota.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-user-plus text-green-500 mr-2"></i>
                        Kuota Peserta *
                    </label>
                    <input type="number" 
                           name="kuota" 
                           id="{{ form.kuota.id_for_label }}" 
                           value="{{ form.kuota.value|default:'' }}"
                           min="1"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors"
                           placeholder="Masukkan kuota peserta">
                    {% if form.kuota.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.kuota.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div>
                    <label for="{{ form.tipe.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-tag text-blue-500 mr-2"></i>
                        Tipe Event *
                    </label>
                    <select name="tipe" 
                            id="{{ form.tipe.id_for_label }}"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                        <option value="">Pilih Tipe Event</option>
                        <option value="gratis" {% if form.tipe.value == 'gratis' %}selected{% endif %}>Gratis</option>
                        <option value="berbayar" {% if form.tipe.value == 'berbayar' %}selected{% endif %}>Berbayar</option>
                    </select>
                    {% if form.tipe.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.tipe.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div id="harga-field" style="display: none;">
                    <label for="{{ form.harga.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-money-bill text-green-500 mr-2"></i>
                        Harga Event
                    </label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">Rp</span>
                        <input type="text" 
                               name="harga" 
                               id="{{ form.harga.id_for_label }}" 
                               value="{% if form.harga.value %}{{ form.harga.value|number_idr }}{% endif %}"
                               class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors"
                               placeholder="0"
                               data-original-value="{{ form.harga.value|default:0 }}">
                    </div>
                    {% if form.harga.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.harga.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div>
                    <label for="{{ form.biaya_pendaftaran.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-credit-card text-yellow-500 mr-2"></i>
                        Biaya Pendaftaran
                    </label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">Rp</span>
                        <input type="text" 
                               name="biaya_pendaftaran" 
                               id="{{ form.biaya_pendaftaran.id_for_label }}" 
                               value="{% if form.biaya_pendaftaran.value %}{{ form.biaya_pendaftaran.value|number_idr }}{% endif %}"
                               class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 transition-colors"
                               placeholder="0"
                               data-original-value="{{ form.biaya_pendaftaran.value|default:0 }}">
                    </div>
                    {% if form.biaya_pendaftaran.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.biaya_pendaftaran.errors.0 }}
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Media -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 card-hover">
            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center border-b border-gray-200 pb-3">
                <i class="fas fa-images text-purple-500 mr-3"></i>
                Media & Konten
                <span class="ml-2 text-sm text-gray-500 font-normal">(Opsional)</span>
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="{{ form.gambar_utama.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-image text-purple-500 mr-2"></i>
                        Gambar Utama
                    </label>
                    <input type="file" 
                           name="gambar_utama" 
                           id="id_gambar_utama" 
                           accept="image/*,.jpg,.jpeg,.png,.gif,.webp"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors">
                    <div id="gambar_preview_container" class="mt-3"></div>
                    {% if form.gambar_utama.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.gambar_utama.errors.0 }}
                        </p>
                    {% endif %}
                    {% if action == 'edit' and event.gambar_utama %}
                        <div class="mt-4">
                            <img src="{{ event.gambar_utama.url }}" alt="Current image" class="preview-image">
                            <p class="text-xs text-gray-500 mt-1">Gambar saat ini</p>
                        </div>
                    {% endif %}
                </div>
                
                <div>
                    <label for="{{ form.video_promosi.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-video text-red-500 mr-2"></i>
                        Video Promosi
                    </label>
                    <input type="file" 
                           name="video_promosi" 
                           id="id_video_promosi" 
                           accept="video/*,.mp4,.avi,.mov,.webm,.mkv"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors">
                    <div id="video_preview_container" class="mt-3"></div>
                    {% if form.video_promosi.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.video_promosi.errors.0 }}
                        </p>
                    {% endif %}
                    {% if action == 'edit' and event.video_promosi %}
                        <div class="mt-4">
                            <video controls class="preview-video">
                                <source src="{{ event.video_promosi.url }}" type="video/mp4">
                                Browser tidak mendukung video.
                            </video>
                            <p class="text-xs text-gray-500 mt-1">Video saat ini</p>
                        </div>
                    {% endif %}
                </div>
                
                <div>
                    <label for="{{ form.tiktok_url.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fab fa-tiktok text-black mr-2"></i>
                        Link TikTok
                    </label>
                    <input type="url" 
                           name="tiktok_url" 
                           id="{{ form.tiktok_url.id_for_label }}" 
                           value="{{ form.tiktok_url.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-black focus:border-black transition-colors"
                           placeholder="https://tiktok.com/@username">
                    {% if form.tiktok_url.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.tiktok_url.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div>
                    <label for="{{ form.youtube_url.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fab fa-youtube text-red-500 mr-2"></i>
                        Link YouTube
                    </label>
                    <input type="url" 
                           name="youtube_url" 
                           id="{{ form.youtube_url.id_for_label }}" 
                           value="{{ form.youtube_url.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors"
                           placeholder="https://youtube.com/watch?v=...">
                    {% if form.youtube_url.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.youtube_url.errors.0 }}
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Panitia -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 card-hover">
            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center border-b border-gray-200 pb-3">
                <i class="fas fa-users-cog text-indigo-500 mr-3"></i>
                Panitia Event
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="ketua_panitia_search" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-crown text-yellow-500 mr-2"></i>
                        Ketua Panitia *
                    </label>
                    <div class="relative">
                        <input type="text" 
                               id="ketua_panitia_search"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 transition-colors"
                               placeholder="Cari ketua panitia..."
                               autocomplete="off">
                        <input type="hidden" 
                               name="ketua_panitia" 
                               id="{{ form.ketua_panitia.id_for_label }}"
                               value="{{ form.ketua_panitia.value|default:'' }}">
                        <div id="ketua_panitia_dropdown" class="hidden absolute z-10 w-full bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                            <!-- Search results will be populated here -->
                        </div>
                    </div>
                    {% if form.ketua_panitia.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.ketua_panitia.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div>
                    <label for="panitia_search" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-user-friends text-blue-500 mr-2"></i>
                        Anggota Panitia
                    </label>
                    <div class="relative">
                        <input type="text" 
                               id="panitia_search"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                               placeholder="Cari anggota panitia..."
                               autocomplete="off">
                        <!-- Multiple hidden inputs for panitia -->
                        {% for user_id in form.panitia.value %}
                        <input type="hidden" 
                               name="panitia" 
                               value="{{ user_id }}">
                        {% endfor %}
                        <div id="panitia_dropdown" class="hidden absolute z-10 w-full bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                            <!-- Search results will be populated here -->
                        </div>
                    </div>
                    <div id="selected_panitia" class="mt-2 flex flex-wrap gap-2">
                        <!-- Selected panitia will be displayed here -->
                    </div>
                    {% if form.panitia.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.panitia.errors.0 }}
                        </p>
                    {% endif %}
                    <p class="text-xs text-gray-500 mt-2 flex items-center">
                        <i class="fas fa-info-circle mr-1"></i>
                        Ketik untuk mencari dan pilih anggota panitia
                    </p>
                </div>
            </div>
        </div>
        
        <!-- Kontak -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 card-hover">
            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center border-b border-gray-200 pb-3">
                <i class="fas fa-phone text-green-500 mr-3"></i>
                Informasi Kontak
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="{{ form.kontak_person.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-user text-green-500 mr-2"></i>
                        Kontak Person
                    </label>
                    <input type="text" 
                           name="kontak_person" 
                           id="{{ form.kontak_person.id_for_label }}" 
                           value="{{ form.kontak_person.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors"
                           placeholder="Nama kontak person">
                    {% if form.kontak_person.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.kontak_person.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">
                        <i class="fas fa-phone text-green-500 mr-2"></i>
                        No. Telepon
                    </label>
                    <input type="tel" 
                           name="no_telepon" 
                           id="{{ form.no_telepon.id_for_label }}" 
                           value="{{ form.no_telepon.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors"
                           placeholder="08xxxxxxxxxx">
                    {% if form.no_telepon.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.no_telepon.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div class="md:col-span-2">
                    <label for="{{ form.email_kontak.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-envelope text-green-500 mr-2"></i>
                        Email Kontak
                    </label>
                    <input type="email" 
                           name="email_kontak" 
                           id="{{ form.email_kontak.id_for_label }}" 
                           value="{{ form.email_kontak.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors"
                           placeholder="email@example.com">
                    {% if form.email_kontak.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.email_kontak.errors.0 }}
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Status & Pengaturan -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 card-hover">
            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center border-b border-gray-200 pb-3">
                <i class="fas fa-cog text-gray-500 mr-3"></i>
                Status & Pengaturan
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="{{ form.status.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-flag text-blue-500 mr-2"></i>
                        Status Event *
                    </label>
                    <select name="status" 
                            id="{{ form.status.id_for_label }}"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                        <option value="">Pilih Status</option>
                        <option value="draft" {% if form.status.value == 'draft' %}selected{% endif %}>Draft</option>
                        <option value="published" {% if form.status.value == 'published' %}selected{% endif %}>Published</option>
                        <option value="ongoing" {% if form.status.value == 'ongoing' %}selected{% endif %}>Ongoing</option>
                        <option value="completed" {% if form.status.value == 'completed' %}selected{% endif %}>Completed</option>
                        <option value="cancelled" {% if form.status.value == 'cancelled' %}selected{% endif %}>Cancelled</option>
                    </select>
                    {% if form.status.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.status.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-star text-yellow-500 mr-2"></i>
                        Event Unggulan
                    </label>
                    <div class="flex items-center p-4 bg-gray-50 rounded-lg">
                        <input type="checkbox" 
                               name="is_featured" 
                               id="{{ form.is_featured.id_for_label }}" 
                               {% if form.is_featured.value %}checked{% endif %}
                               class="h-4 w-4 text-yellow-600 focus:ring-yellow-500 border-gray-300 rounded">
                        <label for="{{ form.is_featured.id_for_label }}" class="ml-3 text-sm text-gray-700">
                            Tampilkan sebagai event unggulan
                        </label>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Action Buttons -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
            <div class="flex flex-col sm:flex-row items-center justify-end space-y-3 sm:space-y-0 sm:space-x-4">
                <a href="{% url 'event_admin:event_list' %}" 
                   class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 action-button transition-all duration-200">
                    <i class="fas fa-times mr-2"></i>
                    Batal
                </a>
                <button type="submit" 
                        class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 action-button transition-all duration-200">
                    <i class="fas fa-save mr-2"></i>
                    {% if action == 'create' %}Simpan Event{% else %}Update Event{% endif %}
                </button>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Show/hide harga field based on tipe selection
    const tipeField = document.querySelector('select[name="tipe"]');
    const hargaField = document.getElementById('harga-field');
    const isOnlineField = document.querySelector('input[name="is_online"]');
    const linkMeetingField = document.getElementById('link-meeting-field');
    
    function toggleHargaField() {
        if (tipeField && hargaField) {
            if (tipeField.value === 'berbayar') {
                hargaField.style.display = 'block';
            } else {
                hargaField.style.display = 'none';
            }
        }
    }
    
    function toggleLinkMeetingField() {
        if (isOnlineField && linkMeetingField) {
            if (isOnlineField.checked) {
                linkMeetingField.style.display = 'block';
            } else {
                linkMeetingField.style.display = 'none';
            }
        }
    }
    
    if (tipeField && hargaField) {
        tipeField.addEventListener('change', toggleHargaField);
        toggleHargaField(); // Initial call
    }
    
    if (isOnlineField && linkMeetingField) {
        isOnlineField.addEventListener('change', toggleLinkMeetingField);
        toggleLinkMeetingField(); // Initial call
    }
    
    // Auto-generate slug from judul
    const judulField = document.querySelector('input[name="judul"]');
    const slugField = document.querySelector('input[name="slug"]');
    
    if (judulField && slugField) {
        judulField.addEventListener('input', function() {
            const slug = this.value
                .toLowerCase()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .trim('-');
            slugField.value = slug;
        });
    }
    
    // Simple file upload preview
    const fileInputs = document.querySelectorAll('input[type="file"]');
    fileInputs.forEach(input => {
        input.addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                let previewContainer;
                
                if (this.id === 'id_gambar_utama') {
                    previewContainer = document.getElementById('gambar_preview_container');
                } else if (this.id === 'id_video_promosi') {
                    previewContainer = document.getElementById('video_preview_container');
                }
                
                if (!previewContainer) return;
                
                // Clear previous preview
                previewContainer.innerHTML = '';
                
                // Show preview based on file type
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewContainer.innerHTML = `
                            <div class="relative">
                                <img src="${e.target.result}" alt="Preview" class="preview-image">
                                <p class="text-xs text-gray-500 mt-1">Preview: ${file.name}</p>
                                <button type="button" onclick="removeFilePreview('${input.id}')" class="absolute top-2 right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        `;
                    };
                    reader.readAsDataURL(file);
                } else if (file.type.startsWith('video/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewContainer.innerHTML = `
                            <div class="relative">
                                <video controls class="preview-video">
                                    <source src="${e.target.result}" type="${file.type}">
                                    Browser tidak mendukung video.
                                </video>
                                <p class="text-xs text-gray-500 mt-1">Preview: ${file.name}</p>
                                <button type="button" onclick="removeFilePreview('${input.id}')" class="absolute top-2 right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        `;
                    };
                    reader.readAsDataURL(file);
                }
            }
        });
    });
    
    // Format currency to Indonesian format
    function formatCurrency(input) {
        let value = input.value.replace(/[^\d]/g, '');
        if (value) {
            value = parseInt(value);
            input.value = value.toLocaleString('id-ID');
        }
    }
    
    // Convert formatted currency back to number for form submission
    function convertCurrencyToNumber(input) {
        let value = input.value.replace(/[^\d]/g, '');
        if (value) {
            input.value = value;
        }
    }
    
    // Format currency inputs
    const currencyInputs = document.querySelectorAll('input[name="harga"], input[name="biaya_pendaftaran"]');
    currencyInputs.forEach(input => {
        input.addEventListener('input', function() {
            formatCurrency(this);
        });
        
        input.addEventListener('blur', function() {
            formatCurrency(this);
        });
    });
    
    // Real-time date validation
    function validateDateRealTime() {
        const tanggalMulai = document.getElementById('id_tanggal_mulai');
        const tanggalSelesai = document.getElementById('id_tanggal_selesai');
        const batasPendaftaran = document.getElementById('id_batas_pendaftaran');
        const now = new Date();
        
        // Clear previous error styling
        [tanggalMulai, tanggalSelesai, batasPendaftaran].forEach(field => {
            if (field) {
                field.classList.remove('border-red-500');
            }
        });
        
        // Validate tanggal mulai
        if (tanggalMulai && tanggalMulai.value) {
            const mulai = new Date(tanggalMulai.value);
            if (mulai <= now) {
                tanggalMulai.classList.add('border-red-500');
                showDateError(tanggalMulai, 'Tanggal mulai tidak boleh di masa lalu');
            } else {
                hideDateError(tanggalMulai);
            }
        }
        
        // Validate tanggal selesai
        if (tanggalMulai && tanggalSelesai && tanggalMulai.value && tanggalSelesai.value) {
            const mulai = new Date(tanggalMulai.value);
            const selesai = new Date(tanggalSelesai.value);
            if (mulai >= selesai) {
                tanggalSelesai.classList.add('border-red-500');
                showDateError(tanggalSelesai, 'Tanggal selesai harus setelah tanggal mulai');
            } else {
                hideDateError(tanggalSelesai);
            }
        }
        
        // Validate batas pendaftaran
        if (batasPendaftaran && batasPendaftaran.value) {
            const batas = new Date(batasPendaftaran.value);
            if (batas <= now) {
                batasPendaftaran.classList.add('border-red-500');
                showDateError(batasPendaftaran, 'Batas pendaftaran tidak boleh di masa lalu');
            } else if (tanggalMulai && tanggalMulai.value) {
                const mulai = new Date(tanggalMulai.value);
                if (batas >= mulai) {
                    batasPendaftaran.classList.add('border-red-500');
                    showDateError(batasPendaftaran, 'Batas pendaftaran harus sebelum tanggal mulai event');
                } else {
                    hideDateError(batasPendaftaran);
                }
            } else {
                hideDateError(batasPendaftaran);
            }
        }
    }
    
    function showDateError(field, message) {
        hideDateError(field);
        const errorDiv = document.createElement('div');
        errorDiv.className = 'date-error-message text-red-500 text-xs mt-1';
        errorDiv.textContent = message;
        field.parentNode.appendChild(errorDiv);
    }
    
    function hideDateError(field) {
        const existingError = field.parentNode.querySelector('.date-error-message');
        if (existingError) {
            existingError.remove();
        }
    }
    
    // Add real-time validation to date fields
    const dateFields = ['id_tanggal_mulai', 'id_tanggal_selesai', 'id_batas_pendaftaran'];
    dateFields.forEach(fieldId => {
        const field = document.getElementById(fieldId);
        if (field) {
            field.addEventListener('change', validateDateRealTime);
            field.addEventListener('blur', validateDateRealTime);
        }
    });
    
    // Form validation
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(e) {
            // Clear previous error styling
            document.querySelectorAll('.border-red-500').forEach(el => {
                el.classList.remove('border-red-500');
            });
            
            const requiredFields = form.querySelectorAll('input[required], select[required], textarea[required]');
            let isValid = true;
            let errorMessages = [];
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    field.classList.add('border-red-500');
                    isValid = false;
                    const fieldName = field.previousElementSibling?.textContent || field.name;
                    errorMessages.push(`${fieldName} wajib diisi`);
                }
            });
            
            // Validate date fields
            const tanggalMulai = document.getElementById('id_tanggal_mulai');
            const tanggalSelesai = document.getElementById('id_tanggal_selesai');
            const batasPendaftaran = document.getElementById('id_batas_pendaftaran');
            const now = new Date();
            
            // Validate tanggal mulai (tidak boleh di masa lalu)
            if (tanggalMulai && tanggalMulai.value) {
                const mulai = new Date(tanggalMulai.value);
                if (mulai <= now) {
                    isValid = false;
                    errorMessages.push('Tanggal mulai event tidak boleh di masa lalu');
                    tanggalMulai.classList.add('border-red-500');
                }
            }
            
            // Validate tanggal selesai (harus setelah tanggal mulai)
            if (tanggalMulai && tanggalSelesai && tanggalMulai.value && tanggalSelesai.value) {
                const mulai = new Date(tanggalMulai.value);
                const selesai = new Date(tanggalSelesai.value);
                
                if (mulai >= selesai) {
                    isValid = false;
                    errorMessages.push('Tanggal selesai harus setelah tanggal mulai');
                    tanggalSelesai.classList.add('border-red-500');
                }
            }
            
            // Validate batas pendaftaran (harus sebelum tanggal mulai dan tidak di masa lalu)
            if (batasPendaftaran && batasPendaftaran.value) {
                const batas = new Date(batasPendaftaran.value);
                
                // Cek tidak boleh di masa lalu
                if (batas <= now) {
                    isValid = false;
                    errorMessages.push('Batas pendaftaran tidak boleh di masa lalu');
                    batasPendaftaran.classList.add('border-red-500');
                }
                
                // Cek harus sebelum tanggal mulai event
                if (tanggalMulai && tanggalMulai.value) {
                    const mulai = new Date(tanggalMulai.value);
                    if (batas >= mulai) {
                        isValid = false;
                        errorMessages.push('Batas pendaftaran harus sebelum tanggal mulai event');
                        batasPendaftaran.classList.add('border-red-500');
                    }
                }
            }
            
            // Validate currency fields
            const hargaField = document.getElementById('id_harga');
            const biayaField = document.getElementById('id_biaya_pendaftaran');
            
            if (hargaField && hargaField.value) {
                const harga = parseFloat(hargaField.value.replace(/[^\d]/g, ''));
                if (isNaN(harga) || harga < 0) {
                    isValid = false;
                    errorMessages.push('Harga harus berupa angka yang valid');
                    hargaField.classList.add('border-red-500');
                }
            }
            
            if (biayaField && biayaField.value) {
                const biaya = parseFloat(biayaField.value.replace(/[^\d]/g, ''));
                if (isNaN(biaya) || biaya < 0) {
                    isValid = false;
                    errorMessages.push('Biaya pendaftaran harus berupa angka yang valid');
                    biayaField.classList.add('border-red-500');
                }
            }
            
            if (!isValid) {
                e.preventDefault();
                let errorText = 'Form tidak valid:\n';
                errorMessages.forEach(msg => {
                    errorText += `• ${msg}\n`;
                });
                alert(errorText);
                return false;
            }
            
            // Convert currency fields back to numbers before submission
            currencyInputs.forEach(input => {
                convertCurrencyToNumber(input);
            });
            
            // Show loading state
            const submitBtn = form.querySelector('button[type="submit"]');
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Menyimpan...';
            }
        });
    }
});

// Dropdown functions
function toggleDropdown(dropdownId) {
    const dropdown = document.getElementById(dropdownId);
    const allDropdowns = document.querySelectorAll('[id$="Dropdown"]');
    
    // Close all other dropdowns
    allDropdowns.forEach(dd => {
        if (dd.id !== dropdownId) {
            dd.classList.add('hidden');
        }
    });
    
    // Toggle current dropdown
    dropdown.classList.toggle('hidden');
}

// Copy registration link
function copyRegistrationLink() {
    {% if event and event.slug %}
    const registrationUrl = "{{ request.scheme }}://{{ request.get_host }}{% url 'event:event_register' event.slug %}";
    
    navigator.clipboard.writeText(registrationUrl).then(function() {
        // Show success message
        const button = event.target;
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check mr-2"></i>Copied!';
        button.classList.add('text-green-600');
        
        setTimeout(() => {
            button.innerHTML = originalText;
            button.classList.remove('text-green-600');
        }, 2000);
    }).catch(function(err) {
        console.error('Could not copy text: ', err);
        alert('Gagal menyalin link. Silakan copy manual: ' + registrationUrl);
    });
    {% else %}
    alert('Simpan event terlebih dahulu untuk mendapatkan link registrasi');
    {% endif %}
}

// Close dropdowns when clicking outside
document.addEventListener('click', function(event) {
    const dropdowns = document.querySelectorAll('[id$="Dropdown"]');
    dropdowns.forEach(dropdown => {
        if (!dropdown.contains(event.target) && !event.target.closest('button[onclick*="toggleDropdown"]')) {
            dropdown.classList.add('hidden');
        }
    });
});

// Search functionality for panitia
const users = [
    {% for user in users %}
    {
        id: {{ user.id }},
        name: "{{ user.nama_lengkap }}",
        email: "{{ user.email }}"
    }{% if not forloop.last %},{% endif %}
    {% endfor %}
];

// Ketua Panitia Search
const ketuaPanitiaSearch = document.getElementById('ketua_panitia_search');
const ketuaPanitiaDropdown = document.getElementById('ketua_panitia_dropdown');
const ketuaPanitiaHidden = document.getElementById('{{ form.ketua_panitia.id_for_label }}');

ketuaPanitiaSearch.addEventListener('input', function() {
    const query = this.value.toLowerCase();
    if (query.length < 2) {
        ketuaPanitiaDropdown.classList.add('hidden');
        return;
    }
    
    const filteredUsers = users.filter(user => 
        user.name.toLowerCase().includes(query) || 
        user.email.toLowerCase().includes(query)
    );
    
    ketuaPanitiaDropdown.innerHTML = filteredUsers.map(user => `
        <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0" 
             onclick="selectKetuaPanitia(${user.id}, '${user.name}', '${user.email}')">
            <div class="font-medium text-gray-900">${user.name}</div>
            <div class="text-sm text-gray-500">${user.email}</div>
        </div>
    `).join('');
    
    ketuaPanitiaDropdown.classList.remove('hidden');
});

function selectKetuaPanitia(id, name, email) {
    ketuaPanitiaSearch.value = `${name} (${email})`;
    ketuaPanitiaHidden.value = id;
    ketuaPanitiaDropdown.classList.add('hidden');
}

// Anggota Panitia Search
const panitiaSearch = document.getElementById('panitia_search');
const panitiaDropdown = document.getElementById('panitia_dropdown');
const selectedPanitiaDiv = document.getElementById('selected_panitia');

let selectedPanitia = [];

// Load existing selected panitia
{% if form.panitia.value %}
selectedPanitia = [
    {% for user_id in form.panitia.value %}
    {% for user in users %}
    {% if user.id == user_id %}
    {
        id: {{ user.id }},
        name: "{{ user.nama_lengkap }}",
        email: "{{ user.email }}"
    }{% if not forloop.last %},{% endif %}
    {% endif %}
    {% endfor %}
    {% endfor %}
];
// Initialize hidden inputs for existing panitia
updateSelectedPanitia();
{% endif %}

panitiaSearch.addEventListener('input', function() {
    const query = this.value.toLowerCase();
    if (query.length < 2) {
        panitiaDropdown.classList.add('hidden');
        return;
    }
    
    const filteredUsers = users.filter(user => 
        (user.name.toLowerCase().includes(query) || 
         user.email.toLowerCase().includes(query)) &&
        !selectedPanitia.some(selected => selected.id === user.id)
    );
    
    panitiaDropdown.innerHTML = filteredUsers.map(user => `
        <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0" 
             onclick="selectPanitia(${user.id}, '${user.name}', '${user.email}')">
            <div class="font-medium text-gray-900">${user.name}</div>
            <div class="text-sm text-gray-500">${user.email}</div>
        </div>
    `).join('');
    
    panitiaDropdown.classList.remove('hidden');
});

function selectPanitia(id, name, email) {
    selectedPanitia.push({id, name, email});
    panitiaSearch.value = '';
    panitiaDropdown.classList.add('hidden');
    updateSelectedPanitia();
}

function removePanitia(id) {
    selectedPanitia = selectedPanitia.filter(user => user.id !== id);
    updateSelectedPanitia();
}

function updateSelectedPanitia() {
    selectedPanitiaDiv.innerHTML = selectedPanitia.map(user => `
        <div class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800">
            <span>${user.name}</span>
            <button type="button" onclick="removePanitia(${user.id})" class="ml-2 text-blue-600 hover:text-blue-800">
                <i class="fas fa-times"></i>
            </button>
        </div>
    `).join('');
    
    // Remove existing hidden inputs
    const existingInputs = document.querySelectorAll('input[name="panitia"]');
    existingInputs.forEach(input => input.remove());
    
    // Add new hidden inputs for each selected panitia
    selectedPanitia.forEach(user => {
        const hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.name = 'panitia';
        hiddenInput.value = user.id;
        panitiaSearch.parentNode.appendChild(hiddenInput);
    });
}

// Remove file preview function
function removeFilePreview(fileInputId) {
    const fileInput = document.getElementById(fileInputId);
    
    // Clear file input
    fileInput.value = '';
    
    // Clear preview container
    if (fileInputId === 'id_gambar_utama') {
        document.getElementById('gambar_preview_container').innerHTML = '';
    } else if (fileInputId === 'id_video_promosi') {
        document.getElementById('video_preview_container').innerHTML = '';
    }
}

// Close dropdowns when clicking outside
document.addEventListener('click', function(event) {
    if (!ketuaPanitiaSearch.contains(event.target) && !ketuaPanitiaDropdown.contains(event.target)) {
        ketuaPanitiaDropdown.classList.add('hidden');
    }
    if (!panitiaSearch.contains(event.target) && !panitiaDropdown.contains(event.target)) {
        panitiaDropdown.classList.add('hidden');
    }
});
</script>
{{ form.media.js }}
{% endblock %}