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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register Src="~/UserControls/GridViewPager/GridViewPager.ascx" TagName="GridViewPager" TagPrefix="uc1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Src="~/UserControls/Common/ScreenGroup/ScreenGroup.ascx" TagName="ScreenGroupControl" TagPrefix="ScreenGroup" %>
<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="MonthlyRegisterUpdatePanel" runat="server">
        <ContentTemplate>
            <div id="divContentPage" class="divcontentpagemargin">
                <!-- ContentPlaceHolder Box Starts -->
                <div>

                    <div class="himssuHeader3WireBox col-md-12">
                        <div class="himsBoxContent">
                            <div class="leftUlMenu">
                                <ScreenGroup:ScreenGroupControl EnableViewState="true" ID="ScreenGroupControl" ScreenGroupId="110"
                                    Visible="true" runat="server" />
                            </div>
                        </div>
                    </div>

                    <div class="whiteboxpaddingleft row">
                        <div class="himssuHeader1WireBox  card card-box">
                            <div class="himsBoxHeader card-head">
                                <div class="leftdiv">
                                </div>
                                <div class="himsBoxTitle">
                                    <div class="headerText">
                                        <header>
                                            <i class="fas fa-registered"></i>
                                            <asp:Label ID="Label1" runat="server" Text="Attendance Dashboard"></asp:Label>
                                        </header>
                                    </div>
                                </div>
                            </div>
                            <div class="himsBoxContent card-body">
                                <div class="contentHolder">
                                    <div class="row mlr14">
                                        <div class="himsBoxHeader card-head inner">
                                            <div class="himsBoxTitle">
                                                <div class="headerText fLeft">
                                                    <header>
                                                        <span>Attendance List</span>
                                                    </header>
                                                </div>
                                            </div>
                                        </div>
                                        <div class='himsBoxContent'>
                                            <div class='table-responsive'>
                                                <table id='tblAttendanceList' class='table table-striped table-bordered'>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="outerBox col-md-3 pTop5">
                                        <div class="form-group">
                                            <label class="controlLabelWidth">Attendance Date</label>
                                            <span class="display-flex">
                                                <input type="text" id="AttendanceDate" onchange="DateWise()" onkeyup="FormatIt(this);" onblur="isValidDate2(this);" />
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-12" id="ChartBar">
                                        <canvas id="chart-Bar"></canvas>
                                    </div>
                                    <div class="row">
                                        <div class="top-btn col-md-12">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Department</label>
                                                    <select id='drpDepartment' class="form-control custom-select col-12" onchange="DepartmentFunction()">
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Class</label>
                                                    <select id='drpClass' class="form-control custom-select col-12" onchange="ClassFunction()">
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Division</label>
                                                    <select id='drpDivision' class="form-control custom-select col-12" onchange="DivisionFunction()">
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <%--HEDP History Ends Here--%>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <%--    <script data-main="../../JavaScript/rjs/divisionregister" src="../../JavaScript/rjs/require.js"></script>--%>
    <%--<script data-main='<%=ResolveUrl("~/JavaScript/rjs/divisionregister")%>' src='<%=ResolveUrl("~/JavaScript/rjs/require.js")%>'></script>--%>
    <style>
        .upload-loader{
            display:inline !important;
        }
    </style>
    <div class="hls-bg">
        <div class="hls-container">
            <div class="hls-content" style="margin-top: 300px;">
                <div class="upload-loader loader" style="position: fixed;">
                    <div class='loader--dot'></div>
                    <div class='loader--dot'></div>
                    <div class='loader--dot'></div>
                    <div class='loader--dot'></div>
                    <div class='loader--dot'></div>
                    <div class='loader--dot'></div>
                    <div class='loader--text' style="margin-top: 15px;"></div>
                </div>
            </div>
        </div>
    </div>

    <script data-main='<%=ResolveUrl("~/JavaScript/rjs/attendence-summary")%>' src='<%=ResolveUrl("~/JavaScript/rjs/require.js")%>'></script>

    <script>
        var AttendanceDate = "";
        var ClassId = 0;
        var DepartmentId = 0;
        var DivisionId = 0;
        function LoadingMessage(msg1, msg2) {
            $('.hls-bg').show();
        }
        function CloseLoadingpopup() {
            $('.hls-bg').hide();
        }
        $(document).ready(function () {
            LoadingMessage('Loading Details', '<b>Please Wait ...</b>');
            let now = new Date();
            let day = ("0" + now.getDate()).slice(-2);
            let month = ("0" + (now.getMonth() + 1)).slice(-2);
            let today = (day) + "-" + (month) + "-" + now.getFullYear();
            $('#AttendanceDate').val(today);
            AttendanceDate = $('#AttendanceDate').val();
            $.ajax({
                type: "POST",
                url: "AttendanceSummary.aspx/ClassDropDownList",
                data: JSON.stringify({ "DepartmentId": DepartmentId }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    $("#drpClass").html(result.d);
                    ClassId = $("#drpClass").val();
                    CloseLoadingpopup();
                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    console.log(err.Message);
                    CloseLoadingpopup();
                }
            });
            LoadingMessage('Loading Details', '<b>Please Wait ...</b>');
            $.ajax({
                type: "POST",
                url: "AttendanceSummary.aspx/DepartmentDropDownList",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    $("#drpDepartment").html(result.d);
                    DepartmentId = $("#drpDepartment").val();
                    // alert(DepartmentId);
                    CloseLoadingpopup();
                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    console.log(err.Message);
                    CloseLoadingpopup();
                }
            });
            LoadingMessage('Loading Details', '<b>Please Wait ...</b>');
            $.ajax({
                type: "POST",
                url: "AttendanceSummary.aspx/DivisionDropDownList",
                data: JSON.stringify({ "ClassId": ClassId }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    $("#drpDivision").html(result.d);
                    DivisionId = $("#drpDivision").val();
                    CloseLoadingpopup();
                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    console.log(err.Message);
                    CloseLoadingpopup();
                }
            });
            AttendanceListDataGet();
        });

        function AttendanceListDataGet() {
            LoadingMessage('Loading Details', '<b>Please Wait ...</b>');
            $.ajax({
                type: "POST",
                url: "AttendanceSummary.aspx/AttendanceListDataGet",
                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 tblAttendanceList = "";
                    var AveragePresent = 0;
                    var AverageAbsent = 0;
                    if (obj != "") {
                        tblAttendanceList += "<tr><th>Total</th><th>Present</th><th>Absent</th><th>Leave</th><th>Average Present</th><th>Average Absent</th></tr>";
                        $.each(obj, function (i, item) {
                            AveragePresent = ((item[1].value * 100) / item[0].value).toFixed(2);
                            AverageAbsent = ((item[2].value * 100) / item[0].value).toFixed(2);
                            if (AveragePresent == 'NaN') {
                                AveragePresent = 0;
                            }
                            if (AverageAbsent == 'NaN') {
                                AverageAbsent = 0
                            }

                            tblAttendanceList += "<tr><td>" + item[0].value + "</td><td>" + item[1].value + "</td><td>" + item[2].value + "</td><td>" + item[3].value + "</td><td>" + AveragePresent + "</td><td>" + AverageAbsent + "</td></tr>";
                        });
                    }
                    else { tblAttendanceList += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblAttendanceList").innerHTML = tblAttendanceList;
                    CloseLoadingpopup();
                    AttendanceDataGet();
                }
            });
        }

        function AttendanceDataGet() {
            LoadingMessage('Loading Details', '<b>Please Wait ...</b>');
            $.ajax({
                type: "POST",
                url: "AttendanceSummary.aspx/AttendanceDataGet",
                data: JSON.stringify({ "AttendanceDate": AttendanceDate, "ClassId": parseInt(ClassId), "DepartmentId": parseInt(DepartmentId), "DivisionId": parseInt(DivisionId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var chartdata = [];
                    var Class = [];
                    var Series1 = [];
                    var Series2 = [];
                    obj.sort((a,b) =>( a[4].value-b[4].value))
                    $.each(obj, function (i, item) {
                        Class.push(item[1].value);
                        Series1.push(item[2].value);
                        Series2.push(item[3].value);
                    });
                    var barChartData = {
                        labels: Class,
                        datasets: [{
                            label: 'Present  Count',
                            backgroundColor: window.chartColors.green,
                            data: Series1
                        }, {
                            label: 'Absent Count',
                            backgroundColor: window.chartColors.red,
                            data: Series2
                        }]

                    };

                    $('#chart-Bar').remove();
                    $('#ChartBar').append('<canvas id="chart-Bar"></canvas>');
                    var ctx = document.getElementById('chart-Bar').getContext('2d');
                    window.myBar = new Chart(ctx, {
                        type: 'bar',
                        data: barChartData,
                        options: {
                            title: {
                                display: true,
                                text: 'Student Attendance Graph'
                            },
                            tooltips: {
                                mode: 'index',
                                intersect: false
                            },
                            responsive: true,
                            legend: {
                                position: 'top',
                            },
                            //"animation": {
                            //    "duration": 1,
                            //    "onComplete": function () {
                            //        var chartInstance = this.chart,
                            //          ctx = chartInstance.ctx;

                            //        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);
                            //            });
                            //        });
                            //    },
                            //},
                            scales: {
                                xAxes: [{
                                    // barPercentage: 0.4,
                                    maxBarThickness: 50,
                                    stacked: true,
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Class'
                                    }
                                }],
                                yAxes: [{
                                    stacked: true,
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Count'
                                    }
                                }]
                            }
                        }
                    });
                    CloseLoadingpopup();
                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    console.log(err.Message);
                    CloseLoadingpopup();
                }
            });
        }
        function DateWise() {
            AttendanceDate = $('#AttendanceDate').val();
            AttendanceListDataGet();
        }
        function ClassFunction() {
            LoadingMessage('Loading Details', '<b>Please Wait ...</b>');
            ClassId = $("#drpClass").val();
            $("#drpClass").val(ClassId);
            //AttendanceListDataGet();
            $.ajax({
                type: "POST",
                url: "AttendanceSummary.aspx/DivisionDropDownList",
                data: JSON.stringify({ "ClassId": ClassId }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    $("#drpDivision").html(result.d);
                    DivisionId = $("#drpDivision").val();
                    CloseLoadingpopup();
                    AttendanceListDataGet();
                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    console.log(err.Message);
                    CloseLoadingpopup();
                }
            });
        }

        function DivisionFunction() {
            DivisionId = $("#drpDivision").val();
            $("#drpDivision").val(DivisionId);
            AttendanceListDataGet();
        }
        function DepartmentFunction() {
            LoadingMessage('Loading Details', '<b>Please Wait ...</b>');
            DepartmentId = $("#drpDepartment").val();
            $("#drpDepartment").val(DepartmentId);
            $.ajax({
                type: "POST",
                url: "AttendanceSummary.aspx/ClassDropDownList",
                data: JSON.stringify({ "DepartmentId": DepartmentId }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    $("#drpClass").html(result.d);
                    ClassId = $("#drpClass").val();
                    CloseLoadingpopup();
                    AttendanceListDataGet();
                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    console.log(err.Message);
                    CloseLoadingpopup();
                }
            });
        }
    </script>
</asp:Content>
