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

{% block title %}Pendaftaran Saya - {{ block.super }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900 mb-2">Pendaftaran Saya</h1>
            <p class="text-gray-600">Daftar semua event yang telah Anda daftar</p>
        </div>

        <!-- 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>

        <!-- Registrations List -->
        {% if registrations %}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {% for registration in registrations %}
                <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow">
                    <!-- Event Image -->
                    <div class="h-48 bg-gray-200 relative">
                        {% if registration.event.gambar_utama %}
                            <img src="{{ registration.event.gambar_utama.url }}" alt="{{ registration.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-4xl text-gray-400"></i>
                            </div>
                        {% endif %}
                        
                        <!-- Status Badge -->
                        <div class="absolute top-4 right-4">
                            {% if registration.status == 'approved' %}
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                    <i class="fas fa-check mr-1"></i>Disetujui
                                </span>
                            {% elif registration.status == 'pending' %}
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                    <i class="fas fa-clock mr-1"></i>Menunggu
                                </span>
                            {% elif registration.status == 'rejected' %}
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                                    <i class="fas fa-times mr-1"></i>Ditolak
                                </span>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Event Content -->
                    <div class="p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-2">{{ registration.event.judul }}</h3>
                        
                        <!-- Event Details -->
                        <div class="space-y-2 text-sm text-gray-600 mb-4">
                            <div class="flex items-center">
                                <i class="fas fa-calendar text-blue-500 mr-2 w-4"></i>
                                <span>{{ registration.event.tanggal_mulai|date:"d M Y" }}</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-map-marker-alt text-blue-500 mr-2 w-4"></i>
                                <span class="line-clamp-1">{{ registration.event.lokasi }}</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-money-bill-wave text-blue-500 mr-2 w-4"></i>
                                <span>
                                    {% if registration.event.harga > 0 %}
                                        {{ registration.event.harga|currency }}
                                    {% else %}
                                        Gratis
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                        
                        <!-- Registration Info -->
                        <div class="border-t border-gray-200 pt-4 mb-4">
                            <div class="text-sm text-gray-600">
                                <p><strong>Tanggal Daftar:</strong> {{ registration.created_at|date:"d F Y, H:i" }}</p>
                                {% if registration.biaya_pendaftaran > 0 %}
                                    <p><strong>Biaya:</strong> {{ registration.biaya_pendaftaran|currency }}</p>
                                {% endif %}
                                {% if registration.bukti_pembayaran %}
                                    <p class="text-green-600"><i class="fas fa-check mr-1"></i>Bukti pembayaran sudah diupload</p>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- Action Button -->
                        <a href="{% url 'anggota:registration_detail' registration.id %}" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors text-center block">
                            <i class="fas fa-eye mr-2"></i>Lihat Detail
                        </a>
                    </div>
                </div>
                {% endfor %}
            </div>
            
            <!-- Pagination -->
            {% if registrations.has_other_pages %}
            <div class="mt-8 flex justify-center">
                <nav class="flex items-center space-x-1">
                    {% if registrations.has_previous %}
                        <a href="?page={{ registrations.previous_page_number }}" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-50">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                    {% endif %}
                    
                    {% for num in registrations.paginator.page_range %}
                        {% if registrations.number == num %}
                            <span class="px-3 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600">{{ num }}</span>
                        {% elif num > registrations.number|add:'-3' and num < registrations.number|add:'3' %}
                            <a href="?page={{ num }}" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 hover:bg-gray-50">{{ num }}</a>
                        {% endif %}
                    {% endfor %}
                    
                    {% if registrations.has_next %}
                        <a href="?page={{ registrations.next_page_number }}" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-50">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    {% endif %}
                </nav>
            </div>
            {% endif %}
        {% else %}
            <!-- No Registrations -->
            <div class="text-center py-12">
                <i class="fas fa-calendar-times text-6xl text-gray-300 mb-4"></i>
                <h3 class="text-xl font-semibold text-gray-700 mb-2">Belum ada pendaftaran</h3>
                <p class="text-gray-500 mb-6">Anda belum mendaftar untuk event apapun.</p>
                <a href="{% url 'anggota:event_list' %}" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                    <i class="fas fa-calendar-alt mr-2"></i>
                    Lihat Daftar Event
                </a>
            </div>
        {% endif %}
    </div>
</div>

<style>
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>
{% endblock %}