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

{% block title %}Biodata Santri{% endblock %}
{% block desktop_title %}Biodata Santri{% endblock %}
{% block header_label %}Biodata{% endblock %}
{% block header_title %}Biodata Santri{% endblock %}
{% block header_subtitle %}Data lengkap {{ santri.nama_lengkap }}{% endblock %}

{% block content %}

<!-- Profile Header Card -->
<section class="relative overflow-hidden rounded-3xl bg-surface-container-lowest p-spacing-lg shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] flex flex-col items-center text-center gap-3">
    <svg class="pointer-events-none absolute -left-10 -top-10 w-40 h-40 text-primary/5" fill="currentColor" viewBox="0 0 200 200">
        <circle cx="100" cy="100" r="80"></circle>
    </svg>

    {% if santri.foto_santri %}
    <img src="{{ url_for('secure_upload', folder='santri', filename=santri.foto_santri.split('/')[-1]) }}" class="w-24 h-24 rounded-2xl object-cover shadow-lg ring-4 ring-primary/20 relative z-10" alt="Foto Santri">
    {% else %}
    <div class="w-24 h-24 rounded-2xl bg-surface-container-high flex items-center justify-center shadow-lg ring-4 ring-primary/20 relative z-10">
        <span class="material-symbols-outlined text-[42px] text-on-surface-variant/50">person</span>
    </div>
    {% endif %}

    <div class="relative z-10">
        <h2 class="font-headline-md text-headline-md text-on-surface">{{ santri.nama_lengkap }}</h2>
        <p class="font-body-sm text-body-sm text-on-surface-variant mt-1">
            {{ santri.id_santri if session.get('wali_tabel') == 'databasemaster' else santri.id_pendaftaran }}
        </p>
    </div>

    <span class="px-3 py-1 rounded-full bg-primary-fixed text-on-primary-fixed font-label-sm text-label-sm font-semibold relative z-10">
        {% if session.get('wali_tabel') == 'databasemaster' %}Santri Aktif{% else %}Pendaftar{% endif %}
    </span>
</section>

<!-- Data Pribadi -->
<section class="rounded-3xl bg-surface-container-lowest shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] overflow-hidden">
    <div class="px-spacing-md py-3 bg-surface-container-low flex items-center gap-2">
        <span class="material-symbols-outlined text-[20px] text-primary">person</span>
        <h3 class="font-label-lg text-label-lg text-on-surface">Data Pribadi</h3>
    </div>
    <div class="divide-y divide-surface-variant/50">
        <div class="px-spacing-md py-3.5">
            <span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider block">Nama Panggilan</span>
            <span class="font-body-md text-body-md text-on-surface font-semibold mt-0.5 block">{{ santri.nama_panggilan or '-' }}</span>
        </div>
        <div class="px-spacing-md py-3.5">
            <span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider block">Tempat, Tanggal Lahir</span>
            <span class="font-body-md text-body-md text-on-surface font-semibold mt-0.5 block">{{ santri.tempat_lahir }}, {{ santri.tanggal_lahir if santri.tanggal_lahir else '-' }}</span>
        </div>
        <div class="px-spacing-md py-3.5">
            <span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider block">Jenis Kelamin</span>
            <span class="font-body-md text-body-md text-on-surface font-semibold mt-0.5 block">{{ santri.jenis_kelamin }}</span>
        </div>
        <div class="px-spacing-md py-3.5">
            <span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider block">NIK / NISN</span>
            <span class="font-body-md text-body-md text-on-surface font-semibold mt-0.5 block">{{ santri.nik or '-' }} / {{ santri.nisn or '-' }}</span>
        </div>
        <div class="px-spacing-md py-3.5">
            <span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider block">Alamat Lengkap</span>
            <span class="font-body-md text-body-md text-on-surface font-semibold mt-0.5 block">{{ santri.alamat or '-' }}</span>
        </div>
    </div>
</section>

<!-- Data Keluarga -->
<section class="rounded-3xl bg-surface-container-lowest shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] overflow-hidden">
    <div class="px-spacing-md py-3 bg-surface-container-low flex items-center gap-2">
        <span class="material-symbols-outlined text-[20px] text-primary">group</span>
        <h3 class="font-label-lg text-label-lg text-on-surface">Data Keluarga</h3>
    </div>
    <div class="divide-y divide-surface-variant/50">
        <div class="px-spacing-md py-3.5">
            <span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider block">Nomor KK</span>
            <span class="font-body-md text-body-md text-on-surface font-semibold mt-0.5 block">{{ santri.no_kk or '-' }}</span>
        </div>
        <div class="px-spacing-md py-3.5">
            <span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider block">Nama Ayah</span>
            <span class="font-body-md text-body-md text-on-surface font-semibold mt-0.5 block">{{ santri.nama_ayah or '-' }} {% if santri.status_ayah %}({{ santri.status_ayah }}){% endif %}</span>
        </div>
        <div class="px-spacing-md py-3.5">
            <span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider block">Nama Ibu</span>
            <span class="font-body-md text-body-md text-on-surface font-semibold mt-0.5 block">{{ santri.nama_ibu or '-' }} {% if santri.status_ibu %}({{ santri.status_ibu }}){% endif %}</span>
        </div>
        <div class="px-spacing-md py-3.5">
            <span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider block">Nama Wali / No. WA</span>
            <span class="font-body-md text-body-md text-on-surface font-semibold mt-0.5 block">{{ santri.nama_wali or '-' }} / {{ santri.nomor_wa or '-' }}</span>
        </div>
    </div>
</section>

{% if session.get('wali_tabel') == 'databasemaster' %}
<!-- Informasi Akademik -->
<section class="rounded-3xl bg-surface-container-lowest shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] overflow-hidden">
    <div class="px-spacing-md py-3 bg-surface-container-low flex items-center gap-2">
        <span class="material-symbols-outlined text-[20px] text-primary">school</span>
        <h3 class="font-label-lg text-label-lg text-on-surface">Informasi Akademik</h3>
    </div>
    <div class="divide-y divide-surface-variant/50">
        <div class="px-spacing-md py-3.5">
            <span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider block">Kelas & Kamar</span>
            <span class="font-body-md text-body-md text-on-surface font-semibold mt-0.5 block">Kelas {{ santri.tingkat_kelas }} - Kamar {{ santri.kamar }}</span>
        </div>
        <div class="px-spacing-md py-3.5">
            <span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider block">Username Login</span>
            <span class="font-body-md text-body-md text-on-surface font-semibold mt-0.5 block">{{ santri.username_abadi }}</span>
        </div>
    </div>
</section>
{% endif %}



<!-- Info Footer -->
<div class="rounded-2xl bg-surface-container-low p-3 text-center">
    <p class="font-body-sm text-body-sm text-on-surface-variant flex items-center justify-center gap-1.5">
        <span class="material-symbols-outlined text-[16px]">info</span>
        Jika ada kesalahan data, mohon hubungi pihak pondok.
    </p>
</div>

{% endblock %}