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

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

{% block content %}
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Back Button -->
        <div class="mb-6">
            <a href="{% url 'anggota:event_list' %}" class="inline-flex items-center text-gray-600 hover:text-gray-900 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>
                Kembali ke Daftar Event
            </a>
        </div>

        <!-- Event Header -->
        <div class="bg-white rounded-lg shadow-sm overflow-hidden mb-8">
            <!-- Event Image -->
            <div class="h-64 md:h-80 bg-gray-200 relative">
                {% if event.gambar_utama %}
                    <img src="{{ event.gambar_utama.url }}" alt="{{ event.judul }}" class="w-full h-full object-cover">
                {% else %}
                    <div class="w-full h-full flex items-center justify-center">
                        <i class="fas fa-calendar-alt text-6xl text-gray-400"></i>
                    </div>
                {% endif %}
                
                <!-- Status Badges -->
                <div class="absolute top-4 left-4 flex space-x-2">
                    {% if event.tipe == 'gratis' %}
                        <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                            Gratis
                        </span>
                    {% else %}
                        <span class="px-3 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
                            Berbayar
                        </span>
                    {% endif %}
                    <span class="px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                        {{ event.get_kategori_display|default:"Event" }}
                    </span>
                </div>
                
                <!-- Registration Status -->
                <div class="absolute top-4 right-4">
                    {% if is_registered %}
                        <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                            <i class="fas fa-check mr-1"></i>Terdaftar
                        </span>
                    {% elif event.is_registration_open %}
                        <span class="px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                            <i class="fas fa-user-plus mr-1"></i>Daftar Sekarang
                        </span>
                    {% else %}
                        <span class="px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                            <i class="fas fa-times mr-1"></i>Pendaftaran Ditutup
                        </span>
                    {% endif %}
                </div>
            </div>
            
            <!-- Event Info -->
            <div class="p-6">
                <h1 class="text-3xl font-bold text-gray-900 mb-4">{{ event.judul }}</h1>
                
                <!-- Event Details Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div class="space-y-4">
                        <div class="flex items-center">
                            <i class="fas fa-map-marker-alt text-blue-500 mr-3 w-5"></i>
                            <div>
                                <p class="text-sm text-gray-500">Lokasi</p>
                                <p class="font-medium text-gray-900">{{ event.lokasi }}</p>
                                {% if event.alamat_lengkap %}
                                    <p class="text-sm text-gray-600">{{ event.alamat_lengkap }}</p>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="flex items-center">
                            <i class="fas fa-calendar text-blue-500 mr-3 w-5"></i>
                            <div>
                                <p class="text-sm text-gray-500">Tanggal & Waktu</p>
                                <p class="font-medium text-gray-900">
                                    {{ event.tanggal_mulai|date:"d F Y" }}
                                    {% if event.tanggal_selesai and event.tanggal_selesai != event.tanggal_mulai %}
                                        - {{ event.tanggal_selesai|date:"d F Y" }}
                                    {% endif %}
                                </p>
                                {% if event.waktu_mulai %}
                                    <p class="text-sm text-gray-600">
                                        {{ event.waktu_mulai|time:"H:i" }}
                                        {% if event.waktu_selesai %}
                                            - {{ event.waktu_selesai|time:"H:i" }}
                                        {% endif %}
                                    </p>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="flex items-center">
                            <i class="fas fa-users text-blue-500 mr-3 w-5"></i>
                            <div>
                                <p class="text-sm text-gray-500">Kuota</p>
                                <p class="font-medium text-gray-900">
                                    {{ event.pendaftaran_set.count }}/{{ event.kuota }} peserta
                                </p>
                                <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
                                    {% widthratio event.pendaftaran_set.count event.kuota 100 as percentage %}
                                    <div class="bg-blue-600 h-2 rounded-full" style="width: {{ percentage }}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="flex items-center">
                            <i class="fas fa-money-bill-wave text-blue-500 mr-3 w-5"></i>
                            <div>
                                <p class="text-sm text-gray-500">Biaya Pendaftaran</p>
                                <p class="font-medium text-gray-900">
                                    {% if event.harga > 0 %}
                                        {{ event.harga|currency }}
                                    {% else %}
                                        Gratis
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                        
                        {% if event.ketua_panitia %}
                        <div class="flex items-center">
                            <i class="fas fa-user-tie text-blue-500 mr-3 w-5"></i>
                            <div>
                                <p class="text-sm text-gray-500">Ketua Panitia</p>
                                <p class="font-medium text-gray-900">{{ event.ketua_panitia }}</p>
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if event.kontak_person %}
                        <div class="flex items-center">
                            <i class="fas fa-phone text-blue-500 mr-3 w-5"></i>
                            <div>
                                <p class="text-sm text-gray-500">Kontak Person</p>
                                <p class="font-medium text-gray-900">{{ event.kontak_person }}</p>
                                {% if event.no_telepon %}
                                    <p class="text-sm text-gray-600">{{ event.no_telepon }}</p>
                                {% endif %}
                                {% if event.email_kontak %}
                                    <p class="text-sm text-gray-600">{{ event.email_kontak }}</p>
                                {% endif %}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Action Buttons -->
                <div class="flex flex-col sm:flex-row gap-4">
                    {% if is_registered %}
                        <div class="flex-1">
                            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                                <div class="flex items-center">
                                    <i class="fas fa-check-circle text-green-500 mr-3"></i>
                                    <div>
                                        <h3 class="font-medium text-green-900">Anda sudah terdaftar!</h3>
                                        <p class="text-sm text-green-700">Status: {{ registration.get_status_display }}</p>
                                        {% if registration.catatan %}
                                            <p class="text-sm text-green-600 mt-1">{{ registration.catatan }}</p>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="{% url 'anggota:registration_detail' registration.id %}" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-center">
                            <i class="fas fa-eye mr-2"></i>Lihat Detail Pendaftaran
                        </a>
                    {% elif event.is_registration_open %}
                        <a href="{% url 'anggota:event_register' event.slug %}" class="flex-1 px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-center">
                            <i class="fas fa-user-plus mr-2"></i>Daftar Event
                        </a>
                    {% else %}
                        <div class="flex-1 px-6 py-3 bg-gray-400 text-white rounded-lg text-center cursor-not-allowed">
                            <i class="fas fa-times mr-2"></i>Pendaftaran Ditutup
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Event Description -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">Deskripsi Event</h2>
            <div class="prose max-w-none text-gray-700">
                {{ event.deskripsi|safe }}
            </div>
        </div>
        
        <!-- Event Links -->
        {% if event.link_meeting or event.tiktok_url or event.youtube_url %}
        <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">Link Terkait</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                {% if event.link_meeting %}
                <a href="{{ event.link_meeting }}" target="_blank" class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <i class="fas fa-video text-blue-500 mr-3"></i>
                    <span class="font-medium">Meeting Link</span>
                </a>
                {% endif %}
                
                {% if event.tiktok_url %}
                <a href="{{ event.tiktok_url }}" target="_blank" class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <i class="fab fa-tiktok text-pink-500 mr-3"></i>
                    <span class="font-medium">TikTok</span>
                </a>
                {% endif %}
                
                {% if event.youtube_url %}
                <a href="{{ event.youtube_url }}" target="_blank" class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <i class="fab fa-youtube text-red-500 mr-3"></i>
                    <span class="font-medium">YouTube</span>
                </a>
                {% endif %}
            </div>
        </div>
        {% endif %}
        
        <!-- My Registrations Link -->
        <div class="text-center">
            <a href="{% url 'anggota:my_registrations' %}" class="inline-flex items-center text-blue-600 hover:text-blue-700 transition-colors">
                <i class="fas fa-list mr-2"></i>
                Lihat Semua Pendaftaran Saya
            </a>
        </div>
    </div>
</div>
{% endblock %}