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

{% block title %}Pengaturan Akun{% endblock %}
{% block desktop_title %}Pengaturan Akun{% endblock %}
{% block header_label %}Sistem{% endblock %}
{% block header_title %}Pengaturan Akun{% endblock %}
{% block header_subtitle %}Personalisasi dan Keamanan{% endblock %}

{% block content %}

<!-- User Profile Card -->
<section class="rounded-3xl bg-surface-container-lowest p-spacing-md shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] flex items-center gap-3">
    <div class="w-14 h-14 rounded-2xl bg-primary/10 text-primary flex items-center justify-center flex-shrink-0">
        <span class="material-symbols-outlined text-[28px]">person</span>
    </div>
    <div class="flex flex-col min-w-0 flex-1">
        <h3 class="font-headline-sm text-headline-sm text-on-surface truncate">{{ santri.nama_lengkap }}</h3>
        <p class="font-body-sm text-body-sm text-on-surface-variant truncate">
            {% if session.get('wali_tabel') == 'databasemaster' %}Santri Aktif{% else %}Calon Santri{% endif %}  
            {{ santri.id_santri if session.get('wali_tabel') == 'databasemaster' else santri.id_pendaftaran }}
        </p>
    </div>
</section>

<!-- Preferensi Tampilan -->
<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">palette</span>
        <h3 class="font-label-lg text-label-lg text-on-surface">Tampilan</h3>
    </div>
    <div class="p-spacing-md">
        <div class="flex items-center justify-between">
            <div>
                <h4 class="font-body-md text-body-md text-on-surface font-semibold">Mode Gelap</h4>
                <p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">Ubah tema aplikasi ke warna gelap.</p>
            </div>
            
            <button id="theme-toggle" class="relative inline-flex h-7 w-12 items-center rounded-full bg-surface-variant transition-colors focus:outline-none">
                <span class="sr-only">Aktifkan Mode Gelap</span>
                <span id="theme-toggle-knob" class="inline-block h-5 w-5 transform rounded-full bg-white transition-transform translate-x-1"></span>
            </button>
        </div>
    </div>
</section>

<!-- Pengaturan Keamanan -->
<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">lock</span>
        <h3 class="font-label-lg text-label-lg text-on-surface">Keamanan Akun</h3>
    </div>
    <div class="p-spacing-md">
        <form action="/wali/ganti_password" method="POST" class="flex flex-col gap-3">
            <div>
                <label class="font-label-sm text-label-sm text-on-surface-variant block mb-1">Password Lama</label>
                <input type="password" name="password_lama" required class="w-full bg-surface-container-low border border-outline-variant rounded-xl px-3 py-2 text-body-md text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all">
            </div>
            <div>
                <label class="font-label-sm text-label-sm text-on-surface-variant block mb-1">Password Baru</label>
                <input type="password" name="password_baru" required class="w-full bg-surface-container-low border border-outline-variant rounded-xl px-3 py-2 text-body-md text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all">
            </div>
            <button type="submit" class="mt-2 w-full py-2.5 rounded-xl bg-primary text-on-primary font-label-md hover:bg-primary/90 transition-colors flex justify-center items-center gap-2">
                <span class="material-symbols-outlined text-[18px]">key</span>
                Ganti Password
            </button>
        </form>
    </div>
</section>

<!-- Pusat Bantuan -->
<section class="rounded-3xl bg-surface-container-lowest shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] overflow-hidden">
    <a href="/wali/kontak" class="flex items-center justify-between p-spacing-md no-underline active:bg-surface-container-low transition-colors">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-secondary-container/50 text-on-secondary-container flex items-center justify-center">
                <span class="material-symbols-outlined text-[20px]">support_agent</span>
            </div>
            <div>
                <h4 class="font-body-md text-body-md text-on-surface font-semibold">Pusat Bantuan</h4>
                <p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">Hubungi pengurus pondok.</p>
            </div>
        </div>
        <span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
    </a>
</section>

<!-- Logout Button -->
<a href="/wali/logout" onclick="return confirm('Apakah Anda yakin ingin keluar?');"
   class="rounded-2xl bg-error-container/50 p-spacing-md flex items-center justify-center gap-2 no-underline active:scale-[0.98] transition-all hover:bg-error-container mt-4 mb-4">
    <span class="material-symbols-outlined text-[20px] text-on-error-container">logout</span>
    <span class="font-label-lg text-label-lg text-on-error-container">Keluar / Logout</span>
</a>


<script>
    document.addEventListener('DOMContentLoaded', () => {
        const themeToggleBtn = document.getElementById('theme-toggle');
        const themeToggleKnob = document.getElementById('theme-toggle-knob');
        
        // Cek status saat ini
        const isDark = document.documentElement.classList.contains('dark');
        updateToggleButton(isDark);
        
        themeToggleBtn.addEventListener('click', () => {
            const willBeDark = !document.documentElement.classList.contains('dark');
            
            if (willBeDark) {
                document.documentElement.classList.add('dark');
                localStorage.setItem('theme', 'dark');
            } else {
                document.documentElement.classList.remove('dark');
                localStorage.setItem('theme', 'light');
            }
            
            updateToggleButton(willBeDark);
        });
        
        function updateToggleButton(dark) {
            if (dark) {
                themeToggleBtn.classList.replace('bg-surface-variant', 'bg-primary');
                themeToggleKnob.classList.replace('translate-x-1', 'translate-x-6');
            } else {
                themeToggleBtn.classList.replace('bg-primary', 'bg-surface-variant');
                themeToggleKnob.classList.replace('translate-x-6', 'translate-x-1');
            }
        }
    });
</script>

{% endblock %}