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

{% block title %}Absensi - 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">Absensi</h1>
                <p class="text-green-100">Kelola kehadiran Anda</p>
            </div>
            <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                <i class="fas fa-calendar-check text-3xl text-white"></i>
            </div>
        </div>
    </div>

    <!-- Stats Cards - 2 Column Mobile Layout -->
    <div class="grid grid-cols-2 gap-4">
        <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>

        <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-green-600">{{ 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>

        <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 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">Terlewatkan</p>
                    <p class="text-2xl font-bold text-red-600">{{ absensi_data.absensi_terlewatkan }}</p>
                </div>
                <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-calendar-times text-red-600 text-lg"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Additional Stats -->
    <div class="grid grid-cols-2 gap-4">
        <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">Terlambat</p>
                    <p class="text-2xl font-bold text-yellow-600">{{ absensi_data.total_terlambat }}</p>
                </div>
                <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-clock text-yellow-600 text-lg"></i>
                </div>
            </div>
        </div>

        <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">Tidak Hadir</p>
                    <p class="text-2xl font-bold text-red-600">{{ absensi_data.total_tidak_hadir }}</p>
                </div>
                <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-times-circle text-red-600 text-lg"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Absensi yang Tersedia -->
    <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">Absensi yang Tersedia</h3>
            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">{{ absensi_available.count }} tersedia</span>
        </div>
        <div class="space-y-3">
            {% for absensi in absensi_available %}
            <div class="flex items-center space-x-3 p-4 rounded-lg border border-gray-100 hover:bg-gray-50 transition-colors">
                <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"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="font-medium text-gray-900 truncate">{{ absensi.nama_kegiatan }}</p>
                    <p class="text-sm text-gray-600">{{ absensi.tanggal_kegiatan|date:"d M Y" }} • {{ absensi.jam_mulai }} - {{ absensi.jam_selesai }}</p>
                    <p class="text-xs text-gray-500">{{ absensi.lokasi_kegiatan }}</p>
                </div>
                <div class="flex-shrink-0">
                    <a href="{% url 'anggota:absen_event_detail' absensi.id %}" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-green-700 transition-colors">
                        <i class="fas fa-check mr-1"></i>Absen
                    </a>
                </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 absensi yang tersedia</p>
                <p class="text-sm text-gray-400">Admin belum membuat absensi untuk hari ini</p>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Riwayat Absensi -->
    <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">Riwayat Absensi</h3>
        <div class="space-y-3">
            {% for absen in 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 truncate">
                        {% if absen.kode_absensi_obj %}
                            {{ absen.kode_absensi_obj.nama_kegiatan }}
                        {% elif absen.kode_absensi %}
                            Kegiatan ({{ absen.kode_absensi }})
                        {% else %}
                            Event
                        {% endif %}
                    </p>
                    <p class="text-sm text-gray-600">{{ absen.created_at|date:"d M Y H:i" }}</p>
                </div>
                <div class="flex-shrink-0">
                    <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.get_status_display }}
                    </span>
                </div>
            </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>
        </div>
    </div>
</div>
{% endblock %}