{{-- Add Transaction Modal --}}
<div class="modal fade" id="addTransactionModal" 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">Add Transaction</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addTransactionForm" novalidate>
                <div class="modal-body pt-2">
                    <div class="row g-3">

                        {{-- Reason Type --}}
                        <div class="col-12">
                            <label for="txReasonType" class="form-label fw-medium">
                                Reason <span class="text-danger">*</span>
                            </label>
                            <select class="form-select" id="txReasonType" name="reason_type">
                                <option value="">Select reason…</option>
                                <option value="admission_fee">Admission Fee</option>
                                <option value="exam_fee">Exam Fee</option>
                                <option value="betterment_fee">Betterment Fee</option>
                                <option value="monthly_fee">Monthly Fee</option>
                                <option value="other">Other</option>
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>

                        {{-- Monthly Fee Details --}}
                        <div class="col-12 d-none" id="feeDateRow">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="txPaymentDate" class="form-label fw-medium">
                                        Payment Date <span class="text-danger">*</span>
                                    </label>
                                    <input type="date" class="form-control" id="txPaymentDate" name="payment_date">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-3">
                                    <label for="txFeeYear" class="form-label fw-medium">
                                        Year <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" class="form-control" id="txFeeYear"
                                           min="1900" max="9999" value="{{ now()->year }}">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-3">
                                    <label for="txFeeMonth" class="form-label fw-medium">
                                        Month <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-select" id="txFeeMonth" name="fee_month">
                                        <option value="">Select month...</option>
                                        <option value="01">January</option>
                                        <option value="02">February</option>
                                        <option value="03">March</option>
                                        <option value="04">April</option>
                                        <option value="05">May</option>
                                        <option value="06">June</option>
                                        <option value="07">July</option>
                                        <option value="08">August</option>
                                        <option value="09">September</option>
                                        <option value="10">October</option>
                                        <option value="11">November</option>
                                        <option value="12">December</option>
                                    </select>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>

                        {{-- Custom reason (Other only) --}}
                        <div class="col-12 d-none" id="customReasonRow">
                            <label for="txCustomReason" class="form-label fw-medium">
                                Custom Reason <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="txCustomReason"
                                   name="custom_reason" placeholder="Describe the reason…" maxlength="255">
                            <div class="invalid-feedback"></div>
                        </div>

                        {{-- Amount --}}
                        <div class="col-md-4">
                            <label for="txAmount" class="form-label fw-medium">
                                Amount (₹) <span class="text-danger">*</span>
                            </label>
                            <input type="number" class="form-control" id="txAmount"
                                   name="amount" min="0" placeholder="0">
                            <div class="invalid-feedback"></div>
                        </div>

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

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

                        {{-- Remark --}}
                        <div class="col-12">
                            <label for="txRemark" class="form-label fw-medium">
                                Remark <span class="text-muted fw-normal small">(optional)</span>
                            </label>
                            <textarea class="form-control" id="txRemark" 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="addTxSpinner"></span>
                        Save
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Edit Transaction Modal (admin only) --}}
<div class="modal fade" id="editTransactionModal" 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">Edit Transaction</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editTransactionForm" novalidate>
                <input type="hidden" id="editTxId">
                <div class="modal-body pt-2">
                    <div class="row g-3">

                        <div class="col-12">
                            <label for="editTxReason" class="form-label fw-medium">
                                Reason <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="editTxReason"
                                   name="reason" maxlength="255" placeholder="Reason for transaction">
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="col-md-4">
                            <label for="editTxAmount" class="form-label fw-medium">
                                Amount (₹) <span class="text-danger">*</span>
                            </label>
                            <input type="number" class="form-control" id="editTxAmount"
                                   name="amount" min="0">
                            <div class="invalid-feedback"></div>
                        </div>

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

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

                        <div class="col-md-4">
                            <label for="editTxFinalAmount" class="form-label fw-medium">Final Amount (₹)</label>
                            <input type="number" class="form-control bg-light" id="editTxFinalAmount"
                                   readonly>
                        </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="editTxSpinner"></span>
                        Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>