{% extends 'wali/base_wali.html' %}

{% block title %}Beranda{% endblock %}
{% block desktop_title %}Beranda{% endblock %}
{% block header_label %}Beranda{% endblock %}
{% block header_title %}Assalamu'alaikum, {{ santri.nama_ayah or santri.nama_wali or 'Wali Santri' }}{% endblock %}
{% block header_subtitle %}Wali dari {{ santri.nama_lengkap }}{% endblock %}

{% block content %}

<!-- ===== HERO WELCOME CARD: SANTRI PROFILE ===== -->
<section class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-primary-container via-primary to-surface-tint p-spacing-lg text-on-primary shadow-[0_16px_36px_-8px_rgba(0,108,81,0.28)]">
    <!-- Geometric Motif Overlay -->
    <svg class="pointer-events-none absolute -right-12 -bottom-16 w-64 h-64 text-on-primary/10" fill="currentColor" viewBox="0 0 200 200">
        <path d="M100 0 L122 78 L200 100 L122 122 L100 200 L78 122 L0 100 L78 78 Z"></path>
        <circle cx="100" cy="100" fill="none" r="45" stroke="currentColor" stroke-dasharray="8 6" stroke-width="6"></circle>
        <circle cx="100" cy="100" fill="none" opacity="0.6" r="80" stroke="currentColor" stroke-width="2"></circle>
    </svg>

    <div class="relative z-10 flex flex-col gap-spacing-md">
        <div class="flex items-start justify-between gap-spacing-md">
            <!-- Text Details -->
            <div class="flex flex-col min-w-0 flex-1">
                <div class="inline-flex items-center gap-1.5 self-start px-2.5 py-1 rounded-full bg-surface-container-lowest/20 backdrop-blur-md text-surface-bright font-label-sm text-label-sm">
                    <span class="w-1.5 h-1.5 rounded-full bg-secondary-fixed animate-pulse"></span>
                    {% if tabel_asal == 'databasemaster' %}
                    Santri Aktif • Kelas {{ santri.tingkat_kelas }} {{ santri.kamar }}
                    {% else %}
                    Calon Santri Baru
                    {% endif %}
                </div>
                <h2 class="mt-2 font-headline-md text-headline-md text-on-primary leading-snug truncate">
                    {{ santri.nama_lengkap }}
                </h2>
                <p class="font-body-sm text-body-sm text-surface-bright/80 flex items-center gap-1 mt-0.5">
                    <span class="material-symbols-outlined text-[16px] text-secondary-fixed">badge</span>
                    {% if tabel_asal == 'databasemaster' %}NIS: {{ santri.id_santri }}{% else %}No. Pendaftaran: {{ santri.id_pendaftaran }}{% endif %}
                </p>
                {% if tabel_asal == 'databasemaster' %}
                <div class="mt-3 flex items-center gap-1.5 text-surface-bright/90 font-body-sm text-body-sm">
                    <span class="material-symbols-outlined text-[16px] text-secondary-fixed-dim">meeting_room</span>
                    <span class="truncate">Kamar {{ santri.kamar }}</span>
                </div>
                {% endif %}
            </div>
            <!-- Student Photo Frame -->
            <div class="relative flex-shrink-0">
                <div class="w-20 h-20 rounded-2xl overflow-hidden shadow-lg bg-surface-container-lowest/30 p-1 backdrop-blur-sm">
                    {% if santri.foto_santri %}
                    <img alt="Foto {{ santri.nama_lengkap }}" class="w-full h-full object-cover rounded-xl" src="{{ url_for('secure_upload', folder='santri', filename=santri.foto_santri.split('/')[-1]) }}" />
                    {% else %}
                    <div class="w-full h-full rounded-xl bg-surface-container-lowest/40 flex items-center justify-center">
                        <span class="material-symbols-outlined text-[36px] text-on-primary/50">person</span>
                    </div>
                    {% endif %}
                </div>
                <div class="absolute -bottom-1 -right-1 bg-surface-container-lowest text-primary rounded-full p-0.5 shadow-md flex items-center justify-center">
                    <span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">verified</span>
                </div>
            </div>
        </div>

        <!-- Quick Action Buttons -->
        <div class="grid grid-cols-2 gap-spacing-xs pt-1">
            <a href="/wali/biodata" class="h-10 px-3 rounded-xl bg-surface-container-lowest/20 hover:bg-surface-container-lowest/30 active:scale-[0.98] transition-all backdrop-blur-md text-surface-bright font-label-md text-label-md flex items-center justify-center gap-1.5 no-underline">
                <span class="material-symbols-outlined text-[18px]">person</span>
                <span>Lihat Biodata</span>
            </a>
            <a href="/wali/kartu" class="h-10 px-3 rounded-xl bg-surface-container-lowest text-primary hover:bg-surface-bright active:scale-[0.98] transition-all shadow-md font-label-md text-label-md flex items-center justify-center gap-1.5 no-underline">
                <span class="material-symbols-outlined text-[18px]">id_card</span>
                <span>Kartu Santri</span>
            </a>
        </div>
    </div>
