<div class="wraper responsive-width">
    <main class="" id="main">
        <div class="main-wrap">
            <div class="dashboard-cover">
                <div class="common-heading">
                    <h2>DashBoard</h2>
                </div>
                <div class="dashboard-menu-wrap new-dashboard">
                    <div class="dashboard-tabs">
                        <a href="<?= base_url(); ?>admin/subject" class="dashboard-tab-link">
                            <img src="<?= base_url(); ?>assets_admin/images/icons/subjects.png">
                            <div class="tab-sub-sec">
                                <h3 class="tab-number"><?php echo ($subject_count) ? $subject_count : '0' ?></h3>
                                <p>Subjects</p>

                            </div>
                        </a>
                    </div>
                    <div class="dashboard-tabs">
                        <a href="<?= base_url(); ?>admin/course">
                            <img src="<?= base_url(); ?>assets_admin/images/icons/courses.png">
                            <div class="tab-sub-sec">
                                <h3 class="tab-number"><?php echo ($course_count) ? $course_count : '0' ?></h3>
                                <p>Courses</p>
                            </div>
                        </a>
                    </div>
                    <div class="dashboard-tabs">
                        <a href="<?= base_url(); ?>admin/classroom">
                            <img src="<?= base_url(); ?>assets_admin/images/icons/classrooms.png">
                            <div class="tab-sub-sec">
                                <h3 class="tab-number"><?php echo ($classroom_count) ? $classroom_count : '0' ?></h3>
                                <p>Classrooms</p>
                            </div>
                        </a>
                    </div>
                    <div class="dashboard-tabs">
                        <a href="<?= base_url(); ?>admin/teacher">
                            <img src="<?= base_url(); ?>assets_admin/images/icons/teachers.png">
                            <div class="tab-sub-sec">
                                <h3 class="tab-number"><?php echo ($teacher_count) ? $teacher_count : '0' ?></h3>
                                <p>Teachers</p>
                            </div>
                        </a>
                    </div>
                    <div class="dashboard-tabs">
                        <a href="<?= base_url(); ?>admin/student">
                            <img src="<?= base_url(); ?>assets_admin/images/icons/students.png">
                            <div class="tab-sub-sec">
                                <h3 class="tab-number"><?php echo ($student_count) ? $student_count : '0' ?></h3>
                                <p>Students</p>
                            </div>
                        </a>
                    </div>
                    <div class="dashboard-tabs">
                        <a href="<?= base_url(); ?>admin/exam-view">
                            <img src="<?= base_url(); ?>assets_admin/images/icons/exams.png">
                            <div class="tab-sub-sec">
                                <h3 class="tab-number"><?php echo ($exam_count) ? $exam_count : '0' ?></h3>
                                <p>Exam</p>
                            </div>
                        </a>
                    </div>
                    <div class="dashboard-tabs">
                        <a href="<?= base_url(); ?>admin/online_session_list">
                            <img src="<?= base_url(); ?>assets_admin/images/icons/lectures.png">
                            <div class="tab-sub-sec">
                                <h3 class="tab-number"><?php echo ($session_count) ? $session_count : '0' ?></h3>
                                <p>Lectures</p>
                            </div>
                        </a>
                    </div>
                    <div class="dashboard-tabs">
                        <a href="<?= base_url(); ?>admin/get_application">
                            <img src="<?= base_url(); ?>assets_admin/images/icons/enrollments.png">
                            <div class="tab-sub-sec">
                                <h3 class="tab-number"><?php echo ($application_count) ? $application_count : '0' ?></h3>
                                <p>Enrollments</p>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- <button type="button" class="btn btn-success" onclick="<?php echo base_url() ?>Admin/sendSMS()">Sign Up</button> -->
                <div class="subject_lsec dashboard_graph">

                    <div class="report_sec_cover">



                        <!-- chart data -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="subject_lhead">Girl's and Boy's Count</div>
                            </div>
                            <div class="col-md-4">
                                <select id="course_name" name="course_name">
                                    <?php if (!empty($courses)) { ?>
                                        <option value="">--- Select Course ----</option>
                                        <?php foreach ($courses as $key => $value) { ?>
                                            <option value="<?php echo $value['id'] ?>"> <?php echo $value['course_name'] ?></option>
                                    <?php }
                                    } ?>

                                </select>
                            </div>
                            <div class="col-md-4">
                                <select id="section" name="section_name" style="width:253px">

                                </select>
                            </div>
                            <div class="col-md-4">

                            </div>


                        </div>
                        <div class="row">
                            <div class="col-md-8">
                                <div class="charts_section mx-3 my-3" id="girls-boys-chart">
                                    <div class="text-center mt-4" id="data_hidden">
                                        <h5>Select the Course to view Chart</h5>
                                    </div>
                                </div>
                            </div>

                        </div>




                    </div>
                </div>

                <form method="post" action="<?php echo base_url(); ?>admin/send-message">

                    <input type="submit" name="submit" class="btn btn-success" value="Submit">
                </form>
            </div>
        </div>
    </main>
    <!--End right-top side-->
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script>
    $(document).ready(function() {
        $('.user-drpdown').click(function() {
            $('.drpdown-items').toggle();
        });
    });
