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

{% block title %}Data Siswa{% endblock %}
{% block page_title %}Data Siswa{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-6">
        <form method="GET" action="/admin/siswa" class="d-flex">
            <input type="text" name="search" class="form-control me-2" placeholder="Cari nama, NIS, atau kelas..." value="{{ search }}">
            <button type="submit" class="btn btn-success"><i class="fas fa-search"></i></button>
        </form>
    </div>
    <div class="col-md-6 text-end">
        <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalTambah">
            <i class="fas fa-plus me-2"></i>Tambah Siswa
        </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>NIS</th>
                        <th>Nama</th>
                        <th>Kelas</th>
                        <th>Ortu WA</th>
                        <th>SPP/Bulan</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    {% for s in siswa_list %}
                    <tr>
                        <td><code>{{ s.nis }}</code></td>
                        <td><strong>{{ s.nama }}</strong></td>
                        <td><span class="badge bg-secondary">{{ s.kelas }}</span></td>
                        <td><a href="https://wa.me/{{ s.no_wa_ortu }}" target="_blank" class="text-decoration-none"><i class="fab fa-whatsapp text-success"></i> {{ s.no_wa_ortu }}</a></td>
                        <td>Rp {{ "{:,.0f}".format(s.spp_bulanan).replace(",", ".") }}</td>
                        <td><span class="badge bg-success">{{ s.status }}</span></td>
                        <td>
                            <a href="/admin/siswa/hapus/{{ s.id }}" class="btn btn-sm btn-outline-danger btn-action" onclick="return confirm('Yakin hapus?')">
                                <i class="fas fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">
                            <i class="fas fa-inbox fa-2x mb-2"></i><br>
                            Tidak ada data siswa
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% if total_pages > 1 %}
    <div class="card-footer d-flex justify-content-between align-items-center">
        <span class="text-muted">Menampilkan {{ siswa_list|length }} dari {{ total }} siswa</span>
        <nav>
            <ul class="pagination pagination-sm mb-0">
                {% if page > 1 %}
                <li class="page-item"><a class="page-link" href="?page={{ page-1 }}{% if search %}&search={{ search }}{% endif %}">«</a></li>
                {% endif %}
                {% for p in range(1, total_pages+1) %}
                <li class="page-item {% if p == page %}active{% endif %}"><a class="page-link" href="?page={{ p }}{% if search %}&search={{ search }}{% endif %}">{{ p }}</a></li>
                {% endfor %}
                {% if page < total_pages %}
                <li class="page-item"><a class="page-link" href="?page={{ page+1 }}{% if search %}&search={{ search }}{% endif %}">»</a></li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}
</div>

<!-- Modal Tambah -->
<div class="modal fade" id="modalTambah" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-user-plus me-2 text-success"></i>Tambah Siswa Baru</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="/admin/siswa/tambah">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">NIS *</label>
                            <input type="text" name="nis" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Nama Lengkap *</label>
                            <input type="text" name="nama" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Kelas *</label>
                            <input type="text" name="kelas" class="form-control" placeholder="Contoh: X IPA 1" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Jurusan</label>
                            <input type="text" name="jurusan" class="form-control" placeholder="Contoh: IPA">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Nama Orang Tua</label>
                            <input type="text" name="nama_ortu" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">No. WA Orang Tua</label>
                            <input type="text" name="no_wa_ortu" class="form-control" placeholder="628xxxxxxxxxx">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">SPP Bulanan</label>
                            <input type="number" name="spp_bulanan" class="form-control" value="150000">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Alamat</label>
                            <input type="text" name="alamat" class="form-control">
                        </div>
                    </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-save me-2"></i>Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}