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

{% block title %}Laporan Personal - 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">Laporan Personal</h1>
                <p class="text-green-100">Statistik dan riwayat aktivitas Anda</p>
            </div>
            <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                <i class="fas fa-chart-bar text-3xl text-white"></i>
            </div>
        </div>
    </div>

    <!-- Period Selector -->
    <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">Periode Laporan</h3>
            <select class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
                <option value="{{ laporan_data.periode }}" selected>{{ laporan_data.periode }}</option>
            </select>
        </div>
    </div>

    <!-- Summary Stats - 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">{{ laporan_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-gray-900">{{ laporan_data.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">{{ laporan_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">Status Iuran</p>
                    <p class="text-lg font-bold text-green-600">{{ laporan_data.status_iuran|title }}</p>
                </div>
                <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-coins text-yellow-600 text-lg"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Attendance Chart -->
    <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">Grafik Kehadiran</h3>
        <div class="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
            <div class="text-center text-gray-500">
                <i class="fas fa-chart-line text-4xl mb-4"></i>
                <p>Grafik kehadiran akan ditampilkan di sini</p>
            </div>
        </div>
    </div>

    <!-- Activity History -->
    <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 Kegiatan</h3>
        <div class="space-y-3">
            {% for kegiatan in laporan_data.riwayat_kegiatan %}
            <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 kegiatan.status == 'hadir' %}bg-green-100
                    {% elif kegiatan.status == 'terlambat' %}bg-yellow-100
                    {% else %}bg-red-100{% endif %}">
                    <i class="fas fa-{% if kegiatan.status == 'hadir' %}check{% elif kegiatan.status == 'terlambat' %}clock{% else %}times{% endif %} 
                        text-{% if kegiatan.status == 'hadir' %}green{% elif kegiatan.status == 'terlambat' %}yellow{% else %}red{% endif %}-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.jam_kehadiran|default:"-" }}</p>
                </div>
                <div class="flex-shrink-0">
                    <span class="px-2 py-1 text-xs font-medium rounded-full
                        {% if kegiatan.status == 'hadir' %}bg-green-100 text-green-800
                        {% elif kegiatan.status == 'terlambat' %}bg-yellow-100 text-yellow-800
                        {% else %}bg-red-100 text-red-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>Belum ada riwayat kegiatan</p>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Performance Summary -->
    <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">Ringkasan Performa</h3>
        <div class="space-y-4">
            <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-trophy text-green-600"></i>
                    <span class="font-medium text-gray-900">Kehadiran Terbaik</span>
                </div>
                <span class="text-green-600 font-bold">{{ laporan_data.persentase_kehadiran }}%</span>
            </div>
            
            <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-calendar text-blue-600"></i>
                    <span class="font-medium text-gray-900">Total Kegiatan</span>
                </div>
                <span class="text-blue-600 font-bold">{{ laporan_data.total_kegiatan }}</span>
            </div>
            
            <div class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-coins text-yellow-600"></i>
                    <span class="font-medium text-gray-900">Status Iuran</span>
                </div>
                <span class="text-yellow-600 font-bold">{{ laporan_data.status_iuran|title }}</span>
            </div>
        </div>
    </div>

    <!-- Export Options -->
    <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">Export Laporan</h3>
        <div class="grid grid-cols-2 gap-3">
            <button class="flex items-center space-x-3 p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors">
                <i class="fas fa-file-pdf text-green-600 text-xl"></i>
                <span class="font-medium text-gray-900">PDF</span>
            </button>
            <button class="flex items-center space-x-3 p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
                <i class="fas fa-file-excel text-blue-600 text-xl"></i>
                <span class="font-medium text-gray-900">Excel</span>
            </button>
        </div>
    </div>
</div>
{% endblock %}