@extends('layouts.app-admin')

@section('content')
<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="#">Student</a>
                                </li>
                                <li class="list-inline-item seprate">
                                    <span>/</span>
                                </li>
                                <li class="list-inline-item">Management</li>
                            </ul>
                        </div>
                        <button id="button-studentmanage" class="au-btn au-btn-icon au-btn--green"
                            data-endpoint="{{ route('admin.studentmanage') }}"><i class="zmdi zmdi-plus"></i>Add Student
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="statistic">
    <div class="section__content section__content--p30">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-bordered table-responsive-md table-striped text-center ">
                        <thead class="bg-primary text-white">
                            <tr>
                                <th class="text-center">Student ID</th>
                                <th class="text-center"> Name</th>
                                <th class="text-center"> Sex</th>
                                <th class="text-center">Father Name</th>
                                <th class="text-center">Phone No</th>
                                <th class="text-center">Details</th>
                                <th class="text-center">Edit</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(count($studentdata)>0)
                                @foreach($studentdata as $student)
                                <tr>
                                    <td class="pt-3-half" contenteditable="true">{{$student->studentid}}</td>
                                    <td class="pt-3-half" contenteditable="true">{{$student->name}}</td>
                                    <td class="pt-3-half" contenteditable="true">{{$student->sex}}</td>
                                    <td class="pt-3-half" contenteditable="true">{{$student->fathername}}</td>
                                    <td class="pt-3-half" contenteditable="true">{{$student->contactno}}</td>
                                    <td class="pt-3-half">
                                        <button id="serchdetls-button" data-endpoint="{{route('admin.feesmanage')}}"
                                            class="btn btn-lg btn-info btn-block studentReportCard" data-student-id={{$student->studentid}}>
                                            <i class="fas fa fa-search"></i>&nbsp;
                                        </button>
                                    </td>
                                    <td>
                                        <span class="table-remove">
                                            <button id="button-setentedit-{{$student->studentid}}"
                                                c-stuid="{{$student->studentid}}" type="button"
                                                data-endpoint="{{route('admin.studentmanage')}}"
                                                class="btn btn-danger btn-rounded btn-sm my-0 setenteditBtn">Edit
                                            </button>
                                            <div class="dropdown show">
                                                <button class="btn btn-secondary dropdown-toggle btn-sm" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                  More link
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
                                                    <a href="{{ url('admin/feescollection/'. $student->studentid)}}"
                                                        class="btn text-primary btn-danger dropdown-item btn-rounded btn-sm my-0 setentfeescollectBtn">Fees Collet
                                                    </a>
                                                    <a href="{{ url('admin/allMiscPaymentsForStudent/'. $student->studentid)}}"
                                                        class="btn text-primary btn-success dropdown-item btn-rounded btn-sm my-0 setentfeescollectBtn">Miscellaneous Fees Collet
                                                    </a>
                                                    <a href="{{ url('admin/student/allInvoice/'. $student->studentid)}}"
                                                        class="btn text-primary btn-success dropdown-item btn-rounded btn-sm my-0 setentfeescollectBtn">Invoice
                                                    </a>
                                                </div>
                                              </div>
                                        </span>
                                    </td>
                                </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
@stop


<!-- Modal -->
<div class="modal fade bd-example-modal-sm" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Choose Fees Session</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body row">
                @foreach($allFeesSession as $item)
                    <a href="{{ url('admin/student/'. $student->studentid.'/'.$item->FeesSession.'/invoice/create')}}"
                        class="text-primary btn-sm my-0 col-6">{{$item->FeesSession}}
                    </a>
                @endforeach
            </div>
            <div class="modal-footer">
                {{--  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>  --}}
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade bd-example-modal-xlg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Student Report Card</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {{-- <br> --}}
            <div id="studentDetails" class="p-2">
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading1">
                            <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
                                    Course Details
                                </a>
                            </h4>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
                            <div class="panel-body">
                                <table class="table table-bordered table-responsive-md table-striped text-center ">
                                    <thead class="bg-primary text-white">
                                        <tr>
                                            {{-- <th class="text-center">Course ID</th> --}}
                                            <th class="text-center">Course Name</th>
                                            <th class="text-center">Course Session</th>
                                            <th class="text-center">Admission Date</th>
                                            <th class="text-center">Fees Session</th>
                                            <th class="text-center">Course Fees</th>
                                            <th class="text-center">Discount</th>
                                            <th class="text-center">Payment Terms</th>
                                            <th class="text-center">Total paid</th>
                                        </tr>
                                    </thead>
                                    <tbody id="student_existing_courses_holder_tbody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading2">
                            <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
                                    Personal Details
                                </a>
                            </h4>
                        </div>
                        <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
                            <div class="panel-body">
                                <div class="account2">
                                    <div class="image img-cir img-250">
                                        <img src="" data-src=""
                                        id="StudentImageDP_IMG" onerror="this.src = this.dataset.src; ">
                                    </div>
                                </div>
                                <div class="row">
                                    <strong class="col-md-6" id="studentId"></strong>
                                    <strong class="col-md-6" id="name"></strong>
                                    <strong class="col-md-6" id="sex"></strong>
                                    <strong class="col-md-6" id="dob"></strong>
                                    <strong class="col-md-6" id="religion"></strong>
                                    <strong class="col-md-6" id="category"></strong>
                                    <strong class="col-md-6" id="maritialStatus"></strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading3">
                            <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
                                    Contact Information
                                </a>
                            </h4>
                        </div>
                        <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
                            <div class="panel-body">
                                <div class="row">
                                    <strong class="col-md-6" id="contactno"></strong>
                                    <strong class="col-md-6" id="gardianphno"></strong>
                                    <strong class="col-md-6" id="email"></strong>
                                    <strong class="col-md-12" id="address"></strong>
                                    <strong class="col-md-6" id="block"></strong>
                                    <strong class="col-md-6" id="municipality"></strong>
                                    <strong class="col-md-6" id="distric"></strong>
                                    <strong class="col-md-6" id="pin"></strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading4">
                            <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse"4>
                                    Guardian Information
                                </a>
                            </h4>
                        </div>
                        <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
                            <div class="panel-body">
                                <div class="row">
                                    <strong class="col-md-6" id="fathername"></strong>
                                    <strong class="col-md-6" id="mothername"></strong>
                                    <strong class="col-md-6" id="spousename"></strong>
                                    <strong class="col-md-6" id="gardianname"></strong>
                                    <strong class="col-md-6" id="fincome"></strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@section('script')
