@extends('layouts.app-admin')

@section('content')
{{-- {{ dd(get_defined_vars()) }} --}}
{{-- {{dd($__data)}} --}}
<section class="au-breadcrumb ">
    <div class="section__content section__content--p30">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="au-breadcrumb-content">
                        <div class="au-breadcrumb-left">
                            <span class="au-breadcrumb-span">You are here:</span>
                            <ul class="list-unstyled list-inline au-breadcrumb__list">
                                <li class="list-inline-item active">
                                    <a href="#">Home</a>
                                </li>
                                <li class="list-inline-item seprate">
                                    <span>/</span>
                                </li>
                                <li class="list-inline-item">Edit</li>
                            </ul>
                        </div>
                        <button class="au-btn au-btn-icon au-btn--green">
                            <i class="zmdi zmdi-plus"></i>Back</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- {{ route('admin.studentmanage.creat') }} @csrf--}}
<section class="statistic">
    <section>
        <div class="section__content section__content--p30">
            <div class="container-fluid">
                @include('admin.student.includes.StudentCoursesInclude',$AllDetails)
                {{-- @include('student.includes.StudentCourseFeesDetailInclude') --}}
                @include('admin.student.includes.studentMiscInclude',$AllDetails)
                {{-- @include('admin.student.includes.StudentImageUpdateInclude') --}}
                @include('admin.student.includes.StudentDetailInfoUpdateInclude')
            </div>
        </div>
    </section>
</section>
@stop
@section('links')
<script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
@endsection
@section('script')

<script>
    const __data = @json($__data);
