{% extends "admin_master/base_admin_master.html" %}
{% block title %}Manajemen Akun Wali - Admin Master{% endblock %}

{% block page_header %}
<h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Manajemen Akun Wali</h5>
<small class="text-muted" style="font-size: 0.85rem;">Kelola akun wali santri. Hanya reset password, tidak mengedit data santri.</small>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <span class="text-muted" style="font-size: 0.85rem;">Total: <strong>{{ wali_list|length }}</strong> akun wali</span>
    <div>
        <input type="text" id="searchWali" class="form-control form-control-sm" placeholder="Cari nama/username..." style="width: 220px;" oninput="filterWali()">
    </div>
</div>

<div class="db-card p-0">
    <div class="table-responsive">
        <table class="table table-master mb-0" id="tabelWali">
            <thead>
                <tr>
                    <th>Nama Santri</th>
                    <th>Nama Wali</th>
                    <th>Username</th>
                    <th>Jenis Kelamin</th>
                    <th>Status</th>
                    <th class="text-end">Aksi</th>
                </tr>
            </thead>
            <tbody>
                {% for w in wali_list %}
                <tr>
                    <td><strong>{{ w.nama_lengkap }}</strong></td>
                    <td>{{ w.nama_wali or '-' }}</td>
                    <td><code>{{ w.username_abadi or '-' }}</code></td>
                    <td>{{ w.jenis_kelamin or '-' }}</td>
                    <td>
                        {% if w.status_keaktifan == 'Aktif' %}
                        <span class="badge badge-aktif rounded-pill fw-semibold" style="font-size: 0.75rem;">● Aktif</span>
                        {% else %}
                        <span class="badge badge-nonaktif rounded-pill fw-semibold" style="font-size: 0.75rem;">● {{ w.status_keaktifan }}</span>
                        {% endif %}
                    </td>
                    <td class="text-end">
                        <form action="/admin_master/wali/reset_password/{{ w.no_baris }}" method="POST" class="d-inline">
                            <button type="submit" class="btn btn-outline-warning btn-sm" onclick="return confirm('Reset password wali {{ w.nama_lengkap }}?')">
                                <i class="fas fa-key me-1"></i> Reset Password
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
                {% if not wali_list %}
                <tr>
                    <td colspan="6">
                        <div class="empty-state">
                            <i class="fas fa-user-friends"></i>
                            <p>Belum ada akun wali yang terdaftar.</p>
                        </div>
                    </td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function filterWali() {
    const query = document.getElementById('searchWali').value.toLowerCase();
    const rows = document.querySelectorAll('#tabelWali tbody tr');
    rows.forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(query) ? '' : 'none';
    });
}
</script>
{% endblock %}