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

{% block title %}Kegiatan - HMI Anggota{% endblock %}

{% block content %}
<div class="px-4 py-6 space-y-6">
    <!-- Header -->
    <div class="hmi-green rounded-2xl p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold mb-2">Kegiatan HMI</h1>
                <p class="text-green-100">Lihat dan daftar kegiatan</p>
            </div>
            <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                <i class="fas fa-calendar-alt text-3xl text-white"></i>
            </div>
        </div>
    </div>

    <!-- Filter Tabs -->
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <div class="flex space-x-2">
            <button class="flex-1 py-2 px-4 bg-green-600 text-white rounded-lg text-sm font-medium">
                Semua
            </button>
            <button class="flex-1 py-2 px-4 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium hover:bg-gray-200">
                Mendatang
            </button>
            <button class="flex-1 py-2 px-4 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium hover:bg-gray-200">
                Selesai
            </button>
        </div>
    </div>

    <!-- Kegiatan Cards -->
    <div class="space-y-4">
        {% for kegiatan in kegiatan_data %}
        <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
            <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-calendar text-green-600 text-lg"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-start justify-between">
                        <div class="flex-1 min-w-0">
                            <h3 class="font-semibold text-gray-900 truncate">{{ kegiatan.nama }}</h3>
                            <p class="text-sm text-gray-600 mt-1">{{ kegiatan.deskripsi }}</p>
                        </div>
                        <span class="px-2 py-1 text-xs font-medium rounded-full ml-2
                            {% if kegiatan.status == 'akan_datang' %}bg-blue-100 text-blue-800
                            {% elif kegiatan.status == 'selesai' %}bg-gray-100 text-gray-800
                            {% else %}bg-green-100 text-green-800{% endif %}">
                            {{ kegiatan.status|title }}
                        </span>
                    </div>
                    
                    <!-- Event Details -->
                    <div class="mt-3 space-y-2">
                        <div class="flex items-center space-x-2 text-sm text-gray-600">
                            <i class="fas fa-calendar text-gray-400"></i>
                            <span>{{ kegiatan.tanggal|date:"d M Y" }}</span>
                        </div>
                        <div class="flex items-center space-x-2 text-sm text-gray-600">
                            <i class="fas fa-clock text-gray-400"></i>
                            <span>{{ kegiatan.jam_mulai }} - {{ kegiatan.jam_selesai }}</span>
                        </div>
                        <div class="flex items-center space-x-2 text-sm text-gray-600">
                            <i class="fas fa-map-marker-alt text-gray-400"></i>
                            <span>{{ kegiatan.lokasi }}</span>
                        </div>
                        <div class="flex items-center space-x-2 text-sm text-gray-600">
                            <i class="fas fa-users text-gray-400"></i>
                            <span>{{ kegiatan.terdaftar }}/{{ kegiatan.kuota }} peserta</span>
                        </div>
                    </div>

                    <!-- Progress Bar -->
                    <div class="mt-3">
                        <div class="flex items-center justify-between text-xs text-gray-600 mb-1">
                            <span>Kuota</span>
                            <span>{{ kegiatan.terdaftar }}/{{ kegiatan.kuota }}</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-green-600 h-2 rounded-full" style="width: {% widthratio kegiatan.terdaftar kegiatan.kuota 100 %}%"></div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="mt-4 flex space-x-2">
                        {% if kegiatan.status == 'akan_datang' %}
                            <a href="{% url 'anggota:daftar_kegiatan' kegiatan.id %}" class="flex-1 bg-green-600 text-white py-2 px-4 rounded-lg text-sm font-medium text-center hover:bg-green-700 transition-colors">
                                <i class="fas fa-user-plus mr-1"></i>
                                Daftar
                            </a>
                            <a href="{% url 'anggota:absen_event_detail' event.id %}" class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-lg text-sm font-medium text-center hover:bg-blue-700 transition-colors">
                                <i class="fas fa-calendar-check mr-1"></i>
                                Absen
                            </a>
                        {% elif kegiatan.status == 'selesai' %}
                            <button class="flex-1 bg-gray-300 text-gray-600 py-2 px-4 rounded-lg text-sm font-medium cursor-not-allowed">
                                <i class="fas fa-check mr-1"></i>
                                Selesai
                            </button>
                        {% else %}
                            <button class="flex-1 bg-yellow-500 text-white py-2 px-4 rounded-lg text-sm font-medium">
                                <i class="fas fa-clock mr-1"></i>
                                Berlangsung
                            </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="text-center py-12 text-gray-500">
            <i class="fas fa-calendar-times text-6xl mb-4"></i>
            <h3 class="text-lg font-medium text-gray-900 mb-2">Tidak ada kegiatan</h3>
            <p class="text-gray-600">Belum ada kegiatan yang tersedia saat ini</p>
        </div>
        {% endfor %}
    </div>

    <!-- Quick Stats -->
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Statistik Kegiatan</h3>
        <div class="grid grid-cols-3 gap-4">
            <div class="text-center">
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-calendar text-blue-600 text-lg"></i>
                </div>
                <p class="text-2xl font-bold text-gray-900">{{ kegiatan_data|length }}</p>
                <p class="text-xs text-gray-600">Total Kegiatan</p>
            </div>
            <div class="text-center">
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-calendar-check text-green-600 text-lg"></i>
                </div>
                <p class="text-2xl font-bold text-gray-900">
                    {% for kegiatan in kegiatan_data %}
                        {% if kegiatan.status == 'akan_datang' %}{{ forloop.counter0|add:1 }}{% endif %}
                    {% endfor %}
                </p>
                <p class="text-xs text-gray-600">Mendatang</p>
            </div>
            <div class="text-center">
                <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-check text-gray-600 text-lg"></i>
                </div>
                <p class="text-2xl font-bold text-gray-900">
                    {% for kegiatan in kegiatan_data %}
                        {% if kegiatan.status == 'selesai' %}{{ forloop.counter0|add:1 }}{% endif %}
                    {% endfor %}
                </p>
                <p class="text-xs text-gray-600">Selesai</p>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Aksi Cepat</h3>
        <div class="grid grid-cols-2 gap-3">
            <a href="{% url 'anggota:absen_event' %}" class="flex items-center space-x-3 p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors">
                <i class="fas fa-calendar-check text-green-600 text-xl"></i>
                <span class="font-medium text-gray-900">Absen Kegiatan</span>
            </a>
            <a href="{% url 'anggota:absensi' %}" class="flex items-center space-x-3 p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
                <i class="fas fa-chart-bar text-blue-600 text-xl"></i>
                <span class="font-medium text-gray-900">Riwayat Absensi</span>
            </a>
        </div>
    </div>
</div>

<script>
    // Filter functionality
    const filterButtons = document.querySelectorAll('button');
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Remove active class from all buttons
            filterButtons.forEach(btn => {
                btn.classList.remove('bg-green-600', 'text-white');
                btn.classList.add('bg-gray-100', 'text-gray-600');
            });
            
            // Add active class to clicked button
            this.classList.remove('bg-gray-100', 'text-gray-600');
            this.classList.add('bg-green-600', 'text-white');
            
            // Here you would implement the actual filtering logic
            // For now, this is just visual feedback
        });
    });
</script>
{% endblock %}