@extends('layouts.app')
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => $title])
<div class="row mt-4 mx-4">
    <div class="col-12">
        <div class="card mb-4">
            <div class="d-flex align-items-center justify-content-between">
                <p class="mb-0 ms-2 mt-2">{{ $title }}</p>
                <form method="GET" action="{{ route('feepayment_import_view') }}">
                    <button type="submit" class="btn btn-primary btn-sm ms-auto me-2 mt-2">Bulk Import</button>
                </form>
            </div>
            <div class="card-body px-3 pt-3 pb-3">
                <!-- Register Number Search -->
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="academic_year" class="form-control-label">Academic Year</label><span class="text-danger fw-bold">*</span>
                            <select class="form-select" name="academic_year" id="m_academic_year">
                                <option value="">Select academic year</option>
                                @forelse ($academic_years as $data)
                                    <option value="{{ $data->academicyear_Id }}"
                                    {{ old('academic_year') == $data->academicyear_Id ? 'selected' : '' }}>{{ $data->academicdetail }}</option>
                                @empty
                                    <option value="">No academic year found</option>
                                @endforelse
                            </select>
                            @if ($errors->has('academic_year'))
                                <sup class="text-danger">{{ $errors->first('academic_year') }}</sup>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="year" class="form-control-label">Year</label><span class="text-danger fw-bold">*</span>
                            <select class=" form-select" name="year" id="m_year">
                                <option value="">Select year</option>
                                @forelse ($years as $data)
                                    <option value="{{ $data->cms_year_sid }}"
                                    {{ old('year') == $data->cms_year_sid ? 'selected' : '' }}>{{ $data->year }}</option>
                                @empty
                                    <option value="">No year found</option>
                                @endforelse
                            </select>
                            @if ($errors->has('year'))
                                <sup class="text-danger">{{ $errors->first('year') }}</sup>
                            @endif
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="course" class="form-control-label">Course</label><span class="text-danger fw-bold">*</span>
                            <select class=" form-select" name="course" id="m_course">
                                <option value="">Select course</option>
                                @forelse ($courses as $data)
                                    <option value="{{ $data->cms_course_sid }}"
                                    {{ old('course') == $data->cms_course_sid ? 'selected' : '' }}>{{ $data->course_name }}</option>
                                @empty
                                    <option value="">No course found</option>
                                @endforelse
                            </select>
                            @if ($errors->has('course'))
                                <sup class="text-danger">{{ $errors->first('course') }}</sup>
                            @endif
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="student" class="form-control-label">Student</label><span class="text-danger fw-bold">*</span>
                            <select class="form-select" name="student" id="m_student">
                           <option>Select Student</option>
                            </select>
                            @if ($errors->has('student'))
                                <sup class="text-danger">{{ $errors->first('student') }}</sup>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center align-items-center">
                    <div class="col-md-4 d-flex justify-content-center align-items-center">
                       <h6>(or)</h6>
                    </div>
                </div>
                <div class="row justify-content-center align-items-center">
                    <div class="col-md-4 mb-2 d-flex justify-content-center align-items-center">
                        <input type="text" class="form-control" id="register-number" placeholder="Enter Register Number"
                            value="{{ request()->query('register_number') ?? '' }}" aria-label="Register Number"
                            aria-describedby="search-button">
                        <button class="btn btn-primary mx-2 my-2" id="search-button" type="button">Search</button>
                    </div>
                </div>

                <!-- Nav Tabs for Payment Details -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" id="payment-details-tab" data-bs-toggle="tab" href="#payment-details"
                            role="tab" aria-controls="payment-details" aria-selected="true">Pending Payments</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="previous-transactions-tab" data-bs-toggle="tab"
                            href="#previous-transactions" role="tab" aria-controls="previous-transactions"
                            aria-selected="false">Payment History</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="misc-details-tab" data-bs-toggle="tab" href="#misc-details"
                            role="tab" aria-controls="misc-details" aria-selected="false">Miscellaneous Payments</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="personal-details-tab" data-bs-toggle="tab" href="#personal-details"
                            role="tab" aria-controls="personal-details" aria-selected="false">Personal Details</a>
                    </li>
                </ul>

                <div class="tab-content" id="myTabContent">
                    <!-- Payment Details Tab -->
                    <div class="tab-pane fade show active" id="payment-details" role="tabpanel"
                        aria-labelledby="payment-details-tab">
                        <button id="payAllBtn" class="btn btn-primary mt-2">Pay Selected</button>
                        <div class="table-responsive">
                            <table class="table table-hover" id="myTable2">
                                <thead class="text-dark">
                                    <tr>
                                        <th><input type="checkbox" id="selectAllCheckbox"></th>
                                        <th class='text-sm'>Fee Name</th>
                                        <!-- <th class='text-sm p-1'>Fee Type</th> -->
                                        <th class='text-sm p-1'>Academic Year</th>
                                        <th class='text-sm p-1'>Year</th>
                                        <th class='text-sm p-1'>Semester</th>
                                        <th class='text-sm p-1'>Department</th>
                                        <th class='text-sm p-1'>Course</th>
                                        <th class='text-sm p-1'>Fee Amount</th>
                                        <th class='text-sm p-1'>Paid Amount</th>


                                    </tr>
                                </thead>
                                <tbody id="pending-transactions-list">
                                    <tr>
                                        <td colspan="9" class="text-danger">Please enter a Register Number.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Previous Transactions Tab -->
                    <div class="tab-pane fade" id="previous-transactions" role="tabpanel"
                        aria-labelledby="previous-transactions-tab">
                        <div class="table-responsive">
                            <table class="table table-hover" id="myTable3">
                                <thead class="text-dark">
                                    <tr>
                                        <th class='text-xs p-1'>Fee Name</th>
                                        <!-- <th class='text-sm p-1'>Fee Type</th> -->
                                        <th class='text-xs p-1'>Academic Year</th>
                                        <th class='text-xs p-1'>Year</th>
                                        <th class='text-xs p-1'>Semester</th>
                                        <th class='text-xs p-1'>Department</th>
                                        <th class='text-xs p-1'>Status</th>
                                        <th class='text-xs p-1'>Fee Amount</th>
                                        <th class='text-xs p-1'>Paid Amount</th>
                                        <th class='text-xs p-1'>Discount</th>
                                        <th class='text-xs p-1'>Penalty</th>
                                        <th class='text-xs p-1'>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="transaction-history">
                                    <tr>
                                        <td colspan="11" class="text-danger">Please enter a Register Number.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="misc-details" role="tabpanel" aria-labelledby="misc-details-tab">
                        <div class="card-body">
                            <form id="misc_form" method="POST" action="{{ route('misc-fee') }}" enctype="multipart/form-data">
                                @csrf
                            <div class="row">
                                <div class="col-md-4">
                                        <label for="fee_type" class="form-control-label">Fee Type</label>
                                        <select class="form-select" name="fee_type" id="fee_type">
                                            <option value="">Select fee type</option>
                                            @forelse ($fee_types as $data)
                                                <option value="{{ $data->fees_typeId }}"
                                                {{ old('fee_type') == $data->fees_typeId ? 'selected' : '' }}>{{ $data->feesName }}</option>
                                            @empty
                                                <option value="">No fee type found</option>
                                            @endforelse
                                        </select>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="fee_name" class="form-control-label">Fee Name</label>
                                        <input class="form-control" type="text" name="fee_name" id="fee_name" value="{{old('fee_name')}}">
                                        @if ($errors->has('fee_name'))
                                            <sup class="text-danger">{{ $errors->first('fee_name') }}</sup>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="academic_year" class="form-control-label">Academic Year</label>
                                        <select class="form-select" name="academic_year" id="academic_year">
                                            <option value="">Select academic year</option>
                                            @forelse ($academic_years as $data)
                                                <option value="{{ $data->academicyear_Id }}"
                                                {{ old('academic_year') == $data->academicyear_Id ? 'selected' : '' }}>{{ $data->academicdetail }}</option>
                                            @empty
                                                <option value="">No academic year found</option>
                                            @endforelse
                                        </select>
                                        @if ($errors->has('academic_year'))
                                            <sup class="text-danger">{{ $errors->first('academic_year') }}</sup>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="year" class="form-control-label">Year</label>
                                        <select class=" form-select" name="year" id="year">
                                            <option value="">Select year</option>
                                            @forelse ($years as $data)
                                                <option value="{{ $data->cms_year_sid }}"
                                                {{ old('year') == $data->cms_year_sid ? 'selected' : '' }}>{{ $data->year }}</option>
                                            @empty
                                                <option value="">No year found</option>
                                            @endforelse
                                        </select>
                                        @if ($errors->has('year'))
                                            <sup class="text-danger">{{ $errors->first('year') }}</sup>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="course" class="form-control-label">Course</label>
                                        <select class=" form-select" name="course" id="course">
                                            <option value="">Select course</option>
                                            @forelse ($courses as $data)
                                                <option value="{{ $data->cms_course_sid }}"
                                                {{ old('course') == $data->cms_course_sid ? 'selected' : '' }}>{{ $data->course_name }}</option>
                                            @empty
                                                <option value="">No course found</option>
                                            @endforelse
                                        </select>
                                        @if ($errors->has('course'))
                                            <sup class="text-danger">{{ $errors->first('course') }}</sup>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="student" class="form-control-label">Student</label>
                                        <select class="form-select" name="student" id="student">
                                       <option>Select Student</option>
                                        </select>
                                        @if ($errors->has('student'))
                                            <sup class="text-danger">{{ $errors->first('student') }}</sup>
                                        @endif
                                    </div>
                                </div>
                            </div>


                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="fee_amount" class="form-control-label">Fee Amount</label>
                                        <input class="form-control" type="number" name="fee_amount" id="fee_amount"
                                        value="{{old('fee_amount')}}" required>
                                        @if ($errors->has('fee_amount'))
                                            <sup class="text-danger">{{ $errors->first('fee_amount') }}</sup>
                                        @endif
                                    </div>
                                </div>
                                <div class="mb-3 col-md-4">
                                    <label for="discount-modal" class="form-label">Discount</label>
                                    <input type="number" class="form-control @error('discount') is-invalid @enderror"
                                        id="misc_discount" name="discount" value="0">
                                    <sup class="text-danger" id="err-discount"></sup>
                                </div>
                                <div class="mb-3 col-md-4">
                                    <label for="payment-date-modal" class="form-label">Payment Date</label>
                                    <input type="date" class="form-control @error('payment_date') is-invalid @enderror"
                                        id="misc_payment-date-modal" name="misc_payment_date" required value="{{ \Carbon\Carbon::now()->toDateString() }}">
                                    @error('payment_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                    <div class="mb-3 col-md-4">
                                        <label for="payment-method-modal" class="form-label">Payment Method</label>
                                        <select class="form-select" id="misc_payment-method-modal" name="payment_method" required
                                            onchange="toggleUpiMiscField()">
                                            <option value="" disabled selected>Select</option>
                                            <option value="bank">Bank</option>
                                            <option value="cash">Cash</option>
                                            <option value="online">Online</option>
                                        </select>
                                        @error('payment_method')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-md-4">
                                        <label for="upi_no" class="form-label">UPI No.</label>
                                        <input type="text" class="form-control" id="misc_upi_no" name="upi_no" readonly>
                                    </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="misc_remarks" class="form-control-label">Remarks</label>
                                        <textarea class="form-control" name="misc_remarks" id="misc_remarks" rows="1">{{ old('misc_remarks') }}</textarea>
                                        @if ($errors->has('misc_remarks'))
                                            <sup class="text-danger">{{ $errors->first('misc_remarks') }}</sup>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        <div class="d-flex align-items-center">
                            <button type="submit" class="btn btn-primary">Save Payment</button>
                        </div>
                    </form>
                        </div>
                    </div>

                    <!-- Personal Details Tab -->
                    <div class="tab-pane fade show" id="personal-details" role="tabpanel" aria-labelledby="personal-details-tab">
                        <div class="container mt-4">
                            <!-- Unified Profile Information Card -->
                            <div class="card shadow-sm">
                                <div class="card-body">
                                    <!-- Unified Table for Personal, Contact, and Academic Information -->
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <!-- Personal Information Section -->
                                            <thead class="thead-light">
                                                <tr>
                                                    <th colspan="2" class="text-center bg-primary text-white">Personal Information</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <th class="w-25">Full Name</th>
                                                    <td><span id="full-name"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>Date of Birth</th>
                                                    <td><span id="dob"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>Nationality</th>
                                                    <td><span id="nationality"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>Religion</th>
                                                    <td><span id="religion"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>Father's Name</th>
                                                    <td><span id="father-name"></span></td>
                                                </tr>
                                            </tbody>

                                            <!-- Contact Information Section -->
                                            <thead class="thead-light">
                                                <tr>
                                                    <th colspan="2" class="text-center bg-primary text-white">Contact Information</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <th>Email</th>
                                                    <td><span id="email"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>Phone</th>
                                                    <td><span id="mobileno"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>Alternate Phone</th>
                                                    <td><span id="alternatemobileno"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>Address</th>
                                                    <td><span id="address"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>Aadhaar No</th>
                                                    <td><span id="aadharno"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>Register No</th>
                                                    <td><span id="register_no"></span></td>
                                                </tr>
                                            </tbody>

                                            <!-- Academic Information Section -->
                                            <thead class="thead-light">
                                                <tr>
                                                    <th colspan="2" class="text-center bg-primary text-white">Academic Information</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <th>Course</th>
                                                    <td><span id="p_course"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>Class</th>
                                                    <td><span id="class"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>Academic Year</th>
                                                    <td><span id="p_academic_year"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>Year</th>
                                                    <td><span id="current_year"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>Int. Hall Ticket No</th>
                                                    <td><span id="int_hallticketno"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>Marks (Int.)</th>
                                                    <td><span id="int_marks"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>SSC Hall Ticket No</th>
                                                    <td><span id="ssc_hallticketno"></span></td>
                                                </tr>
                                                <tr>
                                                    <th>Marks (SSC)</th>
                                                    <td><span id="ssc_marks"></span></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal for Payment Details -->
{{-- <div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="paymentModalLabel">Enter Payment Details</h5>
                <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">x</button>
            </div>
            <div class="modal-body">
                <form id="payment-form-modal" method="POST" action="{{ route('feedetails') }}">
                    @csrf
                    <input type="hidden" id="student_sid" name="student_sid" value="">
                    <input type="hidden" id="fee_structure_sid" name="fee_structure_sid" value="">

                    <!-- Two-column layout -->
                    <div class="row">
                        <!-- Left Column -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="student-name-modal" class="form-label">Student Name/Reg. Number</label>
                                <input type="text" class="form-control" id="student-name-modal" name="student_name"
                                    readonly>
                            </div>
                            <div class="row">
                                <div class="mb-3 col-md-6">
                                    <label for="academic-year-modal" class="form-label">Academic Year</label>
                                    <input type="text" class="form-control" id="academic-year-modal"
                                        name="academic_year" readonly>
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label for="current-year-modal" class="form-label">Year</label>
                                    <input type="text" class="form-control" id="current-year-modal" name="current_year"
                                        readonly>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="fee-name-modal" class="form-label">Fee Name</label>
                                <input type="text" class="form-control" id="fee-name-modal" name="fee_name" readonly>
                            </div>
                            <div class="mb-3">
                                <label for="fee-amount-modal" class="form-label">Fee Amount</label>
                                <input type="number" class="form-control" id="fee-amount-modal" name="fee_amount"
                                    readonly>
                            </div>
                        </div>

                        <!-- Right Column -->
                        <div class="col-md-6">
                            <!-- Amount Field -->
                            <div class="mb-3">
                                <label for="amount-modal" class="form-label">Amount</label>
                                <input type="number" class="form-control @error('amount') is-invalid @enderror"
                                    id="amount" name="amount" required>
                                <sup class="text-danger" id="err-amount"></sup>

                            </div>

                            <div class="row">
                                <!-- Discount Field -->
                                <div class="mb-3 col-md-6">
                                    <label for="discount-modal" class="form-label">Discount</label>
                                    <input type="number" class="form-control @error('discount') is-invalid @enderror"
                                        id="discount" name="discount" value="0">
                                    <sup class="text-danger" id="err-discount"></sup>
                                </div>

                                <!-- Penalty Field -->
                                <div class="mb-3 col-md-6">
                                    <label for="penalty-modal" class="form-label">Penalty</label>
                                    <input type="number" class="form-control @error('penalty') is-invalid @enderror"
                                        id="penalty-modal" name="penalty" value="0">
                                    @error('penalty')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Payment Date Field -->
                            <div class="mb-3">
                                <label for="payment-date-modal" class="form-label">Payment Date</label>
                                <input type="date" class="form-control @error('payment_date') is-invalid @enderror"
                                    id="payment-date-modal" name="payment_date"  value="{{ \Carbon\Carbon::now()->toDateString() }}" required>
                                @error('payment_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="row">
                                <div class="mb-3 col-md-6">
                                    <label for="payment-method-modal" class="form-label">Payment Method</label>
                                    <select class="form-select" id="payment-method-modal" name="payment_method" required
                                        onchange="toggleUpiField()">
                                        <option value="" disabled selected>Select</option>
                                        <option value="bank">Bank</option>
                                        <option value="cash">Cash</option>
                                    </select>
                                    @error('payment_method')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label for="upi_no" class="form-label">UPI No.</label>
                                    <input type="text" class="form-control" id="upi_no" name="upi_no" readonly>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="remarks-modal" class="form-label">Remarks</label>
                            <input type="text" class="form-control" id="remarks-modal" name="remarks">
                        </div>
                    </div>


                    <div class="d-flex align-items-center mx-2 mt-4">
                        <button type="submit" class="btn btn-primary">Save Payment</button>
                        <button type="button" class="btn btn-secondary ms-2" data-bs-dismiss="modal"
                            aria-label="Close">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div> --}}

<form id="payment-form" action="/save-payment" method="POST">
    <div class="modal fade" id="allPaymentModal" tabindex="-1" aria-labelledby="allPaymentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="allPaymentModalLabel">Enter Payment Details</h5>
                    <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">x</button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-around">
                    <div class="student-info mb-3">
                        <p class="text-dark"><strong>Student Name:</strong> <span id="student-name"></span></p>
                        <p class="text-dark"><strong>Registration No:</strong> <span id="student-reg-no"></span></p>
                    </div>
                    <div class="student-info mb-3">
                        <p class="text-dark"><strong>Academic Year:</strong> <span id="academic"></span></p>
                        <p class="text-dark"><strong>Year:</strong> <span id="pay-year"></span></p>
                    </div>
                </div>
                    <div class="table-responsive">
                    <table class="table table-bordered table-striped text-sm">
                        <thead class="text-dark">
                            <tr>
                                <th>Fee Name</th>
                                <th>Fee Amount</th>
                                <th>Discount</th>
                                <th>Penalty</th>
                                <th>Amount</th>
                                <th>Payment Date</th>
                                <th>Pay Method</th>
                                <th>UPI Number</th>
                            </tr>
                        </thead>
                        <tbody id="fees-table-body">
                            <!-- Fee details for each selected fee will be dynamically injected here -->
                        </tbody>
                    </table>
                </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Save Payment</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
                </div>
            </div>
        </div>
    </div>
</form>




<div class="modal fade" id="viewModal" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewModalLabel">Payment Details</h5>
                <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">x</button>
            </div>
            <div class="modal-body">
                <!-- Payment Overview Section -->
                <h5>Payment Overview</h5>
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>Student Name:</strong> <span id="student-name"></span></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>Fee Name:</strong> <span id="fee-structure-name"></span></p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Payment Status:</strong> <span id="payment-status"></span></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>Total Paid:</strong> ₹<span id="total-paid-amount"></span></p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Registration No:</strong> <span id="reg-no"></span></p>
                    </div>
                </div>

                <!-- Fee Payment Details Table -->
                <h5>Fee Payment Details</h5>
                <div class="table-responsive">
                    <table class="table table-striped" id="fee-details-table">
                        <thead>
                            <tr>
                                <th class="text-sm p-1">Receipt No.</th>
                                <th class="text-sm p-1">Payment Date</th>
                                <th class="text-sm p-1">Payment Type</th>
                                <th class="text-sm p-1">Total Amount</th>
                                <th class="text-sm p-1">Paid Amount</th>
                                <th class="text-sm p-1">Discount</th>
                                <th class="text-sm p-1">Penalty</th>
                                <th class="text-sm p-1">Print</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Rows will be dynamically populated here -->
                        </tbody>
                    </table>
                </div>


                <div class="d-flex align-items-center mx-2 mt-4">
                    <button type="button" class="btn btn-secondary ms-2" data-bs-dismiss="modal"
                        aria-label="Close">Close</button>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- Refund Modal -->
<div class="modal fade" id="refundModal" tabindex="-1" aria-labelledby="refundModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content ">
            <div class="modal-header">
                <h5 class="modal-title" id="refundModalLabel">Refund Payment Details</h5>
                <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">x</button>
            </div>
            <div class="modal-body">
                <!-- Payment Overview Section -->

                <div class="row">
                    <div class="col-md-4">
                        <p><strong>Student Name:</strong> <span id="refund-student-name"></span></p>
                    </div>
                    <div class="col-md-4">
                        <p><strong>Registration No:</strong> <span id="refund-reg-no"></span></p>
                    </div>
                    <div class="col-md-4">
                        <p><strong>Fee Name:</strong> <span id="refund-fee-structure-name"></span></p>
                    </div>
                </div>
                <div class="table-responsive">
                <!-- Table of transactions with refund options -->
                <table class="table table-bordered text-sm" id="refund-transaction-table">
                    <thead>
                        <tr>
                            <th>Receipt No.</th>
                            <th>Payment Date</th>
                            <th>Payment Type</th>
                            <th>Total Amount</th>
                            <th>Paid Amount</th>
                            <th>Refund Amount</th>
                            <th>Reason</th>
                        </tr>
                    </thead>
                    <tbody id="refund-transaction-body">
                        <!-- Rows will be dynamically added here -->
                    </tbody>
                </table>
            </div>

                <!-- Refund Warning Note -->
                <div class="mt-3">
                    <p class="text-danger">* If refunded, it can't be undone.</p>
                </div>

            </div>
            <!-- Modal Footer with Close and Submit Button -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="submitRefundAll">Refund All</button>
            </div>
        </div>
    </div>
</div>


@endsection
@push('scripts')
<script>
    $(document).ready(function() {
        $('#m_year, #m_course,#m_academic_year').change(function() {
            var year = $('#m_year').val();
            var course = $('#m_course').val();
            var academic_year = $('#m_academic_year').val();
            if (year && course) {
                $.ajax({
                    url: '/get-students',
                    method: 'GET',
                    data: { year: year, course: course, academic_year:academic_year },
                    success: function(data) {
                        $('#m_student').html('<option>Select Student</option>');

                        if (data.length > 0) {
                            $.each(data, function(index, student) {
                                $('#m_student').append('<option value="' + student.register_no+ '">' + student.firstname+ ' '+  student.lastname + ' / ' + student.register_no + '</option>');
                            });
                        } else {
                            $('#m_student').append('<option>No students found</option>');
                        }
                    },
                    error: function() {
                        console.log('Error fetching students');
                    }
                });
            }
        });
        $('#year, #course,#academic_year').change(function() {
            var year = $('#year').val();
            var course = $('#course').val();
            var academic_year = $('#academic_year').val();
            if (year && course) {
                $.ajax({
                    url: '/get-students',
                    method: 'GET',
                    data: { year: year, course: course, academic_year:academic_year },
                    success: function(data) {
                        $('#student').html('<option>Select Student</option>');

                        if (data.length > 0) {
                            $.each(data, function(index, student) {
                                $('#student').append('<option value="' + student.cms_student_sid+ '">' + student.firstname+ ' '+  student.lastname + ' / ' + student.register_no + '</option>');
                            });
                        } else {
                            $('#student').append('<option>No students found</option>');
                        }
                    },
                    error: function() {
                        console.log('Error fetching students');
                    }
                });
            }
        });

     $('#selectAllCheckbox').on('change', function() {
            var isChecked = $(this).prop('checked');
            $('.fee-checkbox').prop('checked', isChecked);

            // Temporarily disable sorting if using DataTables
            if ($.fn.DataTable.isDataTable('#myTable2')) {
                var table = $('#myTable2').DataTable();
                table.order([]).draw();  // Disable sorting
            }
        });
        $('#payAllBtn').on('click', function () {

    // Get all selected checkboxes
    var selectedFees = [];
    $('.fee-checkbox:checked').each(function() {
        var transactionData = {
            tranid: $(this).data('tranid'),
            fee_name: $(this).data('fee_name'),
            amount: $(this).data('amount'),
            student_name: $(this).data('student_name'),
            reg_no: $(this).data('student_reg'),
            student_id: $(this).data('student_id'),
            academic : $(this).data('academic'),
            year : $(this).data('year')
        };
        selectedFees.push(transactionData);
    });

    if (selectedFees.length > 0) {
    // Populate student information
    $('#student-name').text(selectedFees[0].student_name);
    $('#student-reg-no').text(selectedFees[0].reg_no);
    $('#academic').text(selectedFees[0].academic);
    $('#pay-year').text(selectedFees[0].year);
    var feeDetailsHtml = '';
    selectedFees.forEach(function (fee) {
        feeDetailsHtml += `
            <tr>
                <td>${fee.fee_name}</td>

                <td>
                     <input type="number" class="form-control" id="fee-amount-${fee.tranid}" name="fee[${fee.tranid}][fee_amount]" value="${fee.amount}" readonly>
                    </td>
                <td>
                    <input type="number" class="form-control" id="discount-${fee.tranid}" name="fee[${fee.tranid}][discount]" value="0">
                    <sup class="text-danger" id="err-discount-${fee.tranid}"></sup>
                </td>
                <td>
                    <input type="number" class="form-control" id="penalty-${fee.tranid}" name="fee[${fee.tranid}][penalty]" value="0">
                    <sup class="text-danger" id="err-penalty-${fee.tranid}"></sup>
                </td>
                <td>
                    <input type="number" class="form-control" id="amount-${fee.tranid}" name="fee[${fee.tranid}][amount]" required>
                    <sup class="text-danger" id="err-amount-${fee.tranid}"></sup>
                </td>
                <td>
                    <input type="date" class="form-control" id="payment-date-${fee.tranid}" name="fee[${fee.tranid}][payment_date]" value="{{ \Carbon\Carbon::now()->toDateString() }}" required>
                </td>
                <td>
                    <select class="form-select" id="payment-method-${fee.tranid}" name="fee[${fee.tranid}][payment_method]" required>
                        <option value="" disabled selected>Select</option>
                        <option value="bank">Bank</option>
                        <option value="cash">Cash</option>
                        <option value="online">Online</option>
                    </select>
                </td>
                <td>
                    <input type="text" class="form-control" id="upi_no-${fee.tranid}" name="fee[${fee.tranid}][upi_no]">
                </td>

                <!-- Hidden fields for student and fee structure ID, grouped inside each fee -->
                <input type="hidden" name="fee[${fee.tranid}][student_id]" value="${fee.student_id}">
                <input type="hidden" name="fee[${fee.tranid}][fee_structure_id]" value="${fee.tranid}">
            </tr>
        `;
    });

    // Insert fee details into the table body
    $('#fees-table-body').html(feeDetailsHtml);
    $('#allPaymentModal').modal('show');
}

 else {
    toastr.error("Please select at least one fee to proceed with payment.");
}

});

$('#payment-form').on('submit', function (event) {
    event.preventDefault(); // Prevent default form submission

    var formData = $(this).serialize(); // Serialize form data

    // AJAX request to save payment details
    $.ajax({
        url: '/save-payment', // Your endpoint to save data
        type: 'POST',
        data: {
         fee_data : formData,
         _token: '{{ csrf_token() }}'
        },
        success: function (response) {
           if(!response.success){
            toastr.error(response.message);
           }else {
        toastr.success('Payment saved successfully!');
        $('#allPaymentModal').modal('hide');

        // Uncheck the "Select All" checkbox after success
        $('#selectAllCheckbox').prop('checked', false);

        // Optionally, also uncheck individual checkboxes if needed
        $('.fee-checkbox').prop('checked', false);
        setTimeout(function () {
            $('#search-button').trigger('click');
             }, 500);
    }


        },
        error: function (error) {
            // Handle error - e.g., show an error message
            toastr.error('Error saving payment. Please try again.');
        }
    });
});


    });
</script>


    <script>
$(document).ready(function() {
    $('.misc-select').select2();

    $('#discount').on('blur', function() {
        var discount = parseFloat($('#discount').val()) || 0;

        var amount = parseFloat($('#amount').val()) || 0;

        var newAmount = amount - discount;

        $('#amount').val(newAmount.toFixed(2));

        $('#nextField').focus();
    });
});

        $(document).ready(function () {
            window.onload = function () {
                const registerNumber = new URLSearchParams(window.location.search).get('register_number');

                if (registerNumber) {
                    document.getElementById('register-number').value = registerNumber;
                    document.getElementById('search-button').click();
                }
            };

            $('#paymentModal').on('shown.bs.modal', function () {
                $('#amount').val('');
                $('#discount').val('0');
                $('#penalty-modal').val('0');
                $('#payment-method-modal').val('');
                $('#upi_no').val('');
                $('#remarks-modal').val('');
            });
            var feeStructureData = [];
            var student = null;

            $('#m_student').change(function () {
                $('#pending-transactions-list').html(
                    '<tr><td colspan="8" class="text-center"><div class="center-loading"><div class="spinner"></div></div></td></tr>'
                );
                var registerNumber = $('#m_student').val();
                $('#register-number').val(registerNumber);
                callFeeDetails(registerNumber);
            });
            $('#search-button').click(function () {
                $('#pending-transactions-list').html(
                    '<tr><td colspan="8" class="text-center"><div class="center-loading"><div class="spinner"></div></div></td></tr>'
                );
                var registerNumber = $('#register-number').val();
                callFeeDetails(registerNumber);
            });

            function callFeeDetails(registerNumber){
                if (registerNumber) {
                    $.ajax({
                        url: '{{ route('get-feedetails') }}',
                        method: 'GET',
                        data: {
                            register_number: registerNumber
                        },
                        success: function (response) {
                            if (response.student) {
                                student = response.student;
                                if (student) {
                                    // Populate Personal Information
                                    $('#full-name').text(student.firstname + ' ' + student.lastname);
                                    $('#dob').text(student.dob || 'NA');
                                    $('#nationality').text(student.nationality || 'NA');
                                    $('#religion').text(student.religion || 'NA');
                                    $('#father-name').text(student.parent.fathername || 'NA');
                                    $('#mothertongue').text(student.mothertongue || 'NA');
                                    $('#caste').text(student.caste || 'NA');
                                    $('#subcaste').text(student.subcaste || 'NA');

                                    // Populate Contact Information
                                    $('#email').text(student.email || 'NA');
                                    $('#mobileno').text(student.mobileno || 'NA');
                                    $('#alternatemobileno').text(student.alternatemobileno ||'NA');
                                    $('#address').text(student.address || 'NA');
                                    $('#aadharno').text(student.aadharno || 'NA');
                                    $('#register_no').text(student.register_no || 'NA');
                                    $('#admissionno').text(student.admissionno || 'NA');

                                    // Populate Academic Information
                                    $('#p_course').text(student.course.course_name || 'NA');
                                    $('#class').text(student.class.class_name || 'NA');
                                    $('#p_academic_year').text(student.academic_year.academicdetail || 'NA');
                                    $('#current_year').text(student.current_year || 'NA');
                                    $('#int_hallticketno').text(student.int_hallticketno ||'NA');
                                    $('#int_marks').text(student.int_marks || 'NA');
                                    $('#ssc_hallticketno').text(student.ssc_hallticketno ||'NA');
                                    $('#ssc_marks').text(student.ssc_marks || 'NA');
                                }
                            }

                            // <td class='text-sm'>${transaction.fee_type && transaction.fee_type.feesName ? transaction.fee_type.feesName : 'NA'}</td>
                            if (Array.isArray(response.fee_structure) && response.fee_structure.length > 0) {
                               // feeStructureData = response.fee_structure;

                                var transactionsHtml = '';
                                response.fee_structure.forEach(function (transaction) {
                                    console.log(transaction);
                                    transactionsHtml += `<tr> <td class='text-sm' style="padding-left:23px;">
                                                                    <input type="checkbox" class="fee-checkbox"
                                                                    data-tranid="${transaction.cms_fee_structure_sid}"
                                                                    data-fee_name="${transaction.fee_name}"
                                                                    data-amount="${transaction.fee_amount}"
                                                                    data-student_name="${response.student.firstname} ${student.lastname}"
                                                                    data-student_reg="${response.student.register_no}"
                                                                    data-student_id="${response.student.cms_student_sid}"
                                                                    data-academic="${student.academic_year.academicdetail}"
                                                                    data-year="${student.current_year}"/>
                                                                </td>
                                                                                                            <td class='text-sm'>${transaction.fee_name || 'NA'}</td>
                                                                                                            <td class='text-sm'>${transaction.academic_year && transaction.academic_year.academicdetail ? transaction.academic_year.academicdetail : 'NA'}</td>
                                                                                                            <td class='text-sm'>${transaction.year && transaction.year.year ? transaction.year.year : 'NA'}</td>
                                                                                                            <td class='text-sm'>${transaction.semester && transaction.semester.semester_name ? transaction.semester.semester_name : 'NA'}</td>
                                                                                                            <td class='text-sm'>${transaction.department && transaction.department.department_name ? transaction.department.department_name : 'NA'}</td>
                                                                                                            <td class='text-sm'>${transaction.course && transaction.course.course_name ? transaction.course.course_name : 'NA'}</td>
                                                                                                            <td class='text-sm'>${transaction.fee_amount || 0}</td>
                                                                                                             <td class='text-sm'>${transaction.fee_payments[0]?.paid_amount || 0}</td>



                                                                                                        </tr>`;
                                });

                                if ($.fn.dataTable.isDataTable('#myTable2')) {
                                    var table = $('#myTable2').DataTable();
                                    table.clear();
                                    table.rows.add($(transactionsHtml));
                                    table.draw();
                                }else{
                                    $('#pending-transactions-list').html(transactionsHtml);
                                    $('#myTable2').DataTable({
                                        layout: {
                                            topStart: {
                                                buttons: ['excel', 'pdf', 'print',
                                                    'colvis', 'pageLength'
                                                ]
                                            },
                                        }
                                    });
                                }

                            } else {
                                transactionsHtml +=
                                    `<tr>
                                                                                         <td  class='text-danger'>No pending transactions found.</td> </tr>`
                                $('#pending-transactions-list').html(transactionsHtml);

                            }
                        },
                        error: function () {
                            alert('Please enter the correct register number');
                        }
                    });
                } else {
                    transactionsHtml +=
                        `<tr>
                                                                                <td  class='text-danger'>Please enter a Register Number.</td> </tr>`
                    $('#pending-transactions-list').html(transactionsHtml);
                }
            }

            $(document).on('click', '#pay_model_id', function () {
                var transactionId = $(this).data('tranid');
                // Get the selected transaction from the stored data
                var selectedTransaction = feeStructureData.find(function (transaction) {
                    return transaction.cms_fee_structure_sid === transactionId;
                });
                if (selectedTransaction) {
                    $('#student_sid').val(student.cms_student_sid);
                    $('#fee_structure_sid').val(selectedTransaction.cms_fee_structure_sid);
                    $('#student-name-modal').val(
                        `${student.firstname} ${student.lastname} / ${student.register_no}` || 'NA'
                    ); // Assuming student name is available in response
                    $('#academic-year-modal').val(selectedTransaction.academic_year ? selectedTransaction
                        .academic_year.academicdetail : 'NA');
                    $('#current-year-modal').val(selectedTransaction.year ? selectedTransaction.year.year :
                        'NA');
                    $('#fee-name-modal').val(selectedTransaction.fee_name || 'NA');
                    $('#fee-amount-modal').val(selectedTransaction.fee_amount || 'NA');

                    $('#payment-method-modal').val(
                        'online'); // default or based on transaction, you can change this
                    $('#discount-modal').val(selectedTransaction.discount || 0);
                    $('#penalty-modal').val(selectedTransaction.penalty || 0);
                    $('#remarks-modal').val(selectedTransaction.remarks || '');
                }
            });


            $(document).on('click', '#fee_refund', function () {
                var fee_structure_id = $(this).data('id');
                var student_id = $(this).data('student');

                if (fee_structure_id && student_id) {
                    $.ajax({
                        url: '{{ route('get-payment') }}',
                        method: 'GET',
                        data: {
                            fee_structure_id: fee_structure_id,
                            student_id: student_id
                        },
                        success: function (response) {
                            if (response) {
                                $('#refund-student-name').text(response.student.firstname + " " +
                                    response.student.lastname);
                                $('#refund-reg-no').text(response.student.register_no);
                                $('#refund-fee-structure-name').text(response.fee_structure.fee_name);

                                // Populate Fee Payment Details table
                                var transactionsHtml = '';
                                response.fee_payment_dtl.forEach(function (transaction) {
                                    transactionsHtml += `
                                                           <tr>
                                <td>${transaction.receipt_no || 'NA'}</td>
                                <td>${transaction.payment_date ? new Date(transaction.payment_date).toLocaleDateString('en-GB') : 'NA'}</td>
                                <td>${transaction.payment_type || 'NA'}</td>
                                <td data-total-amount="₹${transaction.total_amount || '0'}">₹${transaction.total_amount || '0'}</td>
                                <td data-paid-amount="₹${transaction.paid_amount || '0'}">₹${transaction.paid_amount || '0'}</td>
                                <td>
                                    <input type="number" class="form-control refund-amount"
                                    data-transaction-id="${transaction.fee_payment_dtl_sid}"
                                    data-id="${response.fee_structure_sid}"
                                    data-student="${response.cms_student_sid}"
                                    data-fee-payment-sid="${response.fee_payment_sid}"
                                     placeholder="Refund Amount">
                                </td>
                                <td>
                                    <input type="text" class="form-control"
                                    id="refund_reason" name="refund_reason"
                                     placeholder="Refund Reason">
                                </td>

                            </tr>
                                                        `;
                                });

                                // Add the table rows
                                $('#refund-transaction-body').html(transactionsHtml);

                                // Open the modal
                                $('#refundModal').modal('show');
                            } else {
                                alert('No payment details found');
                            }
                        },
                        error: function () {
                            alert('Error fetching payment details');
                        }
                    });
                }
            });
            // When the "Refund All" button is clicked
// When the "Refund All" button is clicked
$('#submitRefundAll').on('click', function () {
    var totalRefundAmount = 0;
    var refunds = [];
    var isValid = true;
    var totalAmount = 0;

    // Iterate over each row in the table and get the refund amount and transaction details
    $('#refund-transaction-body tr').each(function () {
        var transactionId = $(this).find('.refund-amount').data('transaction-id');
        var refundAmount = parseFloat($(this).find('.refund-amount').val());
        var fee_structure_id = $(this).find('.refund-amount').data('id');
        var student_id = $(this).find('.refund-amount').data('student');
        var fee_payment_sid = $(this).find('.refund-amount').data('fee-payment-sid');
         totalAmount = parseFloat($(this).find('td[data-total-amount]').data('total-amount').replace('₹', ''));
        var paidAmount = parseFloat($(this).find('td[data-paid-amount]').data('paid-amount').replace('₹', ''));
        var reason = $(this).find('#refund_reason').val();
        // Add the refund data if refund amount is entered
        if (!isNaN(refundAmount) && refundAmount > 0) {
            if (refundAmount > paidAmount) {
                isValid = false;
                toastr.error('Refund amount cannot be greater than paid amount for Receipt No. ' + $(this).find('td:first').text());
                return false;  // Stop the loop
            }

            refunds.push({
                fee_payment_dtl_sid: transactionId,
                refund_amount: refundAmount,
                fee_structure_id: fee_structure_id,
                student_id: student_id ,
                fee_payment_sid : fee_payment_sid,
                reason : reason,
            });
            totalRefundAmount += refundAmount;

        }
    });

    // Check if at least one refund amount was entered
    if (isValid && refunds.length > 0) {
        // Send all refunds at once
        $.ajax({
            url: '{{ route('process-multiple-refunds') }}',  // Your refund route for multiple refunds
            method: 'POST',
            data: {
                refunds: refunds,
                total_refund_amount: totalRefundAmount,
                total_amount : totalAmount,
                _token: '{{ csrf_token() }}'
            },
            success: function (response) {
                if (response.success) {
                    toastr.success('Refunds processed successfully');
                    $('#refundModal').modal('hide');  // Close the modal after success
                    setTimeout(function () {
                                $('#search-button').trigger('click');
                            }, 500);
                } else {
                    toastr.error('Failed to process refunds');
                }
            },
            error: function () {
                toastr.error('Error while processing refunds');
            }
        });
    }
});


            $(document).on('click', '#view_trans', function () {
                var fee_structure_id = $(this).data('id');
                var student_id = $(this).data('student');

                if (fee_structure_id && student_id) {
                    $.ajax({
                        url: '{{ route('get-payment') }}',
                        method: 'GET',
                        data: {
                            fee_structure_id: fee_structure_id,
                            student_id: student_id
                        },
                        success: function (response) {
                            if (response) {
                                $('#fee_payment_id').val(response.fee_payment_sid);
                                $('#fee-payment-sid').text(response.fee_payment_sid);
                                $('#student-name').text(response.student.firstname + " " + response.student.lastname);
                                $('#fee-structure-name').text(response.fee_structure.fee_name);
                                $('#payment-status').text(response.payment_status);
                                $('#total-paid-amount').text(response.paid_amount);
                                $('#reg-no').text(response.student.register_no);

                                // Populate Fee Payment Details table
                                var transactionsHtml = '';
                                response.fee_payment_dtl.forEach(function (transaction) {
                                    transactionsHtml += `
                                                            <tr>
                                                            <td class="text-sm">
                                                                ${transaction.receipt_no || 'NA'}
                                                            </td>
                                                            <td class="text-sm">
                                                                ${transaction.payment_date ? new Date(transaction.payment_date).toLocaleDateString('en-GB') : 'NA'}
                                                            </td>
                                                            <td class="text-sm">${transaction.payment_type || 'NA'}</td>
                                                            <td class="text-sm">₹${transaction.total_amount || '0'}</td>
                                                            <td class="text-sm">₹${transaction.paid_amount || '0'}</td>
                                                            <td class="text-sm">₹${transaction.discount_amt || '0'}</td>
                                                            <td class="text-sm">₹${transaction.penalty_amt || '0'}</td>
                                                            <td>
                                                                <a href="/print-receipt/${transaction.receipt_no}" class="dropdown-item text-dark" title="Report">
                                                                    <i class="fas fa-file-text"></i>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                        `;
                                });

                                // Add the table rows
                                $('#fee-details-table tbody').html(transactionsHtml);

                                // Open the modal
                                $('#viewModal').modal('show');
                            } else {
                                alert('No payment details found');
                            }
                        },
                        error: function () {
                            alert('Error fetching payment details');
                        }
                    });
                }
            });
            $('#m_student').change(function () {
                $('#transaction-history').html(
                    '<tr><td colspan="8" class="text-center"><div class="center-loading"><div class="spinner"></div></div></td></tr>'
                );
                var registerNumber = $('#m_student').val();
                $('#register-number').val(registerNumber);
                callTransactions(registerNumber);
            });

            $('#search-button').click(function () {
                $('#transaction-history').html(
                    '<tr><td colspan="8" class="text-center"><div class="center-loading"><div class="spinner"></div></div></td></tr>'
                );
                var registerNumber = $('#register-number').val();
                callTransactions(registerNumber);
            });

            function callTransactions(registerNumber){
                if (registerNumber) {
                    $.ajax({
                        url: '{{ route('get-transaction') }}',
                        method: 'GET',
                        data: {
                            register_number: registerNumber
                        },
                        success: function (response) {
                            //<td class='text-sm'>${transaction.fee_structure.fee_type && transaction.fee_structure.fee_type.feesName ? transaction.fee_structure.fee_type.feesName : 'NA'}</td>
                            if (Array.isArray(response.payment_history) && response
                                .payment_history.length > 0) {
                                var transactionsHtml = '';
                                response.payment_history.forEach(function (transaction) {
                                    let penaltySum = 0;
                                    let discountSum = 0;
                                    transaction.fee_payment_dtl.forEach(e => {

                                        penaltySum += e.penalty_amt || 0;
                                        discountSum += e.discount_amt || 0;
                                    });
                                    transactionsHtml += `<tr>
                                                                                                            <td class='text-sm'>${transaction.fee_structure.fee_name || 'NA'}</td>
                                                                                                            <td class='text-sm'>${transaction.fee_structure.academic_year && transaction.fee_structure.academic_year.academicdetail ? transaction.fee_structure.academic_year.academicdetail : 'NA'}</td>
                                                                                                            <td class='text-sm'>${transaction.fee_structure.year && transaction.fee_structure.year.year ? transaction.fee_structure.year.year : 'NA'}</td>
                                                                                                            <td class='text-sm'>${transaction.fee_structure.semester && transaction.fee_structure.semester.semester_name ? transaction.fee_structure.semester.semester_name : 'NA'}</td>
                                                                                                            <td class='text-sm'>${transaction.fee_structure.department && transaction.fee_structure.department.department_name ? transaction.fee_structure.department.department_name : 'NA'}</td>
                                                                                                           <td class='text-sm text-wrap'>
                                                                                                                <span class="bg-${getPaymentStatusClass(transaction.payment_status)} badge badge-pill text-wrap">
                                                                                                                    ${transaction.payment_status || 'Unpaid'}
                                                                                                                </span>
                                                                                                            </td>
                                                                                                            <td class='text-sm'>${transaction.fee_structure.fee_amount || 'NA'}</td>
                                                                                                            <td class='text-sm'>${transaction.paid_amount || 'NA'}</td>
                                                                                                             <td class='text-sm'>${discountSum || 'NA'}</td>
                                                                                                            <td class='text-sm'>${penaltySum || 'NA'}</td>
                                                                                                            <td class="text-sm">
                                                                                                                <a class="text-success" title="View">
                                                                                                                    <i id="view_trans" class="fa fa-eye"
                                                                                                                        data-id="${transaction.fee_structure.cms_fee_structure_sid}"
                                                                                                                        data-student="${student.cms_student_sid}"
                                                                                                                        data-bs-toggle="modal"
                                                                                                                        data-bs-target="#viewModal"></i>
                                                                                                                </a>
                                                                                                                <a class="text-danger" title="Refund">
                                                                                                                    <i id="fee_refund" class="mx-1 fa-solid fa-rotate-left"
                                                                                                                        data-id="${transaction.fee_structure.cms_fee_structure_sid}"
                                                                                                                        data-student="${student.cms_student_sid}"
                                                                                                                        data-bs-toggle="modal"
                                                                                                                        data-bs-target="#refundModal"></i>
                                                                                                                </a>
                                                                                                            </td>
                                                                                                        </tr>`;
                                });

                                if ($.fn.dataTable.isDataTable('#myTable3')) {
                                    var table = $('#myTable3').DataTable();
                                    table.clear();
                                    table.rows.add($(transactionsHtml));
                                    table.draw();
                                }else{
                                    $('#transaction-history').html(transactionsHtml);
                                    $('#myTable3').DataTable({
                                        layout: {
                                            topStart: {
                                                buttons: ['excel', 'pdf', 'print',
                                                    'colvis', 'pageLength'
                                                ]
                                            },
                                        }
                                    });
                                }
                            } else {
                                var transactionsHtml = `<tr>
                                                                                                <td  class='text-danger'>No Transactions Yet.</td>
                                                                                             </tr>`;
                                $('#transaction-history').html(transactionsHtml);
                            }
                        },
                        error: function () {
                            // alert('called');
                        }
                    });
                } else {
                    var transactionsHtml = `<tr>
                                                                                                <td  class='text-danger'>Please enter a Register Number.</td>
                                                                                             </tr>`;
                    $('#transaction-history').html(transactionsHtml);
                }
            }

            // Populate modal with transaction data
            $(document).on('click', '.action-btn', function () {
                var transactionId = $(this).data('id');
                var pendingAmount = $(this).data('amount');

                $('#transaction-id').val(transactionId);
                $('#amount-modal').val(pendingAmount);
            });

            // $('#payment-form-modal').on('submit', function (e) {
            //     e.preventDefault();
            //     let form = $(this);
            //     let formData = new FormData(form[0]);

            //     $.ajax({
            //         url: form.attr('action'),
            //         method: 'POST',
            //         data: formData,
            //         processData: false,
            //         contentType: false,
            //         success: function (response) {
            //             if (response.success) {
            //                 toastr.success(response.message);

            //                 $('#paymentModal').modal('hide');

            //                 setTimeout(function () {
            //                     $('#search-button').trigger('click');
            //                 }, 500);
            //             } else {
            //                 toastr.error(response.message);
            //             }
            //         },
            //         error: function (xhr) {
            //             if (xhr.responseJSON && xhr.responseJSON.errors) {
            //                 $.each(xhr.responseJSON.errors, function (field, messages) {
            //                     $.each(messages, function (index, message) {
            //                         let id = '#err-' + field;
            //                         $(id).html(message);
            //                     });
            //                 });
            //             }
            //         }
            //     });
            // });

            $('#misc_form').on('submit', function (e) {
                e.preventDefault();
                let form = $(this);
                let formData = new FormData(form[0]);
                console.log(formData);
                $.ajax({
                    url: form.attr('action'),
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        if (response.status === 'success') {
                            toastr.success(response.message);
                            $('#paymentModal').modal('hide');

                            $('#register-number').val(response.register_no);

                            setTimeout(function () {
                                $('#search-button').trigger('click');
                            }, 500);
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function (xhr) {
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            $.each(xhr.responseJSON.errors, function (field, messages) {
                                $.each(messages, function (index, message) {
                                    let id = '#err-' + field;
                                    $(id).html(message);
                                });
                            });
                        }
                    }
                });
            });
        });
        function getPaymentStatusClass(status) {
    switch (status) {
        case 'Paid':
            return 'success';
        case 'Unpaid':
            return 'danger';
        case 'Partially Paid':
            return 'warning';
        case 'Sem Paid':
            return 'secondary';
        default:
            return 'primary';
    }
}

    </script>
    <script>
        // Function to toggle readonly property of UPI field based on payment method
        function toggleUpiField() {
            const paymentMethod = document.getElementById('payment-method-modal').value;
            const upiField = document.getElementById('upi_no');

            // Enable UPI field if payment method is 'bank', otherwise make it readonly
            if (paymentMethod === 'bank') {
                upiField.removeAttribute('readonly');
            } else {
                upiField.setAttribute('readonly', 'true');
            }
        }

        function toggleUpiMiscField() {
            const paymentMethod = document.getElementById('misc_payment-method-modal').value;
            const upiField = document.getElementById('misc_upi_no');

            // Enable UPI field if payment method is 'bank', otherwise make it readonly
            if (paymentMethod === 'bank') {
                upiField.removeAttribute('readonly');
            } else {
                upiField.setAttribute('readonly', 'true');
            }
        }

        // Run toggle function on page load in case a value is already selected
        window.onload = function () {
            toggleUpiField();
            toggleUpiMiscField();
        }
    </script>
@endpush