@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Fee Mangements</title>

@include('datepicker')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js">
</script>
@section('main-content')
    <style>
        .input {
            color: #697a8d;
        }

        #loader {
            text-align: center;
            /* Align the loader to the center */
            margin-left: 15px;
            /* Adjust this value to manage space between loader and button */
            width: auto;
            display: inline-block;
        }

        #loader img {
            width: 30px;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-text-fill-color: #697a8d !important;
        }

        #teacherid {
            display: inline-block !important;
            width: auto !important;
            margin-left: 5px;
            border-color: #697a8d;
        }

        .select2-selection {
            border-color: #dae0e7 !important;
        }

        /* Styles for the Select2 dropdown when focused or hovered */
        .select2-container--focus .select2-selection,
        .select2-selection:hover {
            border-color: #696cff !important;
        }

        /* Styles for the Select2 dropdown when active (clicked) */
        .select2-container--open .select2-selection {
            border-color: #696cff !important;
        }

        .select2-selection--single .select2-selection__rendered {
            color: #697a8d !important;
        }

        .ig_outer .input-group span.input-group-text {
            max-width: 44px;
            flex: 0 0 44px;
        }

        .ig_outer .input-group .select2-container--default {
            max-width: calc(100% - 44px);
            flex: 0 0 calc(100% - 44px);
        }

        .ig_outer .input-group .select2-container--default span {
            height: 100%;
            display: block;
        }

        .ig_outer .input-group .select2-container--default span.select2-search--inline {
            display: inline-block;
        }

        .ig_outer .input-group .select2-container--default span.select2-selection {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .ig_outer .input-group span.input-group-text,
        .ig_outer .input-group .select2-container--default {
            height: 34px;
        }

        .ig_outer .input-group .select2-container--default span.select2-selection__rendered {
            display: flex;
            align-items: center;
        }

        .ig_outer .select2-container--default .select2-selection--multiple .select2-selection__choice {
            display: inline-flex;
        }

        .text-nowrap2 table td {
            word-break: keep-all;
        }

        #loader1 {
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
    </style>

    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span> Add Fee Details</h4>
            <!-- Basic Layout -->
            <div class="row">
                <div class="col-xl d-none">
                    <div class="card mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Fee Details</h5>
                            <!-- <small class="text-muted float-end">Merged input group</small> -->
                        </div>
                        <div class="card-body">
                            @if (!$additional_fee_charges)
                                <h4>Class creation is required.</h4>
                                <a href="{{ url('/show-classes') }}">Go To Class Section Under Fee Plan</a>
                            @else
                                <form>
                                    <div class="mb-3 ig_outer">
                                        <label class="form-label" for="basic-icon-default-fullname">Parent List</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-education" class="input-group-text"><i
                                                    class="bx bx-user"></i></span>
                                            <select name="" id="parentid"
                                                class="form-select input form-control-line" multiple>
                                            </select>
                                        </div>
                                        <button class="btn btn-info mt-2 d-none" id="remove_parent">Remove Parent <span
                                                class="ps-1" style="color: red;"> x</span></button>
                                    </div>
                                    <div class="mb-3 ig_outer">
                                        <label class="form-label" for="basic-icon-default-fullname">Student List</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-education" class="input-group-text"><i
                                                    class="bx bx-user"></i></span>
                                            <select name="" id="studentid"
                                                class="form-select input form-control-line">
                                            </select>
                                        </div>
                                        <button class="btn btn-info mt-2 d-none" id="remove_student">Remove Student <span
                                                class="ps-1" style="color: red;"> x</span></button>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label" for="basic-icon-default-fullname">Class</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-education" class="input-group-text"><i
                                                    class="bx bx-user"></i></span>
                                            <input class="form-control input form-control" id="student_class" type="text"
                                                placeholder="Student Class" readonly autocomplete="off" />
                                        </div>
                                    </div>
                                    @php
                                        $yearRange = session('year_range'); // Example: "2023-2024"
                                        $currentDate = now();
                                        [$startYear, $endYear] = explode('-', $yearRange);

                                        $startDate = \Carbon\Carbon::create($startYear, 4, 1, 0, 0, 0); // April 1st
                                        $endDate = \Carbon\Carbon::create($endYear, 3, 31, 23, 59, 59); // March 31st
                                    @endphp
                                    @if ($currentDate->between($startDate, $endDate))
                                        <div class="form-group loaderbtn_div">
                                            <button type="button" class="btn btn-success text-white" id="fetch_details_btn"
                                                disabled>Fetch details</button>
                                            <div class="loaderDiv d-none" id="loader">
                                                <!-- Your loader HTML or spinner goes here -->
                                                <img src="{{ asset('assets/loader.gif') }}" alt="Loading..." />
                                            </div>
                                        </div>
                                    @endif
                                </form>
                                <div class="invoice_table table  text-nowrap text-nowrap2 dtbl_dropdown"
                                    style="overflow-x: scroll;display: none;">
                                    <h1>Fee Request</h1>
                                    <table id="invoicesTable" class="table">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th class="text-nowrap">Class Name</th>
                                                <th class="text-nowrap">Total Fee</th>
                                                <th class="text-nowrap">Portal Registration Fee</th>
                                                <th class="text-nowrap">Kit Fee</th>
                                                <th class="text-nowrap">Monthly Fee</th>
                                                <th class="text-nowrap">Transport Fee</th>
                                                <th class="text-nowrap">Other Charges</th>
                                                <th class="text-nowrap">Discount</th>
                                                <th class="text-nowrap">Amount Paid</th>
                                                <th class="text-nowrap">Remaining Fee</th>
                                                <th class="text-nowrap">Due Date</th>
                                                <th class="text-nowrap">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody class="table-border-bottom-0">
                                            <!-- Rows will be inserted here -->
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- / Content -->
        <div id="myModal" class="modal p-3">
            <!-- Modal content -->
            <div class="modal-content p-3" style="max-width: 37%; top: 16%; left: 33%;">
                <div><span class="close text-end" style="cursor: pointer">&times;</span></div>
                <h4 class="text-center" id="text_in_modal"></h4>

                <h3>Total Fees User Has to Pay: <span id="total_fee_amount"></span></h3>
                <h5>Remaining Amount: <span id="remaining_amount">0</span></h5>
                <div class="mb-3">
                    <label class="form-label" for="basic-icon-default-fullname">Enter the Amount User Paid</label>
                    <div class="input-group">
                        <span id="basic-icon-default-education" class="input-group-text"><i class="bx bx-user"></i></span>
                        <input class="form-control" id="amount_to_paid" type="text" placeholder="Amount"
                            autocomplete="off" pattern="\d*" oninput="this.value = this.value.replace(/\D/g, '')" />
                    </div>
                </div>
                <div class="mb-3" id="next_due_date_container" style="display: none;">
                    <label class="form-label" for="next_due_date">Next Due Date</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bx bx-calendar"></i></span>
                        <input class="form-control" id="next_due_date" type="date" />
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label" for="basic-icon-default-fullname">Note</label>
                    <div class="input-group">
                        <span id="basic-icon-default-education" class="input-group-text"><i
                                class="bx bx-note"></i></span>
                        <input class="form-control" id="note" type="text" placeholder="Note" autocomplete="off"
                            pattern="\d*" />
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label" for="transaction_type">Transaction Type</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bx bx-credit-card"></i></span>
                        <select class="form-control" id="transaction_type">
                            <option value="Cash" selected>Cash</option>
                            <option value="UPI">UPI</option>
                            <option value="Bank Transfer">Bank Transfer</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6 text-white text-end"
                        style="display: flex;justify-content: end;width: 100%;gap: 20px;">
                        <a class="btn btn-info " href="javascript:void(0)" onclick="payamount()">Pay Amount</a>
                    </div>
                </div>
                <div id="loader1"
                    class="d-none position-fixed top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center"
                    style="z-index: 1050;">
                    <div class="spinner-border text-light" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js">
    </script>
    <script>
        $(document).ready(function() {
            const today = new Date();
            const yyyy = today.getFullYear();
            const mm = String(today.getMonth() + 1).padStart(2, '0');
            const dd = String(today.getDate()).padStart(2, '0');

            const todayStr = `${yyyy}-${mm}-${dd}`;
            const oneYearLater = new Date(today);
            oneYearLater.setFullYear(today.getFullYear() + 1);
            const yyyyNext = oneYearLater.getFullYear();
            const mmNext = String(oneYearLater.getMonth() + 1).padStart(2, '0');
            const ddNext = String(oneYearLater.getDate()).padStart(2, '0');
            const oneYearLaterStr = `${yyyyNext}-${mmNext}-${ddNext}`;

            $("#next_due_date").attr("min", todayStr);
            $("#next_due_date").attr("max", oneYearLaterStr);
            $("#next_due_date").val(todayStr);

            $("#amount_to_paid").on("input", function() {
                const enteredAmount = parseInt($(this).val() || 0);
                const remaining = parseInt($("#remaining_amount").text() || 0);

                if (enteredAmount > 0 && enteredAmount < remaining) {
                    $("#next_due_date_container").show();
                } else {
                    $("#next_due_date_container").hide();
                }
            });
        });
    </script>
    <script>
        var span = document.getElementsByClassName("close")[0];

        let parent_list = null,
            student_list = null,
            course_list = null,
            batch_list = null,
            current_parent = null,
            current_parent_student_list = null,
            calc_fee = null,
            student_classes = null,
            pending_fee = null,
            start_month = null,
            end_month = null,
            include_transport_charges = "no",
            transport_charges = 0,
            annual_charges = 0,
            transport_fee = 0;
        let monthly_fee_to_pay = 0,
            quarterly_fee_to_pay = 0,
            semi_annual_fee_to_pay = 0,
            annual_fee_to_pay = 0;

        span.onclick = function() {
            modal.style.display = "none";
            review_id = 0;
        }

        jQuery(function($) {
            $('#courseid').select2({
                placeholder: 'Select Course',
                multiple: false
            });

            $("#batchid").select2({
                placeholder: 'Select Batch',
                multiple: true
            });
            $('#courseid').prop("disabled", true);
            $('#batchid').prop("disabled", true);

            $('#parentid').select2({
                placeholder: 'Select Parent',
                multiple: false
            });

            $('#studentid').select2({
                placeholder: 'Select Student',
                multiple: false
            });


        });

        function getParents() {
            $.ajax({
                url: "/getParentList",
                type: "GET",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {

                    $('#parentid').empty();
                    parent_list = response.parent_list;

                    if (response.parent_list.length > 0) {
                        $('#parentid').append(`<option selected disabled hidden>Select Parent</option>`);
                        $('#parentid').prop("disabled", false);
                    }

                    $.each(response.parent_list, function(key, value) {
                        $('#parentid').append(
                            `<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`
                        );
                    });

                    if (response.parent_list.length == 0) {
                        $('#parentid').append(`<option selected disabled hidden>No Parent Found</option>`);
                        $('#parentid').prop("disabled", true);
                    }
                },
                error: function() {
                    console.log("Something went wrong");
                },
                complete: function() {

                }
            });
        }
        getParents();

        function getStudents() {
            $.ajax({
                url: "/getStudentList",
                type: "GET",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $("#studentid").empty();
                    student_list = response.student_list;

                    if (response.student_list.length > 0) {
                        $('#studentid').append(`<option selected disabled hidden>Select Student</option>`);
                        $('#studentid').prop("disabled", false);
                    }

                    $.each(response.student_list, function(key, value) {
                        $('#studentid').append(
                            `<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`
                        );
                    });

                    if (response.student_list.length == 0) {
                        $('#studentid').append(`<option selected disabled hidden>No Student Found</option>`);
                        $('#studentid').prop("disabled", true);
                    }
                },
                error: function(resp) {

                },
                complete: function(resp) {

                }

            });
        }
        getStudents();

        function getClasses() {
            $("#courseid").prop("disabled", true);
            $.ajax({
                url: "/getCourseList",
                type: "GET",
                header: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $("#courseid").empty();
                    course_list = response.course_list;

                    if (response.course_list.length > 0) {
                        $('#courseid').append(`<option selected disabled hidden>Select Course</option>`);
                    }

                    $.each(response.course_list, function(key, value) {
                        $('#courseid').append(
                            `<option value="${value['id']}">${value['coursename']} ( ${value['id']} )</option>`
                        );
                    });

                    if (response.course_list.length == 0) {
                        $('#courseid').append(`<option selected disabled hidden>No Class Found</option>`);
                        $('#courseid').prop("disabled", true);
                    }
                },
                error: function(resp) {

                },
                complete: function(resp) {

                }
            });
        }

        function resetParents() {
            $('#parentid').empty();
            $("#studentid").empty();
            $('#parentid').prop("disabled", true);
            $('#studentid').prop("disabled", true);
            $("#fetch_details_btn").prop('disabled', true);
            $("#student_class").val("Select Class");

            if (parent_list.length > 0) {
                $('#parentid').append(`<option selected disabled hidden>Select Parent</option>`);
                $('#parentid').prop("disabled", false);
                $.each(parent_list, function(key, value) {
                    $('#parentid').append(
                        `<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`
                    );
                });
            } else if (parent_list.length == 0) {
                $('#parentid').append(`<option selected disabled hidden>No Parent Found</option>`);
                $('#parentid').prop("disabled", true);
            }

            if (student_list.length > 0) {
                $('#studentid').append(`<option selected disabled hidden>Select Student</option>`);
                $('#studentid').prop("disabled", false);
                $.each(student_list, function(key, value) {
                    $('#studentid').append(
                        `<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`
                    );
                });
            } else if (student_list.length == 0) {
                $('#studentid').append(`<option selected disabled hidden>No Student Found</option>`);
                $('#studentid').prop("disabled", true);
            }
        }

        function resetStudents() {
            $("#studentid").empty();
            $("#fetch_details_btn").prop('disabled', false);
            $("#student_class").val("Select Class");

            if (current_parent != null) {
                if (current_parent_student_list.length > 0) {
                    $('#studentid').append(`<option selected disabled hidden>Select Student</option>`);
                    $('#studentid').prop("disabled", false);
                    $.each(current_parent_student_list, function(key, value) {
                        $('#studentid').append(
                            `<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`
                        );
                    });
                } else if (current_parent_student_list.length == 0) {
                    $('#studentid').append(`<option selected disabled hidden>No Student Found</option>`);
                    $('#studentid').prop("disabled", true);
                }
            } else {
                $("#parentid").prop("disabled", false);
                $('#parentid').empty();

                if (parent_list.length > 0) {
                    $('#parentid').append(`<option selected disabled hidden>Select Parent</option>`);
                    $('#parentid').prop("disabled", false);
                    $.each(parent_list, function(key, value) {
                        if (value['id'] == current_parent) {
                            $('#parentid').append(
                                `<option value="${value['id']}" selected>${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`
                            );
                        } else {
                            $('#parentid').append(
                                `<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`
                            );
                        }
                    });
                } else if (parent_list.length == 0) {
                    $('#parentid').append(`<option selected disabled hidden>No Parent Found</option>`);
                    $('#parentid').prop("disabled", true);
                }

                if (student_list.length > 0) {
                    $('#studentid').append(`<option selected disabled hidden>Select Student</option>`);
                    $('#studentid').prop("disabled", false);
                    $.each(student_list, function(key, value) {
                        $('#studentid').append(
                            `<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`
                        );
                    });
                } else if (student_list.length == 0) {
                    $('#studentid').append(`<option selected disabled hidden>No Student Found</option>`);
                    $('#studentid').prop("disabled", true);
                }
            }
        }

        $("#parentid").on("change", function(e) {
            e.stopPropagation();
            $("#studentid").prop("disabled", true);
            $("#parentid").prop("disabled", true);
            $('.removefetchdetails').remove();
            $(".payment_section_show").addClass('d-none');
            $('.fee').addClass('d-none');
            $('.payNow').addClass('d-none');
            $('#amount').text(0);

            const parent_id = $("#parentid").val();
            current_parent = parent_id;

            $.ajax({
                url: "/checkStudent",
                type: "GET",
                headers: {
                    "X-CSRF-TOKEN": $('meta [name="csrf-token"]').attr("content")
                },
                data: {
                    "parent_id": parent_id
                },
                success: function(response) {

                    const status = response["status"];
                    if (status === 200) {
                        const children = response["children"];

                        if (children === true) {
                            const students = response["students_detail"];
                            current_parent_student_list = response["students_detail"];

                            student_classes = response["student_class"];

                            if (students.length > 0) {
                                $("#studentid").empty();
                                $('#studentid').append(
                                    `<option value="" selected disabled hidden>Select Student</option>`
                                );
                                $.each(students, function(key, value) {
                                    $('#studentid').append(
                                        `<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`
                                    );
                                });
                                $("#studentid").prop("disabled", false);
                            } else {
                                $('#studentid').append(
                                    `<option value="" selected disabled hidden>No Student Found</option>`
                                );
                            }
                        } else {
                            student_classes = null;
                            $('#studentid').append(
                                `<option value="" selected disabled hidden>No Student Found</option>`
                            );
                        }
                        $("#remove_parent").removeClass('d-none');
                    }

                },
                error: function() {

                },
                complete: function() {

                }
            });
        });

        $("#studentid").on("change", function(e) {
            e.stopPropagation();
            $("#parentid").prop("disabled", true);
            $('.removefetchdetails').remove();
            $("#fetch_details_btn").prop('disabled', true);
            $(".payment_section_show").addClass('d-none');
            $('.fee').addClass('d-none');
            $('.payNow').addClass('d-none');
            $('#amount').text(0);
            const student_id = $("#studentid").val();

            if (student_classes) {
                if (student_id in student_classes) {
                    if (student_classes[student_id]) {
                        $("#student_class").val(student_classes[student_id]);
                    } else {
                        $("#student_class").val("Class Not Mapped Yet.");
                    }
                } else {
                    $("#student_class").val("Class Not Mapped Yet.");
                }
            } else {
                $("#student_class").val("Class Not Mapped Yet.");
            }

            $.ajax({
                url: '/checkParent',
                type: 'GET',
                headers: {
                    "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr('content')
                },
                data: {
                    "student_id": student_id
                },
                success: function(resp) {
                    const status = resp["status"];

                    if (status === 200) {
                        $("#fetch_details_btn").prop('disabled', false);
                        const parent = resp["parent"];
                        $("#parentid").empty();
                        if (parent === true) {
                            $("#parentid").append(
                                `<option value="${resp['parentdetails']['id']}">${resp['parentdetails']['first_name']} ${resp['parentdetails']['last_name']}</option>`
                            );
                        } else {
                            $("#parentid").append(`<option value=""Select Parent</option>`);
                        }

                        const singleStudentClass = resp["student_class"];

                        if (singleStudentClass) {
                            $("#student_class").val(singleStudentClass);
                        } else {
                            $("#student_class").val("Class Not Mapped Yet.");
                        }
                        $("#courseid").prop("disabled", false);
                    } else if (status === 404) {
                        $("#student_class").val("Class Not Mapped Yet.");
                        $("#courseid").prop("disabled", true);
                        $("#batchid").prop("disabled", true);
                        student_classes = null;
                    } else if (status === 400) {
                        $("#student_class").val("Class Not Mapped Yet.");
                        $("#courseid").prop("disabled", true);
                        $("#batchid").prop("disabled", true);
                        student_classes = null;
                    }
                    $("#remove_student").removeClass('d-none');
                },
                error: function() {

                },
                complete: function() {

                }
            });

        });

        $("#remove_parent").on("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            current_parent = null;
            current_parent_student_list = null;
            $("#remove_parent").addClass('d-none');
            $("#remove_student").addClass('d-none');
            $('.payment_section_show').addClass('d-none');
            $('.removefetchdetails').remove();
            $('.fee').addClass('d-none');
            $('.payNow').addClass('d-none');
            $('#amount').text(0);
            $("#fetch_details_btn").prop('disabled', true);
            // $(".layout-wrapper").css({"position":"fixed","overflow-y":"hidden"});
            resetParents();
            resetPaymentType();
        });

        $("#remove_student").on("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            $("#remove_student").addClass('d-none');
            $('.removefetchdetails').remove();
            $('.payment_section_show').addClass('d-none');
            $("#fetch_details_btn").prop('disabled', true);
            // $(".layout-wrapper").css({"position":"fixed","overflow-y":"hidden"});
            $('.fee').addClass('d-none');
            $('.payNow').addClass('d-none');
            $('#amount').text(0);
            resetStudents();
            resetPaymentType();
        })

        function formatDateInJs(dateStr) {
            const dateObj = new Date(dateStr);

            // Extract day, month, and year from the Date object
            const day = String(1).padStart(2, '0');
            const month = String(dateObj.getMonth() + 1).padStart(2, '0'); // Months are zero-indexed
            const year = dateObj.getFullYear();

            start_month = `${day}-${month}-${year}`;
            return start_month;
        }

        function addMonthsToDate(dateStr, monthsToAdd) {
            const [day, month, year] = dateStr.split('-').map(Number);
            const dateObj = new Date(year, month - 1, day);

            // Add the months
            dateObj.setMonth(dateObj.getMonth() + monthsToAdd);

            // Move to the end of the month by setting the date to 0 of the next month
            dateObj.setMonth(dateObj.getMonth(), 0);

            const newDay = String(dateObj.getDate()).padStart(2, '0');
            const newMonth = String(dateObj.getMonth() + 1).padStart(2, '0'); // getMonth() returns zero-indexed month
            const newYear = dateObj.getFullYear();

            // Format the new date in dd-mm-yyyy format
            const end_month = `${newDay}-${newMonth}-${newYear}`;

            return end_month;
        }

        $("#fetch_details_btn").on("click", function() {
            // Fetch Fee details
            $('.invoice_table').hide();

            const student_id = $("#studentid").val();
            const student_class = $("#student_class").val();
            transport_charges = 0;
            annual_charges = 0;
            if (student_class === "Class Not Mapped Yet.") {
                if (!$('#student_class').closest('div').next().hasClass('text-danger')) {
                    $('#student_class').closest('div').after(
                        `<span class="text-strong text-danger">Student Class mapping required before paying fees.</span>`
                    );
                }
                return;
            }

            $('.removefetchdetails').remove();
            $('.text-danger').remove();
            $("#loader").removeClass("d-none");

            $.ajax({
                url: "/getStudentFeeDetails",
                type: 'GET',
                headers: {
                    "X-CSRF-TOKEN": $('meta [name="csrf-token"]').attr('content')
                },
                data: {
                    "student_id": student_id,
                    "student_class": student_class
                },
                success: function(response) {
                    // $(".layout-wrapper").css({"position":"absolute","overflow-y":"auto"});
                    if (response.warning) {
                        alert(response.warning);
                        return;
                    }
                    const status = response["status"];
                    console.log(response);

                    if (status === 404) {

                        if (!$('#fetch_details_btn').closest('div').prev().hasClass('text-danger')) {
                            $('#fetch_details_btn').closest('div').before(
                                `<span class="text-strong text-danger">${response["message"]}</span>`
                            );
                        }
                    } else if (status === 200) {
                        $('.invoice_table').show();

                        const tableBody = document.querySelector("#invoicesTable tbody");
                        var invoices = response['invocies'];
                        tableBody.innerHTML = "";
                        if (invoices.length === 0) {
                            const noRecordsRow = document.createElement("tr");
                            noRecordsRow.innerHTML = `
        <td colspan="13"><span>No records found</span></td>
    `;
                            tableBody.appendChild(noRecordsRow);
                            return;
                        }
                        var count = 1;
                        invoices.forEach(invoice => {
                            const row = document.createElement("tr");

                            row.innerHTML = `
                    <td>${count}</td>
                    <td>${invoice.class_name}</td>
                    <td>${invoice.total_fee}</td>
                    <td>${invoice.registration_fee_total}</td>
                    <td>${invoice.kit_fee_total}</td>
                    <td>${invoice.monthly_fee_total}</td>
                    <td>${invoice.transport_fee_total}</td>
                    <td>${invoice.other_charges}</td>
                    <td>${invoice.discount}</td>
                    <td>${invoice.amountpaid}</td>
                    <td>${invoice.remaining_fee}</td>
                   <td>
  ${new Date(invoice.due_date).toLocaleDateString('en-GB')}
</td>
                    <td><button class="btn btn-success text-nowrap text-white mt-3" onclick="payNow(${invoice.id},${invoice.remaining_fee})">Pay Now</button></td>
                `;


                            tableBody.appendChild(row);
                            count++;
                        });
                        $(".payment_section_show").removeClass("d-none");
                    }
                    $("#loader").addClass("d-none");
                },
                error: function(response) {
                    $("#loader").addClass("d-none");
                },
                complete: function(response) {
                    $("#loader").addClass("d-none");
                }
            });
        });



        $("#remove_payment_type").on("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            resetPaymentType();
        });

        $("#save_details_btn").on("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            $(".btn-success").prop("disabled", true);
            $(".btn-info").prop("disabled", true);
            $(".input").prop("disabled", true);
            $('.text-danger').remove();

            const student_id = $("#studentid").val();
            const payment_type = $("#payment_type_id").val();
            const student_class = $("#student_class").val();

            if (student_class === "Class Not Mapped Yet.") {
                if (!$('#save_details_btn').closest('div').next().hasClass('text-danger')) {
                    $('#save_details_btn').closest('div').after(
                        `<span class="text-strong text-danger">Student Class mapping required before paying fees.</span>`
                    );
                }
                return;
            }

            $.ajax({
                url: "/addFeeDetails",
                type: "POST",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    "student_id": student_id,
                    "student_class": student_class,
                    "payment_type": payment_type,
                    "include_transport_charges": include_transport_charges,
                    "annual_charges": annual_charges,
                    "transport_fee": transport_fee
                },
                success: function(response) {
                    const status = response["status"];

                    if (status == 200) {
                        const fee = response["fee"];

                        if (fee === "done") {
                            $("#save_details_btn").after(
                                `<div class='text-success'>Payment added successfully. Please wait...</div>`
                            );
                            setTimeout(function() {
                                window.location.href = response["success"];
                                $(".btn-success").prop("disabled", false);
                                $(".btn-info").prop("disabled", false);
                                $(".input").prop("disabled", false);
                            }, 1000);
                        }

                    } else if (status == 400) {

                        const err = response["error"];
                        if (err == "validation") {
                            $("#save_details_btn").after(
                                `<div class='text-danger'>Some required parameters are missing*</div>`
                            );
                        } else if (err == "not found") {
                            $("#save_details_btn").after(
                                `<div class='text-danger'>Records has been removed*</div>`);
                        }

                    } else if (status === 404) {
                        if (!$('#fetch_details_btn').closest('div').prev().hasClass('text-danger')) {
                            $('#fetch_details_btn').closest('div').before(
                                `<span class="text-strong text-danger">Refresh your webpage. Something went wrong.</span>`
                            );
                        }
                    }
                },
                error: function() {
                    $(".btn-success").prop("disabled", false);
                    $(".btn-info").prop("disabled", false);
                    $(".input").prop("disabled", false);
                },
                complete: function() {

                }
            });
        });
    </script>
    <script>
        $(function() {
            $('.col-xl').removeClass('d-none');
        });
    </script>

    <script>
        var invoice_id
        var modal = document.getElementById("myModal");
        var remaining_amount = 0;

        function payNow(id, amount) {
            invoice_id = id;
            modal.style.display = "block";
            remaining_amount = amount;
            $('#amount_to_paid').val(amount);
            $('#remaining_amount').html(amount);
        }
        $('#amount_to_paid').keyup(function(e) {
            if (parseInt(remaining_amount) < parseInt($(this).val())) {
                $(this).val(parseInt(remaining_amount));
                alert("Don't enter the amount greater than Total Fee");
                return;
            }
        });

        function payamount() {
            var formData = new FormData();
            var amount = $('#amount_to_paid').val();
            var note = $('#note').val();
            var transaction_type = $('#transaction_type').val();
            var next_due_date = $('#next_due_date_container').is(':visible') ? $('#next_due_date').val() : null;

            formData.append('invoice_id', invoice_id);
            formData.append('amount', amount);
            formData.append('note', note);
            formData.append('transaction_type', transaction_type);
            if (next_due_date) {
                formData.append('next_due_date', next_due_date);
            }

            $.ajax({
                type: "post",
                url: "{{ url('/pay-offline-fee') }}",
                cache: false,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                beforeSend: function() {
                    // Show loader
                    $("#loader1").removeClass("d-none");
                },
                success: function(data) {
                    if ($.isEmptyObject(data.error)) {
                        // Show success message
                        toastr.success("Fee submitted successfully!");

                        // Reload after short delay so user sees the message
                        setTimeout(function() {
                            location.reload();
                        }, 1500);

                    } else {
                        $('#error').show();
                        $.each(data.error, function(field_name, error) {
                            toastr.error(error);
                        })
                    }
                },
                error: function() {
                    toastr.error("Something went wrong. Please try again.");
                },
                complete: function() {
                    // Hide loader after success or error
                    $("#loader1").addClass("d-none");
                }
            })
        }

        function getAmount() {
            $("#loader1").removeClass("d-none");
            let student_id = $("#studentid").val();
            var formData = new FormData(document.getElementById('calculate-payable'));
            formData.append('student_id', student_id);
            formData.append('student_class', ($("#student_class").val()).trim());
            $.ajax({
                type: "post",
                url: "{{ url('/calculate-payable') }}",
                contentType: 'multipart/form-data',
                cache: false,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                success: function(data) {
                    $("#loader1").addClass("d-none");
                    if ($.isEmptyObject(data.error)) {
                        if (data.success == 'Updated') {
                            if (data.amount == 0 || data.amount == "") {
                                toastr.error("Already all bills are cleared");
                                return;
                            }
                            // toastr.success(data.success);
                            // alert(data.amount)
                            $('#amount').text(data.amount);
                            $('#total_fee').text(data.total);
                            $('#late_fee').text(data.late_fee);
                            $('.fee').removeClass('d-none');
                            $('.payNow').removeClass('d-none');
                        }
                        if (data.success == 'Failed') {
                            toastr.success('Something went wrong!');
                        }
                    } else {
                        $('#error').show();
                        $.each(data.error, function(field_name, error) {
                            toastr.error(error);
                        })
                    }
                }
            })
        }

        function feePayment() {
            $('.loader').addClass('loading');
            let student_id = $("#studentid").val();
            var formData = new FormData(document.getElementById('calculate-payable'));
            formData.append('student_id', student_id);
            formData.append('student_class', ($("#student_class").val()).trim());

            $.ajax({
                type: "post",
                url: "{{ url('/pay-now') }}",
                contentType: 'multipart/form-data',
                cache: false,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                success: function(data) {
                    $('.loader').removeClass('loading');
                    if ($.isEmptyObject(data.error)) {
                        if (data.success == 'Updated') {
                            toastr.success("Fee paid successfully!");
                            // alert(data.amount)
                            // $('#amount').text(data.amount);
                            // $('#calc_amt').removeClass('d-none');
                            $('.payNow').addClass('d-none');
                            window.location.href = '/getfeedata';
                        }
                        if (data.success == 'Failed') {
                            toastr.success('Something went wrong!');
                        }
                    } else {
                        $('#error').show();
                        $.each(data.error, function(field_name, error) {
                            toastr.error(error);
                        })
                    }
                }
            })
        }




        // function createCheckboxes(months) {
        //   var $container = $('#checkbox-container');
        //   $container.empty(); // Clear any existing content

        //   $.each(months, function(index, month) {
        //     var $div = $('<div>', {
        //       class: 'input-group col'
        //     });
        //     var $formCheckDiv = $('<div>', {
        //       class: 'form-check'
        //     });

        //     var $input = $('<input>', {
        //       type: 'checkbox',
        //       class: 'form-check-input',
        //       value: month,
        //       id: 'checkbox-' + month
        //     });

        //     var $label = $('<label>', {
        //       class: 'form-check-label',
        //       for: 'checkbox-' + month,
        //       text: month
        //     });

        //     $formCheckDiv.append($input).append($label);
        //     $div.append($formCheckDiv);
        //     $container.append($div);
        //   });
        // }
    </script>
@endsection