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

{% block title %}Detail Pendaftaran - {{ registration.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:my_registrations' %}" 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 Pendaftaran Saya
            </a>
        </div>

        <!-- Registration Header -->
        <div class="bg-white rounded-lg shadow-sm overflow-hidden mb-8">
            <div class="p-6">
                <div class="flex items-start justify-between mb-4">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900 mb-2">{{ registration.event.judul }}</h1>
                        <p class="text-gray-600">Detail Pendaftaran Event</p>
                    </div>
                    
                    <!-- Status Badge -->
                    <div>
                        {% if registration.status == 'approved' %}
                            <span class="px-4 py-2 text-sm font-semibold rounded-full bg-green-100 text-green-800">
                                <i class="fas fa-check mr-2"></i>Disetujui
                            </span>
                        {% elif registration.status == 'pending' %}
                            <span class="px-4 py-2 text-sm font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                <i class="fas fa-clock mr-2"></i>Menunggu Persetujuan
                            </span>
                        {% elif registration.status == 'rejected' %}
                            <span class="px-4 py-2 text-sm font-semibold rounded-full bg-red-100 text-red-800">
                                <i class="fas fa-times mr-2"></i>Ditolak
                            </span>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Event Image -->
                {% if registration.event.gambar_utama %}
                <div class="mb-6">
                    <img src="{{ registration.event.gambar_utama.url }}" alt="{{ registration.event.judul }}" class="w-full h-48 object-cover rounded-lg">
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Registration Details -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Personal Information -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">Informasi Pribadi</h2>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Nama Lengkap</label>
                        <p class="text-gray-900">{{ registration.nama_lengkap }}</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Email</label>
                        <p class="text-gray-900">{{ registration.email }}</p>
                    </div>
                    
                    {% if registration.no_telepon %}
                    <div>
                        <label class="block text-sm font-medium text-gray-500">No. Telepon</label>
                        <p class="text-gray-900">{{ registration.no_telepon }}</p>
                    </div>
                    {% endif %}
                    
                    {% if registration.alamat %}
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Alamat</label>
                        <p class="text-gray-900">{{ registration.alamat }}</p>
                    </div>
                    {% endif %}
                    
                    {% if registration.instansi %}
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Instansi</label>
                        <p class="text-gray-900">{{ registration.instansi }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Event Information -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">Informasi Event</h2>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Tanggal Event</label>
                        <p class="text-gray-900">
                            {{ registration.event.tanggal_mulai|date:"d F Y" }}
                            {% if registration.event.tanggal_selesai and registration.event.tanggal_selesai != registration.event.tanggal_mulai %}
                                - {{ registration.event.tanggal_selesai|date:"d F Y" }}
                            {% endif %}
                        </p>
                        {% if registration.event.waktu_mulai %}
                            <p class="text-sm text-gray-600">
                                {{ registration.event.waktu_mulai|time:"H:i" }}
                                {% if registration.event.waktu_selesai %}
                                    - {{ registration.event.waktu_selesai|time:"H:i" }}
                                {% endif %}
                            </p>
                        {% endif %}
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Lokasi</label>
                        <p class="text-gray-900">{{ registration.event.lokasi }}</p>
                        {% if registration.event.alamat_lengkap %}
                            <p class="text-sm text-gray-600">{{ registration.event.alamat_lengkap }}</p>
                        {% endif %}
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Kategori</label>
                        <p class="text-gray-900">{{ registration.event.get_kategori_display }}</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-500">Biaya Pendaftaran</label>
                        <p class="text-gray-900">
                            {% if registration.biaya_pendaftaran > 0 %}
                                {{ registration.biaya_pendaftaran|currency }}
                            {% else %}
                                Gratis
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Registration Details -->
        <div class="bg-white rounded-lg shadow-sm p-6 mt-8">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">Detail Pendaftaran</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-500">Tanggal Daftar</label>
                    <p class="text-gray-900">{{ registration.created_at|date:"d F Y, H:i" }}</p>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-500">Status</label>
                    <p class="text-gray-900">{{ registration.get_status_display }}</p>
                </div>
                
                {% if registration.bukti_pembayaran %}
                <div>
                    <label class="block text-sm font-medium text-gray-500">Bukti Pembayaran</label>
                    <div class="mt-2">
                        <a href="{{ registration.bukti_pembayaran.url }}" target="_blank" class="inline-flex items-center text-blue-600 hover:text-blue-700">
                            <i class="fas fa-file-pdf mr-2"></i>
                            Lihat Bukti Pembayaran
                        </a>
                    </div>
                </div>
                {% endif %}
                
                {% if registration.alasan_penolakan %}
                <div>
                    <label class="block text-sm font-medium text-gray-500">Alasan Penolakan</label>
                    <p class="text-red-600">{{ registration.alasan_penolakan }}</p>
                </div>
                {% endif %}
            </div>
            
            {% if registration.catatan %}
            <div class="mt-6">
                <label class="block text-sm font-medium text-gray-500">Catatan</label>
                <p class="text-gray-900 mt-2">{{ registration.catatan }}</p>
            </div>
            {% endif %}
        </div>

        <!-- Event Contact -->
        {% if registration.event.kontak_person or registration.event.no_telepon or registration.event.email_kontak %}
        <div class="bg-white rounded-lg shadow-sm p-6 mt-8">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">Kontak Event</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                {% if registration.event.kontak_person %}
                <div>
                    <label class="block text-sm font-medium text-gray-500">Kontak Person</label>
                    <p class="text-gray-900">{{ registration.event.kontak_person }}</p>
                </div>
                {% endif %}
                
                {% if registration.event.no_telepon %}
                <div>
                    <label class="block text-sm font-medium text-gray-500">No. Telepon</label>
                    <p class="text-gray-900">{{ registration.event.no_telepon }}</p>
                </div>
                {% endif %}
                
                {% if registration.event.email_kontak %}
                <div>
                    <label class="block text-sm font-medium text-gray-500">Email</label>
                    <p class="text-gray-900">{{ registration.event.email_kontak }}</p>
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}

        <!-- Action Buttons -->
        <div class="mt-8 flex flex-col sm:flex-row gap-4">
            <a href="{% url 'anggota:event_detail' registration.event.slug %}" class="flex-1 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-center">
                <i class="fas fa-calendar-alt mr-2"></i>Lihat Detail Event
            </a>
            <a href="{% url 'anggota:my_registrations' %}" class="flex-1 px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors text-center">
                <i class="fas fa-list mr-2"></i>Semua Pendaftaran
            </a>
        </div>
    </div>
</div>
{% endblock %}