


<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header custom_head">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h3>Dashboard</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row mb-1">
            <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box bg-success">
                    <span class="info-box-icon"><i class="far fa-thumbs-up"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">Employee Satisfaction level</span>
                        <span class="info-box-number"><span id="satis_level">2</span>/5</span>

                        <div class="progress">
                            <div class="progress-bar" id="satisprogress-bar" style="width: 10%"></div>
                        </div>
                        <span class="progress-description">
                            <span id="avg_sat">10%</span> Average Satisfaction
                        </span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <div class="col-md-3 col-sm-6 col-12">
                <!-- small card -->
                <div class="small-box bg-warning">
                    <div class="inner">
                        <h3 id="empCount">0</h3>

                        <p>Employee Count</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-user-plus"></i>
                    </div>
                    <!--                    <a href="#" class="small-box-footer">
                                            More info <i class="fas fa-arrow-circle-right"></i>
                                        </a>-->
                </div>
            </div>
        </div>

        <!-- Default box -->
        <div class="card">

            <div class="card-body">
                <div class="row" style="height: auto">
                    <div class="col-md-7" id="department_chart"></div>
                    <div class="col-md-5">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Department</th>
                                    <th>Employee Count</th>
                                </tr>
                            </thead>
                            <tbody id="dep_tbody">
                                
                            </tbody>

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

        </div>
        <!-- /.card -->

    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script >

    $(document).ready(function () {
        $("a").removeClass("active");
        $(".dashbord_class").addClass("active");
        getDashboardData();
    });


    function getDashboardData() {
        $.ajax({
            url: base_urlJs+"Admin_dashboard/getDataSet1",
            type: "get",
            success: function (data) {
                var reportData = JSON.parse(data);
//                console.log(reportData);
                loadStisFaction(reportData['SatisfactionLv']);
                loadDepartmentChart(reportData['depInf'])
                $(".highcharts-credits").hide();
            },
            error: function (jqXhr) {
                console.log(jqXhr)
            }
        });
    }

    function loadStisFaction(array) {
        if (array.length > 0) {
            $("#satis_level").html(array[0]['avg'])
            $("#avg_sat").html(((array[0]['avg'] / 5) * 100).toFixed(0) + "% ");
            $("#satisprogress-bar").css("width", ((array[0]['avg'] / 5) * 100).toFixed(0) + "%");
        }
    }
    var totemp = 0;
    var chartArrt1 = [];
    function loadDepartmentChart(array) {
        if (array.length > 0) {
            var html="";
            for (p = 0; p < array.length; p++) {
                html+="<tr><td>"+array[p]['department']+"</td><td>"+array[p]['Count']+"</td></tr>"
                totemp += Number(array[p]['Count']);
                chartArrt1.push({
                    name: array[p]['department'],
                    y: array[p]['Count'],
                    x: array[p]['Count'],
                });
            }
            $("#dep_tbody").html(html)
//            console.log(chartArrt1)
//            console.log(totemp)
            $("#empCount").html(totemp);
            for (p = 0; p < chartArrt1.length; p++) {
                var oldy = chartArrt1[p]['y']
                chartArrt1[p]['y'] = parseFloat(((oldy / totemp) * 100).toFixed(2))
            }
//            console.log(chartArrt1);
            drawCart1(chartArrt1);

        }
    }


    function drawCart1(dataList) {
        Highcharts.chart('department_chart', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: 'Departments'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            },
            series: [{
                    name: 'percentage',
                    colorByPoint: true,
                    data: dataList
                }]
        });
    }
</script>


