<?php
// fee_collection.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">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold text-success urdu-bold mb-1">فیس وصولی (Fee Collection)</h2>
            <p class="text-muted urdu-regular fs-5">طالب علم کی ماہانہ یا تعلیمی فیس وصول کریں</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-primary px-4 py-2 rounded-3 urdu-regular fs-5" id="btnViewLedger">
                <i class="bi bi-journal-text me-2"></i> لیجر دیکھیں (View Ledger)
            </button>
            <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>

    <div class="row g-4">
        <!-- Collection Form -->
        <div class="col-md-7">
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-body p-4">
                    <form id="feeCollectionForm">
                        <div class="row g-4 text-end">

                            <!-- Step 1: Darja + Year Filter -->
                            <div class="col-12">
                                <div
                                    class="alert alert-info border-0 rounded-3 urdu-regular fs-6 text-end py-2 px-3 mb-0">
                                    <i class="bi bi-info-circle me-2"></i>
                                    پہلے درجہ اور سالِ آغاز منتخب کریں تاکہ طلباء کی فہرست لوڈ ہو سکے۔
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label urdu-bold fs-5">درجہ (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-5">سالِ آغاز - ہجری (Starting Hijri Year) <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 - 15; $hy--) {
                                        echo "<option value=\"$hy\">$hy هـ</option>";
                                    }
                                    ?>
                                </select>
                            </div>

                            <!-- Step 2: Student Checkboxes -->
                            <div class="col-12 text-start" 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-md-6">
                                <label class="form-label urdu-bold fs-5">فیس کی قسم</label>
                                <select class="form-select form-select-lg" id="fee_type_id" required>
                                    <option value="">لوڈ ہو رہا ہے...</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label urdu-bold fs-5">ادائیگی کی تاریخ</label>
                                <input type="text" class="form-control form-control-lg hijri-picker" id="payment_date"
                                    value="<?php echo date('Y-m-d'); ?>" readonly required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label urdu-bold fs-5">مہینہ (Month) <span
                                        class="text-danger">*</span></label>
                                <select class="form-select form-select-lg" 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-5">سال (Year) <span
                                        class="text-danger">*</span></label>
                                <input type="number" class="form-control form-control-lg" id="assign_year" required
                                    placeholder="<?php echo date('Y'); ?>" value="<?php echo date('Y'); ?>" min="2000"
                                    max="2100">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label urdu-bold fs-5">رقم (Amount)</label>
                                <input type="number" step="0.01" class="form-control form-control-lg" id="amount"
                                    required placeholder="0.00">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label urdu-bold fs-5">طریقہ کار</label>
                                <select class="form-select form-select-lg" id="payment_method">
                                    <option value="Cash">نقد (Cash)</option>
                                    <option value="Bank">بینک / آن لائن (Bank/Online)</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label urdu-bold fs-5">حوالہ نمبر</label>
                                <input type="text" class="form-control form-control-lg" id="reference_no"
                                    placeholder="Optional">
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-success btn-lg w-100 py-3 urdu-bold mt-2"
                                    id="btnCollect">
                                    فیس وصول کریں (Collect Fee)
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Info Column -->
        <div class="col-md-5">
            <div class="card border-0 shadow-sm rounded-4 bg-light h-100">
                <div class="card-body p-4 text-end">
                    <i class="bi bi-info-circle text-primary fs-1 opacity-50 mb-3 d-block"></i>
                    <h5 class="urdu-bold mb-3">ضروری ہدایات</h5>
                    <ul class="text-start urdu-regular lh-lg fs-4">
                        <li class="fs-5 text-end">پہلے درجہ اور سالِ آغاز منتخب کریں۔</li>
                        <li class="fs-5 text-end">اس کے بعد مطابقت رکھنے والے طلباء خود بخود ظاہر ہوں گے۔</li>
                        <li class="fs-5 text-end">فیس وصول کرنے پر خود بخود "رسیڈ" تیار ہو جائے گی۔</li>
                        <li class="fs-5 text-end">یہ ٹرانزیکشن "آمدنی و اخراجات" کے ڈیش بورڈ پر خود بخود اپڈیٹ ہو جائے
                            گی۔</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Ledger Modal -->
<div class="modal fade" id="ledgerModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <div class="modal-header bg-dark text-white border-0 py-3">
                <h5 class="modal-title urdu-bold fs-4">طالب علم کا فیس لیجر (Fee Ledger)</h5>
                <button type="button" class="btn-close btn-close-white ms-0 me-auto" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-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="py-3 px-4">#</th>
                                <th class="py-3">تاریخ</th>
                                <th class="py-3">فیس کی قسم</th>
                                <th class="py-3">ماہ / سال</th>
                                <th class="py-3">رقم</th>
                                <th class="py-3">طریقہ</th>
                            </tr>
                        </thead>
                        <tbody id="ledgerTableBody">
                            <!-- Loaded via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="assets/js/student_fee.js"></script>
