{% extends "yayasan/base.html" %}

{% block title %}Cek Tagihan SPP - {{ yayasan.nama }}{% endblock %}

{% block content %}
<section class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body p-5">
                        <h3 class="text-center mb-4"><i class="fas fa-search-dollar me-2 text-success"></i>Cek Tagihan SPP</h3>

                        <form method="POST" action="/cek-tagihan">
                            <div class="mb-3">
                                <label class="form-label">Nomor Induk Siswa (NIS)</label>
                                <input type="text" name="nis" class="form-control form-control-lg" placeholder="Masukkan NIS">
                            </div>
                            <div class="text-center mb-3">- atau -</div>
                            <div class="mb-4">
                                <label class="form-label">Nomor WhatsApp Orang Tua</label>
                                <input type="text" name="no_wa" class="form-control form-control-lg" placeholder="Contoh: 6281234567890">
                            </div>
                            <button type="submit" class="btn btn-primary w-100 btn-lg">
                                <i class="fas fa-search me-2"></i>Cek Tagihan
                            </button>
                        </form>

                        {% if error %}
                        <div class="alert alert-danger mt-4">
                            <i class="fas fa-exclamation-circle me-2"></i>{{ error }}
                        </div>
                        {% endif %}

                        {% if siswa %}
                        <div class="mt-4">
                            <div class="alert alert-success">
                                <h5><i class="fas fa-user-graduate me-2"></i>{{ siswa.nama }}</h5>
                                <p class="mb-1">Kelas: {{ siswa.kelas }}</p>
                                <p class="mb-0">NIS: {{ siswa.nis }}</p>
                            </div>

                            {% if tagihan %}
                            <h5 class="mt-4 mb-3">Daftar Tagihan:</h5>
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead class="table-success">
                                        <tr>
                                            <th>Bulan</th>
                                            <th>Tahun Ajaran</th>
                                            <th>Nominal</th>
                                            <th>Denda</th>
                                            <th>Total</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% set total = namespace(value=0) %}
                                        {% for t in tagihan %}
                                        <tr>
                                            <td>{{ t.bulan }}</td>
                                            <td>{{ t.tahun_ajaran }}</td>
                                            <td>Rp {{ "{:,.0f}".format(t.nominal).replace(",", ".") }}</td>
                                            <td>Rp {{ "{:,.0f}".format(t.denda).replace(",", ".") }}</td>
                                            <td>Rp {{ "{:,.0f}".format(t.total_bayar).replace(",", ".") }}</td>
                                            <td><span class="badge bg-warning">Belum Bayar</span></td>
                                        </tr>
                                        {% set total.value = total.value + t.total_bayar %}
                                        {% endfor %}
                                    </tbody>
                                    <tfoot class="table-dark">
                                        <tr>
                                            <th colspan="4" class="text-end">TOTAL</th>
                                            <th colspan="2">Rp {{ "{:,.0f}".format(total.value).replace(",", ".") }}</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <div class="alert alert-info mt-3">
                                <i class="fas fa-info-circle me-2"></i>
                                Untuk pembayaran, transfer ke: <strong>{{ yayasan.rekening }}</strong><br>
                                Setelah transfer, konfirmasi via WhatsApp dengan command: <code>!bayar [kode]</code>
                            </div>
                            {% else %}
                            <div class="alert alert-success mt-3">
                                <i class="fas fa-check-circle me-2"></i>
                                Selamat! Tidak ada tagihan SPP yang belum dibayar.
                            </div>
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}