</script>
<script>
    var eps = {
            GetCourses: `{{ route('admin.studentmanage.getStudentCourses',[ 'StudentID' => $StuID ]) }}`,
            AddCourse: `{{ route('admin.studentmanage.addCourseToStudent',[ 'StudentID' => $StuID ]) }}`,
            AddBatch: `{{ route('admin.studentmanage.addBatchToCourse',[ 'StudentID' => $StuID ]) }}`,
            _UpdateCourse: `{{ route('admin.studentmanage.updateCourseOfStudent',[ 'StudentID' => $StuID, 'StudentCourseID' => 'StudentCourseID' ]) }}`,
            getUpdateCourse: function (StudentCourseID) {
                return eps._UpdateCourse.replace(/\/StudentCourseID\//ig, `/${StudentCourseID}/`);
            },

            _GetStudentCourseFeesDetails:`{{ route('admin.studentmanage.GetStudentCourseFeesDetails',[ 'StudentID' => $StuID, 'CourseID' => 'CourseID', 'FeesSession' => 'FeesSession' ]) }}`,
            getGetStudentCourseFeesDetails: function (CourseID,FeesSession) {
                return eps._GetStudentCourseFeesDetails.replace(/\/CourseID\//ig, `/${CourseID}/`).replace(/\/FeesSession\//ig, `/${FeesSession}/`);
            },
        };

        $(document).ready(function () {

            $("#button-courese-details-add").click(function () {
                var Params = {};
                Params['CourseID']= $('#course-details-add-CourseID').val();
                Params['Course_name']= $('#course-details-add-CourseCourse_name').val();

                Params['CourseAdmissionSession']= $('#course-details-add-CourseAdmissionSession').val();
                Params['CourseAdmissionDate']= $('#course-details-add-CourseAdmissionDate').val();
                Params['FeesSession']= $('#course-details-add-FeesSession').val();
                // $(`[data-course-detail-add-input]`, '#student_add_courses_holder_tbody').get().forEach((v) => {
                //     var t = $(v);
                //     var key = t.attr('data-course-detail-add-input');
                //     Params[key] = t.val();
                // });
                //console.log(Params);
                // alert(JSON.stringify(Params, null, 2));
                var ep = `{{ route('admin.studentmanage.addCourseToStudent', [ 'StudentID' => $StuID ]) }}`;


                fetch(eps.AddCourse, {
                        method: 'POST',
                        headers: {
                            "Content-Type": 'application/json',
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            NewCourseData: Params,
                            StudentID: '{{ $StuID }}'
                        })
                    })
                    .then(res => res.json())
                    .then((dt) => {
                        $('#addnewcoursemodal').modal('hide');
                        $('#course-details-add-CourseID').val('');
                        $('#course-details-add-CourseCourse_name').val('');
                        $('#course-details-add-CourseAdmissionSession').val('');
                        $('#course-details-add-CourseAdmissionDate').val('');
                        $('#course-details-add-FeesSession').val('');
                        ReLoadStudentCoursesData(dt);
                    });
                // var url = new URL(`${ep}?${$.param(params)}`);
                // location.href = url;
            });
            $("#button-batch-course-add").click(function () {
                var confrm=confirm("Are you sure?");
                if(!confrm)
                {
                    return;
                }
                var Params = {};
                Params['CourseID']= $("#batch-add-CourseID option:selected").attr("courseid");
                Params['BatchId']= $('#batch-add-CourseID').val();
                Params['Student_course_id']= $("#batch-add-CourseID").attr("studentcourseid");

                // Params['CourseAdmissionSession']= $('#course-details-add-CourseAdmissionSession').val();

                // $(`[data-course-detail-add-input]`, '#student_add_courses_holder_tbody').get().forEach((v) => {
                //     var t = $(v);
                //     var key = t.attr('data-course-detail-add-input');
                //     Params[key] = t.val();
                // });
                // console.log(Params);
                // alert(JSON.stringify(Params, null, 2));
                var ep = `{{ route('admin.studentmanage.addBatchToCourse', [ 'StudentID' => $StuID ]) }}`;


                fetch(eps.AddBatch, {
                        method: 'POST',
                        headers: {
                            "Content-Type": 'application/json',
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            NewCourseData: Params,
                            StudentID: '{{ $StuID }}'
                        })
                    })
                    .then(res => res.json())
                    .then((dt) => {
                        if(dt['re'])
                        {
                            $('#asignbatchmodal').modal('hide');
                        }

                        $('#batch-add-CourseID').val('');

                        // ReLoadStudentCoursesData(dt);
                    });




                // var url = new URL(`${ep}?${$.param(params)}`);
                // location.href = url;
            });

            $(document).on('click', '#student_existing_courses_holder_tbody .actBtn.EditCourseActBtn', function () {
                // var $td = $(this).parents("td");
                // $td.attr("mode","update");
                var $tr = $(this).parents("tr");
                var Obj = JSON.parse($(this).attr("data-obj"));
                $tr.replaceWith(CreateCourseEditRow(Obj));

            });
            $(document).on('click', '#student_existing_courses_holder_tbody .actBtn.CancelEditCourseActBtn', function () {
                // var $td = $(this).parents("td");
                // $td.attr("mode","normal");

                var $tr = $(this).parents("tr");
                var Obj = JSON.parse($(this).attr("data-obj"));
                $tr.replaceWith(CreateCourseDisplayRow(Obj));
            });

            $(document).on('click', '#student_existing_courses_holder_tbody .actBtn.UpdateCourseActBtn', function () {
                var $tr = $(this).parents("tr");
                var Obj = JSON.parse($(this).attr("data-obj"));
                // $tr.replaceWith(CreateCourseDisplayRow(Obj));


                var Params = {};
                $(`[data-course-detail-edit-input]`, $tr).get().forEach((v) => {
                    var t = $(v);
                    var key = t.attr('data-course-detail-edit-input');
                    Params[key] = t.val();
                });

                // alert(JSON.stringify(Params, null, 2));

                fetch(eps.getUpdateCourse(Obj.id), {
                        method: 'POST',
                        headers: {
                            "Content-Type": 'application/json',
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            UpdateCourseData: Params,
                            StudentID: '{{ $StuID }}',
                            StudentCourseID: String(Obj.id)
                        })
                    })
                    .then(res => res.json())
                    .then((dt) => {
                        ReLoadStudentCoursesData(function (dat) {
                            $tr.replaceWith(CreateCourseDisplayRow(Obj));
                        });
                    });


            });


            $(document).on('change', '#StudentImageUploaderDialog', function () {


                var FileX = this.files.length > 0 ? this.files.item(0) : false;
                var ImgHolder = $(`#StudentImageDP_IMG`);
                var oldURL = $(`#StudentImageOldUrl`).val();

                if (FileX) {
                    readFileToBase64(FileX, function (base64image, flx) {
                        ImgHolder.attr({
                            "src": base64image
                        });
                    });
                } else if (oldURL != "") {
                    ImgHolder.attr({
                        "src": `/public/${oldURL}`
                    });
                } else {
                    ImgHolder.attr({
                        "src": `/images/icons/no-one.png`
                    });

                }
            });
            /*<div class="image img-cir img-250">
                <img src="{{$StudentDetails->getDpUrl()}}" data-src="{{$StudentDetails->defaultURL}}"
                    id="StudentImageDP_IMG" onerror="this.src = this.dataset.src; ">
            </div>*/
            $(document).on('click','#coursesListDropDownList .btnFeesDetailsButtonForCourse',function () {
                // alert(this.dataset.obj);
                var crs = JSON.parse(this.dataset.obj);
                BringStudentCourseFeesDetailsData(crs,function (dt) {
                    // console.log(dt);
                    $("#selectedCourse_text_span").text(crs.CourseID);
                    //data-for="CourseFeesData" data-key="AmountToBePaid"
                    //data-for="CourseFeesData" data-key="DiscountAmount"

                    if(dt.StuCrsFeesDetail == null){

                        $("#ActualCourseFees-stu-fees-det-txt").val(dt.ActualCourseFee);
                        $("#AmountToBePaid-stu-fees-det-txt").attr("max",dt.ActualCourseFee).data("ActualCourseFee",dt.ActualCourseFee).val(dt.ActualCourseFee);
                        $("#DiscountAmount-stu-fees-det-txt").attr("max",dt.ActualCourseFee).data("ActualCourseFee",dt.ActualCourseFee).val(0);

                        $("#selectedCourse_prevSaveStatus")
                        .text('No Details Is Saved For This Course')
                        .addClass('text-danger')
                        .removeClass('text-success');

                    }
                    else{
                        $("#selectedCourse_prevSaveStatus")
                        .text('')
                        .removeClass('text-danger')
                        .addClass('text-success');

                    }
                });
            });

            $(document).on('change', '[data-for="CourseFeesData"][data-key="AmountToBePaid"]', function () {

                var ActualCourseFee = $(this).data().ActualCourseFee;
                var AmountToBePaid = Number($(this).val());
                var DiscountAmount = 0;
                if(isNaN(AmountToBePaid)){

                }
                else{
                    DiscountAmount = ActualCourseFee - AmountToBePaid;
                }
                $('[data-for="CourseFeesData"][data-key="DiscountAmount"]').val(DiscountAmount.toFixed(2));
                // console.log("ActualCourseFee: ",ActualCourseFee);
            });
            $(document).on('change', '[data-for="CourseFeesData"][data-key="DiscountAmount"]', function () {

                var ActualCourseFee = $(this).data().ActualCourseFee;
                var AmountToBePaid = 0;
                var DiscountAmount =  Number($(this).val());
                if(isNaN(DiscountAmount)){

                }
                else{
                    AmountToBePaid = ActualCourseFee - DiscountAmount;
                }
                $('[data-for="CourseFeesData"][data-key="AmountToBePaid"]').val(AmountToBePaid.toFixed(2));
                // console.log("ActualCourseFee: ",ActualCourseFee);
            });
            $(document).on('click', '#Generate_Fees_Terms_Btn', function () {

                var AmountToBePaid = Number($('[data-for="CourseFeesData"][data-key="AmountToBePaid"]').val());
                var DiscountAmount = Number($('[data-for="CourseFeesData"][data-key="DiscountAmount"]').val());
                var ActualCourseFee = $('[data-for="CourseFeesData"][data-key="AmountToBePaid"]').data("ActualCourseFee");

                var NoOfTerms = Number($('[data-for="CourseFeesData"][data-key="NoOfTerms"]').val());

                for (let i = 0; i < NoOfTerms; i++) {

                }
            });

            $(document).on('change', '#course-details-add-CourseID', function () {


                var courseName=$('option:selected', this).attr('crsname');
                $('#course-details-add-CourseCourse_name').val(courseName);


                // var AmountToBePaid = Number($('[data-for="CourseFeesData"][data-key="AmountToBePaid"]').val());
                // var DiscountAmount = Number($('[data-for="CourseFeesData"][data-key="DiscountAmount"]').val());
                // var ActualCourseFee = $('[data-for="CourseFeesData"][data-key="AmountToBePaid"]').data("ActualCourseFee");

                // var NoOfTerms = Number($('[data-for="CourseFeesData"][data-key="NoOfTerms"]').val());

                // for (let i = 0; i < NoOfTerms; i++) {

                // }
            });

            ReLoadStudentCoursesData();
        });

        function GetFeesTermRow(dt) {

        }

        function BringStudentCourseFeesDetailsData({CourseID, FeesSession}, cb) {

                var ep = eps.getGetStudentCourseFeesDetails(CourseID,FeesSession);
                //eps.getGetStudentCourseFeesDetails(123,456)
                fetch(ep)
                .then(res => res.json())
                .then(data => {
                    cb.apply(data, [data]);
                });
        }

        function ReLoadStudentCoursesData(cb1, cb2) {

            if (typeof cb1 != 'function') {
                cb1 = function () {}
            }
            if (typeof cb2 != 'function') {
                cb2 = function () {}
            }
            // StudentID, FeesSession, CourseID, CourseDuration,
            // CourseAdmissionDate, CourseAdmissionSession
            LoadStudentCourses(function (data) {
                cb1.apply(data, [data]);
                var rowHolderTbody = $('#student_existing_courses_holder_tbody').empty();
                var CrsListDrpDwn = $('#coursesListDropDownList').empty();
                console.log(data.StudentCourses);
                // data.StudentCourses.forEach((v) => {
                data.StudentCourses.courses.forEach((v) => {
                    var $tr = CreateCourseDisplayRow(v);
                    $tr
                    .attr({
                        "data-obj": JSON.stringify(v)
                    })
                    .appendTo(rowHolderTbody);
                    var ddBtn  =$("<button/>",{
                        "class":"dropdown-item btnFeesDetailsButtonForCourse",
                        "type":"button",
                        "data-CourseID":v.CourseID,
                        "data-FeesSession":v.FeesSession,
                        "data-CourseAdmissionSession":v.CourseAdmissionSession,
                        "data-obj":JSON.stringify(v)
                    }).text(`[Course: ${v.CourseID}, Fees Session: ${v.FeesSession}]`).appendTo(CrsListDrpDwn);
                });
                cb2.apply(data, [data]);
            });

        }


        function CreateTdForCoursesTr($tr, {
                dataKey,
                dataValue,
                dataText
            }, Obj) {
                var $td = $('<td />', {
                    "data-obj": JSON.stringify(Obj),
                    "class": `CoursesTd ${dataKey}`,
                    "data-val": dataValue,
                    "data-key": dataKey,
                    "data-text": dataText,
                });
                $td.text(dataText).appendTo($tr);
        }

        function CreateCourseDisplayRow(Obj) {
            var v = Obj;
            // var vv=v["course_fees"] ;
            // var vvv="";
            // if(v["course_fees"]!=null)
            // {
            //     vvv=v["course_fees"]["ActualCourseFees"];
            // }

            var $tr = $('<tr />');

            CreateTdForCoursesTr($tr, {
                    dataKey: "CourseID",
                    dataValue: v["CourseID"],
                    dataText: v["CourseID"],
                },
               v
            );

            CreateTdForCoursesTr($tr, {
                    dataKey: "Course_name",
                    dataValue: v["Course_name"],
                    dataText: v["Course_name"],
                },
                v
            );

            CreateTdForCoursesTr($tr, {
                    dataKey: "CourseAdmissionSession",
                    dataValue: v["CourseAdmissionSession"],
                    dataText: v["CourseAdmissionSession"],

                },
                v
            );

            CreateTdForCoursesTr($tr, {
                    dataKey: "CourseAdmissionDate",
                    dataValue: v["CourseAdmissionDate"],
                    dataText: v["CourseAdmissionDate"],
                },
                v
            );

            CreateTdForCoursesTr($tr, {
                    dataKey: "FeesSession",
                    dataValue: v["FeesSession"],
                    dataText: v["FeesSession"],
                },
                v
            );
            CreateTdForCoursesTr($tr, {

                    dataKey: "ActualCourseFees",
                    dataValue: ((v["course_fees"]!=null)? v["course_fees"]["ActualCourseFees"] :""),
                    dataText: ((v["course_fees"]!=null)? v["course_fees"]["ActualCourseFees"] :""),
                    // dataValue: vvv,
                    // dataText: vvv,
                },
                v
            );
            CreateTdForCoursesTr($tr, {
                    dataKey: "DiscountAmount",
                    dataValue: ((v["course_fees"]!=null)? v["course_fees"]["DiscountAmount"] :""),
                    dataText: ((v["course_fees"]!=null)? v["course_fees"]["DiscountAmount"] :""),
                },
                v
            );
            CreateTdForCoursesTr($tr, {
                    dataKey: "NoOfTerms",
                    dataValue: ((v["course_fees"]!=null)? v["course_fees"]["NoOfTerms"] :""),
                    dataText: ((v["course_fees"]!=null)? v["course_fees"]["NoOfTerms"] :""),
                },
                v
            );
            CreateTdForCoursesTr($tr, {
                    dataKey: "paidAmount",
                    dataValue: ((v["course_fees"]!=null)? v["course_fees"]["paidAmount"] :""),
                    dataText: ((v["course_fees"]!=null)? v["course_fees"]["paidAmount"] :""),
                },
                v
            );


            var actBtnEdit = $("<button/>", {
                "type": "button",
                "class": "btn btn-secondary btn-rounded btn-sm my-0 m-1 actBtn EditCourseActBtn",
                "data-obj": JSON.stringify(v),
            }).text("Edit");

            var actBtnDelete = $("<button/>", {
                "type": "button",
                "class": "btn btn-danger btn-rounded btn-sm my-0 m-1 actBtn DeleteCourseActBtn",
                "data-obj": JSON.stringify(v),
            }).text("Delete");

            var actBtnCancelEdit = $("<button/>", {
                "type": "button",
                "class": "btn btn-danger btn-rounded btn-sm my-0 m-1 actBtn CancelEditCourseActBtn",
                "data-obj": JSON.stringify(v),
            }).text("Cancel");

            var actBtnUpdate = $("<button/>", {
                "type": "button",
                "class": "btn btn-success btn-rounded btn-sm my-0 m-1 actBtn UpdateCourseActBtn",
                "data-obj": JSON.stringify(v),
            }).text("Update");
            var actBtnBatchAsign = $("<button/>", {
                "type": "button",
                "class": "btn btn-secondary btn-rounded btn-sm my-0 m-1 actBtn AsignBatchBtn",
                "data-obj": JSON.stringify(v),
                "course_ID":v["course"]["id"],
                "stu_course_ID":v["id"],
            }).text("Batch");

            var actBtnFeesDetails = $("<a/>", {
                "type": "button",
                "href":`/admin/studentmanage/{{$StudentID}}/FeesDetails/${v.id}`,
                "class": "btn btn-success btn-rounded btn-sm my-0 m-1 actBtn FeesDetailsActBtn",
                "data-obj": JSON.stringify(v),
            }).text((v["course_fees"]!=null)? "View Fees Details" :"Set Fees Setting");


            /*var setFeesDetails = $("<a/>", {
                "type": "button",
                "href":`/admin/studentmanage/{{$StudentID}}/FeesDetails/${v.id}`,
                "class": "btn btn-success btn-rounded btn-sm my-0 m-1 actBtn FeesDetailsActBtn",
                "data-obj": JSON.stringify(v),
            }).text("Fees Details");*/

            var actTd = $("<td/>").addClass("actCol").attr("mode", "normal")
                // .append(actBtnEdit)
                .append(actBtnBatchAsign)
                .append(actBtnFeesDetails)
                // .append(actBtnDelete)
                // .append(actBtnCancelEdit)
                // .append(actBtnUpdate)
                .appendTo($tr);

            return $tr;


        }

        function CreateCourseEditRow(Obj) {
            var v = Obj;
        // console.log(Obj);
            var $tr = $('#student_add_courses_holder_tbody tr').first().clone();
            $tr.find('[data-course-detail-add-input]').each(function (i, elm) {
                var k = $(elm).attr("data-course-detail-add-input");
                console.log(k);
                $(elm).attr({
                    "data-course-detail-edit-input": k,
                    "data-course-detail-add-input": "",
                });
                $(elm).val(v[k]);
            })
        // console.log($tr);
            var actBtnEdit = $("<button/>", {
                "type": "button",
                "class": "btn btn-secondary btn-rounded btn-sm my-0 m-1 actBtn EditCourseActBtn",
                "data-obj": JSON.stringify(v),
            }).text("Edit");

            var actBtnDelete = $("<button/>", {
                "type": "button",
                "class": "btn btn-danger btn-rounded btn-sm my-0 m-1 actBtn DeleteCourseActBtn",
                "data-obj": JSON.stringify(v),
            }).text("Delete");

            var actBtnCancelEdit = $("<button/>", {
                "type": "button",
                "class": "btn btn-danger btn-rounded btn-sm my-0 m-1 actBtn CancelEditCourseActBtn",
                "data-obj": JSON.stringify(v),
            }).text("Cancel");

            var actBtnUpdate = $("<button/>", {
                "type": "button",
                "class": "btn btn-success btn-rounded btn-sm my-0 m-1 actBtn UpdateCourseActBtn",
                "data-obj": JSON.stringify(v),
            }).text("Update");

            // var actTd = $("<td/>").addClass("actCol").attr("mode","normal")
            var actTd = $tr.find(".actCol").empty()
                // .append(actBtnEdit)
                // .append(actBtnDelete)
                .append(actBtnCancelEdit)
                .append(actBtnUpdate)
                .appendTo($tr);

            return $tr;
        }

        function LoadStudentCourses(cb) {
            if (typeof cb != 'function') {
                cb = function () {}
            }
            fetch(eps.GetCourses)
                .then(res => res.json())
                .then(data => {
                    cb.apply(data, [data]);
                });
        }

        function readFileToBase64(file, cb, errcb) {
            var resultz = null;
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                //console.log(reader.result);
                resultz = reader.result;
                (typeof cb == 'function' && cb.apply(resultz, [resultz, file]));
            };
            reader.onerror = function (error) {
                (typeof errcb == 'function' && errcb.apply(resultz, [resultz, file]));
            };
        }
        $(document).on('click', '.AsignBatchBtn', function(){
            // console.log($(this).attr("course_id"));
            $('#asignbatchmodal').modal('toggle');

            $("#batch-add-CourseID").attr("studentcourseid",$(this).attr("stu_course_id"));
            // console.log($("#batch-add-CourseID").attr("studentcourseid"));
            // batch-add-CourseID

        });
