{% extends "base.html" %}

{% block title %}Dashboard - Presensi Sekolah{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl lg:text-3xl font-bold text-gray-800">Dashboard</h1>
    <p class="text-gray-600">Selamat datang di Sistem Presensi Sekolah</p>
</div>

<!-- Stats Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
    {% if current_user.role in ['Admin Sekolah', 'Operator Sekolah'] %}
    <!-- Total Siswa -->
    <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-blue-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600 mb-1">Total Siswa Aktif</p>
                <p class="text-3xl font-bold text-gray-800">{{ stats.total_siswa or 0 }}</p>
            </div>
            <div class="bg-blue-100 p-3 rounded-full">
                <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
                </svg>
            </div>
        </div>
    </div>
    
    <!-- Total Guru -->
    <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-purple-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600 mb-1">Total Guru</p>
                <p class="text-3xl font-bold text-gray-800">{{ stats.total_guru or 0 }}</p>
            </div>
            <div class="bg-purple-100 p-3 rounded-full">
                <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                </svg>
            </div>
        </div>
    </div>
    
    <!-- Hadir Hari Ini -->
    <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-green-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600 mb-1">Hadir Hari Ini</p>
                <p class="text-3xl font-bold text-gray-800">{{ stats.hadir_hari_ini or 0 }}</p>
            </div>
            <div class="bg-green-100 p-3 rounded-full">
                <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
        </div>
    </div>
    
    <!-- Alpa Hari Ini -->
    <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-red-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600 mb-1">Alpa Hari Ini</p>
                <p class="text-3xl font-bold text-gray-800">{{ stats.alpa_hari_ini or 0 }}</p>
            </div>
            <div class="bg-red-100 p-3 rounded-full">
                <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </div>
        </div>
    </div>
    
    {% elif current_user.role == 'Wali Kelas' %}
    <!-- Total Siswa Kelas -->
    <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-blue-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600 mb-1">Total Siswa di Kelas</p>
                <p class="text-3xl font-bold text-gray-800">{{ stats.total_siswa_kelas or 0 }}</p>
            </div>
            <div class="bg-blue-100 p-3 rounded-full">
                <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
                </svg>
            </div>
        </div>
    </div>
    
    <!-- Hadir Hari Ini -->
    <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-green-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600 mb-1">Hadir Hari Ini</p>
                <p class="text-3xl font-bold text-gray-800">{{ stats.hadir_hari_ini or 0 }}</p>
            </div>
            <div class="bg-green-100 p-3 rounded-full">
                <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
        </div>
    </div>
    
    {% elif current_user.role == 'Wali Siswa' %}
    <!-- Nama Siswa -->
    <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-blue-500 col-span-2">
        <div>
            <p class="text-sm text-gray-600 mb-1">Nama Siswa</p>
            <p class="text-2xl font-bold text-gray-800">{{ stats.nama_siswa or '-' }}</p>
            <p class="text-sm text-gray-500 mt-1">NISN: {{ stats.nisn or '-' }}</p>
        </div>
    </div>
    
    <!-- Kehadiran Bulan Ini -->
    <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-green-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600 mb-1">Hadir Bulan Ini</p>
                <p class="text-3xl font-bold text-gray-800">{{ stats.hadir_bulan_ini or 0 }}</p>
            </div>
            <div class="bg-green-100 p-3 rounded-full">
                <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
        </div>
    </div>
    
    <!-- Total Hari Sekolah -->
    <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-purple-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600 mb-1">Hari Sekolah</p>
                <p class="text-3xl font-bold text-gray-800">{{ stats.hari_sekolah or 0 }}</p>
            </div>
            <div class="bg-purple-100 p-3 rounded-full">
                <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
            </div>
        </div>
    </div>
    {% endif %}
</div>

{% if stats.my_qr %}
<div class="mt-6 mb-8 bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden flex flex-col md:flex-row">
    <div class="bg-blue-600 p-6 flex flex-col justify-center items-center text-white md:w-1/3">
        <svg class="w-12 h-12 mb-3 opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path></svg>
        <h3 class="text-xl font-bold text-center">Kartu Digital Anda</h3>
        <p class="text-blue-100 text-sm text-center">Gunakan untuk Scan Absensi</p>
    </div>
    <div class="p-6 flex flex-col md:flex-row items-center gap-6 w-full">
        <div class="border-4 border-gray-800 p-2 rounded-lg bg-white shadow-sm">
            <img src="{{ stats.my_qr }}" alt="QR Code Saya" class="w-40 h-40 object-contain">
        </div>
        <div class="text-center md:text-left">
            <p class="text-xs text-gray-500 uppercase font-bold tracking-wider mb-1">Identitas Pemilik</p>
            <h2 class="text-2xl font-bold text-gray-800">{{ current_user.nama_lengkap }}</h2>
            <p class="text-gray-600 font-mono">{{ current_user.username }}</p>
            <span class="inline-block mt-2 px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-bold">{{ current_user.role }}</span>
        </div>
    </div>
</div>
{% endif %}

<!-- Quick Links -->
<div class="mt-8">
    <h2 class="text-xl font-bold text-gray-800 mb-4">Menu Cepat</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {% if current_user.role in ['Admin Sekolah', 'Operator Sekolah'] %}
        <a href="{{ url_for('scan_masuk') }}" class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-200 border-l-4 border-blue-500">
            <div class="flex items-center space-x-4">
                <div class="bg-blue-100 p-3 rounded-full">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path>
                    </svg>
                </div>
                <div>
                    <p class="font-semibold text-gray-800">Scan QR Masuk</p>
                    <p class="text-sm text-gray-600">Absensi kedatangan siswa</p>
                </div>
            </div>
        </a>
        
        <a href="{{ url_for('scan_pulang') }}" class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-200 border-l-4 border-green-500">
            <div class="flex items-center space-x-4">
                <div class="bg-green-100 p-3 rounded-full">
                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path>
                    </svg>
                </div>
                <div>
                    <p class="font-semibold text-gray-800">Scan QR Pulang</p>
                    <p class="text-sm text-gray-600">Absensi kepulangan siswa</p>
                </div>
            </div>
        </a>
        
        <a href="{{ url_for('absensi') }}" class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-200 border-l-4 border-purple-500">
            <div class="flex items-center space-x-4">
                <div class="bg-purple-100 p-3 rounded-full">
                    <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                    </svg>
                </div>
                <div>
                    <p class="font-semibold text-gray-800">Data Absensi</p>
                    <p class="text-sm text-gray-600">Lihat & update absensi</p>
                </div>
            </div>
        </a>
        {% endif %}
        
        {% if current_user.role == 'Wali Kelas' %}
        <a href="{{ url_for('monitoring') }}" class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-200 border-l-4 border-blue-500">
            <div class="flex items-center space-x-4">
                <div class="bg-blue-100 p-3 rounded-full">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                    </svg>
                </div>
                <div>
                    <p class="font-semibold text-gray-800">Monitoring Kelas</p>
                    <p class="text-sm text-gray-600">Pantau kehadiran kelas</p>
                </div>
            </div>
        </a>
        {% endif %}
        
        {% if current_user.role == 'Wali Siswa' %}
        <a href="{{ url_for('riwayat') }}" class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-200 border-l-4 border-blue-500">
            <div class="flex items-center space-x-4">
                <div class="bg-blue-100 p-3 rounded-full">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div>
                    <p class="font-semibold text-gray-800">Riwayat Kehadiran</p>
                    <p class="text-sm text-gray-600">Lihat riwayat absensi anak</p>
                </div>
            </div>
        </a>
        {% endif %}
    </div>
</div>
{% endblock %}