<%@ page title="" language="C#" masterpagefile="~/Pages/Common/MasterPages/MainMasterPage_new.master" autoeventwireup="true" inherits="Pages_Hrm_Employee_EmployeeAttendanceSummary, App_Web_0uq4yejd" 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/admission/css/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 class="dashBoardLeftCont">
                <div class="himssuHeader3WireBox">
                    <table>
                        <tr>
                            <td>
                                <div class="leftUlMenu">
                                    <ScreenGroup:ScreenGroupControl EnableViewState="true" ID="ScreenGroupControl" ScreenGroupId="163"
                                        Visible="true" runat="server" />
                                </div>
                            </td>
                        </tr>
                    </table>
                </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="Employee Attendance Summary"></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-xlg-3">
                                          <div class="card card-inverse card-grey hover-expand-effect">
                                            <div class="box text-center">
                                                <h1 id="TotalStudentLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">Total Student</h6>
                                            </div>
                                        </div>
                                    </div>--%>
                                    <div id="" class="himsBoxHeader card-head inner">
                                        <div class="himsBoxTitle">
                                            <div class="headerText">
                                                <header>
                                                    <span id="" class="subheader">Today</span>
                                                </header>
                                            </div>
                                        </div>
                                    </div>
                                    <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="TotalEmployeeCountLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total</h6>
                                                </div>

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

                                    <%-- <div class="col-md-6 col-lg-3 col-xlg-3">
                                        <div class="card card-inverse card-success  hover-expand-effect">
                                            <div class="box text-center">
                                                <h1 id="PaidFeesLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">Paid Fees</h6>
                                            </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="TotalPresentLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Present</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <%--                                        <div class="col-md-6 col-lg-3 col-xlg-3">
                                        <div class="card card-inverse card-red hover-expand-effect">
                                            <div class="box text-center">
                                                <h1 id="PendingFeesLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">Pending Fee</h6>
                                            </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-user-unfollow"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotalAbsentLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Absent</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="fas fa-exclamation-triangle"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotalPendingAttendanceLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Pending Attendance</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="" class="himsBoxHeader card-head inner">
                                        <div class="himsBoxTitle">
                                            <div class="headerText">
                                                <header>
                                                    <span id="" class="subheader">Last 30 Days</span>
                                                </header>
                                            </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="fas fa-exclamation-triangle"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotalLast30PendingLeaveLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Pending Leave</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-check"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotalLast30ApprovedLeaveLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Approved Leave</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-close"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotalLast30RejectedLeaveLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Rejected Leave</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="" class="himsBoxHeader card-head inner">
                                        <div class="himsBoxTitle">
                                            <div class="headerText">
                                                <header>
                                                    <span id="" class="subheader">Current Year</span>
                                                </header>
                                            </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="far fa-calendar-alt"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotalCurrentYearPendingLeaveLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Pending Leave</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="far fa-calendar-check"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotalCurrentYearApprovedLeavesLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Approved Leaves</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="far fa-calendar-times"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotalCurrentYearRejectedLeavesLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Rejected Leaves</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>




                                </div>
                            </div>

                            <div class="himsBoxContent">
                                <div class="contentHolder">
                                    <div class="col-md-12 p-0">
                                        <div id="" class="himsBoxHeader card-head inner">
                                            <div class="himsBoxTitle">
                                                <div class="headerText">
                                                    <header>
                                                        <span id="" class="subheader">Monthwise Absent</span>
                                                    </header>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 pb15">
                                            <div id="canvas-holder">
                                                <canvas id="chart-area-EmpMonthwiseAbsent"></canvas>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-lg-3 col-xl-6 p3">
                                            <div class="mlr14">
                                                <div class='himsBoxContent'>
                                                    <div class='table-responsive'>
                                                        <table id='tblEmpMonthwiseAbsentCount' class='table table-striped table-bordered'>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12 p-0">
                                        <div id="" class="himsBoxHeader card-head inner">
                                            <div class="himsBoxTitle">
                                                <div class="headerText">
                                                    <header>
                                                        <span id="" class="subheader">Monthwise Leave</span>
                                                    </header>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="canvas-holder-EmployeeMonthWiseLeave" class="col-md-6">
                                            <canvas id="chart-area-EmployeeMonthWiseLeave"></canvas>
                                        </div>
                                        <div class="col-md-6 col-lg-3 col-xl-6 p3">
                                            <div class="row mlr14">
                                                <div class='himsBoxContent'>
                                                    <div class='table-responsive'>
                                                        <table id='tblEmployeeMonthWiseLeaveCount' class='table table-striped table-bordered'>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

    <script>

        $(document).ready(function () {
            EmployeeAttendanceListGet();
            //EmployeeLast30DaysLeaveListGet();
            //EmployeeCurrentYearLeaveListGet();
        });

        function EmployeeAttendanceListGet() {
            $.ajax({
                type: "POST",
                url: "EmployeeAttendanceSummary.aspx/EmployeeAttendanceListDataGet",
                data: JSON.stringify({ "Type": 'EmployeePresentDetails' }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    if (obj != "") {
                        $.each(obj, function (i, item) {
                            document.getElementById("TotalEmployeeCountLabel").innerHTML = obj[0][0].value;
                            document.getElementById("TotalPresentLabel").innerHTML = obj[0][1].value;
                            document.getElementById("TotalAbsentLabel").innerHTML = obj[0][2].value;
                            document.getElementById("TotalPendingAttendanceLabel").innerHTML = obj[0][3].value;

                            EmployeeLast30DaysLeaveListGet();
                        });
                    }
                    //  AdmissionGraphDataGet();
                }
            });
        }


        function EmployeeLast30DaysLeaveListGet() {
            $.ajax({
                type: "POST",
                url: "EmployeeAttendanceSummary.aspx/EmployeeAttendanceListDataGet",
                data: JSON.stringify({ "Type": 'EmployeeLeaveDetails' }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    if (obj != "") {
                        $.each(obj, function (i, item) {
                            document.getElementById("TotalLast30PendingLeaveLabel").innerHTML = obj[0][0].value;
                            document.getElementById("TotalLast30ApprovedLeaveLabel").innerHTML = obj[0][1].value;
                            document.getElementById("TotalLast30RejectedLeaveLabel").innerHTML = obj[0][2].value;

                            EmployeeCurrentYearLeaveListGet();
                        });
                    }
                    //  AdmissionGraphDataGet();
                }
            });
        }


        function EmployeeCurrentYearLeaveListGet() {
            $.ajax({
                type: "POST",
                url: "EmployeeAttendanceSummary.aspx/EmployeeAttendanceListDataGet",
                data: JSON.stringify({ "Type": 'EmployeeCurrentYearLeaveDetails' }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    if (obj != "") {
                        $.each(obj, function (i, item) {
                            document.getElementById("TotalCurrentYearPendingLeaveLabel").innerHTML = obj[0][0].value;
                            document.getElementById("TotalCurrentYearApprovedLeavesLabel").innerHTML = obj[0][1].value;
                            document.getElementById("TotalCurrentYearRejectedLeavesLabel").innerHTML = obj[0][2].value;
                            EmployeeMonthWiseCountGet();
                        });
                    }
                    //  AdmissionGraphDataGet();
                }
            });
        }
        var MonthText = [];
        var MonthValue = [];
        //var BgColors = [];
        var BgColors = ["#FF6384", "#36A2EB", "#FFCE56", "#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"];

        function EmployeeMonthWiseCountGet() {
            $.ajax({
                type: "POST",
                url: "EmployeeAttendanceSummary.aspx/EmployeeAttendanceListDataGet",
                data: JSON.stringify({ "Type": 'EmployeeMonthWiseAbsentPIChartDetails' }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var tblEmpMonthwiseAbsentCount = "";
                    if (obj != "") {
                        tblEmpMonthwiseAbsentCount += "<tr><th>Month Name</th><th> Count</th></tr>";
                        $.each(obj, function (i, item) {
                            if (parseInt(item[2].value) != 0) {
                                tblEmpMonthwiseAbsentCount += "<tr><td>" + item[1].value + "</td><td>" + item[2].value + "</td></tr>";
                            }

                            if (parseInt(item[2].value) != 0) {
                                MonthText.push('' + item[1].value + '');
                            }
                            if (parseInt(item[2].value) != 0) {
                                MonthValue.push((item[2].value));
                            }

                            if (parseInt(item[2].value) != 0) {
                                BgColors.push("Red");
                            }

                        });
                        var ctx = document.getElementById('chart-area-EmpMonthwiseAbsent').getContext('2d');
                        window.myPie = new Chart(ctx, config);
                        EmployeeMonthWiseLeaveCountGet();
                    }
                    else { tblEmpMonthwiseAbsentCount += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblEmpMonthwiseAbsentCount").innerHTML = tblEmpMonthwiseAbsentCount;
                }
            });

        }

        var MonthTextLeave = [];
        var MonthValueLeave = [];
        //var BgColorsLeave = [];
        var BgColorsLeave = ["#FF6384", "#36A2EB", "#FFCE56", "#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"];

        function EmployeeMonthWiseLeaveCountGet() {
            $.ajax({
                type: "POST",
                url: "EmployeeAttendanceSummary.aspx/EmployeeAttendanceListDataGet",
                data: JSON.stringify({ "Type": 'EmployeeMonthWiseLeavePIChartDetails' }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var tblEmployeeMonthWiseLeaveCount = "";
                    if (obj != "") {
                        tblEmployeeMonthWiseLeaveCount += "<tr><th>Month Name</th><th> Count</th></tr>";
                        $.each(obj, function (i, item) {
                            if (parseInt(item[2].value) != 0) {
                                tblEmployeeMonthWiseLeaveCount += "<tr><td>" + item[1].value + "</td><td>" + item[2].value + "</td></tr>";
                            }

                            if (parseInt(item[2].value) != 0) {
                                MonthTextLeave.push('' + item[1].value + '');
                            }
                            if (parseInt(item[2].value) != 0) {
                                MonthValueLeave.push((item[2].value));
                            }
                        });
                        var ctx = document.getElementById('chart-area-EmployeeMonthWiseLeave').getContext('2d');
                        window.myPie = new Chart(ctx, configLeave);
                    }
                    else { tblEmployeeMonthWiseLeaveCount += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblEmployeeMonthWiseLeaveCount").innerHTML = tblEmployeeMonthWiseLeaveCount;
                }
            });

        }
        var config = {
            type: 'pie',
            data: {
                datasets: [{
                    data: MonthValue,
                    backgroundColor: BgColors,
                    label: 'Dataset Employee Month Wise Absent'
                }],
                labels: MonthText
            },
            options: {
                responsive: true
            }
        };

        var configLeave = {
            type: 'pie',
            data: {
                datasets: [{
                    data: MonthValueLeave,
                    backgroundColor: BgColorsLeave,
                    label: 'Dataset Employee Month Wise Leave'
                }],
                labels: MonthTextLeave
            },
            options: {
                responsive: true
            }
        };

    </script>

    <script>
        //var randomScalingFactor = function () {
        //    return Math.round(Math.random() * 100);
        //};
        //var MValue = function () {
        //    return MonthValue.slice(0, -1);
        //};
        //var MText = function () {
        //    return MonthText.slice(0, -1);
        //};



        //var config = {
        //    type: 'pie',
        //    data: {
        //        datasets: [{
        //            //data: [
        //            //    //alert(MValue())
        //            //    //randomScalingFactor(),
        //            //    //randomScalingFactor(),
        //            //    //randomScalingFactor(),
        //            //    //randomScalingFactor(),
        //            //    //randomScalingFactor(),
        //            //   // MonthValue.substring(0, currentIndex - 1)
        //            //   MValue()

        //            //],
        //            data: MonthValue,
        //            backgroundColor: BgColors,
        //            //backgroundColor: [
        //            //    window.chartColors.red,
        //            //    window.chartColors.orange,
        //            //    window.chartColors.yellow,
        //            //    window.chartColors.green,
        //            //    window.chartColors.blue,
        //            //    window.chartColors.blue,
        //            //    window.chartColors.blue,
        //            //    window.chartColors.blue,
        //            //    window.chartColors.blue,
        //            //    window.chartColors.blue,
        //            //    window.chartColors.blue,
        //            //    window.chartColors.blue

        //            //],
        //            label: 'Dataset Employee Month Wise Absent'
        //        }],
        //        labels: MonthText
        //        //labels: [
        //        //    //'Red',
        //        //    //'Orange',
        //        //    //'Yellow',
        //        //    //'Green',
        //        //    //'Blue'

        //        //    MText()
        //        //]
        //    },
        //    options: {
        //        responsive: true
        //    }
        //};




        //window.onload = function () {
        //    var ctx = document.getElementById('chart-area').getContext('2d');
        //    window.myPie = new Chart(ctx, config);
        //};

        //document.getElementById('randomizeData').addEventListener('click', function () {
        //    config.data.datasets.forEach(function (dataset) {
        //        dataset.data = dataset.data.map(function () {
        //            return randomScalingFactor();
        //        });
        //    });

        //    window.myPie.update();
        //});

        //var colorNames = Object.keys(window.chartColors);
        //document.getElementById('addDataset').addEventListener('click', function () {
        //    var newDataset = {
        //        backgroundColor: [],
        //        data: [],
        //        label: 'New dataset ' + config.data.datasets.length,
        //    };

        //    for (var index = 0; index < config.data.labels.length; ++index) {
        //        newDataset.data.push(randomScalingFactor());

        //        var colorName = colorNames[index % colorNames.length];
        //        var newColor = window.chartColors[colorName];
        //        newDataset.backgroundColor.push(newColor);
        //    }

        //    config.data.datasets.push(newDataset);
        //    window.myPie.update();
        //});

        //document.getElementById('removeDataset').addEventListener('click', function () {
        //    config.data.datasets.splice(0, 1);
        //    window.myPie.update();
        //});
    </script>
    <script data-main='<%=ResolveUrl("~/JavaScript/rjs/employee-attendance-summary")%>' src='<%=ResolveUrl("~/JavaScript/rjs/require.js")%>'></script>
</asp:Content>

