<%@ page language="C#" masterpagefile="~/Pages/Common/MasterPages/MainMasterPage_new.master" autoeventwireup="true" inherits="Pages_StudentManagement_StudentSummaryDashboard, App_Web_jwgmja2e" enableEventValidation="false" viewStateEncryptionMode="Never" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Src="~/UserControls/GridViewPager/GridViewPager.ascx" TagName="GridViewPager" TagPrefix="uc1" %>
<%@ Register Src="~/UserControls/Common/ScreenGroup/ScreenGroup.ascx" TagName="ScreenGroupControl" TagPrefix="ScreenGroup" %>
<%@ Register Src="~/UserControls/Common/EmployeeSearch/EmployeeSearch.ascx" TagName="EmployeeSearchControl" TagPrefix="hims" %>
<%@ Register Src="~/UserControls/DatePicker/DatePickerControl.ascx" TagName="DatePickerControl"
    TagPrefix="Date" %>
<asp:Content ID="Content1" ContentPlaceHolderID="CP" runat="Server">
    <link href="../../App_Themes/jquery-ui.css" rel="stylesheet" />
    <link href="../../App_Themes/newTheme/css/inner-db.css" rel="stylesheet" />
    <script src="../../App_Themes/newTheme/js/Chart.min.js"></script>
    <script src="../../App_Themes/newTheme/js/utils.js"></script>
    <asp:UpdatePanel ID="ResonMasterUpdatePanel" runat="server" UpdateMode="Always">
        <ContentTemplate>
            <hims:EmployeeSearchControl ID="EmployeeSearch" Visible="false" runat="server" />
            <div id="divContentPage" class="divcontentpagemargin">

                <div class="dashBoardLeftCont">
                    <div class="himssuHeader3WireBox">
                        <table>
                            <tr>
                                <td>
                                    <div class="leftUlMenu">
                                        <ScreenGroup:ScreenGroupControl EnableViewState="true" ID="ScreenGroupControl" ScreenGroupId="102"
                                            Visible="true" runat="server" />
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="whiteboxpaddingleft row">
                    <div class="himssuHeader1WireBox card card-box" id="DetailDiv" runat="server" visible="True">
                        <div class="himsBoxHeader card-head">
                            <div class="leftdiv">
                            </div>
                            <div class="himsBoxTitle">
                                <div class="headerText">
                                    <header>
                                        <i class="fas fa-level-up-alt"></i>
                                        <asp:Label ID="ReasonMasterDetailLabel" runat="server" Text="Student Dashboard "></asp:Label>
                                    </header>
                                </div>
                            </div>
                        </div>
                        <div class="himsBoxContent card-body">
                            <div class="contentHolder">
                                <div class="row mlr14 center-block">
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-1 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-people"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotalStudentLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Student</h6>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-2  hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-user-following"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="ActiveStudentLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Active Student</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-3 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-close"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="InActiveStudentLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">InActive Student</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-4 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-user-unfollow"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="LeftStudentLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Left Student</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-5  hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-user-follow"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="NewAdmissionStudentLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Current Batch New Admission</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-6  hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-user-unfollow"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="CurrentBatchLeftStudentLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Current Batch Left Student</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                                <div class="col-md-6 p-0">
                                    <div class=" col-md-16 mlr14">
                                        <%--<h3 class="table-topic">Class Wise </h3>--%>
                                        <div class='himsBoxContent' style="display: none">
                                            <div class='table-responsive'>
                                                <table id='tblStudentGraph' class='table table-striped table-bordered'>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="col-md-12" id="ChartBar">
                                            <canvas id="Chart-Bar"></canvas>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 p-0">
                                    <div class=" col-md-16 mlr14">
                                        <%--<h3 class="table-topic">Class Wise </h3>--%>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Common</label>
                                                <select id='drpCommon' class="form-control custom-select col-12" onchange="CommonFunction()">
                                                    <option selected="selected" value="1">Gender wise </option>
                                                    <option value="2">CastCategory wise</option>
                                                    <option value="3">House Wise</option>
                                                    <option value="4">Religion wise</option>

                                                </select>
                                            </div>
                                        </div>
                                        <div class='himsBoxContent' style="display: none">
                                            <div class='table-responsive'>
                                                <table id='tblGraph' class='table table-striped table-bordered'>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="col-md-12" id="ChartPia">
                                            <canvas id="chart-Pia"></canvas>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <%-- <script data-main="../../JavaScript/rjs/encrypt/assign-organization-encrypt" src="../../JavaScript/rjs/require.js"></script>--%>
    <script data-main='<%=ResolveUrl("~/JavaScript/rjs/assign-organization")%>' src='<%=ResolveUrl("~/JavaScript/rjs/require.js")%>'></script>
    <script>
        var CountId;
        $(document).ready(function () {
            AdmissionListDataGet();
            AllGraphPrint();
        });

        function AdmissionListDataGet() {
            $.ajax({
                type: "POST",
                url: "StudentSummaryDashboard.aspx/AdmissionListDataGet",
                // data: JSON.stringify({ "AttendanceDate": AttendanceDate }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    if (obj != "") {
                        $.each(obj, function (i, item) {
                            document.getElementById("TotalStudentLabel").innerHTML = obj[0][0].value;
                            document.getElementById("ActiveStudentLabel").innerHTML = obj[0][1].value;
                            document.getElementById("InActiveStudentLabel").innerHTML = obj[0][2].value;
                            document.getElementById("LeftStudentLabel").innerHTML = obj[0][3].value;
                            document.getElementById("NewAdmissionStudentLabel").innerHTML = obj[0][4].value;
                            document.getElementById("CurrentBatchLeftStudentLabel").innerHTML = obj[0][5].value;
                        });
                    }
                    AdmissionGraphDataGet();
                }
            });
        }

        function AdmissionGraphDataGet() {

            $.ajax({
                type: "POST",
                url: "StudentSummaryDashboard.aspx/AdmissionGraphDataGet",
                // data: JSON.stringify({ "AttendanceDate": AttendanceDate, "ClassId": parseInt(ClassId), "DepartmentId": parseInt(DepartmentId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {

                    var obj = (result.d);
                    var tblStudentGraph = "";

                    if (obj != "") {
                        var columnsIn = obj[0];
                        var newObj = {};
                        tblStudentGraph += "<tr>";
                        for (var key in columnsIn) {
                            tblStudentGraph += "<th>" + columnsIn[key].key + "</th>";
                        }
                        tblStudentGraph += "</tr>";

                        $.each(obj, function (i, item) {

                            tblStudentGraph += "<tr>";
                            for (var key in item) {
                                if (item[key] !== "null" && item[key] !== undefined && item[key] !== null) {

                                    tblStudentGraph += "<td>" + item[key].value + "</a></td>";
                                }
                            }
                            tblStudentGraph += "</tr>";
                        });
                    }
                    else { tblStudentGraph += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblStudentGraph").innerHTML = tblStudentGraph;


                    var dataPoint = [];
                    var lables = [];
                    var chartdata = [];
                    var dataPoint1 = [];
                    var lables1 = [];
                    var chartdata1 = [];
                    var lbl = [];
                    var locationlbl = [];
                    var colcnt = 0, rowcnt = 0;
                    var chartcolor = [window.chartColors.red, window.chartColors.blue, "#D35400", "#CD5C5C", "#cc65fe", "#196F3D", "#5499C7", "#E67E22",
                                  "#27AE60", "#F08080", "#996633", "#0000cc", "#FFA07A", "#16A085", "#512E5F", "#7D6608", "#1B4F72", "#008080",
                                  "#FF00FF", "#01DF01", "#ff0000", "#00ffff", "#cc6699", "#cccc00", "#993300", "#333399", "#ff99ff", "#006600", "#ffff00",
                                "#003366", "#00ccff", "#ff9900", "#cc0066", "#ccccff", "#660066", "#000000", "#36A2EB"];
                    colcnt = $('#tblStudentGraph tr:first').find("th").length;
                    rowcnt = $('#tblStudentGraph tr').length;
                    //$('#roundgraphdivDept').show();
                    //$('#round1graphdivDept').show();
                    $('#tblStudentGraph tbody tr').each(function (index) {
                        $(this).find('th,td').each(function (index2) {
                            if ($(this).is('th')) {
                                if (index2 != 0 && index2 != colcnt) {
                                    //alert(index2 + ' ' + colcnt)
                                    //debugger;
                                    lables.push(this.innerHTML);
                                }
                            } else if ($(this).is('td')) {
                                if (index2 != 0) {
                                    dataPoint.push(this.innerHTML);
                                } else if (index2 == 0) {
                                    locationlbl.push(this.innerText);
                                }
                            }
                        });
                        if (lables.length > 0 && dataPoint.length > 0) {
                            chartdata.push({
                                label: locationlbl,
                                fill: false,
                                // fillColor: "red",
                                // strokeColor: "blue",
                                // pointColor: "green",
                                backgroundColor: chartcolor[index],
                                borderColor: chartcolor[index],
                                data: dataPoint
                            });
                            dataPoint = [];
                            locationlbl = [];
                        }
                    });
                    var data = {
                        labels: lables,
                        datasets: chartdata
                    };
                    $('#Chart-Bar').remove();
                    $('#ChartBar').append('<canvas id="Chart-Bar"></canvas>');
                    var ctx = $("#Chart-Bar").get(0).getContext('2d');
                    var opt = {
                        responsive: true,

                        title: {
                            display: true,
                            text: 'Student class wise Graph '
                        },
                        tooltips: {
                            mode: 'index',
                            intersect: false,
                        },
                        hover: {
                            mode: 'nearest',
                            intersect: true
                        },
                        scales: {
                            xAxes: [{
                                offset: true,
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Class'
                                },
                                ticks: {
                                    beginAtZero: true,
                                },
                            }],
                            yAxes: [{
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Count'
                                }
                            }]
                        }
                        //"hover": {
                        //    "animationDuration": 0
                        //},
                        //"animation": {
                        //    "duration": 1,
                        //    "onComplete": function () {
                        //        var chartInstance = this.chart,
                        //          ctx = chartInstance.ctx;
                        //        ctx.font = "10px Arial";
                        //        // ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        //        ctx.textAlign = 'center';
                        //        ctx.textBaseline = 'bottom';

                        //        this.data.datasets.forEach(function (dataset, i) {
                        //            var meta = chartInstance.controller.getDatasetMeta(i);
                        //            meta.data.forEach(function (bar, index) {
                        //                var data = dataset.data[index];
                        //                ctx.fillText(data, bar._model.x, bar._model.y);
                        //            });
                        //        });
                        //    },
                        //},
                    };
                    var myNewChart5 = new Chart(ctx, {
                        type: "bar",
                        data: data,
                        options: opt,
                    });

                },

                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    console.log(err.Message);
                }
            });
        }

        function CommonFunction() {
            CountId = $("#drpCommon").val();
            $("#drpCommon").val(CountId);
            AllGraphPrint();
        }
        function AllGraphPrint() {
            CountId = $("#drpCommon").val();
           // alert(CountId);
            $.ajax({
                type: "POST",
                url: "StudentSummaryDashboard.aspx/CommonGraphDataGet",
                data: JSON.stringify({ "CountId": parseInt(CountId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var MONTHS = [];
                    var Series1 = [];
                    $.each(obj, function (i, item) {
                        MONTHS.push(item[0].value);
                        Series1.push(item[1].value);
                    });
                    var config = {
                        type: 'doughnut',
                        data: {
                            datasets: [{
                                data: Series1,
                                backgroundColor:
                                    [window.chartColors.red, window.chartColors.blue, "#D35400", "#CD5C5C", "#cc65fe", "#196F3D", "#5499C7", "#E67E22",
                                  "#27AE60", "#F08080", "#996633", "#0000cc", "#FFA07A", "#16A085", "#512E5F", "#7D6608", "#1B4F72", "#008080",
                                  "#FF00FF", "#01DF01", "#ff0000", "#00ffff", "#cc6699", "#cccc00", "#993300", "#333399", "#ff99ff", "#006600", "#ffff00",
                                "#003366", "#00ccff", "#ff9900", "#cc0066", "#ccccff", "#660066", "#000000", "#36A2EB"],
                                label: 'Gender'
                            }],
                            labels: MONTHS
                        },
                        options: {
                            responsive: true,
                            cutoutPercentage: 40
                        }
                    };
                    $('#chart-Pia').remove();
                    $('#ChartPia').append('<canvas id="chart-Pia"></canvas>');
                    var ctx = document.getElementById('chart-Pia').getContext('2d');
                    window.myPie = new Chart(ctx, config);

                }
            });
        }
    </script>
</asp:Content>
