<?php
// fee_assignments.php
require_once('libs/classes/App_DB.php');
require_once('libs/classes/DbPathsArray.php');
$db = new App_DB(DBU::$dba_user);
?>
<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-primary urdu-bold mb-1">فیس تفویض کریں (Assign Student Fees)</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>

    <div class="row g-4">
        <!-- Assignment Form -->
        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-body p-4">
                    <form id="feeAssignmentForm">
                        <div class="row g-3 text-end">
                            <!-- Step 1: Darja + Year Filter -->
                            <div class="col-md-6">
                                <label class="form-label urdu-bold fs-6">درجہ (Darja) <span
                                        class="text-danger">*</span></label>
                                <?php $db->darjaatCmb('filter_darja', 'id="filter_darja" required'); ?>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label urdu-bold fs-6">سالِ آغاز - ہجری <span
                                        class="text-danger">*</span></label>
                                <select class="form-select form-select" id="filter_year" required>
                                    <option value="">سال منتخب کریں</option>
                                    <?php
                                    require_once('classes/Hijri_GregorianConvert.php');
                                    $hijriConv = new Hijri_GregorianConvert();
                                    $todayGreg = date('dmY'); // format DDMMYYYY
                                    $hijriDate = $hijriConv->GregorianToHijri($todayGreg, 'DDMMYYYY');
                                    // Returns DD-MM-YYYY; extract year (last 4 chars)
                                    $currentHijriYear = (int) substr($hijriDate, -4);
                                    // Add one year to the current year to show the future year
                                    $currentHijriYear = $currentHijriYear + 1;
                                    for ($hy = $currentHijriYear; $hy >= $currentHijriYear - 30; $hy--) {
                                        echo "<option value=\"$hy\">$hy هـ</option>";
                                    }
                                    ?>
                                </select>
                            </div>

                            <!-- Step 2: Student Checkboxes -->
                            <div class="col-12 text-end" dir="rtl">
                                <label class="form-label urdu-bold fs-5">طالب علم منتخب کریں <span
                                        class="text-danger">*</span></label>

                                <div class="card border border-light shadow-sm">
                                    <div
                                        class="card-header bg-light d-flex justify-content-between align-items-center py-2">
                                        <div class="form-check mb-0">
                                            <input class="form-check-input" type="checkbox" id="selectAllStudents">
                                            <label class="form-check-label urdu-bold ms-2" for="selectAllStudents">
                                                سب کو منتخب کریں (Select All)
                                            </label>
                                        </div>
                                        <div id="studentCountBadge" class="badge bg-primary rounded-pill urdu-regular">0
                                        </div>
                                    </div>
                                    <div class="card-body p-0" style="max-height: 250px; overflow-y: auto;"
                                        id="studentCheckboxesContainer">
                                        <div class="text-center py-4 text-muted urdu-regular">پہلے درجہ اور سال منتخب
                                            کریں</div>
                                    </div>
                                </div>
                                <div id="studentLoadSpinner" class="text-center mt-2 d-none">
                                    <div class="spinner-border spinner-border-sm text-primary"></div>
                                </div>
                            </div>
                            <div class="col-12">
                                <label class="form-label urdu-bold fs-5">فیس کی قسم</label>
                                <select class="form-select" id="fee_type_id" required>
                                    <option value="">لوڈ ہو رہا ہے...</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label urdu-bold fs-5">رقم (Amount)</label>
                                <input type="number" class="form-control" id="amount" required placeholder="0.00">
                            </div>
                            <div class="col-12">
                                <label class="form-label urdu-bold fs-5">واجب الادا دن (Due Day)</label>
                                <input type="number" class="form-control" id="due_day" value="10" min="1" max="31">
                                <small class="text-muted">ہر ماہ کی اس تاریخ تک فیس جمع کرانا ہوگی</small>
                            </div>

                            <!-- Month & Year for fee period -->
                            <div class="col-md-6">
                                <label class="form-label urdu-bold fs-6">مہینہ (Month) <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="assign_month" required>
                                    <option value="">ماہ منتخب کریں</option>
                                    <option value="1">جنوری - January</option>
                                    <option value="2">فروری - February</option>
                                    <option value="3">مارچ - March</option>
                                    <option value="4">اپریل - April</option>
                                    <option value="5">مئی - May</option>
                                    <option value="6">جون - June</option>
                                    <option value="7">جولائی - July</option>
                                    <option value="8">اگست - August</option>
                                    <option value="9">ستمبر - September</option>
                                    <option value="10">اکتوبر - October</option>
                                    <option value="11">نومبر - November</option>
                                    <option value="12">دسمبر - December</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label urdu-bold fs-6">سال (Year) <span
                                        class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="assign_year" required
                                    placeholder="<?php echo date('Y'); ?>" value="<?php echo date('Y'); ?>" min="2000"
                                    max="2100">
                            </div>

                            <div class="col-12 mt-3">
                                <button type="submit" class="btn btn-primary w-100 py-2 urdu-bold" id="btnAssign">
                                    تفویض کریں (Assign Fee)
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Assignments List -->
        <div class="col-md-8">
            <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                <div class="card-header bg-white py-3 border-0">
                    <h5 class="mb-0 urdu-bold">موجودہ اسائنمنٹس (Current Assignments)</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light urdu-bold">
                                <tr>
                                    <th class="px-4">#</th>
                                    <th>طالب علم</th>
                                    <th>فیس کی قسم</th>
                                    <th>رقم</th>
                                    <th>واجب الادا دن</th>
                                    <th>مہینہ / سال</th>
                                    <th class="px-4 text-center">ایکشن</th>
                                </tr>
                            </thead>
                            <tbody id="assignmentsTableBody">
                                <!-- Loaded via AJAX -->
                                <tr>
                                    <td colspan="7" class="text-center py-4 text-muted">ڈیٹا لوڈ ہو رہا ہے...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Assignment Modal -->
