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

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

{% block content %}
<div class="px-4 py-6 space-y-6">
    <!-- Welcome Section -->
    <div class="hmi-green rounded-2xl p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-bold mb-2">Selamat Datang!</h2>
                <p class="text-green-100">{{ user.nama_lengkap }}</p>
                <p class="text-sm text-green-200">{{ user.get_status_display }} • {{ days_member }} hari bergabung</p>
            </div>
            <div class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center">
                {% if user.foto_profil %}
                    <img src="{{ user.foto_profil.url }}" alt="{{ user.nama_lengkap }}" class="w-16 h-16 rounded-full object-cover">
                {% else %}
                    <i class="fas fa-user text-3xl text-white"></i>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Quick Stats - 2 Column Mobile Layout -->
    <div class="grid grid-cols-2 gap-4">
        <!-- Total Kegiatan -->
        <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Total Kegiatan</p>
                    <p class="text-2xl font-bold text-gray-900">{{ absensi_data.total_kegiatan }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-calendar-alt text-blue-600 text-lg"></i>
                </div>
            </div>
        </div>

        <!-- Kehadiran -->
        <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Kehadiran</p>
                    <p class="text-2xl font-bold text-gray-900">{{ absensi_data.total_kehadiran }}</p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-calendar-check text-green-600 text-lg"></i>
                </div>
            </div>
        </div>

        <!-- Persentase Kehadiran -->
        <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Persentase</p>
                    <p class="text-2xl font-bold text-gray-900">{{ absensi_data.persentase_kehadiran }}%</p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-percentage text-purple-600 text-lg"></i>
                </div>
            </div>
        </div>

    </div>


    <!-- Upcoming Activities -->
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">Kegiatan Mendatang</h3>
            <a href="{% url 'anggota:event_list' %}" class="text-green-600 text-sm font-medium">Lihat Semua</a>
        </div>
        <div class="space-y-3">
            {% for kegiatan in kegiatan_data %}
            <div class="flex items-center space-x-3 p-3 rounded-lg border border-gray-100 hover:bg-gray-50 transition-colors">
                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-calendar text-green-600"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="font-medium text-gray-900 truncate">{{ kegiatan.nama }}</p>
                    <p class="text-sm text-gray-600">{{ kegiatan.tanggal|date:"d M Y" }} • {{ kegiatan.lokasi }}</p>
                </div>
                <div class="flex-shrink-0">
                    <span class="px-2 py-1 text-xs font-medium rounded-full
                        {% 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>
            </div>
            {% empty %}
            <div class="text-center py-8 text-gray-500">
                <i class="fas fa-calendar-times text-4xl mb-4"></i>
                <p>Tidak ada kegiatan mendatang</p>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Recent Absensi -->
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">Riwayat Absensi</h3>
            <a href="{% url 'anggota:absensi' %}" class="text-green-600 text-sm font-medium">Lihat Semua</a>
        </div>
        <div class="space-y-3">
            {% for absen in absensi_data.riwayat_absensi %}
            <div class="flex items-center space-x-3 p-3 rounded-lg border border-gray-100">
                <div class="w-10 h-10 rounded-full flex items-center justify-center
                    {% if absen.status == 'hadir' %}bg-green-100
                    {% elif absen.status == 'terlambat' %}bg-yellow-100
                    {% else %}bg-red-100{% endif %}">
                    <i class="fas fa-{% if absen.status == 'hadir' %}check{% elif absen.status == 'terlambat' %}clock{% else %}times{% endif %} 
                        text-{% if absen.status == 'hadir' %}green{% elif absen.status == 'terlambat' %}yellow{% else %}red{% endif %}-600"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="font-medium text-gray-900">{{ absen.kegiatan }}</p>
                    <p class="text-sm text-gray-600">{{ absen.tanggal|date:"d M Y" }} • {{ absen.jam_masuk|default:"-" }}</p>
                </div>
                <span class="px-2 py-1 text-xs font-medium rounded-full
                    {% if absen.status == 'hadir' %}bg-green-100 text-green-800
                    {% elif absen.status == 'terlambat' %}bg-yellow-100 text-yellow-800
                    {% else %}bg-red-100 text-red-800{% endif %}">
                    {{ absen.status|title }}
                </span>
            </div>
            {% empty %}
            <div class="text-center py-8 text-gray-500">
                <i class="fas fa-calendar-check text-4xl mb-4"></i>
                <p>Belum ada riwayat absensi</p>
            </div>
            {% endfor %}
        </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:event_list' %}" class="flex items-center space-x-3 p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
                <i class="fas fa-calendar-alt text-blue-600 text-xl"></i>
                <span class="font-medium text-gray-900">Lihat Kegiatan</span>
            </a>
                <a href="{% url 'anggota:my_registrations' %}" class="flex items-center space-x-3 p-4 bg-orange-50 rounded-lg hover:bg-orange-100 transition-colors">
                <i class="fas fa-calendar-plus text-orange-600 text-xl"></i>
                <span class="font-medium text-gray-900">Daftar Event</span>
            </a>
            <a href="{% url 'anggota:profil' %}" class="flex items-center space-x-3 p-4 bg-purple-50 rounded-lg hover:bg-purple-100 transition-colors">
                <i class="fas fa-user text-purple-600 text-xl"></i>
                <span class="font-medium text-gray-900">Edit Profil</span>
            </a>
        </div>
    </div>
</div>
{% endblock %}