</script>


<script>
    function CreateTdForMiscTr($tr, {
        dataKey,
        dataValue,
        dataText
    }, Obj1) {
        var $td = $('<td />', {
            "data-obj": JSON.stringify(Obj1),
            "class": `id ${dataKey}`,
            "data-val": dataValue,
            "data-key": dataKey,
            "data-text": dataText,
        });
        $td.text(dataText).appendTo($tr);
    }

    function CreateMiscDisplayRow1(Obj1) {
        var p = Obj1;
        var mph = p["misc_payment_head"];
        var c = p["course"];
        //console.log(mph);
        var $tr = $('<tr />');

        CreateTdForMiscTr($tr, {
                dataKey: "course_id",
                dataValue: c["Course_name"],
                dataText: c["Course_name"],
            },
            p
        );

        CreateTdForMiscTr($tr, {
                dataKey: "misc_payment_head_id",
                dataValue: mph["name"],
                dataText: mph["name"],
            },
            p
        );

        CreateTdForMiscTr($tr, {
                dataKey: "FeesSession",
                dataValue: p["fees_session"],
                dataText: p["fees_session"],
            },
            p
        );

        CreateTdForMiscTr($tr, {
                dataKey: "misc_title",
                dataValue: p["misc_title"],
                dataText: p["misc_title"],
            },
            p
        );


        CreateTdForMiscTr($tr, {
                dataKey: "misc_description",
                dataValue: p["misc_description"],
                dataText: p["misc_description"],
            },
            p
        );

        CreateTdForMiscTr($tr, {
                dataKey: "amount",
                dataValue: p["amount"],
                dataText: p["amount"],
            },
            p
        );

        CreateTdForMiscTr($tr, {
                dataKey: "discount_amount",
                dataValue: p["discount_amount"],
                dataText: p["discount_amount"],
            },
            p
        );

        CreateTdForMiscTr($tr, {
                dataKey: "issue_date",
                dataValue: p["issue_date"],
                dataText: p["issue_date"],
            },
            p
        );

        CreateTdForMiscTr($tr, {
                dataKey: "up_to_date",
                dataValue: p["up_to_date"],
                dataText: p["up_to_date"],
            },
            p
        );

        return $tr;
    }

    $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "{{ route('admin.miscPayments')}}",
            data: {
                'stuid': {{ $StuID }}
            },
            success: function(data){
                var rowHolderTbody1 = $('#student_existing_misc_holder_tbody').empty();
                data.misc.forEach((p) => {
                    var $tr = CreateMiscDisplayRow1(p);
                    $tr
                    .attr({
                        "data-obj": JSON.stringify(p)
                    })
                    .appendTo(rowHolderTbody1);
                });
            }
        })

        let addMiscBTN = $("#addMiscBTN");
        addMiscBTN.click(function(){
            //var id = $("[name='course_id']",".miscform").val();
            var course_id= $("[name='course_id']",".miscform").val();
            var misc_payment_head_id= $("[name='misc_payment_head_id']",".miscform").val();
            var fees_session= $("[name='fees_session']",".miscform").val();
            var misc_title= $("[name='misc_title']",".miscform").val();
            var misc_description= $("[name='misc_description']",".miscform").val();
            var amount= $("[name='amount']",".miscform").val();
            var discount_amount= $("[name='discount_amount']",".miscform").val();
            var issue_date= $("[name='issue_date']",".miscform").val();
            var up_to_date= $("[name='up_to_date']",".miscform").val();

            var csrfToken = $("[name=_token]").val();
            //console.log(id);
            $.ajax({
                type: "POST",
                url: "{{ route('admin.miscPayments')}}",
                data: {
                    'stuid': {{ $StuID }},
                    'course_id': course_id,
                    'misc_payment_head_id': misc_payment_head_id,
                    'fees_session': fees_session,
                    'misc_title': misc_title,
                    'misc_description': misc_description,
                    'amount': amount,
                    'discount_amount': discount_amount,
                    'issue_date': issue_date,
                    'up_to_date': up_to_date,
                    '_token': csrfToken
                },
                success: function(data){
                    var rowHolderTbody1 = $('#student_existing_misc_holder_tbody').empty();
                    //console.log(data)
                    data.misc.forEach((p) => {
                        //console.log(p)
                        var $tr = CreateMiscDisplayRow1(p);
                        $tr
                        .attr({
                            "data-obj": JSON.stringify(p)
                        })
                        .appendTo(rowHolderTbody1);
                    });
                }
            })
        });
    });
    $(document).ready(function(){
        $('body').on('focus',"#course-details-add-CourseAdmissionDate", function(){
            $(this).datepicker({
                uiLibrary: 'bootstrap4'
            });
        });
    });
    function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result)
                        .width(150)
                        .height(200);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