</script>
<script>
    // var graph_data = <?php //echo json_encode($graph_data); 
                        ?>;
    // console.log(graph_data);

    // Highcharts.setOptions({
    //     lang: {
    //         drillUpText: '<< Back'
    //     }
    // });

    // Highcharts.chart('recoveryGraf', {
    //     chart: {
    //         type: 'pie'
    //     },
    //     title: {
    //         text: ''
    //     },
    //     plotOptions: {
    //         series: {
    //             dataLabels: {
    //                 enabled: true,
    //                 format: '{point.name}: {point.y:.1f}'
    //             }
    //         }
    //     },

    //     tooltip: {
    //         headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    //         pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
    //     },
    //     series: [{
    //         name: 'Fee Report',
    //         colorByPoint: true,
    //         colors: ['#032da1', '#133ba7', '#2449ad', '#3557b3', '#4665ba', '#5773c0', '#6781c6', '#788fcd', '#899dd3'],
    //         data: [
    //             <?php
                    //             foreach ($graph_data as $v) {
                    //                 echo "['" . $v['typename'] . "'," . $v['total'] . "],\n";
                    //             } 
                    ?>
    //         ]
    //     }],
    //     drilldown: {
    //         series: [{
    //             name: 'Recycleds',
    //             id: 'Recycleds',
    //             colors: ['#032da1', '#133ba7', '#2449ad', '#3557b3', '#4665ba', '#5773c0', '#6781c6', '#788fcd', '#899dd3'],
    //             data: [
    //                 <?php
                        //                 foreach ($graph_data as $v) {
                        //                     echo "['" . $v['typename'] . "'," . $v['total'] . "],\n";
                        //                 } 
                        ?>
    //             ]
    //         }]
    //     }




    // });


    function theGirlsandBoyChart(boy, girl) {
        boy = parseInt(boy);
        girl = parseInt(girl);
        $('#data_hidden').hide();

        var data_title = 'Chart Description';

        //Type can be : line, spline, area, areaspline, column, bar, pie, scatter, gauge, arearange, areasplinerange and columnrange

        $('#girls-boys-chart').highcharts({
            chart: {
                type: 'column',
                borderWidth: 0
            },
            title: {
                text: data_title
            },
            plotOptions: {
                borderWidth: 0
            },
            xAxis: {
                title: {
                    text: 'Girls And Boys',
                },
                min: 1,
                tickInterval: 1,
            },
            yAxis: {
                title: {
                    text: 'Total Count',
                },
            },
            series: [{
                name: "Boy's",
                data: [0, boy]

            }, {
                name: "Girl's",
                data: [0, girl]
            }, ]
        });

        //To hide the text "Highcharts.com" which comes as default
        //$('.highcharts-credits').hide();

        //$('.highcharts-legend-item').hide();
    }

    $('#course_name').change(function() {
        var id = $(this).find(":selected").val();

        $.ajax({
            url: '<?php echo base_url() . 'admin/get_sections_from_classroom/' ?>' + id,
            type: 'GET',
            dataType: 'json',
            success: function(result) {
                let section = '';
                section += '<option value=""> - Select Section - </option>';
                $.each(result, function(key, value) {
                    section += '<option value="' + value['id'] + '">' + value['section_name'] + '</option>';

                });
                $("#section").html(section);

            }
        });

        var course_id = $('#course_name').find(":selected").val();
        if (course_id > 0) {
            $.ajax({
                url: '<?php echo base_url() . 'admin/get_count_of_girl_and_boy/' ?>' + course_id + '/0',
                type: 'GET',
                dataType: 'json',
                success: function(result) {
                    theGirlsandBoyChart(result['male'], result['female']);

                }
            });
        } else {
            alert("Please select the Course ");
        }


    });

    $('#section').change(function() {
        var course_id = $('#course_name').find(":selected").val();
        var section_id = $(this).find(":selected").val();
        if (course_id > 0 && section_id > 0) {
            $.ajax({
                url: '<?php echo base_url() . 'admin/get_count_of_girl_and_boy/' ?>' + course_id + '/' + section_id,
                type: 'GET',
                dataType: 'json',
                success: function(result) {
                    theGirlsandBoyChart(result['male'], result['female']);

                }
            });
        } else {
            alert("select the course or section");
        }

    });
</script>