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

{% block title %}Tagihan & Pembayaran{% endblock %}
{% block desktop_title %}Tagihan & Pembayaran{% endblock %}
{% block header_label %}Tagihan{% endblock %}
{% block header_title %}Tagihan & Pembayaran{% endblock %}
{% block header_subtitle %}Riwayat dan status pembayaran santri{% endblock %}

{% block extra_head %}
<style>
    .tab-btn { transition: all 0.2s; }
    .tab-btn.active { background-color: #10ac84; color: white; }
    .tab-content { display: none; }
    .tab-content.active { display: flex; }
</style>
{% endblock %}

{% block content %}

<!-- Tab Navigation -->
<div class="rounded-2xl bg-surface-container-lowest p-1.5 shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] flex gap-1">
    <button onclick="switchTab('belum')" id="tab-belum" class="tab-btn active flex-1 h-10 rounded-xl font-label-lg text-label-lg flex items-center justify-center gap-1.5 transition-all">
        Belum Lunas
        {% if tagihan_belum %}
        <span class="w-5 h-5 rounded-full bg-error text-on-error text-[10px] font-bold flex items-center justify-center">{{ tagihan_belum|length }}</span>
        {% endif %}
    </button>
    <button onclick="switchTab('riwayat')" id="tab-riwayat" class="tab-btn flex-1 h-10 rounded-xl font-label-lg text-label-lg text-on-surface-variant hover:text-primary flex items-center justify-center gap-1.5 bg-transparent transition-all">
        Riwayat Lunas
    </button>
</div>

<!-- Tab: Belum Lunas -->
<div id="content-belum" class="tab-content active flex-col gap-spacing-sm">
    {% if tagihan_belum %}
        {% for t in tagihan_belum %}
        <div 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 relative overflow-hidden">
            {% if t.status == 'belum' %}
            <div class="absolute top-0 left-0 w-1.5 h-full bg-error rounded-r-full"></div>
            {% else %}
            <div class="absolute top-0 left-0 w-1.5 h-full bg-tertiary-fixed-dim rounded-r-full"></div>
            {% endif %}

            <div class="flex items-center justify-between gap-2 pl-2">
                <span class="px-2.5 py-1 rounded-full {% if t.status == 'belum' %}bg-error-container/80 text-on-error-container{% else %}bg-secondary-container text-on-secondary-container{% endif %} font-label-sm text-label-sm font-semibold">
                    {% if t.status == 'belum' %}Belum Bayar{% else %}Cicilan{% endif %}
                </span>
                <span class="px-2 py-0.5 rounded-full bg-surface-container text-on-surface-variant font-label-sm text-[10px] flex items-center gap-1">
                    <span class="material-symbols-outlined text-[12px]">schedule</span>
                    {{ t.tanggal_tagihan.strftime('%d %b %Y') if t.tanggal_tagihan else '-' }}
                </span>
            </div>

            <div class="pl-2">
                <h4 class="font-headline-sm text-headline-sm text-on-surface leading-tight">
                    {{ t.jenis_tagihan }} {% if t.bulan %}- {{ t.bulan }}{% endif %}
                </h4>
                <div class="mt-3">
                    <span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider block">Sisa Tagihan</span>
                    <span class="font-headline-md text-headline-md text-error font-bold">
                        Rp {{ "{:,.0f}".format(t.nominal - t.jumlah_dibayar).replace(',', '.') }}
                    </span>
                </div>

                <div class="mt-2 flex justify-between text-on-surface-variant font-body-sm text-body-sm">
                    <span>Total: Rp {{ "{:,.0f}".format(t.nominal).replace(',', '.') }}</span>
                    {% if t.jumlah_dibayar > 0 %}
                    <span class="text-primary">Dibayar: Rp {{ "{:,.0f}".format(t.jumlah_dibayar).replace(',', '.') }}</span>
                    {% endif %}
                </div>
            </div>

            {% if t.keterangan %}
            <div class="ml-2 flex items-start gap-2 p-2.5 rounded-2xl bg-surface-container-low">
                <span class="material-symbols-outlined text-[16px] text-on-surface-variant mt-0.5">info</span>
                <span class="font-body-sm text-body-sm text-on-surface-variant">{{ t.keterangan }}</span>
            </div>
            {% endif %}
        </div>
        {% endfor %}

        <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>
                Untuk pembayaran, silakan transfer atau bayar langsung ke bendahara.
            </p>
        </div>
    {% else %}
        <div class="rounded-3xl bg-surface-container-lowest p-8 shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] text-center flex flex-col items-center gap-3">
            <span class="material-symbols-outlined text-[48px] text-primary/30" style="font-variation-settings: 'FILL' 1;">check_circle</span>
            <div>
                <h4 class="font-headline-sm text-headline-sm text-on-surface">Alhamdulillah!</h4>
                <p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Tidak ada tagihan yang belum dibayar.</p>
            </div>
        </div>
    {% endif %}
</div>

<!-- Tab: Riwayat Lunas -->
<div id="content-riwayat" class="tab-content flex-col gap-spacing-sm">
    {% if tagihan_lunas %}
        {% for t in tagihan_lunas %}
        <div 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 relative overflow-hidden opacity-80">
            <div class="absolute top-0 left-0 w-1.5 h-full bg-primary rounded-r-full"></div>

            <div class="flex items-center justify-between gap-2 pl-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">
                    LUNAS
                </span>
                <span class="px-2 py-0.5 rounded-full bg-surface-container text-on-surface-variant font-label-sm text-[10px]">
                    {{ t.tanggal_lunas.strftime('%d %b %Y') if t.tanggal_lunas else '-' }}
                </span>
            </div>

            <div class="pl-2">
                <h4 class="font-headline-sm text-headline-sm text-on-surface leading-tight">
                    {{ t.jenis_tagihan }} {% if t.bulan %}- {{ t.bulan }}{% endif %}
                </h4>
                <div class="mt-3">
                    <span class="font-headline-md text-headline-md text-primary font-bold">
                        Rp {{ "{:,.0f}".format(t.nominal).replace(',', '.') }}
                    </span>
                </div>
            </div>

            {% if t.keterangan %}
            <div class="ml-2 flex items-start gap-2 p-2.5 rounded-2xl bg-surface-container-low">
                <span class="material-symbols-outlined text-[16px] text-on-surface-variant mt-0.5">info</span>
                <span class="font-body-sm text-body-sm text-on-surface-variant">{{ t.keterangan }}</span>
            </div>
            {% endif %}
        </div>
        {% 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 flex flex-col items-center gap-3">
            <span class="material-symbols-outlined text-[48px] text-outline/30">history</span>
            <div>
                <h4 class="font-headline-sm text-headline-sm text-on-surface">Belum ada riwayat</h4>
                <p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Belum ada data tagihan yang lunas.</p>
            </div>
        </div>
    {% endif %}
</div>

{% endblock %}

{% block extra_js %}
<script>
function switchTab(tab) {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
    document.getElementById('tab-' + tab).classList.add('active');
    document.getElementById('content-' + tab).classList.add('active');
}
</script>
{% endblock %}