</section>

<!-- ===== RINGKASAN TAGIHAN ===== -->
<section class="rounded-2xl bg-surface-container-lowest p-spacing-md shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] flex items-center justify-between gap-spacing-sm">
    <div class="flex items-center gap-3 min-w-0">
        <div class="w-11 h-11 rounded-2xl {% if sisa_tagihan > 0 %}bg-error/10 text-error{% else %}bg-primary/10 text-primary{% endif %} flex items-center justify-center flex-shrink-0">
            <span class="material-symbols-outlined text-[24px]">account_balance_wallet</span>
        </div>
        <div class="flex flex-col min-w-0">
            <span class="font-body-sm text-body-sm text-on-surface-variant truncate">Sisa Tagihan Belum Lunas</span>
            <span class="font-headline-sm text-headline-sm {% if sisa_tagihan > 0 %}text-error{% else %}text-primary{% endif %} font-semibold">
                Rp {{ "{:,.0f}".format(sisa_tagihan).replace(',', '.') }}
            </span>
        </div>
    </div>
    <a href="/wali/tagihan" class="flex-shrink-0 h-9 px-4 rounded-full bg-primary/10 text-primary hover:bg-primary/20 active:scale-95 transition-all font-label-md text-label-md flex items-center gap-1 no-underline">
        <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
        Detail
    </a>
</section>

<!-- ===== QUICK MENU GRID ===== -->
<section class="rounded-3xl bg-surface-container-lowest p-4 shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] flex flex-col gap-3">
    <div class="grid grid-cols-4 gap-y-3.5 gap-x-2">
        <a href="/wali/tagihan" class="flex flex-col items-center gap-1.5 text-center group active:scale-95 transition-transform focus:outline-none no-underline">
            <div class="w-12 h-12 rounded-2xl bg-primary/10 text-primary flex items-center justify-center group-hover:bg-primary/20 transition-colors shadow-sm">
                <span class="material-symbols-outlined text-[24px]">receipt_long</span>
            </div>
            <span class="font-label-md text-[11px] font-semibold text-on-surface leading-tight">Tagihan SPP</span>
        </a>

        <a href="/wali/kitab" class="flex flex-col items-center gap-1.5 text-center group active:scale-95 transition-transform focus:outline-none no-underline">
            <div class="w-12 h-12 rounded-2xl bg-secondary-container/50 text-on-secondary-container flex items-center justify-center group-hover:bg-secondary-container transition-colors shadow-sm">
                <span class="material-symbols-outlined text-[24px]">menu_book</span>
            </div>
            <span class="font-label-md text-[11px] font-semibold text-on-surface leading-tight">Kitab & Wirid</span>
        </a>

        <a href="/wali/biodata" class="flex flex-col items-center gap-1.5 text-center group active:scale-95 transition-transform focus:outline-none no-underline">
            <div class="w-12 h-12 rounded-2xl bg-surface-container-low text-primary flex items-center justify-center group-hover:bg-surface-container transition-colors shadow-sm">
                <span class="material-symbols-outlined text-[24px]">person</span>
            </div>
            <span class="font-label-md text-[11px] font-semibold text-on-surface leading-tight">Biodata Santri</span>
        </a>

        <a href="/wali/kartu" class="flex flex-col items-center gap-1.5 text-center group active:scale-95 transition-transform focus:outline-none no-underline">
            <div class="w-12 h-12 rounded-2xl bg-surface-container-low text-tertiary flex items-center justify-center group-hover:bg-surface-container transition-colors shadow-sm">
                <span class="material-symbols-outlined text-[24px]">id_card</span>
            </div>
            <span class="font-label-md text-[11px] font-semibold text-on-surface leading-tight">Kartu Santri</span>
        </a>

        <a href="/wali/pengumuman" class="flex flex-col items-center gap-1.5 text-center group active:scale-95 transition-transform focus:outline-none no-underline">
            <div class="w-12 h-12 rounded-2xl bg-primary/10 text-primary flex items-center justify-center group-hover:bg-primary/20 transition-colors shadow-sm">
                <span class="material-symbols-outlined text-[24px]">campaign</span>
            </div>
            <span class="font-label-md text-[11px] font-semibold text-on-surface leading-tight">Pengumuman</span>
        </a>

        <a href="/wali/kontak" class="flex flex-col items-center gap-1.5 text-center group active:scale-95 transition-transform focus:outline-none no-underline">
            <div class="w-12 h-12 rounded-2xl bg-secondary-fixed/40 text-on-secondary-fixed-variant flex items-center justify-center group-hover:bg-secondary-fixed/60 transition-colors shadow-sm">
                <span class="material-symbols-outlined text-[24px]">headset_mic</span>
            </div>
            <span class="font-label-md text-[11px] font-semibold text-on-surface leading-tight">Kontak Kami</span>
        </a>

        <a href="/wali/pengaturan" class="flex flex-col items-center gap-1.5 text-center group active:scale-95 transition-transform focus:outline-none no-underline">
            <div class="w-12 h-12 rounded-2xl bg-surface-container-high text-on-surface flex items-center justify-center group-hover:bg-surface-container-highest transition-colors shadow-sm">
                <span class="material-symbols-outlined text-[24px]">settings</span>
            </div>
            <span class="font-label-md text-[11px] font-semibold text-on-surface leading-tight">Pengaturan</span>
        </a>
    </div>
