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

{% block title %}Daftar Event - {{ block.super }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 mb-2">Daftar Event</h1>
                    <p class="text-gray-600">Temukan dan daftar event menarik yang tersedia untuk anggota HMI</p>
                </div>
                <div class="mt-4 sm:mt-0">
                    <a href="{% url 'anggota:my_registrations' %}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        <i class="fas fa-list mr-2"></i>
                        Pendaftaran Saya
                    </a>
                </div>
            </div>
        </div>

        <!-- Filter Section -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Kategori</label>
                    <select id="filterKategori" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">Semua Kategori</option>
                        <option value="seminar">Seminar</option>
                        <option value="workshop">Workshop</option>
                        <option value="pelatihan">Pelatihan</option>
                        <option value="konferensi">Konferensi</option>
                        <option value="webinar">Webinar</option>
                        <option value="lomba">Lomba</option>
                        <option value="festival">Festival</option>
                        <option value="lainnya">Lainnya</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Tipe</label>
                    <select id="filterTipe" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">Semua Tipe</option>
                        <option value="gratis">Gratis</option>
                        <option value="berbayar">Berbayar</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                    <select id="filterStatus" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">Semua Status</option>
                        <option value="upcoming">Akan Datang</option>
                        <option value="ongoing">Sedang Berlangsung</option>
                        <option value="completed">Selesai</option>
                    </select>
                </div>
                
                <div class="flex items-end">
                    <button id="filterBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors">
                        <i class="fas fa-search mr-2"></i>Filter
                    </button>
                </div>
            </div>
        </div>

        <!-- Loading Spinner -->
        <div id="loadingSpinner" class="text-center py-12 hidden">
            <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
            <p class="mt-4 text-gray-600">Memuat event...</p>
        </div>

        <!-- Events Grid -->
        <div id="eventsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Events will be loaded here via AJAX -->
        </div>

        <!-- No Events Message -->
        <div id="noEventsMessage" class="text-center py-12 hidden">
            <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">Tidak ada event ditemukan</h3>
            <p class="text-gray-500">Coba ubah filter atau cek kembali nanti.</p>
        </div>

        <!-- Pagination -->
        <div id="paginationContainer" class="mt-8 flex justify-center">
            <!-- Pagination will be loaded here via AJAX -->
        </div>
    </div>
</div>


<script>
document.addEventListener('DOMContentLoaded', function() {
    let currentPage = 1;
    let currentFilters = {};
    
    // Load events on page load
    loadEvents();
    
    // Filter button click
    document.getElementById('filterBtn').addEventListener('click', function() {
        currentPage = 1;
        currentFilters = {
            kategori: document.getElementById('filterKategori').value,
            tipe: document.getElementById('filterTipe').value,
            status: document.getElementById('filterStatus').value
        };
        loadEvents();
    });
    
    // Load events function
    function loadEvents() {
        const loadingSpinner = document.getElementById('loadingSpinner');
        const eventsContainer = document.getElementById('eventsContainer');
        const noEventsMessage = document.getElementById('noEventsMessage');
        const paginationContainer = document.getElementById('paginationContainer');
        
        // Show loading
        loadingSpinner.classList.remove('hidden');
        eventsContainer.innerHTML = '';
        noEventsMessage.classList.add('hidden');
        paginationContainer.innerHTML = '';
        
        // Prepare URL with filters
        let url = `/anggota/api/events/?page=${currentPage}`;
        Object.keys(currentFilters).forEach(key => {
            if (currentFilters[key]) {
                url += `&${key}=${currentFilters[key]}`;
            }
        });
        
        // Fetch events
        fetch(url)
            .then(response => response.json())
            .then(data => {
                loadingSpinner.classList.add('hidden');
                
                if (data.events && data.events.length > 0) {
                    renderEvents(data.events);
                    renderPagination(data.pagination);
                } else {
                    noEventsMessage.classList.remove('hidden');
                }
            })
            .catch(error => {
                loadingSpinner.classList.add('hidden');
                console.error('Error loading events:', error);
                eventsContainer.innerHTML = `
                    <div class="col-span-full text-center py-12">
                        <i class="fas fa-exclamation-triangle text-6xl text-red-300 mb-4"></i>
                        <h3 class="text-xl font-semibold text-gray-700 mb-2">Terjadi Kesalahan</h3>
                        <p class="text-gray-500">Gagal memuat data event. Silakan coba lagi.</p>
                    </div>
                `;
            });
    }
    
    // Render events
    function renderEvents(events) {
        const container = document.getElementById('eventsContainer');
        container.innerHTML = events.map(event => `
            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
                <!-- Event Image -->
                <div class="h-48 bg-gray-200 relative">
                    ${event.gambar_utama ? 
                        `<img src="${event.gambar_utama}" alt="${event.judul}" class="w-full h-full object-cover">` :
                        `<div class="w-full h-full flex items-center justify-center">
                            <i class="fas fa-calendar-alt text-4xl text-gray-400"></i>
                        </div>`
                    }
                    <div class="absolute top-4 left-4">
                        <span class="px-2 py-1 text-xs font-semibold rounded-full ${event.tipe === 'gratis' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}">
                            ${event.tipe === 'gratis' ? 'Gratis' : 'Berbayar'}
                        </span>
                    </div>
                    <div class="absolute top-4 right-4">
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                            ${event.kategori || 'Event'}
                        </span>
                    </div>
                </div>
                
                <!-- Event Content -->
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 mb-2 line-clamp-2">${event.judul || 'Event'}</h3>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-3">${event.deskripsi_singkat || (event.deskripsi ? event.deskripsi.substring(0, 100) + '...' : 'Tidak ada deskripsi')}</p>
                    
                    <!-- Event Details -->
                    <div class="space-y-2 text-sm text-gray-600 mb-4">
                        <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">${event.lokasi || 'Lokasi belum ditentukan'}</span>
                        </div>
                            <div class="flex items-center">
                                <i class="fas fa-calendar text-blue-500 mr-2 w-4"></i>
                                <span>${event.tanggal_mulai ? new Date(event.tanggal_mulai).toLocaleDateString('id-ID', { 
                                    day: 'numeric', 
                                    month: 'long', 
                                    year: 'numeric',
                                    hour: '2-digit',
                                    minute: '2-digit'
                                }) : 'Tanggal belum ditentukan'}</span>
                            </div>
                        <div class="flex items-center">
                            <i class="fas fa-users text-blue-500 mr-2 w-4"></i>
                            <span>${event.pendaftaran_count || 0}/${event.kuota || 0} peserta</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-money-bill-wave text-blue-500 mr-2 w-4"></i>
                            <span>${event.harga && event.harga > 0 ? formatCurrency(event.harga) : 'Gratis'}</span>
                        </div>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="flex space-x-2">
                        <a href="/anggota/event/${event.slug}/" 
                                class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold py-2 px-4 rounded-lg transition-colors text-sm text-center">
                            <i class="fas fa-eye mr-1"></i>Detail
                        </a>
                        ${event.is_registration_open ? 
                            `<a href="/anggota/event/${event.slug}/daftar/" 
                                class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors text-sm text-center">
                            <i class="fas fa-user-plus mr-1"></i>Daftar
                            </a>` :
                            `<div class="flex-1 bg-gray-400 text-white font-semibold py-2 px-4 rounded-lg text-sm text-center cursor-not-allowed">
                                <i class="fas fa-times mr-1"></i>Pendaftaran Ditutup
                            </div>`
                        }
                    </div>
                </div>
            </div>
        `).join('');
    }
    
    // Render pagination
    function renderPagination(pagination) {
        const container = document.getElementById('paginationContainer');
        if (!pagination || pagination.total_pages <= 1) {
            container.innerHTML = '';
            return;
        }
        
        let paginationHTML = '<nav class="flex items-center space-x-1">';
        
        // Previous button
        if (pagination.has_previous) {
            paginationHTML += `
                <button onclick="changePage(${pagination.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>
                </button>
            `;
        }
        
        // Page numbers
        for (let i = 1; i <= pagination.total_pages; i++) {
            if (i === pagination.number) {
                paginationHTML += `
                    <button class="px-3 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600">
                        ${i}
                    </button>
                `;
            } else {
                paginationHTML += `
                    <button onclick="changePage(${i})" 
                            class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 hover:bg-gray-50">
                        ${i}
                    </button>
                `;
            }
        }
        
        // Next button
        if (pagination.has_next) {
            paginationHTML += `
                <button onclick="changePage(${pagination.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>
                </button>
            `;
        }
        
        paginationHTML += '</nav>';
        container.innerHTML = paginationHTML;
    }
    
    // Change page function
    window.changePage = function(page) {
        currentPage = page;
        loadEvents();
    };
    
    // Format currency function
    function formatCurrency(amount) {
        return new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            minimumFractionDigits: 0
        }).format(amount);
    }
});
</script>

<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;
}

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