<script>
    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 $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 actTd = $("<td/>").addClass("actCol").attr("mode", "normal").appendTo($tr);
        return $tr;
    }

    function studentDetails(data){
        var ImgHolder = $(`#StudentImageDP_IMG`);
        var img = data.StudentCourses.DisplayPicture
        $.ajax({
            url: img,
            success: function(data)
            {
                ImgHolder.attr({
                    "src": img
                });
            },
            error: function(data)
            {
                ImgHolder.attr({
                    "src": "/images/icons/no-one.png"
                });
            }
        });
        $("#studentId","#studentDetails").html("Student ID: " + data.StudentCourses.studentid);
        $("#name","#studentDetails").html("Name: " + data.StudentCourses.name);
        $("#sex","#studentDetails").html("Sex: " + data.StudentCourses.sex);
        $("#dob","#studentDetails").html("DOB: " + data.StudentCourses.dob);
        $("#religion","#studentDetails").html("Religion: " + data.StudentCourses.religion);
        $("#category","#studentDetails").html("Category: " + data.StudentCourses.category);
        $("#maritialStatus","#studentDetails").html("Maritial Status: " + data.StudentCourses.maritialStatus);

        $("#contactno","#studentDetails").html("Student Phone No.: " + data.StudentCourses.contactno);
        $("#gardianphno","#studentDetails").html("Guardian Phone No.: " + data.StudentCourses.gardianphno);
        $("#email","#studentDetails").html("Email: " + data.StudentCourses.email);
        $("#address","#studentDetails").html("Address: " + data.StudentCourses.address);
        $("#block","#studentDetails").html("Block: " + data.StudentCourses.block);
        $("#municipality","#studentDetails").html("Municipality: " + data.StudentCourses.municipality);
        $("#distric","#studentDetails").html("Distric: " + data.StudentCourses.distric);
        $("#pin","#studentDetails").html("PIN: " + data.StudentCourses.pin);

        $("#fathername","#studentDetails").html("Father's Name: " + data.StudentCourses.fathername);
        $("#mothername","#studentDetails").html("Mother's Name: " + data.StudentCourses.mothername);
        $("#spousename","#studentDetails").html("Spouse Name: " + data.StudentCourses.spousename);
        $("#gardianname","#studentDetails").html("Guardian Name: " + data.StudentCourses.gardianname);
        $("#fincome","#studentDetails").html("Family Income: " + data.StudentCourses.fincome);
    }

    console.log(jQuery,$);
    $(document).ready(function(){
        //select-coursename select-feessession button-feessett
        $("#button-studentmanage").click(() => {
            var params ={
                reqqry: 'new',
            };
            var ep = `{{ route('admin.studentmanage') }}`;
            /*
            alert(JSON.stringify({
                EndPoint:ep,
                param:$.param(params)
            }, null, 2));
            */
            var url = new URL(`${ep}?${$.param(params)}`);
            {{-- console.log(url) --}}
            location.href = url;
        });
        $(".setenteditBtn").click(function() {
            var params ={
                reqqry: 'edit',
                stuid: $(this).attr('c-stuid'),
            };
            var ep = `{{ route('admin.studentmanage') }}`;
            var url = new URL(`${ep}?${$.param(params)}`);
            {{-- console.log(url) --}}
            location.href = url;
        });
        //model

        let studentReportBtn = $(".studentReportCard");
        studentReportBtn.click(function(){

            var studentId = this.dataset.studentId;
            console.log(studentId);
            $.ajax({
                type: "GET",
                url: "{{ route('admin.studentReportCard') }}",
                data: {
                    studentId: studentId
                },
                success: function(data){

                    //alert(data.studentId);
                    $("#exampleModal").modal("show");
                    var rowHolderTbody = $('#student_existing_courses_holder_tbody').empty();
                    var CrsListDrpDwn = $('#coursesListDropDownList').empty();
                    data.StudentCourses.courses.forEach((v) => {
                        var $tr = CreateCourseDisplayRow(v);
                        $tr
                        .attr({
                            "data-obj": JSON.stringify(v)
                        })
                        .appendTo(rowHolderTbody);
                    });
                    studentDetails(data);
                }
            })
        });

        //collapse
        /*var coursesBTN = $(".courses");
        console.log($(".collapseOne").length);
        coursesBTN.click(function(){
            var collapse = this.dataset.collapse;
            $(collapse).collapse("toggle");
        });*/
    });
</script>
@endsection