</section>

<!-- ===== STATUS RINGKAS (2 Cards) ===== -->
<section class="flex flex-col gap-spacing-xs">
    <h3 class="font-headline-sm text-headline-sm text-on-surface">Status Ringkas</h3>
    <div class="grid grid-cols-2 gap-spacing-xs">
        <!-- Status Tagihan -->
        <div class="rounded-2xl bg-surface-container-lowest p-3 shadow-[0_4px_16px_-2px_rgba(45,52,54,0.04)] flex flex-col justify-between h-28">
            <div class="flex items-center justify-between">
                <span class="material-symbols-outlined text-[20px] {% if sisa_tagihan > 0 %}text-error{% else %}text-primary{% endif %}">payments</span>
                <span class="px-1.5 py-0.5 rounded-full {% if sisa_tagihan > 0 %}bg-error-container text-on-error-container{% else %}bg-primary-fixed text-on-primary-fixed{% endif %} font-label-sm text-[10px]">
                    {% if sisa_tagihan > 0 %}Belum Lunas{% else %}Lunas{% endif %}
                </span>
            </div>
            <div>
                <span class="font-headline-sm text-headline-sm text-on-surface block leading-tight">
                    Rp {{ "{:,.0f}".format(sisa_tagihan).replace(',', '.') }}
                </span>
                <span class="font-body-sm text-[11px] text-on-surface-variant block mt-0.5 leading-tight">Sisa Tagihan</span>
            </div>
        </div>
        <!-- Status Data -->
        <div class="rounded-2xl bg-surface-container-lowest p-3 shadow-[0_4px_16px_-2px_rgba(45,52,54,0.04)] flex flex-col justify-between h-28">
            <div class="flex items-center justify-between">
                <span class="material-symbols-outlined text-[20px] text-primary">verified_user</span>
                <span class="px-1.5 py-0.5 rounded-full bg-primary-fixed text-on-primary-fixed font-label-sm text-[10px]">
                    {% if tabel_asal == 'databasemaster' %}Aktif{% else %}Pendaftar{% endif %}
                </span>
            </div>
            <div>
                <span class="font-headline-sm text-headline-sm text-on-surface block leading-tight">
                    {% if tabel_asal == 'databasemaster' %}
                    <span class="material-symbols-outlined text-[20px] text-primary align-middle" style="font-variation-settings: 'FILL' 1;">check_circle</span> Aktif
                    {% else %}
                    <span class="material-symbols-outlined text-[20px] text-outline align-middle">schedule</span> Proses
                    {% endif %}
                </span>
                <span class="font-body-sm text-[11px] text-on-surface-variant block mt-0.5 leading-tight">Status Santri</span>
            </div>
        </div>
    </div>
</section>

<!-- ===== WARTA & PENGUMUMAN ===== -->
<section class="flex flex-col gap-spacing-md">
    <div class="flex items-center justify-between">
        <h3 class="font-headline-sm text-headline-sm text-on-surface">Pengumuman Terbaru</h3>
        <a href="/wali/pengumuman" class="font-label-md text-label-md text-primary hover:underline flex items-center gap-0.5 no-underline">
            Lihat Semua
            <span class="material-symbols-outlined text-[16px]">chevron_right</span>
        </a>
    </div>

    <div class="flex flex-col gap-spacing-sm">
        {% if pengumuman %}
            {% for p in pengumuman %}
            <article class="rounded-3xl bg-surface-container-lowest p-spacing-md shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] flex flex-col gap-3">
                <div class="flex items-center justify-between gap-2">
                    <span class="px-2.5 py-1 rounded-full bg-primary-fixed text-on-primary-fixed font-label-sm text-label-sm font-semibold">
                        Pengumuman
                    </span>
                    <div class="flex items-center gap-1 text-on-surface-variant font-label-sm text-label-sm">
                        <span class="material-symbols-outlined text-[14px]">calendar_today</span>
                        {{ p.tanggal_posting.strftime('%d %b %Y') }}
                    </div>
                </div>
                <div>
                    <h4 class="font-headline-sm text-headline-sm text-on-surface leading-snug">
                        {{ p.judul }}
                    </h4>
                    <div class="mt-1 font-body-sm text-body-sm text-on-surface-variant line-clamp-2">
                        {{ p.isi_pesan | safe | striptags }}
                    </div>
                </div>
            </article>
            {% endfor %}
        {% else %}
            <div class="rounded-3xl bg-surface-container-lowest p-8 shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] text-center">
                <span class="material-symbols-outlined text-[48px] text-outline/30">notifications_off</span>
                <p class="mt-2 font-label-lg text-label-lg text-on-surface-variant">Belum ada pengumuman.</p>
            </div>
        {% endif %}
    </div>
</section>

{% endblock %}