@extends('layouts.admin')

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

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('assets/css/pop_up_with_image.css') }}" />

<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;
    }

    #select_parent {
        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;
    }

    .custom_select12 .select2-container .selection .select2-selection {
        height: 38px;
    }

    .custom_select12 .select2-container .selection .select2-selection .select2-selection__rendered {
        height: 100%;
        line-height: 2.3;
    }

    .custom_select12 .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 100%;
    }

    .fee {
        display: none;
    }

    .disabledColor {
        background-color: #ECEFF1 !important;
    }
</style>

@section('main-content')

    <div id="alert" class="col-md-6">
        @if (Session::has('success'))
            <div class="alert alert-primary" role="alert">
                {{ Session::get('success') }}
            </div>
        @endif
    </div>

    <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 New Student</h4>
            <!-- Basic Layout -->
            <div class="row">
                <div class="col-xl">
                    <div class="card">
                        <div class="card-header" style="margin-bottom: -15px !important;">
                            {{-- <h5 class="mb-3">Select Parent</h5>
                            <div class="input-group mb-3 custom_select12">
                                <select id="select_parent" class="form-select input form-control-line">
                                    @if (isset($parent_list))
                                        <option value="" selected disabled>Select Parent</option>
                                        @foreach ($parent_list as $parent)
                                                                                        <option value="{{ json_encode($addInfo) }}">
                                                {{ ucwords($parent->first_name) . ' ' . ucwords($parent->last_name) }}</option>
                                        @endforeach
                                    @else
                                        <option selected disabled value="">No Parent Found</option>
                                    @endif
                                </select>
                            </div> --}}
                            <div class="parent_info d-none">
                                <div class="row">
                                    <div class="mb-3 col-12 col-md-6">
                                        <label class="form-label" for="basic-icon-default-email">Email</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bx bx-envelope"></i></span>
                                            <input type="email" class="form-control input form-control-line"
                                                name="email" id="email" readonly autocomplete="off">
                                        </div>
                                    </div>

                                    <div class="mb-3 col-12 col-md-6">
                                        <label class="form-label" for="basic-icon-default-phone">Phone No</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-phone2" class="input-group-text"><i
                                                    class="bx bx-phone"></i></span>
                                            <input type="text" placeholder="Ex: 65879XXXXX"
                                                class="form-control input form-control-line" name="phone" id="phone"
                                                readonly autocomplete="off">
                                            @error('phone')
                                                <span class="text-danger row">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <h5>Student Details</h5>
                            <form method="POST" action="{{ url('add-new-user') }}" enctype="multipart/form-data">
                                <div class="row">
                                    <div class="mb-3 col-12 col-md-6">
                                        <label class="form-label">First Name</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                                    class="bx bx-user"></i></span>
                                            <input type="text" name="fname" id="fname" placeholder="John"
                                                class="form-control input form-control-line" minlength="3" maxlength="30"
                                                onkeydown="return /[a-zA-Z\s]/i.test(event.key)" autocomplete="off">
                                        </div>
                                    </div>

                                    <div class="mb-3 col-12 col-md-6">
                                        <label class="form-label">Last Name</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                                    class="bx bx-user"></i></span>
                                            <input type="text" name="lname" id="lname" placeholder="Last Name"
                                                class="form-control input form-control-line" minlength="3" maxlength="30"
                                                onkeydown="return /[a-zA-Z\s]/i.test(event.key)" autocomplete="off">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="mb-3 col-12 col-md-6">
                                        <label class="form-label" for="basic-icon-default-fullname">Gender</label>
                                        <div class="input-group input-group-merge">
                                            <span id="basic-icon-default-gender" class="input-group-text"><i
                                                    class="bx bx-user"></i></span>
                                            <select class="form-select gender" id="gender">
                                                <option selected disabled value="">Select Gender</option>
                                                <option value="male">Male</option>
                                                <option value="female">Female</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="mb-3 col-12 col-md-6">
                                        <label class="form-label" for="basic-icon-default-fullname">Date of Birth</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-dob" class="input-group-text"><i
                                                    class="bx bxs-calendar-event"></i></span>
                                            <input type="text" name="dob" id="dob"
                                                class="form-control input form-control-line bg-white"
                                                placeholder="Select Date Of Birth" readonly autocomplete="off">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="mb-3 col-12 col-md-6">
                                        <label class="form-label">Class</label>
                                        <div class="input-group">
                                            <select name="class_name" id="class_name"
                                                class="form-select input form-control-line">
                                                @if (isset($class_list) && count($class_list) > 0)
                                                    <option value="" selected disabled>Select Class</option>
                                                    @foreach ($class_list as $value)
                                                        <option value="{{ $value }}">{{ $value }}</option>
                                                    @endforeach
                                                @else
                                                    <option value="" selected disabled>No Class Found.</option>
                                                @endif
                                            </select>
                                        </div>
                                    </div>

                                    <div class="mb-3 col-12 col-md-6">
                                        <label class="form-label">Teacher</label>
                                        <div class="input-group custom_select12">
                                            <input type="text" name="teacher_name" id="teacher_name"
                                                class="form-control input form-control-line" placeholder="Teacher Name"
                                                readonly autocomplete="off" disabled>
                                        </div>
                                    </div>
                                </div>


                                <div class="row">
                                    <div class="mb-3 col-12 col-md-6">
                                        <label class="form-label" for="basic-icon-default-fullname">Address</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-dob" class="input-group-text"><i
                                                    class='bx bxs-map-pin'></i></span>
                                            <input type="text" class="form-control input form-control-line bg-white"
                                                id="address" placeholder="Enter Address" autocomplete="off"
                                                maxlength="100">
                                        </div>
                                    </div>

                                    <div class="mb-3 col-12 col-md-6">
                                        <label class="form-label" for="basic-icon-default-email">Emergency Contact
                                            Number</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-phone2" class="input-group-text"><i
                                                    class="bx bx-phone"></i></span>
                                            <input type="text" name="emergency_contact" id="emergency_contact"
                                                onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                                class="form-control input form-control-line" minlength="10"
                                                maxlength="10" pattern="[0-9]{1}[0-9]{9}"
                                                placeholder="Enter Emergency Contact Number" autocomplete="off">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="mb-3 col-12 col-md-4">
                                        <label class="form-label" for="basic-icon-default-fullname">Student Image</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-dob" class="input-group-text"><i
                                                    class='bx bx-image'></i></span>
                                            <input type="file" class="form-control input form-control-line bg-white"
                                                id="student_image" readonly style="color:#697a8d !important;"
                                                autocomplete="off" accept="image/jpg, image/jpeg, image/png"
                                                onchange="handleFileChange(event,0,'prvImg0')">
                                        </div>
                                        <a href="javaScript:void(0);" onclick="openingModal(0,'Uploaded Student Image')"
                                            id="prvImg0" class="d-none">Preview Image</a>
                                    </div>

                                    <div class="mb-3 col-12 col-md-4">
                                        <label class="form-label" for="basic-icon-default-fullname">Birth
                                            Certificate</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-dob" class="input-group-text"><i
                                                    class='bx bx-image'></i></span>
                                            <input type="file"
                                                class="form-control input form-control-line bg-white aadhar_card"
                                                id="birth_certificate" readonly style="color:#697a8d !important;"
                                                autocomplete="off" accept="image/jpg, image/jpeg, image/png"
                                                onchange="handleFileChange(event,1,'prvImg1')">
                                        </div>
                                        <a href="javaScript:void(0);"
                                            onclick="openingModal(1,'Uploaded Birth Certificate')" id="prvImg1"
                                            class="d-none">Preview Image</a>
                                    </div>

                                    <div class="mb-3 col-12 col-md-4">
                                        <label class="form-label" for="basic-icon-default-fullname">Vaccination
                                            Card</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-dob" class="input-group-text"><i
                                                    class='bx bx-image'></i></span>
                                            <input type="file"
                                                class="form-control input form-control-line bg-white aadhar_card"
                                                id="vaccination_certificate" readonly style="color:#697a8d !important;"
                                                autocomplete="off" accept="image/jpg, image/jpeg, image/png"
                                                onchange="handleFileChange(event,2,'prvImg2')">
                                        </div>
                                        <a href="javaScript:void(0);"
                                            onclick="openingModal(2,'Uploaded Vaccination Certificate')" id="prvImg2"
                                            class="d-none">Preview Image</a>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label" for="basic-icon-default-email">Allergic</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-phone2" class="input-group-text"><i
                                                class='bx bx-plus-medical'></i></span>
                                        <select class="form-select is_allergic custom-pointer" id="is_allergic">
                                            <option class="custom-pointer" value="true">Yes</option>
                                            <option class="custom-pointer" value="false" selected>No</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="mb-3 col-12 col-md-6">
                                        <label class="form-label" for="academic_year">Academic Year</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class='bx bx-calendar'></i></span>
                                            <select class="form-select custom-pointer" id="academic_year" name="academic_year">
                                                @php
                                                    $yearRange = Session::get('year_range');
                                                    $currentYear = date('Y');
                                                    $currentMonth = date('n'); // Numeric month without leading zero
                                                    // If month is April or later, academic year starts from current year
                                                    $startYear = $currentMonth >= 4 ? $currentYear : $currentYear - 1;
                                                @endphp
                                                <option value="{{ $startYear }}-{{ $startYear + 1 }}" 
                                                    {{ $yearRange == "$startYear-$startYear+1" ? 'selected' : '' }}>
                                                    {{ $startYear }}-{{ $startYear + 1 }}
                                                </option>
                                                <option value="{{ $startYear + 1 }}-{{ $startYear + 2 }}" 
                                                    {{ $yearRange == ($startYear + 1) . '-' . ($startYear + 2) ? 'selected' : '' }}>
                                                    {{ $startYear + 1 }}-{{ $startYear + 2 }}
                                                </option>
                                            </select>
                                        </div>
                                    </div>                                    
                                    <div class="mb-3 col-12 col-md-6">
                                        <label class="form-label" for="basic-icon-default-receipt">Receipt Name</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-receipt" class="input-group-text">
                                                <i class='bx bxs-receipt'></i>
                                            </span>
                                            <input type="text" class="form-control input form-control-line bg-white"
                                                id="receipt_name" name="receipt_name" placeholder="Enter Receipt Name"
                                                autocomplete="off" maxlength="100">
                                        </div>
                                    </div>
                                </div>
                                <div class="row op_link_with_allergy d-none">
                                    <div class="mb-3 col-12 col-md-3">
                                        <label class="form-label" for="basic-icon-default-email">Mark Allergic
                                            Option</label>
                                        <div class="" id="allergy_options">
                                            <div class="form-check">
                                                <label class="form-check-label custom-pointer" for="food">
                                                    Food
                                                </label>
                                                <input type="checkbox" class="form-check-input custom-pointer"
                                                    value="Food" />
                                            </div>

                                            <div class="form-check">
                                                <label class="form-check-label custom-pointer" for="drink">
                                                    Drink
                                                </label>
                                                <input type="checkbox" class="form-check-input custom-pointer"
                                                    value="Drink" />
                                            </div>

                                            <div class="form-check">
                                                <label class="form-check-label custom-pointer" for="other">
                                                    Other
                                                </label>
                                                <input type="checkbox" class="form-check-input custom-pointer"
                                                    value="Other" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mb-3 col-12 col-md-9">
                                        <div class="mb-3 op_link_with_allergy">
                                            <label class="form-label" for="basic-icon-default-email">Allergy Description (
                                                optional )</label>
                                            <div class="input-group">
                                                <textarea class="form-control" rows="4" style="resize: none; overflow-y: auto; max-height: 500px;"
                                                    maxlength="1000" id="allergy_description">{{ isset($medical_details) ? $medical_details->description : '' }}</textarea>
                                            </div>
                                            <div class="text-end">Max Description: 1000 characters</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <div class="mb-3 col-12">
                                        <label class="form-label" for="basic-icon-default-fullname">Date Of
                                            Joining</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-dob" class="input-group-text"><i
                                                    class='bx bxs-calendar-event'></i></span>
                                            <input type="text" class="form-control input form-control-line bg-white"
                                                id="date_of_joining" placeholder="Date of joining" autocomplete="off"
                                                readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    {{-- <p class="mt-2"><b>Total Fee: ₹ <span id="total_fee">0</span></b></p> --}}
                                </div>

                               
                                <div class="form-group loaderbtn_div">
                                    <button type="button" class="btn btn-success text-white" onclick="getuser()"
                                        id="save_btn" disabled>Save</button>
                                    <div class="loaderDiv" id="loader" style="display: none;">
                                        <!-- Your loader HTML or spinner goes here -->
                                        <img src="{{ asset('assets/loader.gif') }}" alt="Loading..." />
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- / Content -->
        <div class="content-backdrop fade"></div>

        <!-- The Modal -->
        <div id="myModal" class="modal" style="padding-top: 50px;">
            <!-- Modal content -->
            <div class="modal-content" style="width: 40%;">
                <div><span class="close text-end">&times;</span></div>
                <h4 class="text-center" id="text_in_modal"></h4>
                <div class="text-center mb-5">
                    <img src="{{ URL::asset('assets/images/users/avatar.jpg') }}" id="card_pic" height="470"
                        width="100%" />
                </div>
            </div>
        </div>
    </div>
    <!-- Include jQuery UI -->

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>


    <script>
        var totalFee;
        // Use jQuery.noConflict()
        jQuery.noConflict();

        // Now use jQuery instead of $ to avoid conflicts
        jQuery(document).ready(function($) {
            let mini = new Date();
            mini.setFullYear(mini.getFullYear() - 18);
            $('#dob').datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,
                // yearRange: "c-69:c",
                minDate: mini,
                maxDate: '-1Y', // Set the desired year range
            }).on('click', function() {
                $(this).datepicker('show');
            }).on('change', function() {
                $('#dob').closest('div').next('span.text-danger').remove();
                const dob = $(this).val();
                const class_name = $('#class_name').val();
                let age = 0;
                if (dob) age = calculateAge(dob);
                // if (class_name && dob) checkValidAge(class_name, age);
            });

            $('#date_of_joining').datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,
                // yearRange: "c-69:c",
                // minDate: new Date(),
                maxDate: '+1Y', // Set the desired year range
            }).on('click', function() {
                $(this).datepicker('show');
            });

            $('#date_of_joining').datepicker('setDate', new Date());

            $('#select_parent').select2({
                placeholder: 'Select Parent',
            });
            $('#select_parent').on('select2:open', function() {
                $('.select2-search__field').attr('placeholder', 'Search Parent');
            });
            $('.is_allergic').on("change", function(e) {
                if ($(this).val() === "true") {
                    $(".op_link_with_allergy").removeClass("d-none");
                } else {
                    $(".op_link_with_allergy").addClass("d-none");
                }
            });

            function calculateAge(dob) {
                var parts = dob.split('-');
                var day = parseInt(parts[0], 10);
                var month = parseInt(parts[1], 10) - 1; // JavaScript months are 0-11
                var year = parseInt(parts[2], 10);
                var dobDate = new Date(year, month, day);

                var diff = Date.now() - dobDate.getTime();
                var ageDate = new Date(diff);

                return Math.abs(ageDate.getUTCFullYear() - 1970);
            }

            function checkValidAge(class_name, age) {
                if (class_name == "Play Group" && age > 3) {
                    if (!$('#dob').closest('div').next().hasClass('text-danger')) {
                        $('#dob').closest('div').after(
                            '<span class="text-strong text-danger">Valid age range for Play Group is between 2 to 3.</span>'
                        );
                    }
                } else if (class_name == "Nursery" && (age < 3 || age > 4)) {
                    if (!$('#dob').closest('div').next().hasClass('text-danger')) {
                        $('#dob').closest('div').after(
                            '<span class="text-strong text-danger">Valid age range for Nursery is between 3 to 4.</span>'
                        );
                    }
                } else if (class_name == "Junior KG" && (age < 4 || age > 5)) {
                    if (!$('#dob').closest('div').next().hasClass('text-danger')) {
                        $('#dob').closest('div').after(
                            '<span class="text-strong text-danger">Valid age range for Junior KG is between 4 to 5.</span>'
                        );
                    }
                } else if (class_name == "Senior KG" && (age < 5 || age > 6)) {
                    if (!$('#dob').closest('div').next().hasClass('text-danger')) {
                        $('#dob').closest('div').after(
                            '<span class="text-strong text-danger">Valid age range for Senior KG is between 5 to 6.</span>'
                        );
                    }
                }
            }

            $("#select_parent").on("change", function(e) {
                const selected_parent = JSON.parse($(this).val());
                $(".parent_info").removeClass("d-none");
                $("#email").val(selected_parent.email);
                $("#phone").val(selected_parent.phone);
            });


            $("#class_name").on("change", function(e) {
                $('#dob').closest('div').next('span.text-danger').remove();
                $('#save_btn').attr('disabled', 'disabled');
                $('#payable_fee').text('0');

                const class_name = $(this).val();
                const dob = ($('#dob').val()).trim();
                let age = 0;
                if (dob) age = calculateAge(dob);
                // if (class_name && dob) checkValidAge(class_name, age);

                $.ajax({
                    url: "{{ url('/search-teacher') }}/" + class_name,
                    type: "GET",
                    cache: false,
                    contentType: false,
                    processData: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(resp) {
                        const status = resp["status"];
                        let $teacherInput = $('#teacher_name');
                        fees = resp.fee;

                        $teacherInput.val(''); // Clear any previous values

                        if (status == 200 && resp.data.length > 0) {
                            let teacherNames = [];

                            $.each(resp.data, function(index, value) {
                                let fullName = `${value.first_name} ${value.last_name}`;
                                teacherNames.push(
                                    fullName); // Add teacher name to array
                            });

                            $teacherInput.val(teacherNames.join(
                                ', ')); // Join names with commas and update input
                            $teacherInput.prop("disabled", false); // Enable the input field
                        } else {
                            $teacherInput.val('No Teacher Found');
                            $teacherInput.prop("disabled",
                                true); // Disable input if no teacher is found
                        }

                        $('#reg_fee').text(fees.registeration_fee);
                        $('#reg_fees').val(fees.registeration_fee);
                        $('#kit_fee').text(fees.kit_fee);
                        $('#kit_fees').val(fees.kit_fee);
                        $('#monthly_fee').text(fees.monthly);
                        $('#tution_fee').val(fees.monthly);

                        //uncheck all checked fee if any
                        $('#reg_fees').prop('checked', false);
                        $('#kit_fees').prop('checked', false);
                        $('#tution_fee').prop('checked', false);
                        const getClasses = document.getElementsByClassName('hide_this_class');
                        Array.from(getClasses).forEach(element => {
                            element.style.display = 'none';
                        });

                        $('#total_fee').text(0);
                        totalFee = 0;

                        $('.my-accordian-button').removeAttr("disabled");
                        $('.my-accordian-button').removeClass("disabledColor");
                        $('#transport_charge').removeAttr("disabled");
                        // $('#discount').removeAttr("disabled");

                        $('#monthly').removeAttr("disabled");
                        $('#quarterly').removeAttr("disabled");
                        $('#semi-annually').removeAttr("disabled");
                        $('#calculate').removeAttr("disabled");
                        $('#other_charges').removeAttr("disabled");
                        $('.remove_req_class_msg').remove();
                        $('#save_btn').removeAttr('disabled');

                    },
                    error: function() {

                    }
                });
            });

            function getMonthDifference(startDate, endDate) {
                const startYear = startDate.getFullYear();
                const startMonth = startDate.getMonth();
                const endYear = endDate.getFullYear();
                const endMonth = endDate.getMonth();

                const yearDifference = endYear - startYear;
                const monthDifference = endMonth - startMonth;

                return (yearDifference * 12 + monthDifference) ? (yearDifference * 12 + monthDifference) : 12;
            }

            $("#calculate").on("click", function(e) {
                let transport_charge = Number($('#transport_charge').val()) * 12;
                let other_charges = $('#other_charges').val();
                if (transport_charge === "") transport_charge = 0;
                if (other_charges === "") other_charges = 0;

                let feePay = parseInt(totalFee) + parseInt(transport_charge) + parseInt(other_charges);
                if (parseInt(totalFee) == 0) {
                    alert('No fees selected');
                    return;
                }

                const reg_fee_discount = $("#reg_fees_discount_input").val() != 0 ? Number($(
                    "#reg_fees_discount_input").val()) : 0;
                const kit_fee_discount = $("#kit_fees_discount_input").val() ? Number($(
                    "#kit_fees_discount_input").val()) : 0;
                const tution_fee_discount = $("#tution_fee_discount_input").val() ? Number($(
                    "#tution_fee_discount_input").val()) : 0;

                const reg_fees = Number(($("#reg_fees").val()).trim()) - Number(reg_fee_discount);
                const kit_fees = Number(($("#kit_fees").val()).trim()) - Number(kit_fee_discount);
                const tution_fees = Number(($("#tution_fee").val()).trim()) - Number(tution_fee_discount);

                const date_of_joining = $("#date_of_joining").val();
                const date_of_joining_month = date_of_joining.substring(3, 5);
                const date_of_joining_year = date_of_joining.substring(6);

                var startDate = new Date(date_of_joining_year, date_of_joining_month - 1, 1);

                // End date: March 1st of next year if current month > March, otherwise March 1st of the current year
                var currentMonth = new Date().getMonth() + 1; // JavaScript months are 0-based, so add 1
                var endDate;
                if (currentMonth > 3) {
                    endDate = new Date(new Date().getFullYear() + 1, 3,
                        1); // March 1st next year (2 because 0-based)
                } else {
                    endDate = new Date(new Date().getFullYear(), 3, 1); // March 1st current year
                }

                const total_month = getMonthDifference(startDate, endDate);
                let newTotalFee = 0;
                if ($("#reg_fees").prop("checked")) {
                    newTotalFee += reg_fees;
                }
                if ($("#kit_fees").prop("checked")) {
                    newTotalFee += kit_fees;
                }
                if ($("#tution_fee").prop("checked")) {
                    newTotalFee += (tution_fees * total_month);
                }
                newTotalFee += Number(transport_charge) + Number(other_charges);

                $('#payable_fee').text(newTotalFee);
                $('#save_btn').removeAttr('disabled');
            });

            $("#reg_fees_discount_input").on("keyup", function(e) {
                if ($(this).val() == 0 || $(this).val() == '') {
                    $("#new_reg_fees").text('');
                    return;
                }

                const newAmount = Number(($("#reg_fees").val()).trim()) - Number($(this).val());

                // if(newAmount==0){
                //     $("#new_reg_fees").text('');
                // }
                if (newAmount > 0) {
                    $("#new_reg_fees").text(`Portal Registration Fee after discount: ₹ ${newAmount}`);
                } else {
                    $("#new_reg_fees").text(`Discount amount must be less than original amount.`);
                }
            });

            $("#kit_fees_discount_input").on("keyup", function(e) {
                if ($(this).val() == 0 || $(this).val() == '') {
                    $("#new_kit_fees").text('');
                    return;
                }
                const newAmount = Number(($("#kit_fees").val()).trim()) - Number($(this).val());

                // if(newAmount==0){
                //     $("#new_kit_fees").text('');
                // }
                if (newAmount > 0) {
                    $("#new_kit_fees").text(`Kit fee after discount:₹ ${newAmount}`);
                } else {
                    $("#new_kit_fees").text(`Discount amount must less be than original amount.`);
                }
            });

            $("#tution_fee_discount_input").on("keyup", function(e) {
                if ($(this).val() == 0 || $(this).val() == '') {
                    $("#new_tution_fees").text('');
                    return;
                }

                const newAmount = Number(($("#tution_fee").val()).trim()) - Number($(this).val());

                if (newAmount > 0) {
                    $("#new_tution_fees").text(`Tution fee after discount:₹ ${newAmount}`);
                } else {
                    $("#new_tution_fees").text(`Discount amount must less be than original amount.`);
                }
            });
        });
    </script>

    <script>
        function calculateAge(dob) {
            var parts = dob.split('-');
            var day = parseInt(parts[0], 10);
            var month = parseInt(parts[1], 10) - 1;
            var year = parseInt(parts[2], 10);
            var dobDate = new Date(year, month, day);

            var diff = Date.now() - dobDate.getTime();
            var ageDate = new Date(diff);

            return Math.abs(ageDate.getUTCFullYear() - 1970);
        }

        function handleFileChange(event, pass_val, tag_id) {
            if (event.target.files[0]) {
                $("#" + tag_id).removeClass("d-none");
            } else {
                $("#" + tag_id).addClass("d-none");
            }
        }

        function openingModal(pass_val, text_to_include) {
            var modal = document.getElementById("myModal");

            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];

            modal.style.display = "block";
            let fileInput, file;

            if (pass_val === 0) {
                fileInput = document.getElementById('student_image');
            } else if (pass_val === 1) {
                fileInput = document.getElementById('birth_certificate');
            } else {
                fileInput = document.getElementById('vaccination_certificate');
            }

            $("#text_in_modal").html(text_to_include);

            file = fileInput.files[0];
            const imgElement = document.getElementById('card_pic');

            if (file) {
                const fileURL = URL.createObjectURL(file);
                imgElement.src = fileURL;
            }

            // When the user clicks on <span> (x), close the modal
            span.onclick = function() {
                modal.style.display = "none";
            }

            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
        }

        function capitalizeFirstLetter(string) {
            return string.charAt(0).toUpperCase() + string.slice(1);
        }

        function getuser() {
            $('.text-danger').remove();
            $('#save_btn').prop('disabled', true);
            $('#loader').show();
            let formData = new FormData();
            // let selected_parent = JSON.parse($('#select_parent').val());
            // select_parent = (selected_parent) ? selected_parent.id : "";
            const fname = ($('#fname').val()).trim();
            const lname = ($('#lname').val()).trim();
            const gender = $('#gender').val();
            const class_name = $("#class_name").val() ? $("#class_name").val() : "";
            let teacher_name = ($("#teacher_name").val()).trim();
            const address = ($("#address").val()).trim();
            const dob = ($('#dob').val()).trim();
            const date_of_joining = ($('#date_of_joining').val()).trim();
            const student_image = $('#student_image').prop('files')[0];
            const birth_certificate = $('#birth_certificate').prop('files')[0];
            const vaccination_certificate = $('#vaccination_certificate').prop('files')[0];
            const emergency_contact = ($('#emergency_contact').val()).trim();
            const is_allergic = $("#is_allergic").val();
            const role = '4';
            const age = calculateAge(dob);
            const academic_year = ($("#academic_year").val()).trim();;
            const receipt_name = $("#receipt_name").val();

            if (teacher_name == "Teacher Name" || teacher_name == "No Teacher Found") teacher_name = "";

           
            let allergy_options = '',
                allergy_description = '';
            if (is_allergic === "true") {
                let selectedValues = $("#allergy_options input[type='checkbox']:checked").map(function() {
                    return capitalizeFirstLetter(this.value);
                }).get();

                allergy_options = JSON.stringify(selectedValues);
                allergy_description = ($('#allergy_description').val()).trim();
            }

            // formData.append('select_parent', (select_parent && select_parent !== "null") ? select_parent : "");
            formData.append('fname', fname);
            formData.append('lname', lname);
            formData.append('gender', (gender && gender !== "null") ? gender : "");
            formData.append('dob', dob);
            formData.append('date_of_joining', date_of_joining);
            formData.append('class_name', class_name);
            formData.append('teacher_name', teacher_name);
            formData.append('address', address);
            formData.append('student_image', student_image ? student_image : "");
            formData.append('birth_certificate', birth_certificate ? birth_certificate : "");
            formData.append('vaccination_certificate', vaccination_certificate ? vaccination_certificate : "");
            formData.append('emergency_contact', emergency_contact);
            formData.append('academic_year', academic_year);
            formData.append('receipt_name', receipt_name);
            formData.append('is_allergic', is_allergic);
            if (is_allergic === "true") {
                formData.append('allergy_options', (allergy_options !== "[]") ? allergy_options : "");
                formData.append('allergy_description', allergy_description);
            }
            formData.append('role', role);

          
            $.ajax({
                type: "post",
                url: "{{ route('students.store') }}",
                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) {
                    const status = data["status"];
                    if (status === 200) {
                        alert("Student added successfully");
                        window.location.href = data.success;
                    } else {
                        // console.log(data.error);
                        $.each(data.error, function(field_name, error) {
                            // Check if the error message for the field already exists
                            if (!$('#' + field_name + '').closest('div').next().hasClass(
                                    'text-danger')) {
                                $('#' + field_name + '').closest('div').after(
                                    '<span class="text-strong text-danger">' + error[0] + '</span>');
                            }
                        });
                    }
                    $('#save_btn').prop('disabled', false);
                },
                error: function() {
                    // Hide loader in case of an error
                    $('#save_btn').prop('disabled', false);
                    $('#loader').hide();
                    // Handle error
                },
                complete: function() {
                    // Hide loader when the request is completed (success, error, or failure)
                    $('#save_btn').prop('disabled', false);
                    $('#loader').hide();
                }

            })
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            totalFee = 0;
            const showHideDiscountDiv = (checkbox, event_id) => {
                if (checkbox.checked) {
                    $(`#${event_id}_discount_div`).removeClass("d-none");
                } else {
                    $(`#${event_id}_discount_div`).addClass("d-none");
                    $(`#${event_id}_discount_div input`).val('');
                    $(`#new_${event_id}`).text('');
                }
            }

        });
    </script>

@endsection