<?php
// fee_defaulters.php
?>
<link rel="stylesheet" href="assets/css/accounts.css">

<div id="feeModule" dir="rtl" class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold text-danger urdu-bold mb-1">بقایا طلباء کی فہرست (Fee Defaulters)</h2>
            <p class="text-muted urdu-regular fs-5">وہ طلباء جنہوں نے موجودہ ماہ کی فیس جمع نہیں کرائی</p>
        </div>
        <a href="fee_dashboard" class="btn btn-outline-dark px-4 py-2 rounded-3 urdu-regular fs-5">
            <i class="bi bi-arrow-right me-2"></i> واپس
        </a>
    </div>

    <!-- Defaulters Table -->
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-danger-subtle urdu-bold">
                        <tr>
                            <th class="px-4 py-3">#</th>
                            <th class="py-3">طالب علم</th>
                            <th class="py-3">فیس کی قسم</th>
                            <th class="py-3">ماہانہ رقم</th>
                            <th class="py-3">واجب الادا تاریخ</th>
                            <th class="px-4 py-3 text-center">ایکشن</th>
                        </tr>
                    </thead>
                    <tbody id="defaulterTableBody">
                        <tr><td colspan="6" class="text-center py-5 text-muted urdu-regular fs-4">لوڈ ہو رہا ہے...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="assets/js/student_fee.js"></script>
<script>
$(document).ready(function() {
    // Ideally fetch from APIs/fee_api.php?action=get_defaulters
    // Logic to populate defaulters
});
</script>
