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



{% block content %}
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-6 space-y-4 lg:space-y-6">
    <!-- Header -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 lg:p-6 hover:shadow-md transition-all duration-300 hover:-translate-y-0.5">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
            <div class="flex-1 min-w-0 mb-4 lg:mb-0">
                <div class="flex items-center mb-2">
                    <i class="fas fa-calendar-alt text-blue-600 mr-2 text-lg"></i>
                    <h1 class="text-xl lg:text-2xl font-bold text-gray-900 truncate">{{ event.judul }}</h1>
                </div>
                <div class="flex flex-col sm:flex-row sm:items-center text-sm text-gray-500 space-y-1 sm:space-y-0 sm:space-x-4">
                    <div class="flex items-center">
                        <i class="fas fa-map-marker-alt mr-1"></i>
                        <span>{{ event.lokasi }}</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-clock mr-1"></i>
                        <span>{{ event.tanggal_mulai|date:"d M Y, H:i" }}</span>
                    </div>
                    <div class="flex items-center">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wide
                            {% if event.status == 'published' %}bg-green-100 text-green-800
                            {% elif event.status == 'ongoing' %}bg-yellow-100 text-yellow-800
                            {% elif event.status == 'completed' %}bg-blue-100 text-blue-800
                            {% elif event.status == 'cancelled' %}bg-red-100 text-red-800
                            {% else %}bg-gray-100 text-gray-800{% endif %}">
                            {{ event.get_status_display }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
                <a href="{% url 'event_admin:event_edit' event.id %}" 
                   class="inline-flex items-center justify-center px-3 py-2 border border-transparent rounded-lg text-sm font-medium text-white bg-yellow-600 hover:bg-yellow-700 transition-colors">
                    <i class="fas fa-edit mr-2"></i>
                    <span class="hidden sm:inline">Edit Event</span>
                    <span class="sm:hidden">Edit</span>
                </a>
                <a href="{% url 'event_admin:event_registrations' event.id %}" 
                   class="inline-flex items-center justify-center px-3 py-2 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors">
                    <i class="fas fa-users mr-2"></i>
                    <span class="hidden sm:inline">Manage Registrations</span>
                    <span class="sm:hidden">Registrations</span>
                </a>
                <a href="{% url 'event_admin:event_analytics' event.id %}" 
                   class="inline-flex items-center justify-center px-3 py-2 border border-transparent rounded-lg text-sm font-medium text-white bg-green-600 hover:bg-green-700 transition-colors">
                    <i class="fas fa-chart-bar mr-2"></i>
                    <span class="hidden sm:inline">Analytics</span>
                    <span class="sm:hidden">Analytics</span>
                </a>
                <a href="{% url 'event_admin:event_list' %}" 
                   class="inline-flex items-center justify-center px-3 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>
                    <span class="hidden sm:inline">Back to List</span>
                    <span class="sm:hidden">Back</span>
                </a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-6">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-4 lg:space-y-6">
            <!-- Informasi Dasar -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 lg:p-6 hover:shadow-md transition-all duration-300">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                    Informasi Dasar
                </h3>
                
                <div class="space-y-3">
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-heading w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            <span class="hidden sm:inline">Judul Event</span>
                            <span class="sm:hidden">Judul</span>
                        </div>
                        <div class="text-gray-600 text-sm flex-1 font-medium ml-0 sm:ml-4">{{ event.judul }}</div>
                    </div>
                    
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-link w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            <span class="hidden sm:inline">URL Slug</span>
                            <span class="sm:hidden">Slug</span>
                        </div>
                        <div class="text-gray-600 text-sm flex-1 font-mono ml-0 sm:ml-4">{{ event.slug }}</div>
                    </div>
                    
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-tag w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            Kategori
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">{{ event.kategori }}</div>
                    </div>
                    
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-map-marker-alt w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            Lokasi
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">{{ event.lokasi }}</div>
                    </div>
                    
                    {% if event.alamat_lengkap %}
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-map w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            <span class="hidden sm:inline">Alamat Lengkap</span>
                            <span class="sm:hidden">Alamat</span>
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">{{ event.alamat_lengkap }}</div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Lokasi & Waktu -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 lg:p-6 hover:shadow-md transition-all duration-300">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-clock text-green-600 mr-2"></i>
                    Lokasi & Waktu
                </h3>
                
                <div class="space-y-3">
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-calendar-day w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            <span class="hidden sm:inline">Tanggal Mulai</span>
                            <span class="sm:hidden">Mulai</span>
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">{{ event.tanggal_mulai|date:"d M Y, H:i" }}</div>
                    </div>
                    
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-calendar-check w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            <span class="hidden sm:inline">Tanggal Selesai</span>
                            <span class="sm:hidden">Selesai</span>
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">{{ event.tanggal_selesai|date:"d M Y, H:i" }}</div>
                    </div>
                    
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-stopwatch w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            <span class="hidden sm:inline">Batas Pendaftaran</span>
                            <span class="sm:hidden">Batas</span>
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">{{ event.batas_pendaftaran|date:"d M Y, H:i" }}</div>
                    </div>
                    
                    {% if event.waktu_mulai %}
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-clock w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            <span class="hidden sm:inline">Waktu Mulai</span>
                            <span class="sm:hidden">Waktu</span>
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">{{ event.waktu_mulai }}</div>
                    </div>
                    {% endif %}
                    
                    {% if event.waktu_selesai %}
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-clock w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            <span class="hidden sm:inline">Waktu Selesai</span>
                            <span class="sm:hidden">Selesai</span>
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">{{ event.waktu_selesai }}</div>
                    </div>
                    {% endif %}
                    
                    {% if event.link_meeting %}
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-video w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            <span class="hidden sm:inline">Link Meeting</span>
                            <span class="sm:hidden">Meeting</span>
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">
                            <a href="{{ event.link_meeting }}" target="_blank" class="text-blue-600 hover:text-blue-800 break-all">
                                {{ event.link_meeting }}
                            </a>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Deskripsi -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 lg:p-6 hover:shadow-md transition-all duration-300">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-align-left text-purple-600 mr-2"></i>
                    Deskripsi Event
                </h3>
                <div class="prose prose-sm max-w-none leading-relaxed">
                    <div class="prose-headings:mt-4 prose-headings:mb-2 prose-headings:font-semibold prose-p:mb-3 prose-ul:mb-3 prose-ol:mb-3 prose-ul:pl-6 prose-ol:pl-6 prose-img:max-w-full prose-img:h-auto prose-img:rounded-lg prose-img:my-2">
                        {{ event.deskripsi|safe }}
                    </div>
                </div>
            </div>

            <!-- Deskripsi Singkat -->
            {% if event.deskripsi_singkat %}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 lg:p-6 hover:shadow-md transition-all duration-300">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-file-alt text-indigo-600 mr-2"></i>
                    Deskripsi Singkat
                </h3>
                <div class="prose prose-sm max-w-none leading-relaxed">
                    <div class="prose-headings:mt-4 prose-headings:mb-2 prose-headings:font-semibold prose-p:mb-3 prose-ul:mb-3 prose-ol:mb-3 prose-ul:pl-6 prose-ol:pl-6 prose-img:max-w-full prose-img:h-auto prose-img:rounded-lg prose-img:my-2">
                        {{ event.deskripsi_singkat|safe }}
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Media & Konten -->
            {% if event.gambar_utama or event.video_promosi or event.tiktok_url or event.youtube_url %}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 lg:p-6 hover:shadow-md transition-all duration-300">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-images text-pink-600 mr-2"></i>
                    Media & Konten
                </h3>
                
                <div class="space-y-4">
                    {% if event.gambar_utama %}
                    <div>
                        <div class="flex items-center font-semibold text-gray-700 mb-2 text-sm">
                            <i class="fas fa-image w-5 h-5 mr-2 text-gray-500"></i>
                            Gambar Utama
                        </div>
                        <img src="{{ event.gambar_utama.url }}" alt="{{ event.judul }}" 
                             class="w-full h-48 lg:h-64 object-cover rounded-lg shadow-md">
                    </div>
                    {% endif %}
                    
                    {% if event.video_promosi %}
                    <div>
                        <div class="flex items-center font-semibold text-gray-700 mb-2 text-sm">
                            <i class="fas fa-video w-5 h-5 mr-2 text-gray-500"></i>
                            Video Promosi
                        </div>
                        <video controls class="w-full h-48 lg:h-64 rounded-lg shadow-md">
                            <source src="{{ event.video_promosi.url }}" type="video/mp4">
                            Browser Anda tidak mendukung video.
                        </video>
                    </div>
                    {% endif %}
                    
                    {% if event.tiktok_url %}
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fab fa-tiktok w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            TikTok URL
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">
                            <a href="{{ event.tiktok_url }}" target="_blank" class="text-blue-600 hover:text-blue-800 break-all">
                                {{ event.tiktok_url }}
                            </a>
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if event.youtube_url %}
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fab fa-youtube w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            YouTube URL
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">
                            <a href="{{ event.youtube_url }}" target="_blank" class="text-blue-600 hover:text-blue-800 break-all">
                                {{ event.youtube_url }}
                            </a>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Panitia -->
            {% if event.ketua_panitia or event.panitia.exists %}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 lg:p-6 hover:shadow-md transition-all duration-300">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-users text-orange-600 mr-2"></i>
                    Panitia Event
                </h3>
                
                <div class="space-y-3">
                    {% if event.ketua_panitia %}
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-crown w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            <span class="hidden sm:inline">Ketua Panitia</span>
                            <span class="sm:hidden">Ketua</span>
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">{{ event.ketua_panitia.nama_lengkap|default:event.ketua_panitia.username }}</div>
                    </div>
                    {% endif %}
                    
                    {% if event.panitia.exists %}
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-user-friends w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            <span class="hidden sm:inline">Anggota Panitia</span>
                            <span class="sm:hidden">Anggota</span>
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">
                            <div class="flex flex-wrap gap-2">
                                {% for anggota in event.panitia.all %}
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    {{ anggota.nama_lengkap|default:anggota.username }}
                                </span>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Kontak -->
            {% if event.kontak_person or event.no_telepon or event.email_kontak %}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 lg:p-6 hover:shadow-md transition-all duration-300">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-phone text-teal-600 mr-2"></i>
                    Informasi Kontak
                </h3>
                
                <div class="space-y-3">
                    {% if event.kontak_person %}
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-user w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            <span class="hidden sm:inline">Kontak Person</span>
                            <span class="sm:hidden">Kontak</span>
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">{{ event.kontak_person }}</div>
                    </div>
                    {% endif %}
                    
                    {% if event.no_telepon %}
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-phone w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            No. Telepon
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">
                            <a href="tel:{{ event.no_telepon }}" class="text-blue-600 hover:text-blue-800">
                                {{ event.no_telepon }}
                            </a>
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if event.email_kontak %}
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-envelope w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            Email Kontak
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">
                            <a href="mailto:{{ event.email_kontak }}" class="text-blue-600 hover:text-blue-800">
                                {{ event.email_kontak }}
                            </a>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="space-y-4 lg:space-y-6">
            <!-- Status & Quick Info -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 lg:p-6 hover:shadow-md transition-all duration-300">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-flag text-red-600 mr-2"></i>
                    Status & Info
                </h3>
                
                <div class="space-y-3">
                    <div class="text-center">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wide
                            {% if event.status == 'published' %}bg-green-100 text-green-800
                            {% elif event.status == 'ongoing' %}bg-yellow-100 text-yellow-800
                            {% elif event.status == 'completed' %}bg-blue-100 text-blue-800
                            {% elif event.status == 'cancelled' %}bg-red-100 text-red-800
                            {% else %}bg-gray-100 text-gray-800{% endif %}">
                            {{ event.get_status_display }}
                        </span>
                    </div>
                    
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-calendar w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            Dibuat
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">{{ event.created_at|date:"d M Y, H:i" }}</div>
                    </div>
                    
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-edit w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            Diupdate
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">{{ event.updated_at|date:"d M Y, H:i" }}</div>
                    </div>
                    
                    {% if event.is_featured %}
                    <div class="text-center">
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                            <i class="fas fa-star mr-1"></i>
                            Featured Event
                        </span>
                    </div>
                    {% endif %}
                    
                    {% if event.is_online %}
                    <div class="text-center">
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            <i class="fas fa-globe mr-1"></i>
                            Online Event
                        </span>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Pendaftaran & Harga -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 lg:p-6 hover:shadow-md transition-all duration-300">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-money-bill-wave text-green-600 mr-2"></i>
                    Pendaftaran & Harga
                </h3>
                
                <div class="space-y-3">
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-users w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            Kuota
                        </div>
                        <div class="text-gray-600 text-sm flex-1 font-semibold ml-0 sm:ml-4">{{ event.kuota|default:"Tidak terbatas" }}</div>
                    </div>
                    
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-tag w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            Tipe Event
                        </div>
                        <div class="text-gray-600 text-sm flex-1 ml-0 sm:ml-4">{{ event.get_tipe_display }}</div>
                    </div>
                    
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-dollar-sign w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            Harga Event
                        </div>
                        <div class="text-gray-600 text-sm flex-1 font-semibold text-lg ml-0 sm:ml-4">
                            {% if event.harga %}
                                {{ event.harga|currency_idr }}
                            {% else %}
                                Gratis
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="flex items-start py-3 border-b border-gray-100 last:border-b-0">
                        <div class="flex items-center font-semibold text-gray-700 min-w-0 sm:min-w-[120px] text-sm">
                            <i class="fas fa-credit-card w-5 h-5 mr-2 text-gray-500 flex-shrink-0"></i>
                            Biaya Pendaftaran
                        </div>
                        <div class="text-gray-600 text-sm flex-1 font-semibold text-lg ml-0 sm:ml-4">
                            {% if event.biaya_pendaftaran %}
                                {{ event.biaya_pendaftaran|currency_idr }}
                            {% else %}
                                Gratis
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 lg:p-6 hover:shadow-md transition-all duration-300">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-bolt text-yellow-600 mr-2"></i>
                    Quick Actions
                </h3>
                
                <div class="space-y-2">
                    <a href="{% url 'event_admin:event_edit' event.id %}" 
                       class="w-full inline-flex items-center justify-center px-3 py-2 border border-transparent rounded-lg text-sm font-medium text-white bg-yellow-600 hover:bg-yellow-700 transition-colors">
                        <i class="fas fa-edit mr-2"></i>
                        <span class="hidden sm:inline">Edit Event</span>
                        <span class="sm:hidden">Edit</span>
                    </a>
                    
                    <a href="{% url 'event_admin:event_registrations' event.id %}" 
                       class="w-full inline-flex items-center justify-center px-3 py-2 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors">
                        <i class="fas fa-users mr-2"></i>
                        <span class="hidden sm:inline">Manage Registrations</span>
                        <span class="sm:hidden">Registrations</span>
                    </a>
                    
                    <a href="{% url 'event_admin:event_analytics' event.id %}" 
                       class="w-full inline-flex items-center justify-center px-3 py-2 border border-transparent rounded-lg text-sm font-medium text-white bg-green-600 hover:bg-green-700 transition-colors">
                        <i class="fas fa-chart-bar mr-2"></i>
                        <span class="hidden sm:inline">View Analytics</span>
                        <span class="sm:hidden">Analytics</span>
                    </a>
                    
                    <a href="{% url 'event_admin:whatsapp_templates_list' event.id %}" 
                       class="w-full inline-flex items-center justify-center px-3 py-2 border border-transparent rounded-lg text-sm font-medium text-white bg-green-500 hover:bg-green-600 transition-colors">
                        <i class="fab fa-whatsapp mr-2"></i>
                        <span class="hidden sm:inline">WhatsApp Templates</span>
                        <span class="sm:hidden">WA Templates</span>
                    </a>
                    
                    {% if event.slug %}
                    <a href="{% url 'event:event_detail' event.slug %}" 
                       class="w-full inline-flex items-center justify-center px-3 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors"
                       target="_blank">
                        <i class="fas fa-external-link-alt mr-2"></i>
                        <span class="hidden sm:inline">View Public Page</span>
                        <span class="sm:hidden">Public View</span>
                    </a>
                    {% endif %}
                    
                    <a href="{% url 'event_admin:event_list' %}" 
                       class="w-full inline-flex items-center justify-center px-3 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                        <i class="fas fa-arrow-left mr-2"></i>
                        <span class="hidden sm:inline">Back to List</span>
                        <span class="sm:hidden">Back</span>
                    </a>
                </div>
            </div>

            <!-- Event Image Preview -->
            {% if event.gambar_utama %}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 lg:p-6 hover:shadow-md transition-all duration-300">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-image text-purple-600 mr-2"></i>
                    Preview Gambar
                </h3>
                <img src="{{ event.gambar_utama.url }}" alt="{{ event.judul }}" 
                     class="w-full h-32 lg:h-40 object-cover rounded-lg shadow-md cursor-pointer"
                     onclick="openImageModal('{{ event.gambar_utama.url }}', '{{ event.judul }}')">
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Registrations Summary -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 lg:p-6 hover:shadow-md transition-all duration-300">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                <i class="fas fa-users text-indigo-600 mr-2"></i>
                Pendaftar Event
            </h3>
            <a href="{% url 'event_admin:event_registrations' event.id %}" 
               class="inline-flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium">
                <i class="fas fa-list mr-2"></i>
                Lihat Semua
            </a>
        </div>
        
        {% if total_registrations > 0 %}
        <!-- Statistics Cards -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 text-center">
                <div class="text-xl font-bold text-blue-600">{{ total_registrations }}</div>
                <div class="text-xs text-blue-700">Total</div>
            </div>
            <div class="bg-green-50 border border-green-200 rounded-lg p-3 text-center">
                <div class="text-xl font-bold text-green-600">{{ approved_count }}</div>
                <div class="text-xs text-green-700">Disetujui</div>
            </div>
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-center">
                <div class="text-xl font-bold text-yellow-600">{{ pending_count }}</div>
                <div class="text-xs text-yellow-700">Menunggu</div>
            </div>
            <div class="bg-emerald-50 border border-emerald-200 rounded-lg p-3 text-center">
                <div class="text-xl font-bold text-emerald-600">{{ paid_count }}</div>
                <div class="text-xs text-emerald-700">Sudah Bayar</div>
            </div>
        </div>
        
        <!-- Recent Registrations List -->
        <div class="space-y-2">
            {% for registration in recent_registrations %}
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors border border-gray-200">
                <div class="flex items-center flex-1 min-w-0">
                    <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white font-semibold mr-3">
                        {{ registration.nama_lengkap|first|upper }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-semibold text-gray-900 truncate">{{ registration.nama_lengkap }}</div>
                        <div class="text-xs text-gray-500 truncate">{{ registration.email }}</div>
                    </div>
                </div>
                <div class="flex items-center space-x-2 ml-3">
                    {% if registration.status == 'approved' %}
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                            <i class="fas fa-check-circle mr-1"></i>Disetujui
                        </span>
                    {% elif registration.status == 'pending' %}
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                            <i class="fas fa-clock mr-1"></i>Menunggu
                        </span>
                    {% else %}
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                            <i class="fas fa-times-circle mr-1"></i>Ditolak
                        </span>
                    {% endif %}
                    
                    {% if event.biaya_pendaftaran > 0 %}
                        {% if registration.bukti_pembayaran %}
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800" title="Sudah Bayar">
                                <i class="fas fa-check-circle"></i>
                            </span>
                        {% else %}
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800" title="Belum Bayar">
                                <i class="fas fa-exclamation-circle"></i>
                            </span>
                        {% endif %}
                    {% endif %}
                    
                    <a href="{% url 'event_admin:registration_detail' registration.id %}" 
                       class="inline-flex items-center px-2 py-1 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors text-xs"
                       title="Lihat Detail">
                        <i class="fas fa-eye"></i>
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
        
        {% if total_registrations > 10 %}
        <div class="mt-4 text-center">
            <a href="{% url 'event_admin:event_registrations' event.id %}" 
               class="text-sm text-blue-600 hover:text-blue-800 font-medium">
                Lihat semua {{ total_registrations }} pendaftar <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
        {% endif %}
        
        {% else %}
        <div class="text-center py-8">
            <div class="flex justify-center mb-4">
                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-users text-2xl text-gray-400"></i>
                </div>
            </div>
            <p class="text-gray-500 mb-4">Belum ada pendaftar untuk event ini</p>
            <a href="{% url 'event_admin:event_registrations' event.id %}" 
               class="inline-flex items-center px-4 py-2 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors">
                <i class="fas fa-users mr-2"></i>
                Kelola Pendaftaran
            </a>
        </div>
        {% endif %}
    </div>
</div>

<!-- Image Modal -->
<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden flex items-center justify-center p-4">
    <div class="relative max-w-4xl max-h-full">
        <img id="modalImage" src="" alt="" class="max-w-full max-h-full object-contain rounded-lg">
        <button onclick="closeImageModal()" class="absolute top-4 right-4 text-white text-2xl hover:text-gray-300 transition-colors">
            <i class="fas fa-times"></i>
        </button>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
// Image modal functions
function openImageModal(imageSrc, imageAlt) {
    const modal = document.getElementById('imageModal');
    const modalImage = document.getElementById('modalImage');
    
    modalImage.src = imageSrc;
    modalImage.alt = imageAlt;
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeImageModal() {
    const modal = document.getElementById('imageModal');
    modal.classList.add('hidden');
    document.body.style.overflow = 'auto';
}

// Close modal when clicking outside the image
document.getElementById('imageModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeImageModal();
    }
});

// Close modal with Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeImageModal();
    }
});
</script>
{% endblock %}