{% extends "base.html" %}
{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-minhaj-blue to-blue-900 rounded-xl shadow-lg p-6 text-white flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold">Selamat Datang, Admin</h1>
            <p class="text-blue-100 mt-1">Panel kontrol manajemen royalti Penerbit Minhaj Pustaka.</p>
        </div>
        <div class="hidden md:block text-5xl text-white opacity-20">
            <i class="fas fa-chart-line"></i>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-minhaj-teal flex items-center justify-between transition hover:shadow-md">
            <div>
                <p class="text-sm font-medium text-gray-500">Total Penulis</p>
                <p class="text-3xl font-bold text-gray-800">{{ penulis_count }}</p>
            </div>
            <div class="w-12 h-12 bg-teal-50 rounded-full flex items-center justify-center text-minhaj-teal text-xl">
                <i class="fas fa-user-edit"></i>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-minhaj-blue flex items-center justify-between transition hover:shadow-md">
            <div>
                <p class="text-sm font-medium text-gray-500">Katalog Buku</p>
                <p class="text-3xl font-bold text-gray-800">{{ buku_count }}</p>
            </div>
            <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center text-minhaj-blue text-xl">
                <i class="fas fa-book"></i>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-minhaj-orange flex items-center justify-between transition hover:shadow-md">
            <div>
                <p class="text-sm font-medium text-gray-500">Transaksi Penjualan</p>
                <p class="text-3xl font-bold text-gray-800">{{ penjualan_count }}</p>
            </div>
            <div class="w-12 h-12 bg-orange-50 rounded-full flex items-center justify-center text-minhaj-orange text-xl">
                <i class="fas fa-shopping-cart"></i>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-green-500 flex items-center justify-between transition hover:shadow-md">
            <div>
                <p class="text-sm font-medium text-gray-500">Total Royalti</p>
                <p class="text-2xl font-bold text-green-600">Rp {{ "{:,}".format(total_royalti) }}</p>
            </div>
            <div class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center text-green-600 text-xl">
                <i class="fas fa-coins"></i>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <a href="/add-penjualan" class="group bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition border border-gray-100">
            <div class="flex items-center space-x-4">
                <div class="bg-minhaj-orange group-hover:bg-orange-700 text-white w-14 h-14 rounded-lg flex items-center justify-center text-2xl transition">
                    <i class="fas fa-cash-register"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-800 group-hover:text-minhaj-orange transition">Input Penjualan Baru</h3>
                    <p class="text-sm text-gray-500">Catat transaksi penjualan harian dari berbagai channel.</p>
                </div>
            </div>
        </a>

        <a href="/add-buku" class="group bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition border border-gray-100">
            <div class="flex items-center space-x-4">
                <div class="bg-minhaj-blue group-hover:bg-blue-900 text-white w-14 h-14 rounded-lg flex items-center justify-center text-2xl transition">
                    <i class="fas fa-plus-square"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-800 group-hover:text-minhaj-blue transition">Tambah Katalog Buku</h3>
                    <p class="text-sm text-gray-500">Daftarkan buku baru beserta pengaturan royaltinya.</p>
                </div>
            </div>
        </a>
    </div>
</div>
{% endblock %}