@extends('layouts/eims_layout')
@section('title', '| ' . $pageTitle)
@section('content')

    <style>
        .ls-2 {
            letter-spacing: 2px;
        }
        .mt-7 {
            margin-top: 7%;
        }
        .mb-1{
            margin-bottom: 1%;
        }
    </style>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default" style="background-color:#708090;">
                <div class="panel-heading" style="padding-bottom:0">
                    <div class="panel-options">
                        <button class="btn btn-info pull-right addViewBtn studentQuickFeesCollectionButton"
                                title="Collect Fee">
                            <i class="glyphicon glyphicon-plus-sign addIcon" aria-hidden="true"></i>
                            Collect Fees
                        </button>
                    </div>
                    <h1 class="text-center ls-2 text-white" style="font-family: Antiqua,serif;">
                        {{ $pageTitle }} List
                    </h1>
                </div>
                <div class="panel-body panelBodyView">

                    @php
                        $viewStatus_options = ['' => 'Select any', ...$activeStatus ?? []];

                            $searchElements[]=['element' => 'fillProgramId'];
                            $searchElements[]=['element' => 'fillSemesterClassId'];
                            if($companyType !== 'UNV'){
                                $searchElements[]=['element' => 'fillSemesterClassGroupId'];
                            }else{
                                $searchElements[] = ['element' => 'fillFacultyId'];
                                $searchElements[] = ['element' => 'fillDepartmentId'];
                            }
                            $searchElements[]=['element' => 'fillSectionId'];
                            $searchElements[]=['element' => 'custom', 'name' => 'fillStatus', 'type' => 'select', 'label' => 'Status', 'options' => $viewStatus_options];
                            $searchElements[]=['element' => 'dateRange'];
                    @endphp
                    @include('partials.searchPanel.main', ['searchElements' => $searchElements])

                    <table class="table table-striped table-bordered table-condensed first-col-dark"
                           id="datatable">
                        <thead>
                        <tr>
                            <th class="text-center text-nowrap" style="min-width: 30px">Sl</th>
                            <th class="text-center text-nowrap" style="min-width: 60px">
                                {{ $companyType === 'UNV' ? 'Program' : 'Medium/Version' }}
                            </th>
                            <th class="text-center text-nowrap">Session</th>
                            <th class="text-center text-nowrap">
                                {{ $companyType === 'UNV' ? 'Semester' : 'Class' }}
                            </th>
                            @if($companyType !== 'UNV')
                                <th class="text-center text-nowrap">Group</th>
                            @endif
                            <th class="text-center text-nowrap" style="min-width: 50px">Section</th>
                            <th class="text-center text-nowrap">Student ID</th>
                            <th class="text-center text-nowrap">Student</th>
                            <th class="text-center text-nowrap">Father</th>
                            <th class="text-center text-nowrap" style="min-width: 80px">Date of Birth</th>
                            <th class="text-center text-nowrap" style="min-width: 95px">Phone Number</th>
                            <th class="text-center text-nowrap" style="min-width: 55px">Status</th>
                            <th class="text-center text-nowrap" style="min-width: 100px">Action</th>
                        </tr>
                        </thead>
                        <tbody id="tableBodySection"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            // DataTable
            const datatable = $('#datatable').DataTable({
                sDom: "ltipr", // For removeing default Search bar //
                processing: true,
                serverSide: true,
                ordering: false,
                ajax: {
                    "url": "{{ Request::url() }}",
                    "type": "POST",
                    '_token': $('input[name=_token]').val(),
                    "beforeSend": function () {
                        $('#loadingModal').show();

                    },
                    "data": function (d) {
                        var inputs = {};
                        $.each($('form').serializeArray(), function () {
                            inputs[this.name] = this.value;
                        });
                        d.filter = inputs;
                    }
                },
                drawCallback: () => $('#loadingModal').hide(),
                columns: [
                    {data: "sl"},
                    {data: "program_code", className: "text-align-center"},
                    {data: "session_name", className: "text-align-center"},
                    {data: "semester_class_name", className: "text-align-center"},
                        @if($companyType !== 'UNV')
                    {
                        data: "semester_class_group_name",
                        className: "text-align-center"
                    },
                        @endif
                    {
                        data: "section_name", className: "text-align-center"
                    },
                    {data: "student_id_no", className: "text-align-center text-nowrap"},
                    {data: "student_name", className: "text-align-left"},
                    {data: "father_name", className: "text-align-left"},
                    {data: 'dob', className: "text-align-center"},
                    {data: "phone_number", className: "text-align-center"},
                    {data: "status", className: "text-align-center"},
                    {
                        data: "id", className: "text-align-center text-nowrap",
                        "render": function (data, type, row, meta) {

                            let html = '';
                            // Collect Fees Button
                            html += `<a href="{{route("eims_student_fees_collection_create")}}?student_id=${encodeURIComponent(row.encoded_id)}" class="btn btn-xs btn-primary view-modal" ><i class="fas fa-dollar"></i> Collect Fees</a>`;

                            return html;

                        }
                    }
                ],
            });

            $('#searchForm').on('submit', function (element) {
                element.preventDefault();

                datatable.ajax.reload();
            })
        });//ready function end
    </script>

    {!! Form::hidden('hidden_student_id', null, ['id' => 'hidden_student_id']) !!}
    {!! Form::hidden('hidden_fees_config_details_id', null, ['id' => 'hidden_fees_config_details_id']) !!}

    {{-- Student Fees Collection Modal Start --}}
    <div id="studentQuickFeesCollectionModal" class="modal fade">
        <div class="modal-dialog mt-7">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-center" style="clear:both">
                        Student Fees Collection Form
                    </h5>
                </div>
                {!! Form::open(['method' => 'post', 'id' => 'studentQuickFeesCollectionForm', 'class' => 'form-horizontal form-groups', 'autocomplete' => 'off']) !!}

                {!! Form::hidden('config_data', null, ['id' => 'config_data']) !!}
                {!! Form::hidden('fees_bill_no', null, ['id' => 'fees_bill_no']) !!}


                <div class="modal-body">

                    {{-- date --}}
                    <div class="row">
                        {!! Form::label('date', 'Date: ', ['class' => 'col-sm-3 control-label'], false) !!}
                        <div class="col-sm-9">
                            {!! Form::text('date', $branch_campus_active_date ?? date('d-m-Y') , ['class' => 'form-control','id' => 'date','readonly','autocomplete'=>'off']) !!}
                            <p id='date_error' style="max-height:3px;"></p>
                        </div>
                    </div>

                    {{-- program/meduim/version --}}
                    <div class="row">
                        @php($programLabel = $companyType === 'UNV' ? 'Program' : 'Medium/Version')
                        {!! Form::label('modal_program_id', $programLabel , ['class' => 'col-sm-3 control-label'], false) !!}
                        <div class="col-sm-9">
                            {!! Form::select('', $programs ?? [], null, ['class' => 'form-control custom-select2', 'id' => 'modal_program_id', 'placeholder' => "Select $programLabel"]) !!}
                            <p id='program_id_error' style="max-height:3px;"></p>
                        </div>
                    </div>

                    {{-- session --}}
                    {{--<div class="row">
                        {!! Form::label('modal_session_id', 'Session: ', ['class' => 'col-sm-3 control-label'], false) !!}
                        <div class="col-sm-9">
                            {!! Form::select('', $sessions ?? [], null, ['class' => 'form-control custom-select2', 'id' => 'modal_session_id', 'placeholder' => 'Select Session']) !!}
                            <p id='session_id_error' style="max-height:3px;"></p>
                        </div>
                    </div>--}}

                    {{-- semester/class --}}
                    <div class="row mb-1">
                        @php($semesterClassLabel = $companyType === 'UNV' ? 'Semester' : 'Class')
                        {!! Form::label('modal_semester_class_id', $semesterClassLabel , ['class' => 'col-sm-3 control-label'], false) !!}
                        <div class="col-sm-9">
                            {!! Form::select('', $semesterClasses ?? [], null, ['class' => 'form-control custom-select2', 'id' => 'modal_semester_class_id', 'placeholder' => "Select $semesterClassLabel"]) !!}
                        </div>
                    </div>

                    {{-- if school/college than group--}}
                    @if($companyType === 'SCL')
                        <div class="row mb-1">
                            {!! Form::label('modal_semester_class_group_id', 'Group: ', ['class' => 'col-sm-3 control-label'], false) !!}
                            <div class="col-sm-9">
                                {!! Form::select('', $semesterClassGroups ?? [], null, ['class' => 'form-control custom-select2', 'id' => 'modal_semester_class_group_id', 'placeholder' => 'Select Group']) !!}
                            </div>
                        </div>
                    @elseif($companyType === 'CLG')
                        <div class="row mb-1">
                            {!! Form::label('modal_semester_class_group_id', 'Group: ', ['class' => 'col-sm-3 control-label'], false) !!}
                            <div class="col-sm-9">
                                {!! Form::select('', $semesterClassGroups ?? [], null, ['class' => 'form-control custom-select2', 'id' => 'modal_semester_class_group_id', 'placeholder' => 'Select Group']) !!}
                            </div>
                        </div>
                    @endif

                    {{-- section --}}
                    <div class="row mb-1">
                        {!! Form::label('modal_section_id', 'Section: ', ['class' => 'col-sm-3 control-label'], false) !!}
                        <div class="col-sm-9">
                            {!! Form::select('', $sections ?? [], null, ['class' => 'form-control custom-select2', 'id' => 'modal_section_id', 'placeholder' => 'Select Section']) !!}
                        </div>
                    </div>

                    {{-- select: student --}}
                    <div class="row">
                        {!! Form::label('student_id', 'Student: <sup class="text-danger">*</sup>', ['class' => 'col-sm-3 control-label'], false) !!}
                        <div class="col-sm-9">
                            {!! Form::select('student_id',  [], null, ['class' => 'form-control custom-select2', 'id' => 'student_id', 'placeholder' => 'Select Student']) !!}
                            <p id='student_id_error' style="max-height:3px;"></p>
                        </div>
                    </div>

                    {{-- fees_master --}}
                    <div class="row">
                        {!! Form::label('fees_config_details_id', 'Fees: <sup class="text-danger">*</sup>', ['class' => 'col-sm-3 control-label'], false) !!}
                        <div class="col-sm-9">
                            {!! Form::select('fees_config_details_id', [], null, ['class' => 'form-control custom-select2', 'id' => 'fees_config_details_id', 'placeholder' => 'Select Fees']) !!}
                            <p id='fees_config_details_id_error' style="max-height:3px;"></p>
                        </div>
                    </div>

                    {{-- amount --}}
                    <div class="row">
                        {!! Form::label('amount', 'Amount: <sup class="text-danger">*</sup>', ['class' => 'col-sm-3 control-label'], false) !!}
                        <div class="col-sm-9">
                            {!! Form::text('amount', null, ['class' => 'form-control', 'id' => 'amount', 'placeholder' => 'Enter fees amount', 'readonly' => true]) !!}
                            <p id='amount_error' style="max-height:3px;"></p>
                        </div>
                    </div>

                    {{-- fees discount --}}
                    <div class="row hidden">
                        {!! Form::label('fees_discount_id', 'Fees Discount: ', ['class' => 'col-sm-3 control-label']) !!}
                        <div class="col-sm-9">
                            {!! Form::select('fees_discount_id', $feesDiscounts ?? [], null, ['class' => 'form-control custom-select2', 'id' => 'fees_discount_id', 'placeholder' => 'Select Fees Discount']) !!}
                            <p id='fees_discount_id_error' style="max-height:3px;"></p>
                        </div>
                    </div>

                    {{-- discount_percentage, discount_amount, fine --}}
                    <div class="row hidden">
                        {!! Form::label('', 'Discount (%/TK) & Fine(TK)', ['class' => 'col-sm-3 control-label'])!!}

                        {{-- discount_percentage --}}
                        <div class="col-sm-3">
                            {!! Form::number('', null, ['class' => 'form-control', 'id' => 'discount_percentage', 'step' => '0.01', 'placeholder' => 'Enter discount percentage', 'min' => '0']) !!}
                            <p id='discount_percentage_error' style="max-height:3px;"></p>
                        </div>

                        {{-- discount_amount --}}
                        <div class="col-sm-3">
                            {!! Form::number('discount_amount', null, ['class' => 'form-control', 'id' => 'discount_amount', 'step' => '0.01', 'placeholder' => 'Enter discount amount', 'min' => '0']) !!}
                            <p id='discount_error' style="max-height:3px;"></p>
                        </div>

                        {{-- fine --}}
                        <div class="col-sm-3">
                            {!! Form::number('fine', null, ['class' => 'form-control', 'id' => 'fine', 'step' => '0.01', 'placeholder' => 'Enter fine amount', 'min' => '0']) !!}
                            <p id='fine_error' style="max-height:3px;"></p>
                        </div>
                    </div>


                    {{-- gross_amount = amount + fine - discount_amount --}}
                    <div class=" row hidden">
                        {!! Form::label('gross_amount', 'Gross Amount: <sup class="text-danger">*</sup>', ['class' => 'col-sm-3 control-label'], false) !!}
                        <div class="col-sm-9">
                            {!! Form::number('gross_amount', 0, ['class' => 'form-control', 'id' => 'gross_amount', 'step' => '0.01', 'placeholder' => 'Gross Amount', 'min' => '0', 'readonly'=>true]) !!}
                            <p id='gross_amount_error' style="max-height:3px;"></p>
                        </div>
                    </div>

                    {{-- Paid Amount --}}
                    <div class="hidden row" id="paid_amount_div">
                        {!! Form::label('paid_amount', 'Paid Amount: <sup class="text-danger">*</sup>', ['class' => 'col-sm-3 control-label'], false) !!}
                        <div class="col-sm-9">
                            {!! Form::number('paid_amount', 0, ['class' => 'form-control', 'id' => 'paid_amount', 'step' => '0.01', 'placeholder' => 'Paid Amount', 'min' => '0', 'readonly']) !!}
                            <p id='paid_amount_error' style="max-height:3px;"></p>
                        </div>
                    </div>

                    {{-- pay_amount --}}
                    <div class=" row ">
                        {!! Form::label('pay_amount', 'Pay Amount: <sup class="text-danger">*</sup>', ['class' => 'col-sm-3 control-label'], false) !!}
                        <div class="col-sm-9">
                            {!! Form::number('pay_amount', null, ['class' => 'form-control', 'id' => 'pay_amount', 'step' => '0.01', 'placeholder' => 'Enter amount', 'min' => '0', 'readonly']) !!}
                            <p id='pay_error' style="max-height:3px;"></p>
                        </div>
                    </div>

                    {{-- due_amount --}}
                    <div class=" row hidden">
                        {!! Form::label('due_amount', 'Due Amount: <sup class="text-danger">*</sup>', ['class' => 'col-sm-3 control-label'], false) !!}
                        <div class="col-sm-9">
                            {!! Form::number('', 0, ['class' => 'form-control', 'id' => 'due_amount', 'step' => '0.01', 'placeholder' => 'Due Amount', 'min' => '0', 'readonly'=>true]) !!}
                        </div>
                    </div>

                    {{-- payment_method --}}
                    <div class=" row">
                        {!! Form::label('payment_method', 'Payment Method: <sup class="text-danger">*</sup>', ['class' => 'col-sm-3 control-label'],false) !!}
                        <div class="col-sm-9">
                            <div class="radio">
                                @foreach($paymentMethods as $id => $paymentMethod)
                                    <label for="payment_method{{$id}}">
                                        <input type="radio" name="payment_method"
                                               id="payment_method{{$id}}" value="{{$id}}" @checked($id == 1)>

                                        {{$paymentMethod}}
                                    </label>
                                @endforeach
                            </div>

                            <p id='payment_method_error' style="max-height:3px;"></p>
                        </div>
                    </div>

                    <div class="row">
                        {!! Form::label('note', 'Note:', ['class' => 'col-sm-3 control-label']) !!}
                        <div class="col-sm-9">
                            {!! Form::textarea('note', null, ['class' => 'form-control', 'id' => 'note', 'rows' => 3]) !!}
                            <p id='description_error' style="max-height:3px;"></p>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    {!! Form::button(' Close', ['class' => 'btn btn-warning left', 'data-dismiss' => 'modal', 'id' => 'footer_action_button_close']) !!}
                    {!! Form::button(' Collect Fees', ['class' => 'btn btn-success ', 'id' => 'collect_fees_button']) !!}
                    {!! Form::button(' Collect & Print', ['class' => 'btn btn-success ', 'id' => 'collect_fees_and_print_button']) !!}
                </div>
                {!! Form::close() !!}

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

    @php($feesCollectionUrl = route('eims_student_fees_collection_store'))
    {{-- Form Sumission Script --}}
    <script type="text/javascript">
        'use strict';

        const companyType = '{{ $companyType }}';

        function money(value) {
            if (typeof value === 'string') {
                value = Number(value.replace(/[^0-9.-]+/g, ""));
            }
            return isNaN(value) ? 0.0 : parseFloat(value);
        }

        $(document).ready(function () {
            const studentQuickFeesCollectionModal = $('#studentQuickFeesCollectionModal');
            const studentFeesCollectionForm = $('#studentQuickFeesCollectionForm');
            const configDataField = $('#config_data');
            const feesBillNoField = $('#fees_bill_no');
            const programIdField = $('#modal_program_id');
            const semesterClassIdField = $('#modal_semester_class_id');
            const sessionIdField = $('#modal_session_id');
            const semesterClassGroupIdField = $('#modal_semester_class_group_id');
            const sectionIdField = $('#modal_section_id');
            const studentIdField = $('#student_id');
            const feesConfigDetailsIdField = $('#fees_config_details_id');
            const hiddenStudentIdField = $('#hidden_student_id');
            const hiddenFeesConfigDetailsIdField = $('#hidden_fees_config_details_id');

            const amountField = $('#amount');
            const feesDiscountField = $('#fees_discount_id');
            const discountPercentageField = $('#discount_percentage');
            const discountAmountField = $('#discount_amount');
            const fineField = $('#fine');
            const grossAmountField = $('#gross_amount');
            const paidAmountField = $('#paid_amount');
            const paidAmountDiv = $('#paid_amount_div');
            const payAmountField = $('#pay_amount');
            const dueAmountField = $('#due_amount');


            programIdField.change(function () {
                const program_id = programIdField.val();

                semesterClassIdField.empty();
                let option = '';
                if (companyType === 'UNV') {
                    option = '<option selected="selected" value="">Select Semester</option>';
                } else if (companyType === 'SCL') {
                    option = '<option selected="selected" value="">Select Class</option>';
                } else if (companyType === 'CLG') {
                    option = '<option selected="selected" value="">Select Class</option>';
                } else {
                    option = '<option selected="selected" value="">Select Semester/Class</option>';
                }
                semesterClassIdField.prepend(option)

                sessionIdField.empty().prepend('<option selected="selected" value="">Select Session</option>');

                $.ajax({
                    type: 'post',
                    url: `{{ route('eims_faculty_department_program_session_semester_section_course_subject_option_change') }}`,
                    data: {
                        program_id: program_id
                    },
                    dataType: 'json',
                    async: false, // This makes the request synchronous
                    success: function (_response) {
                        $.each(_response, function (key, value) {
                            {
                                if (key === "semesterClassListByProgramChange") {
                                    $.each(value, function (index, result) {
                                        semesterClassIdField
                                            .append(
                                                "<option value='" + result
                                                    .id +
                                                "'>" + result.name +
                                                "</option>"
                                            );
                                    });
                                }

                                if (key === "sessionListByProgramChange") {
                                    $.each(value, function (index, result) {
                                        sessionIdField.append(
                                            "<option value='" + result
                                                .id +
                                            "'>" + result.name +
                                            "</option>"
                                        );
                                    });
                                }


                            }
                        });
                    }
                });
            });

            function getSections() {
                const semester_class_id = parseInt(semesterClassIdField.val());
                const semester_class_group_id = parseInt(semesterClassGroupIdField.val());

                sectionIdField
                    .empty()
                    .prepend('<option selected="selected" value="">Select Section</option>');
                $.ajax({
                    type: 'post',
                    url: `{{ route('eims_faculty_department_program_session_semester_section_course_subject_option_change') }}`,
                    data: {
                        semester_class_id: semester_class_id,
                        semester_class_group_id: semester_class_group_id,
                    },
                    dataType: 'json',
                    success: function (_response) {
                        $.each(_response, function (key, value) {
                            if (!isNaN(semester_class_group_id) && key === "sectionListBySemesterClassGroupChange") {
                                $.each(value, function (index, result) {
                                    sectionIdField.append(
                                        "<option value='" + result
                                            .id +
                                        "'>" + result.name +
                                        "</option>"
                                    );
                                });
                            } else if (isNaN(semester_class_group_id) && key === "sectionListBySemesterClassChange") {
                                $.each(value, function (index, result) {
                                    sectionIdField.append(
                                        "<option value='" + result
                                            .id +
                                        "'>" + result.name +
                                        "</option>"
                                    );
                                });
                            }
                        });
                    }
                });
            }

            // update semester_class_group list on semester/class change
            semesterClassIdField.change(() => getSections());

            semesterClassGroupIdField.change(() => getSections());

            // on sectionField change getSetStudents
            sectionIdField.change(() => {
                studentIdField.empty().prepend('<option selected="selected" value="">Select Student</option>');
                const section_id = sectionIdField.val();
                $.ajax({
                    type: 'post',
                    url: `{{ route('eims_section_students') }}`,
                    data: {
                        section_id: section_id
                    },
                    dataType: 'json',
                    success: function (_response) {
                        $.each(_response, function (index, result) {
                            studentIdField.append(
                                "<option value='" + result
                                    .id +
                                "'>" + result.name +
                                "</option>"
                            );
                        });
                    }
                });
            });

            // on studentField change getSetFeesMaster
            studentIdField.change(() => {
                const student_id = studentIdField.val();

                feesConfigDetailsIdField.empty().prepend('<option value="">Select Fees</option>');

                $.ajax({
                    type: 'post',
                    url: `{{ route('eims_student_wise_unpaid_fees') }}`,
                    data: {
                        student_id: student_id
                    },
                    dataType: 'json',
                    success: function (_response) {
                        $.each(_response, function (index, result) {
                            feesConfigDetailsIdField.append(`
                                <option value='${result.id}' data-amount='${result.amount}' data-config-data='${JSON.stringify(result.config_data)}'>
                                    ${result.fees_name}
                                </option>
                            `);
                        });
                    }
                });
            });


            function updateDiscounts() {
                const amount = amountField.val();
                const feesDiscount = feesDiscountField.val();

                if (feesDiscount !== '') {
                    $.ajax({
                        url: "{{route('eims_fees_discount_amount')}}",
                        type: 'POST',
                        data: {
                            _token: $('input[name=_token]').val(),
                            fees_discount_id: feesDiscount,
                            amount: amount
                        },
                        contentType: 'application/x-www-form-urlencoded',
                        success: function (response) {
                            if (response.status === 'error') {
                                discountPercentageField.val(0);
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops...',
                                    text: response.message,
                                });
                            }

                            if (response.status === 'success') {
                                discountAmountField.val(money(response.amount)).attr('readonly', true).change();
                                discountPercentageField.val(response.percentage).attr('readonly', true).change();
                            }
                        }
                    });
                } else {
                    discountAmountField.val(null).change().attr('readonly', false).change();
                    discountPercentageField.val(null).change().attr('readonly', false).change();
                }
            }

            function updateDiscountPercentage() {
                const amount = amountField.val();
                const discountAmount = discountAmountField.val();

                if (amount > 0 && discountAmount > 0) {
                    const discountPercentage = ((discountAmount / amount) * 100).toFixed(2);
                    discountPercentageField.val(discountPercentage).attr('readonly', true);
                } else {
                    discountPercentageField.val(null).attr('readonly', false);
                }
            }

            function updateDiscountAmount() {
                const amount = amountField.val();
                const discountPercentage = discountPercentageField.val();

                if (amount > 0 && discountPercentage > 0) {
                    const discountAmount = ((amount * discountPercentage) / 100).toFixed(2);
                    discountAmountField.val(discountAmount).attr('readonly', true);
                    updateGrossAmount();
                } else {
                    discountAmountField.val(null).attr('readonly', false);
                    updateGrossAmount();
                }
            }

            function updateGrossAmount() {
                const amount = money(amountField.val());
                const fine = money(fineField.val());
                const discountAmount = money(discountAmountField.val());
                const totalGrossAmount = amount + fine - discountAmount;
                grossAmountField.val(money(totalGrossAmount)).change();
            }

            function updatePayAmount() {
                const grossAmount = money(grossAmountField.val());
                const paidAmount = money(paidAmountField.val());
                const maxPayAmount = grossAmount - paidAmount;

                payAmountField.attr('max', maxPayAmount).val(maxPayAmount).change();
            }

            function updateDueAmount() {
                const grossAmount = money(grossAmountField.val());
                const paidAmount = money(paidAmountField.val());
                const payAmount = money(payAmountField.val());

                dueAmountField.val(money((grossAmount - paidAmount) - payAmount));
            }

            feesDiscountField.change(updateDiscounts);
            discountAmountField.on('input', updateDiscountPercentage);
            discountPercentageField.on('input', updateDiscountAmount);
            amountField.on('change keypress', () => updateGrossAmount());
            fineField.on('change input', updateGrossAmount);
            discountAmountField.on('change keypress', updateGrossAmount);
            grossAmountField.change(() => {
                updatePayAmount();
                updateDueAmount();
            });
            payAmountField.on('input', updateDueAmount);

            feesConfigDetailsIdField.change(() => {
                console.log('change');
                const amount = feesConfigDetailsIdField.find(':selected').data('amount');
                const configData = feesConfigDetailsIdField.find(':selected').data('config-data');
                configDataField.val(JSON.stringify(configData));
                const fine = feesConfigDetailsIdField.find(':selected').data('fine') ?? 0;
                const paid = feesConfigDetailsIdField.find(':selected').data('paid') ?? 0;

                amountField.val(money(amount));
                fineField.val(money(fine));
                const grossAmount = money(amount + fine);
                grossAmountField.val(grossAmount);
                paidAmountField.val(money(paid));
                const payableAmount = money(grossAmount - paid);
                payAmountField.val(payableAmount);
                // payAmountField.attr('max', amountField).change();

                if (paid > 0) {
                    feesDiscountField.attr('disabled', true);
                    discountPercentageField.attr('readonly', true);
                    discountAmountField.attr('readonly', true);
                    fineField.attr('readonly', true);
                    paidAmountField.val(money(paid));
                    paidAmountDiv.removeClass('hidden');
                } else {
                    feesDiscountField.attr('disabled', false);
                    discountPercentageField.attr('readonly', false);
                    discountAmountField.attr('readonly', false);
                    fineField.attr('readonly', false);
                    paidAmountField.val(0).change();
                    paidAmountDiv.addClass('hidden');
                }
            });

            $(document).on('click', '.studentQuickFeesCollectionButton', function () {
                if (hasAccess('{{$feesCollectionUrl}}')) {
                    studentFeesCollectionForm.trigger('reset');

                    studentQuickFeesCollectionModal.modal('show');
                }
            });

            studentQuickFeesCollectionModal.on('shown.bs.modal', function () {
                // Initialize Select2 after the modal is shown
                $('.custom-select2').select2({
                    dropdownParent: studentQuickFeesCollectionModal,
                });
            });

            studentQuickFeesCollectionModal.on('hidden.bs.modal', function () {
                // Destroy Select2 when the modal is hidden
                $('.custom-select2').select2();
            });


            function storeFeesCollection() {

                const formData = studentFeesCollectionForm.serialize();


                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: "{{$feesCollectionUrl}}",
                        type: 'POST',
                        data: formData,
                        beforeSend: () => $('#loadingModal').show(),
                    }).then(response => {
                        Swal.fire({
                            icon: response.responseStatus,
                            title: response.responseTitle,
                            text: response.responseText,
                        });
                        feesBillNoField.val(response.fees_bill_no);
                        //
                        studentQuickFeesCollectionModal.modal('hide');
                        $('#datatable').DataTable().ajax.reload();
                        resolve(true);
                    }).catch(response => {
                        const responseJSON = response.responseJSON;

                        if (responseJSON.error) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: responseJSON.error,
                            });
                        }

                        if (responseJSON.errors) {
                            for (const key in responseJSON.errors) {
                                if (responseJSON.errors.hasOwnProperty(key)) {
                                    const error = Array.isArray(responseJSON.errors[key]) ? responseJSON.errors[key].join('<br>') : responseJSON.errors[key];
                                    $(`#${key}_error`).empty().show().append(`<small style="color:red;">${error}</small>`);
                                }
                            }
                        }

                        Swal.fire({
                            icon: `${responseJSON.responseStatus}`,
                            title: `${responseJSON.responseTitle}`,
                            text: `${responseJSON.responseText}`,
                        });

                        reject(false);
                    });
                });
            }

            $('#collect_fees_button').click(storeFeesCollection);

            $('#collect_fees_and_print_button').click(() => {
                storeFeesCollection().then(response => {
                    if (response) {
                        Swal.fire({
                            title: 'Are you sure to print?',
                            text: "Please print this!",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#32ba32',
                            cancelButtonColor: '#7E7979',
                            confirmButtonText: 'Yes'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                const studentId = studentIdField.val();
                                const feesConfigDetailsId = feesConfigDetailsIdField.val();
                                const fees_bill_no = feesBillNoField.val();

                                const url = `{{route('eims_student_fees_collection_print')}}?student_id=${studentId}&fees_config_details_id=${feesConfigDetailsId}&fees_bill_no=${fees_bill_no}`;
                                window.open(url, '_blank');
                            }
                        });
                    }
                }).catch(console.error);
            });
        });
    </script>
    {{-- Student Fees Collection Modal End --}}
@endsection