</script>

<style>
    .actCol[mode='normal'] .CancelEditCourseActBtn,
    .actCol[mode='normal'] .UpdateCourseActBtn {
        display: none;
    }

    .actCol[mode='update'] .EditCourseActBtn,
    .actCol[mode='update'] .DeleteCourseActBtn {
        display: none;
    }

    #StudentImageDP_IMG {
        object-fit: contain;
        height: 100%;
        width: 100%;
        margin: auto;
    }

    .preview
{
    padding: 10px;
    position: relative;
}

.preview i
{
    color: white;
    font-size: 35px;
    transform: translate(50px,130px);
}

.preview-img
{
    /* border-radius: 100%; */
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.7);
}

.browse-button
{
    width: 200px;
    height: 200px;
    /* border-radius: 100%; */
    position: absolute; /* Tweak the position property if the element seems to be unfit */
    top: 10px;
    left: 309px;
    background: linear-gradient(180deg, transparent, black);
    opacity: 0;
    transition: 0.3s ease;
}

.browse-button:hover
{
    opacity: 1;
}

.browse-input
{
    width: 200px;
    height: 200px;
    border-radius: 100%;
    transform: translate(-1px,-26px);
    opacity: 0;
}
</style>

<script>
    // $("#StudentImageUploaderDialog").change(function () {
        //    var f = file
        // });
</script>
@endsection