{% extends "admin/base_admin.html" %}

{% block title %}Pembayaran SPP{% endblock %}
{% block page_title %}Pembayaran SPP{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <form method="GET" action="/admin/pembayaran" class="d-flex gap-2">
            <select name="status" class="form-select" style="width:auto" onchange="this.form.submit()">
                <option value="all" {% if current_status == 'all' %}selected{% endif %}>Semua Status</option>
                <option value="lunas" {% if current_status == 'lunas' %}selected{% endif %}>Lunas</option>
                <option value="belum_bayar" {% if current_status == 'belum_bayar' %}selected{% endif %}>Belum Bayar</option>
            </select>
            <select name="bulan" class="form-select" style="width:auto" onchange="this.form.submit()">
                <option value="">Semua Bulan</option>
                {% for b in bulan_list %}
                <option value="{{ b.bulan }}" {% if current_bulan == b.bulan %}selected{% endif %}>{{ b.bulan }}</option>
                {% endfor %}
            </select>
        </form>
    </div>
    <div class="col-md-4 text-end">
        <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalGenerate">
            <i class="fas fa-file-invoice me-2"></i>Generate Tagihan
        </button>
    </div>
</div>

<div class="card-table">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Nama</th>
                        <th>Kelas</th>
                        <th>Bulan</th>
                        <th>Nominal</th>
                        <th>Denda</th>
                        <th>Total</th>
                        <th>Tgl Bayar</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    {% for p in pembayaran %}
                    <tr>
                        <td><code>#{{ p.id }}</code></td>
                        <td><strong>{{ p.nama }}</strong></td>
                        <td><span class="badge bg-secondary">{{ p.kelas }}</span></td>
                        <td>{{ p.bulan }}</td>
                        <td>Rp {{ "{:,.0f}".format(p.nominal).replace(",", ".") }}</td>
                        <td>Rp {{ "{:,.0f}".format(p.denda).replace(",", ".") }}</td>
                        <td><strong>Rp {{ "{:,.0f}".format(p.total_bayar).replace(",", ".") }}</strong></td>
                        <td>{{ p.tanggal_bayar or '-' }}</td>
                        <td>
                            {% if p.status == 'lunas' %}
                            <span class="badge badge-lunas"><i class="fas fa-check me-1"></i>Lunas</span>
                            {% else %}
                            <span class="badge badge-belum"><i class="fas fa-clock me-1"></i>Belum</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if p.status == 'belum_bayar' %}
                            <form method="POST" action="/admin/pembayaran/bayar/{{ p.id }}" style="display:inline">
                                <button type="submit" class="btn btn-sm btn-success btn-action" onclick="return confirm('Konfirmasi pembayaran #{{ p.id }}?')">
                                    <i class="fas fa-check"></i>
                                </button>
                            </form>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="10" class="text-center text-muted py-4">
                            <i class="fas fa-inbox fa-2x mb-2"></i><br>
                            Tidak ada data pembayaran
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Generate -->
<div class="modal fade" id="modalGenerate" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-file-invoice me-2 text-success"></i>Generate Tagihan Bulanan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="/admin/pembayaran/generate">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Bulan</label>
                        <select name="bulan" class="form-select" required>
                            <option value="Januari">Januari</option>
                            <option value="Februari">Februari</option>
                            <option value="Maret">Maret</option>
                            <option value="April">April</option>
                            <option value="Mei">Mei</option>
                            <option value="Juni">Juni</option>
                            <option value="Juli">Juli</option>
                            <option value="Agustus">Agustus</option>
                            <option value="September">September</option>
                            <option value="Oktober">Oktober</option>
                            <option value="November">November</option>
                            <option value="Desember">Desember</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tahun Ajaran</label>
                        <input type="text" name="tahun" class="form-control" value="2025/2026">
                    </div>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        Tagihan akan dibuat untuk semua siswa aktif.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success"><i class="fas fa-magic me-2"></i>Generate</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}