<div class="modal fade" id="editAssignmentModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" dir="rtl">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header bg-light border-bottom-0">
                <h5 class="modal-title urdu-bold">اسائنمنٹ میں ترمیم کریں (Edit Assignment)</h5>
                <button type="button" class="btn-close m-0 ms-auto" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4 text-end">
                <form id="formEditAssignment">
                    <input type="hidden" id="edit_assign_id">

                    <div class="mb-3">
                        <label class="form-label urdu-bold fs-6">طالب علم (Student)</label>
                        <input type="text" class="form-control bg-light" id="edit_assign_std" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="form-label urdu-bold fs-6">فیس کی قسم (Fee Type)</label>
                        <input type="text" class="form-control bg-light" id="edit_assign_type" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="form-label urdu-bold fs-6">رقم (Amount) <span class="text-danger">*</span></label>
                        <input type="number" class="form-control font-monospace fs-5" id="edit_assign_amount" required
                            min="0">
                    </div>

                    <div class="mb-3">
                        <label class="form-label urdu-bold fs-6">واجب الادا دن (Due Day) <span
                                class="text-danger">*</span></label>
                        <input type="number" class="form-control text-start" id="edit_assign_dueday" required min="1"
                            max="31">
                    </div>

                    <div class="row mb-4">
                        <div class="col-6">
                            <label class="form-label urdu-bold fs-6">مہینہ (Month) <span
                                    class="text-danger">*</span></label>
                            <select class="form-select" id="edit_assign_month" required>
                                <option value="1">جنوری - January</option>
                                <option value="2">فروری - February</option>
                                <option value="3">مارچ - March</option>
                                <option value="4">اپریل - April</option>
                                <option value="5">مئی - May</option>
                                <option value="6">جون - June</option>
                                <option value="7">جولائی - July</option>
                                <option value="8">اگست - August</option>
                                <option value="9">ستمبر - September</option>
                                <option value="10">اکتوبر - October</option>
                                <option value="11">نومبر - November</option>
                                <option value="12">دسمبر - December</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label urdu-bold fs-6">سال (Year) <span
                                    class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="edit_assign_year" required min="2000"
                                max="2100">
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary w-100 py-2 urdu-bold rounded-3"
                        id="btnUpdateAssignment">محفوظ کریں (Save Changes)</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="assets/js/student_fee.js"></script>