{{-- Pay Monthly Fee Modal --}}
<div class="modal fade" id="payFeeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-bottom-0">
                <h5 class="modal-title">Pay Monthly Fee</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="payFeeForm" novalidate>
                <input type="hidden" id="mfStudentId">
                <div class="modal-body pt-2">
                    <div class="row g-3">

                        {{-- Student name (display only) --}}
                        <div class="col-12">
                            <label class="form-label fw-medium small text-muted mb-1">Student</label>
                            <div class="fw-medium" id="mfStudentName"></div>
                        </div>

                        {{-- Fee Month --}}
                        <div class="col-md-6">
                            <label for="mfFeeMonth" class="form-label fw-medium">
                                Fee Month <span class="text-danger">*</span>
                            </label>
                            <input type="month" class="form-control" id="mfFeeMonth" name="fee_month">
                            <div class="invalid-feedback"></div>
                        </div>

                        {{-- Amount (readonly — from trade) --}}
                        <div class="col-md-6">
                            <label for="mfAmount" class="form-label fw-medium">Amount (₹)</label>
                            <input type="number" class="form-control bg-light" id="mfAmount" readonly>
                        </div>

                        {{-- Discount --}}
                        <div class="col-md-4">
                            <label for="mfDiscount" class="form-label fw-medium">Pending (₹)</label>
                            <input type="number" class="form-control" id="mfDiscount"
                                   name="discount" min="0" value="0" placeholder="0">
                            <div class="invalid-feedback"></div>
                        </div>

                        {{-- Late Penalty --}}
                        <div class="col-md-4">
                            <label for="mfLatePenalty" class="form-label fw-medium">Late Penalty (₹)</label>
                            <input type="number" class="form-control" id="mfLatePenalty"
                                   name="late_penalty" min="0" value="0" placeholder="0">
                            <div class="invalid-feedback"></div>
                        </div>

                        {{-- Final Amount --}}
                        <div class="col-md-4">
                            <label for="mfFinalAmount" class="form-label fw-medium">Final Amount (₹)</label>
                            <input type="number" class="form-control bg-light" id="mfFinalAmount" readonly placeholder="0">
                        </div>

                        {{-- Remark --}}
                        <div class="col-12">
                            <label for="mfRemark" class="form-label fw-medium">
                                Remark <span class="text-muted fw-normal small">(optional)</span>
                            </label>
                            <textarea class="form-control" id="mfRemark" name="remark"
                                      rows="2" maxlength="1000" placeholder="Any additional notes…"></textarea>
                            <div class="invalid-feedback"></div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-dark px-4">
                        <span class="spinner-border spinner-border-sm d-none me-1" id="payFeeSpinner"></span>
                        Record Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>