<script>
    $(document).ready(function () {
        // --- Bulk Checkboxes Logic ---
        $('#filter_darja, #filter_year').off('change'); // Unbind default logic from student_fee.js

        $('#filter_darja, #filter_year').on('change', function () {
            const darja = $('#filter_darja').val();
            const year = $('#filter_year').val();
            const container = $('#studentCheckboxesContainer');

            if (!darja || !year) {
                container.html('<div class="text-center py-4 text-muted urdu-regular">پہلے درجہ اور سال منتخب کریں</div>');
                $('#studentCountBadge').text('0');
                return;
            }

            container.html('');
            $('#studentLoadSpinner').removeClass('d-none');
            $('#studentCountBadge').text('...');

            $.getJSON(`APIs/fee_api.php?action=get_students&darja=${encodeURIComponent(darja)}&start_year=${encodeURIComponent(year)}`, function (res) {
                $('#studentLoadSpinner').addClass('d-none');
                if (res.success && res.data.length > 0) {
                    let html = '<div class="list-group list-group-flush">';
                    res.data.forEach(std => {
                        html += `
                            <label class="list-group-item list-group-item-action d-flex align-items-center text-end" style="cursor: pointer;">
                                <input class="form-check-input me-3 student-checkbox ms-2" type="checkbox" value="${std.sno}">
                                <div class="w-100">
                                    <div class="fw-bold urdu-regular fs-5">${std.stdName} بن ${std.fatherName}</div>
                                    <small class="text-muted">#Reg: <span dir="ltr">${std.registrationNo || 'N/A'}</span></small>
                                </div>
                            </label>
                        `;
                    });
                    html += '</div>';
                    container.html(html);
                    $('#studentCountBadge').text(res.data.length);
                    $('#selectAllStudents').prop('checked', false);
                } else {
                    container.html('<div class="text-center py-4 text-warning urdu-regular">اس درجہ / سال میں کوئی طالب علم نہیں ملا</div>');
                    $('#studentCountBadge').text('0');
                }
            }).fail(function () {
                $('#studentLoadSpinner').addClass('d-none');
                container.html('<div class="text-center py-4 text-danger urdu-regular">ڈیٹا لوڈ نہیں ہو سکا (Load Error)</div>');
                $('#studentCountBadge').text('0');
            });
        });

        $('#selectAllStudents').on('change', function () {
            const isChecked = $(this).is(':checked');
            $('.student-checkbox').prop('checked', isChecked);
        });

        // --- Ledger View Logic ---
        $('#btnViewLedger').off('click').on('click', function () {
            const checkedBoxes = $('.student-checkbox:checked');
            if (checkedBoxes.length !== 1) {
                Swal.fire('توجہ', 'لیجر دیکھنے کے لیے براہ کرم کسی ایک طالب علم کا انتخاب کریں۔', 'info');
                return;
            }

            const stdId = checkedBoxes.val();
            $('#ledgerTableBody').html('<tr><td colspan="6" class="text-center py-4"><div class="spinner-border text-primary"></div></td></tr>');
            $('#ledgerModal').modal('show');

            $.getJSON(`APIs/fee_api.php?action=get_ledger&student_id=${stdId}`, function (res) {
                if (res.success) {
                    let rows = '';
                    res.collections.forEach((c, i) => {
                        rows += `
                            <tr class="urdu-regular">
                                <td class="px-4">${i + 1}</td>
                                <td>${c.payment_date}</td>
                                <td>${c.fee_name}</td>
                                <td>${c.month_year}</td>
                                <td class="fw-bold fs-5">Rs. ${c.amount}</td>
                                <td>${c.payment_method}</td>
                            </tr>
                        `;
                    });
                    $('#ledgerTableBody').html(rows || '<tr><td colspan="6" class="text-center p-3 urdu-regular text-danger">کوئی ریکارڈ نہیں ملا</td></tr>');
                }
            });
        });

        // --- Bulk Form Submit ---
        $('#feeCollectionForm').off('submit').on('submit', function (e) {
            e.preventDefault();

            let selectedStudents = [];
            $('.student-checkbox:checked').each(function () {
                selectedStudents.push($(this).val());
            });

            if (selectedStudents.length === 0) {
                Swal.fire('توجہ', 'براہ کرم کم از کم ایک طالب علم کا انتخاب کریں۔', 'warning');
                return;
            }

            const month = $('#assign_month').val();
            const year = $('#assign_year').val();

            if (!month || !year) {
                Swal.fire('توجہ', 'براہ کرم مہینہ اور سال بھی منتخب کریں۔', 'warning');
                return;
            }

            const month_year = month + '-' + year;

            const data = {
                action: 'collect_fee_bulk',
                student_ids: selectedStudents,
                fee_type_id: $('#fee_type_id').val(),
                amount: $('#amount').val(),
                payment_date: $('#payment_date').val(),
                payment_method: $('#payment_method').val(),
                reference_no: $('#reference_no').val(),
                month_year: month_year
            };

            const $btn = $('#btnCollect');
            $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');

            $.ajax({
                url: 'APIs/fee_api.php',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: function (res) {
                    $btn.prop('disabled', false).text('فیس وصول کریں (Collect Fee)');
                    if (res.success) {
                        let msg = res.message;
                        Swal.fire({
                            title: 'وصولی کامیاب',
                            text: msg,
                            icon: 'success',
                            confirmButtonText: 'ٹھیک ہے'
                        }).then(() => {
                            // Optionally redirect to dashboard or clear form
                            location.reload();
                        });
                    } else {
                        Swal.fire('خرابی', res.message, 'error');
                    }
                }
            });
        });
    });
</script>