@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Statistics</title>
@include('datepicker')
@section('main-content')

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<style>
    ul.student_list {
        list-style-type: none;
        padding-inline-start: 0px;
        max-height: 250px;
        overflow: auto;
    }
</style>

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

<!-- container start -->
<div class="content-wrapper">
    <div class="container-xxl flex-grow-1 container-p-y">
        
        <div class="row">    
            <div class="col-lg-12 col-md-12 order-1">
                <div class="col-6">
                    <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Records /</span> Statistics</h4>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-3 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <div class="avatar flex-shrink-0">
                                        <img src="../assets/img/icons/unicons/chart-success.png" alt="chart success" class="rounded" />
                                    </div>
                                </div>
                                <h5 class="card-title mb-2">Total Teachers: {{(isset($teachers)&&(count($teachers)>0))?count($teachers):0}}</h5>
                                <p>Active : {{$teachers_count["active_teacher_count"]}}, InActive : {{$teachers_count["inctive_teacher_count"]}}</p>
                            </div>
                        </div>
                    </div>
                    {{-- <div class="col-lg-2 col-md-3 col-2 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <div class="avatar flex-shrink-0">
                                        <img src="../assets/img/icons/unicons/chart-success.png" alt="chart success" class="rounded" />
                                    </div>
                                </div>
                                <h5 class="card-title mb-2">Total Parents<br>{{(isset($parents)&&(count($parents)>0))?count($parents):""}}</h5>
                            </div>
                        </div>
                    </div> --}}
                    <div class="col-lg-3 col-md-3 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <div class="avatar flex-shrink-0">
                                        <img src="../assets/img/icons/unicons/chart-success.png" alt="chart success" class="rounded" />
                                    </div>
                                </div>
                                <h5 class="card-title mb-2">Total Parents: {{(isset($parents)&&(count($parents)>0))?count($parents):0}}</h5>
                                <p>Active : {{$parents_count["active_parent_count"]}}, InActive : {{$parents_count["inctive_parent_count"]}}</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-3 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <div class="avatar flex-shrink-0">
                                        <img src="../assets/img/icons/unicons/chart-success.png" alt="chart success" class="rounded" />
                                    </div>
                                </div>
                                <h5 class="card-title mb-2">Total Students: {{(isset($students)&&(count($students)>0))?count($students):0}}</h5>
                                <p>Active : {{$students_count["active_student_count"]}}, InActive : {{$students_count["inctive_student_count"]}}</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-3 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <div class="avatar flex-shrink-0">
                                        <img src="../assets/img/icons/unicons/chart-success.png" alt="chart success" class="rounded" />
                                    </div>
                                </div>
                                <h5 class="card-title mb-2">Total Revenue<br>{{isset($total_revenue)?"₹".$total_revenue:0}}</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 mb-4 d-none">
                        <h4>Revenue Generated</h4>
                        <div class="card">
                            <div class="card-body">
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <div class="col-6 me-1">
                                        Start Date
                                       <input type="text" id="start_date" name="start_date" class="form-control input form-control-line bg-white" placeholder="Select start date" readonly autocomplete="off">
                                    </div>
                                    <div class="col-6 ms-1">
                                        End Date
                                        <input type="text" id="end_date" name="end_date" class="form-control input form-control-line bg-white" placeholder="Select end date" readonly autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-12 mb-4">
                        <div class="card">
                            <div class="card-body">
                                Teacher
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <select id="teacher_id" class="form-control form-select" {{count($teachers)<=0?"disabled":""}}>
                                        <option selected disabled hidden>Select Teacher</option>
                                        @foreach ($teachers as $teacher)
                                            <option value="{{$teacher->id}}">{{ucwords($teacher->first_name)." ".ucwords($teacher->last_name)}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div id="educator_revenue">

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

                    <div class="col-lg-6 col-md-12 mb-4">
                        <div class="card">
                            <div class="card-body">
                                Class
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <select id="batch_id" class="form-control form-select" {{count($classes)<=0?"disabled":""}}>
                                        <option selected disabled hidden>Select Class</option>
                                        @foreach ($classes as $class)
                                            @if ($class->class_name=="other"||$class->class_name=="Other")
                                                <option value="{{$class->id}}">{{ucwords($class->other_class_name)}}</option>
                                            @else
                                                <option value="{{$class->id}}">{{ucwords($class->class_name)}}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                <div id="batch_revenue">

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

                    <div class="col-lg-6 col-md-12 mb-4">
                        <div class="card">
                            <div class="card-body">
                                Parent
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <select id="parent_id" class="form-control form-select" {{count($parents)<=0?"disabled":""}}>
                                        <option selected disabled hidden>Select Parent</option>
                                        @foreach ($parents as $parent)
                                            <option value="{{$parent->id}}">{{ucwords($parent->first_name)." ".ucwords($parent->last_name)}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div id="parent_revenue">

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

                    <div class="col-lg-6 col-md-12 mb-4">
                        <div class="card">
                            <div class="card-body">
                                Student
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <select id="student_id" class="form-control form-select" {{count($students)<=0?"disabled":""}}>
                                        <option selected disabled hidden>Select Student</option>
                                        @foreach ($students as $student)
                                            <option value="{{$student->id}}">{{ucwords($student->first_name)." ".ucwords($student->last_name)}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div id="student_revenue">

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

                </div>
            </div>
        </div>
    </div>
</div>
<!-- container end -->
{{-- <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> --}}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
    jQuery(function($) {

        $('#teacher_id').select2({
            placeholder: 'Select Teacher',
            multiple: false
        }).on('click', function() {
            $(this).datepicker('show');
        });

        $('#batch_id').select2({
            placeholder: 'Select Class',
            multiple: false
        }).on('click', function() {
            $(this).datepicker('show');
        });

        $('#parent_id').select2({
            placeholder: 'Select Parent',
            multiple: false
        }).on('click', function() {
            $(this).datepicker('show');
        });

        $('#student_id').select2({
            placeholder: 'Select Student',
            multiple: false
        }).on('click', function() {
            $(this).datepicker('show');
        });

        let maxi = new Date();
        $("#start_date").datepicker({
            dateFormat: "dd-mm-yy", 
            defaultDate: maxi, 
            // minDate:maxi, 
            maxDate: maxi,
            changeMonth: true, changeYear: true,
        });
        $("#end_date").datepicker({
            dateFormat: "dd-mm-yy", 
            defaultDate: maxi, 
            // minDate:maxi, 
            maxDate: maxi,
            changeMonth: true, changeYear: true,
        });
    //     $("#end_date").datepicker("setDate", new Date());
    //     $("#teacher_id").prop("disabled",true);
    //     $("#batch_id").prop("disabled",true);
    //     $("#parent_id").prop("disabled",true);
    //     $("#student_id").prop("disabled",true);
    }); 

    function get_ed_revenue(){
        const t_id=$("#teacher_id").val();
        if(t_id==null)return;
        const s_date=$("#start_date").val();
        const e_date=$("#end_date").val();
        
        $("#educator_revenue").html(`Please wait...`);
        $.ajax({
            url:"/getTeacherStatistics",
            type:"POST",
            headers:{
                "X-CSRF-TOKEN":$('meta[name="csrf-token"]').attr('content')
            },
            data:{t_id:t_id, s_date:s_date, e_date:e_date},
            success:function(resp){
                const status=resp["status"];
                if(status==200){
                    $("#educator_revenue").html(`<h5>Total captured amount: ₹${resp["total_revenue"]}</h5>`);
                }
            }
        });
    }

    function get_bt_revenue(){
        const b_id=$("#batch_id").val();
        if(b_id==null)return;
        const s_date=$("#start_date").val();
        const e_date=$("#end_date").val();
        
        $("#batch_revenue").html(`Please wait...`);
        $.ajax({
            url:"/getClassStatistics",
            type:"POST",
            headers:{
                "X-CSRF-TOKEN":$('meta[name="csrf-token"]').attr('content')
            },
            data:{b_id:b_id, s_date:s_date, e_date:e_date},
            success:function(resp){
                const status=resp["status"];
                if(status==200){
                    $("#batch_revenue").html(`<h5>Total captured amount: ₹${resp["total_revenue"]}</h5>`);
                }
            }
        });
    }

    function get_pt_revenue(){
        const p_id=$("#parent_id").val();
        if(p_id==null)return;  
        const s_date=$("#start_date").val();
        const e_date=$("#end_date").val();
        $("#parent_revenue").html(`Please wait...`);

        $.ajax({
            url:"/getParentStatistics",
            type:"POST",
            headers:{
                "X-CSRF-TOKEN":$('meta[name="csrf-token"]').attr('content')
            },
            data:{p_id:p_id, s_date:s_date, e_date:e_date},
            success:function(resp){
                const status=resp["status"];
                if(status==200){
                    $("#parent_revenue").html(`<h5>Total captured amount: ₹${resp["total_revenue"]}</h5>`);
                }
            }
        });
    }
    
    function get_st_revenue(){
        const s_id=$("#student_id").val();
        if(s_id==null)return;  

        const s_date=$("#start_date").val();
        const e_date=$("#end_date").val();
        
        $("#student_revenue").html(`Please wait...`);
        $.ajax({
            url:"/getStudentStatistics",
            type:"POST",
            headers:{
                "X-CSRF-TOKEN":$('meta[name="csrf-token"]').attr('content')
            },
            data:{s_id:s_id, s_date:s_date, e_date:e_date},
            success:function(resp){
                const status=resp["status"];
                if(status==200){
                    $("#student_revenue").html(`<h5>Total captured amount: ₹${resp["total_revenue"]}</h5>`);
                }
            }
        });
    }

    // $("#start_date").on("change",function(e){
    //     e.preventDefault();
    //     $("#teacher_id").prop("disabled",false);
    //     $("#batch_id").prop("disabled",false);
    //     $("#parent_id").prop("disabled",false);
    //     $("#student_id").prop("disabled",false);
    //     get_ed_revenue();
    //     get_bt_revenue();
    //     get_pt_revenue();
    //     get_st_revenue();
    // });

    // $("#end_date").on("change",function(e){
    //     e.preventDefault();
    //     get_ed_revenue();
    //     get_bt_revenue();
    //     get_pt_revenue();
    //     get_st_revenue();
    // });
    
    $("#teacher_id").on("change",function(e){
        e.preventDefault();
        $("#educator_revenue").html(`Please wait...`);
        const t_id=$("#teacher_id").val();
        const s_date=$("#start_date").val();
        const e_date=$("#end_date").val();

        $.ajax({
            url:"/getTeacherStatistics",
            type:"POST",
            headers:{
                "X-CSRF-TOKEN":$('meta[name="csrf-token"]').attr('content')
            },
            data:{t_id:t_id, s_date:s_date, e_date:e_date},
            success:function(resp){
                const status=resp["status"];
                if(status==200){
                    let html_to_include = "";
                    html_to_include+=`<h6>Email: ${resp["teacher_details"]["email"]}</h6>`;
                    html_to_include+=`<h6>Phone No: ${resp["teacher_details"]["phone"]}</h6>`;
                    html_to_include+= `<h6>Class Name: ${resp["class_name"]}</h6>`;
                    html_to_include+=`<h6>Total Students: ${resp["student_count"]}</h6>`;
                    html_to_include+=`<h6 class='mb-1'>Student List</h6>`;
                    if(resp["student_count"] && resp["student_count"]>0){
                        html_to_include+=`<span class='text-black'>( Brackets contain primary parent name. )</span>`;
                        html_to_include+=`<ul class="student_list">`;
                        resp["student_data"].forEach(element => {
                            html_to_include+=`<li>${element["student_first_name"]} ${element["student_last_name"]} ( ${element["parent_first_name"]} ${element["parent_last_name"]} )</li>`;
                        });
                        html_to_include+=`</ul>`;
                    }else{
                        html_to_include+=`<div>No Student Found.</div>`;
                    }
                    $("#educator_revenue").html(html_to_include);
                }
            }
        });
    });

    $("#batch_id").on("change",function(e){
        e.preventDefault();
        $("#batch_revenue").html(`Please wait...`);
        const c_id=$("#batch_id").val();
        const s_date=$("#start_date").val();
        const e_date=$("#end_date").val();

        $.ajax({
            url:"/getClassStatistics",
            type:"POST",
            headers:{
                "X-CSRF-TOKEN":$('meta[name="csrf-token"]').attr('content')
            },
            data:{c_id:c_id, s_date:s_date, e_date:e_date},
            success:function(resp){
                console.log("Hello");
                const status=resp["status"];
                if(status==200){
                    let html_to_include = `<h6>Class Name: ${resp["class_name"]}</h6>`;
                    html_to_include+=`<h6>Total Teachers: ${resp["teacher_count"]}</h6>`;
                    html_to_include+=`<h6 class='mb-1'>Teacher List</h6>`;
                    if(resp["teacher_count"] && resp["teacher_count"]>0){
                        html_to_include+=`<ul class="student_list">`;
                        resp["teacher_data"].forEach(element => {
                            html_to_include+=`<li>${element["first_name"]} ${element["last_name"]}</li>`;
                        });
                        html_to_include+=`</ul>`;
                    }else{
                        html_to_include+=`<div>No Teacher Found.</div>`;
                    }
                    
                    html_to_include+=`<h6 class='mt-3'>Total Students: ${resp["student_count"]}</h6>`;
                   
                    html_to_include+=`<h6 class='mb-1'>Student List</h6>`;
                    if(resp["student_count"] && resp["student_count"]>0){
                        html_to_include+=`<span class='text-black'>( Brackets contain primary parent name. )</span>`;
                        html_to_include+=`<ul class="student_list">`;
                        resp["student_data"].forEach(element => {
                            html_to_include+=`<li>${element["student_first_name"]} ${element["student_last_name"]} ( ${element["parent_first_name"]} ${element["parent_last_name"]} )</li>`;
                        });
                        html_to_include+=`</ul>`;
                    }else{
                        html_to_include+=`<div>No Student Found.</div>`;
                    }
                    $("#batch_revenue").html(html_to_include);
                }
            }
        });
    });

    $("#parent_id").on("change",function(e){
        e.preventDefault();
        $("#parent_revenue").html(`Please wait...`);
        const p_id=$("#parent_id").val();
        const s_date=$("#start_date").val();
        const e_date=$("#end_date").val();

        $.ajax({
            url:"/getParentStatistics",
            type:"POST",
            headers:{
                "X-CSRF-TOKEN":$('meta[name="csrf-token"]').attr('content')
            },
            data:{p_id:p_id, s_date:s_date, e_date:e_date},
            success:function(resp){
                const status=resp["status"];
                if(status==200){   
                    let html_to_include = ``;
                    html_to_include+=`<h6>Email: ${resp["parent_details"]["email"]}</h6>`;
                    html_to_include+=`<h6>Phone No: ${resp["parent_details"]["phone"]}</h6>`;
                    html_to_include+=`<h6>Total Students: ${resp["student_count"]}</h6>`;
                    html_to_include+=`<h6 class='mb-1'>Student List</h6>`;
                    if(resp["student_count"] && resp["student_count"]>0){
                        html_to_include+=`<span class='text-black'>( Brackets contain teacher name, class name. )</span>`;
                        html_to_include+=`<ul class="student_list">`;
                        const teacher_data = resp["teacher_data"];
                        resp["student_data"].forEach(element => {
                            html_to_include+=`<li>${element["student_first_name"]} ${element["student_last_name"]} ( ${teacher_data[element["teacher_id"]]}, ${element["class_name"]} )</li>`;
                        });
                        html_to_include+=`</ul>`;
                    }else{
                        html_to_include+=`<div>No Student Found.</div>`;
                    }
                    $("#parent_revenue").html(html_to_include);
                }
            }
        });
    });

    $("#student_id").on("change",function(e){
        e.preventDefault();
        $("#student_revenue").html(`Please wait...`);
        const s_id=$("#student_id").val();
        const s_date=$("#start_date").val();
        const e_date=$("#end_date").val();

        $.ajax({
            url:"/getStudentStatistics",
            type:"POST",
            headers:{
                "X-CSRF-TOKEN":$('meta[name="csrf-token"]').attr('content')
            },
            data:{s_id:s_id, s_date:s_date, e_date:e_date},
            success:function(resp){
                const status=resp["status"];
                if(status==200){
                    let html_to_include="";
                    html_to_include+=`<h6>Class Name: ${resp["class_name"]}</h6>`;
                    html_to_include+=`<div class='row'>
                                    <div class='col-6'>
                                        <h6>Parent Details</h6>
                                        <ul class='student_list'>
                                            <li>${resp["parent_details"]["full_name"]}</li>
                                            <li>${resp["parent_details"]["email"]}</li>
                                            <li>${resp["parent_details"]["phone_number"]}</li>
                                        </ul>
                                    </div>
                                    <div class='col-6'>
                                        <h6>Teacher Details</h6>
                                        <ul class='student_list'>
                                            <li>${resp["teacher_details"]["full_name"]}</li>
                                            <li>${resp["teacher_details"]["email"]}</li>
                                            <li>${resp["teacher_details"]["phone"]}</li>
                                        </ul>
                                    </div>
                                </div>`;

                    $("#student_revenue").html(html_to_include);
                }
            }
        });
    });
</script>
@endsection