<%@ page title="" language="C#" masterpagefile="~/MasterFile/TimeCheck.master" autoeventwireup="true" inherits="MyCalendar, App_Web_14tslki4" %>

<asp:Content ID="Content1" ContentPlaceHolderID="BodyContentPH" runat="Server" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="plugins/fullcalendar/fullcalendar.min.css">
    <link rel="stylesheet" href="plugins/fullcalendar/fullcalendar.print.css" media="print">
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <link href="dist/css/bootstrap-responsive-tabs.css" rel="stylesheet" type="text/css">
    <script src="dist/js/jquery.bootstrap-responsive-tabs.min.js"></script>
    <script src="plugins/moment.min.js" type="text/javascript"></script>
    <script src="plugins/fullcalendar/fullcalendar.min.js"></script>
    <script src="js/GetNotification.js"></script>
    <script src="js/GetMycalendardata.js"></script>
    <%--  If my calender is not work, not loaded please enable this below coding. and comment the above coding, we got this issue in vaighai--%>
    <%--<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="plugins/fullcalendar/fullcalendar.min.css">
    <link rel="stylesheet" href="plugins/fullcalendar/fullcalendar.print.css" media="print">
    <link href="dist/css/bootstrap-responsive-tabs.css" rel="stylesheet" type="text/css">
    <script src="plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
    <script src="plugins/jquery-ui.min.js" type="text/javascript"></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="plugins/raphael-min.js" type="text/javascript"></script>
    <script src="plugins/morris/morris.min.js" type="text/javascript"></script>
    <script src="plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
    <script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script>
    <script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
    <script src="plugins/knob/jquery.knob.js" type="text/javascript"></script>
    <script src="plugins/moment.min.js" type="text/javascript"></script>
    <script src="plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
    <script src="plugins/daterangepicker/moment.js" type="text/javascript"></script>
    <script src="plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
    <script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
    <script src="dist/js/jquery.bootstrap-responsive-tabs.min.js"></script>
    <script src="plugins/chartjs/Chart.min.js"></script>
    <script src="dist/js/app.min.js" type="text/javascript"></script>
    <script src="plugins/select2/select2.full.min.js"></script>
    <script src="plugins/fullcalendar/fullcalendar.min.js"></script>
    <script src="js/GetNotification.js"></script>
    <script src="js/GetMycalendardata.js"></script>--%>
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script>
    <script type="text/javascript">
        function clickUserMycalendar() {
            $('#tablist a[href="#ctl00_BodyContentPH_tab1"]').tab('show');
            $('html, body').animate({ scrollTop: 0 }, 'slow');
        }
        function clickTeamcalendar() {
            $('#tablist a[href="#ctl00_BodyContentPH_tab2"]').tab('show');
            $('html, body').animate({ scrollTop: 0 }, 'slow');
        }
        function clickIndividualUser() {
            GetIndividualCalendar();
        }
        function clickTeam() {
            GetTeamCalendar(<%= Session["EmpAutoID"].ToString() %>);
        }
        document.onreadystatechange = function () {
            if (document.readyState === 'complete') {
                clickTeam();
                clickIndividualUser();
            }
        }
        function doCapture() {
            window.scrollTo(0, 0);
            document.getElementById("divcontent").style.paddingLeft = "350px";
            html2canvas(document.getElementById("divcontent")).then(function (canvas) {
                //document.getElementById("ctl00_BodyContentPH_imgTest").src = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
                document.getElementById("ctl00_BodyContentPH_hdnImage").value = canvas.toDataURL("image/jpeg");
            });
            document.getElementById("divcontent").style.paddingLeft = "15px";
            return false;
        }
        function Btn_EmailValidate() {
            //if (document.getElementById("ctl00_BodyContentPH_txtEmail").value.trim() == "") {
            //    alert("Please enter the mail Id.");
            //    return false;
            //}
            //return true;
            var strEmail = document.getElementById("ctl00_BodyContentPH_txtEmail").value.trim();
            var emailArray = new Array();
            emailArray = strEmail.split(",");
            for (item in emailArray)
            {
                if(emailArray[item]=="")
                {
                    document.getElementById('<%=btnSendMail.ClientID%>').style.visibility ='visible';
                    alert("Please enter the mail Id.");
                    return false;
                }
                else {
                    var reg = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
                    if (!reg.test(emailArray[item])) {
                        alert("The email is invalid:" + emailArray[item]);
                        return false;
                    }
                }
            }
            return true;
            //var reg = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
           
       
        }
    </script>
    <div id="output"></div>
    <section class="content-header">
        <h1 style="padding-right: 0px">
            <img src="dist/img/MyCalendar.png" style="padding-right: 10px; vertical-align: middle; padding-bottom: 2px" />
            <asp:Label ID="lbl_Header" runat="server" Text="My Calendar"></asp:Label>
        </h1>
        <asp:SiteMapPath ID="site" runat="server" CssClass="breadcrumb">
            <NodeStyle CssClass="active" />
        </asp:SiteMapPath>
    </section>
    <div id="myModal" class="modal modal-default fade" role="dialog">
        <div class="modal-dialog" style="min-width: 85%;">
            <!-- Modal content-->
            <div class="modal-content" style="margin-top: 100px">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" style="border-radius: 50px;">
                        &times;</button>
                    <h4 class="modal-title">
                        <asp:Label ID="lblDataView" runat="server" Text="My Calendar Send Mail"></asp:Label>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row form-group">

                        <div class="col-md-2">
                            <asp:Label ID="lbl_Email" runat="server" Text="Email ID"></asp:Label>
                        </div>
                        <div class="col-md-10">
                            <asp:TextBox ID="txtEmail" runat="server" TextMode="MultiLine" CssClass="form-control" Style="resize: none;"></asp:TextBox>
                            <asp:Label ID="lblHit" runat="server" Text="Multiple Email ID can be included using comma separator(,) Example : abc@xxxxx.com, xyz@xxxxx.com" Font-Size="Small" Width="50" ForeColor="Red" Style="word-wrap: break-word; width:45%;"></asp:Label>
                             
                            <asp:HiddenField runat="server" ID="hdnImage" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary pull-right" data-dismiss="modal">
                        Close</button>
                    &nbsp;&nbsp;
                    <asp:Button ID="btnSendMail" runat="server" CssClass="btn btn-primary" Text="Send Email" OnClick="btnSendMail_Click" OnClientClick="return Btn_EmailValidate();" />
                    &nbsp;&nbsp;
                </div>
            </div>
        </div>
    </div>
    <section class="content" id="divcontent">
        <div class="row form-group" id="divUserList" runat="server">
            <div class="col-md-2">
                <asp:Label ID="lblUser" runat="server" Text="Team Member"></asp:Label>
            </div>
            <div class="col-md-3">
                <asp:DropDownList ID="ddlUser" runat="server" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="ddlUser_SelectedIndexChanged"></asp:DropDownList>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="respos-tab1">
                    <div class="responsive-tabs tab-header">
                        <ul class="nav nav-tabs responsive-tabs tab-header" id="tablist">
                            <li id="liTeamcalendar" visible="false" runat="server" class="pull-right" style="border-left: thick; border-color: #C1E8FC">
                                <a href="#ctl00_BodyContentPH_tab2" class="fa fa-users" onclick="return clickTeamcalendar();" style="color: green; font-size: larger">
                                    <%--<img src="../dist/img/over-time-Settings.png" class="padding-right-5" />--%>
                                    <asp:Label ID="lblTeam" runat="server" Text="Team" Style="font-family: robotoregular; font-size: 13px; color: black"></asp:Label><asp:Label ID="lbl_TotEmployee" runat="server" Text=""></asp:Label>
                                </a>
                            </li>
                            <li id="liUserMycalendar" runat="server" class="pull-right" style="border-left: thick; border-left-width: initial; border-color: #C1E8FC">
                                <a href="#ctl00_BodyContentPH_tab1" class="fa fa-user" onclick="return clickUserMycalendar();" style="color: red; font-size: larger">
                                    <%--<img src="../dist/img/settings.png" class="padding-right-5" />--%>
                                    <asp:Label ID="lblIndividual" runat="server" Text="Individual" Style="font-family: robotoregular; font-size: 13px; color: black"></asp:Label>
                                </a></li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <!--TAB 1-->
                        <div class="tab-pane active" id="tab1" runat="server">
                            <div class="form-horizontal">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-md-12">
                                            <i class="fa fa-square" style="color: #008247; font-size: 16px"></i>&nbsp;&nbsp;<asp:Label ID="lblPresent" runat="server" />&nbsp;
                                            <i class="fa fa-square" style="color: #FF5151; font-size: 16px"></i>&nbsp;&nbsp;<asp:Label ID="lblAbsent" runat="server" />&nbsp;
                                            <i class="fa fa-square" style="color: #D0457B; font-size: 16px"></i>&nbsp;&nbsp;<asp:Label ID="lblLeave" runat="server" />&nbsp;
                                            <i class="fa fa-square" style="color: #FF7F00; font-size: 16px"></i>&nbsp;&nbsp;<asp:Label ID="lblHoliday" runat="server" />&nbsp;
                                            <i class="fa fa-square" style="color: #02749E; font-size: 16px"></i>&nbsp;&nbsp;<asp:Label ID="lblWeeklyOff" runat="server" />&nbsp;
                                            <i class="fa fa-square" style="color: #A9A9A9; font-size: 16px"></i>&nbsp;&nbsp;<asp:Label ID="lblcombination" runat="server" Text="Combined Attendance" />
                                            <i style="color: red; display: none; font-size: 12px">* Click the date, it will show the detail of that particular date in side window.</i>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="col-md-12" style="display: none">
                                                <div class="box-body no-padding">
                                                    <div class="col-md-2" style="display: none">
                                                        <asp:Label ID="lblEHlegend" runat="server" />
                                                    </div>
                                                    <div class="col-md-2">
                                                        <asp:Label ID="lblHw" runat="server" />
                                                    </div>
                                                    <div class="col-md-2">
                                                        <asp:Label ID="lblEHrs" runat="server" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="box box-primary">
                                                    <div class="box-body no-padding">
                                                        <div id="calendar"></div>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>

                                        <div class="col-md-4">
                                            <div class="panel-group" id="accordion">
                                                <br />
                                                <asp:LinkButton runat="server" ID="btnMail" OnClientClick="return doCapture();" Text="&nbsp;&nbsp;Send Mail" data-toggle="modal" data-target="#myModal" CssClass="btn save-btn fa fa-envelope-o" Style="width: 95%; align-content: center;"></asp:LinkButton>
                                                <br />
                                                <br />
                                                <br />
                                                <div class="panel panel-default">
                                                    <div class="panel-heading1">
                                                        <h4 class="panel-title">
                                                            <a data-toggle="collapse" data-parent="#accordion" href="#DailyAtt">Daily Attendance Details -
                                                                <asp:Label ID="lblUserName1" runat="server"></asp:Label>
                                                            </a>
                                                        </h4>
                                                    </div>
                                                    <div id="DailyAtt" class="panel-collapse collapse in">
                                                        <div class="panel-body">
                                                            <table class="table das-table1">
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_ShiftDate" Text="Shift Date" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%">
                                                                        <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;&nbsp;
                                            <asp:Label ID="txt_ShiftDate" runat="server" Text="01-01-2017"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_ShiftDetails" Text="Shift Details" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%">
                                                                        <i class="fa fa-exchange" aria-hidden="true" style="color: black !important"></i>&nbsp;&nbsp;
                                            <asp:Label ID="txt_ShiftDetails" runat="server" Text="MRS ( 09:00 AM to 06:00 PM )"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr style="display: none">
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_ShiftDefineHrs" Text="Total Working Hours" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td>
                                                                        <i class="fa fa-clock-o" aria-hidden="true" style="font-size: 16px"></i>&nbsp;&nbsp;
                                            <asp:Label ID="lbl_ShiftDefineHours" runat="server" Text="08:00"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr style="display: none">
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_FirstIntime" Text="Shift In Time" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td>
                                                                        <i class="fa fa-clock-o" aria-hidden="true" style="font-size: 16px"></i>&nbsp;&nbsp;
                                            <asp:Label ID="txt_FirstIntime" runat="server" Text="09:00 AM"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr style="display: none">
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_LastOuttime" Text="Shift Out Time" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td>
                                                                        <i class="fa fa-clock-o" aria-hidden="true" style="font-size: 16px"></i>&nbsp;&nbsp;
                                            <asp:Label ID="txt_LastOuttime" runat="server" Text="09:00 PM"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr style="display: none">
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_WorkHours" runat="server" Text="Worked Hours"></asp:Label>
                                                                    </td>
                                                                    <td>
                                                                        <i class="fa fa-clock-o" aria-hidden="true" style="font-size: 16px"></i>&nbsp;&nbsp;
                                            <asp:Label ID="txt_WorkHours" runat="server" Text="09:00"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_LateHours" runat="server" Text="Late Hours"></asp:Label>
                                                                    </td>
                                                                    <td style="color: #D50000 !important">
                                                                        <i class="fa fa-clock-o" aria-hidden="true" style="font-size: 16px"></i>&nbsp;&nbsp;
                                            <asp:Label ID="txt_LateHours" runat="server" Text="00:00"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_EarlyExitHours" Text="Early Exit Hours" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="color: #D50000 !important">
                                                                        <i class="fa fa-clock-o" aria-hidden="true" style="font-size: 16px"></i>&nbsp;&nbsp;   
                                            <asp:Label ID="txt_EarlyExitHours" runat="server" Text="00:00"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_Lunchhours" runat="server" Text="Lunch hours"></asp:Label>
                                                                    </td>
                                                                    <td>
                                                                        <i class="fa fa-clock-o" aria-hidden="true" style="font-size: 16px"></i>&nbsp;&nbsp;
                                            <asp:Label ID="txt_Lunchhours" runat="server" Text="00:00"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_BrackHrs" runat="server" Text="Break hours"></asp:Label>
                                                                    </td>
                                                                    <td>
                                                                        <i class="fa fa-clock-o" aria-hidden="true" style="font-size: 16px"></i>&nbsp;&nbsp;
                                            <asp:Label ID="txt_BrackHrs" runat="server"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr style="display: none">
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_Attendancedetails" runat="server" Text="Attendance details"></asp:Label>
                                                                    </td>
                                                                    <td>
                                                                        <i class="fa fa-list-alt" aria-hidden="true"></i>&nbsp;&nbsp;
                                            <asp:Label ID="txt_Attendancedetails" runat="server" Text="Present / Present"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default">
                                                    <div class="panel-heading1">
                                                        <h4 class="panel-title">
                                                            <a data-toggle="collapse" data-parent="#accordion" href="#MonthlyAtt">Monthly Attendance Details -
                                                                <asp:Label ID="lblUserName2" runat="server"></asp:Label>
                                                            </a>
                                                        </h4>
                                                    </div>
                                                    <div id="MonthlyAtt">
                                                        <div class="panel-body">
                                                            <table class="table das-table1">
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_Month" Text="Month" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%;">
                                                                        <i class="fa fa-calendar-o" aria-hidden="true"></i>&nbsp;&nbsp;
                                                <asp:Label ID="txt_MonthName" runat="server" Text="8"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_Present" Text="Present Days" runat="server"></asp:Label>
                                                                        <br />
                                                                        <span style="font-size: xx-small;">(Present + Onduty)</span>
                                                                    </td>
                                                                    <td style="width: 50%; vertical-align: central; align-items: center">
                                                                        <i class="fa fa-user" aria-hidden="true" style="color: #83DAF6 !important; padding-top: 13px"></i>&nbsp;&nbsp;
                                                <asp:Label ID="txt_Present" runat="server" Text="8" Style="padding-top: 13px"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_AbsentDays" Text="Absent Days" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%">
                                                                        <i class="fa fa-times" aria-hidden="true"></i>&nbsp;&nbsp;
                                                <asp:Label ID="txt_AbsentDays" runat="server" Text="2"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lblLeaveDays" Text="Leave Days" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%">
                                                                        <i class="fa fa-check-square-o" aria-hidden="true" style="color: #00CC71 !important"></i>&nbsp;&nbsp;
                                                <asp:Label ID="txt_LeaveDays" runat="server" Text="1"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_Holidays" Text="Holiday Days" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%">
                                                                        <i class="fa fa-umbrella" aria-hidden="true" style="color: darkblue !important"></i>&nbsp;&nbsp;
                                                <asp:Label ID="txt_Holidays" runat="server" Text="2"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_WeeklyOffDays" Text="Weekly Off Days" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%">
                                                                        <i class="fa fa-calendar" aria-hidden="true" style="color: blueviolet"></i>&nbsp;&nbsp;
                                                <asp:Label ID="txt_WeeklyOffDays" runat="server" Text="4"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_MonthDaysCount" Text="Total" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <asp:Label ID="lblTotaldays" runat="server" Text="4"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default" style="display: none">
                                                    <div class="panel-heading1">
                                                        <h4 class="panel-title">
                                                            <a data-toggle="collapse" data-parent="#accordion" href="#DailyTeam">Daily Team Attendance Details </a>
                                                        </h4>
                                                    </div>
                                                    <div id="DailyTeam" class="panel-collapse collapse">
                                                        <div class="panel-body">
                                                            <table class="table das-table1">
                                                                <tr>
                                                                    <td colspan="2">Total Employees : 11
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_PresentEmployee" Text="Present" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%;">
                                                                        <i class="fa fa-user" aria-hidden="true" style="color: #83DAF6 !important"></i>&nbsp;&nbsp;
                                                <asp:Label ID="txt_PresentEmployee" runat="server" Text="8"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_AbsentEmployee" Text="Absent" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%">
                                                                        <i class="fa fa-times" aria-hidden="true"></i>&nbsp;&nbsp;
                                                <asp:Label ID="txt_AbsentEmployee" runat="server" Text="2"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_LeaveEmployee" Text="Leave" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%">
                                                                        <i class="fa fa-check-square-o" aria-hidden="true" style="color: #00CC71 !important"></i>&nbsp;&nbsp;
                                                <asp:Label ID="txt_LeaveEmployee" runat="server" Text="1"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_Punctuality" Text="Punctuality" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%">
                                                                        <i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;&nbsp;
                                                <asp:Label ID="txt_Punctuality" runat="server" Text="4"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_LateEntry" Text="Late Entrys" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%">
                                                                        <i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;&nbsp;
                                                <asp:Label ID="txt_LateEntry" runat="server" Text="4"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default" style="display: none">
                                                    <div class="panel-heading1">
                                                        <h4 class="panel-title">
                                                            <a data-toggle="collapse" data-parent="#accordion" href="#MonthlyTeam">Monthly Team Attendance Details </a>
                                                        </h4>
                                                    </div>
                                                    <div id="MonthlyTeam" class="panel-collapse collapse">
                                                        <div class="panel-body">
                                                            <table class="table das-table1">
                                                                <tr>
                                                                    <td colspan="2">Total Employees : 11
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_TotalPresent" Text="Present" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%;">
                                                                        <i class="fa fa-user" aria-hidden="true" style="color: #83DAF6 !important"></i>&nbsp;&nbsp;
                                                <asp:Label ID="txt_TotalPresent" runat="server" Text="8"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_TotalAbsent" Text="Absent" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%">
                                                                        <i class="fa fa-times" aria-hidden="true"></i>&nbsp;&nbsp;
                                                <asp:Label ID="txt_TotalAbsent" runat="server" Text="2"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="empheader">
                                                                        <asp:Label ID="lbl_TotalLeave" Text="Leave" runat="server"></asp:Label>
                                                                    </td>
                                                                    <td style="width: 50%">
                                                                        <i class="fa fa-check-square-o" aria-hidden="true" style="color: #00CC71 !important"></i>&nbsp;&nbsp;
                                                <asp:Label ID="txt_TotalLeave" runat="server" Text="1"></asp:Label>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default" style="display: none">
                                                    <div class="panel-heading1">
                                                        <h4 class="panel-title">
                                                            <a data-toggle="collapse" data-parent="#accordion" href="#MyShortcuts">My Shortcuts </a>
                                                        </h4>
                                                    </div>
                                                    <div id="MyShortcuts" class="panel-collapse collapse">
                                                        <div class="panel-body">
                                                            <div class="col-md-12" style="padding-top: 10px; padding-bottom: 10px">
                                                                <div class="col-md-12">
                                                                    <asp:HiddenField ID="lbldate" runat="server"></asp:HiddenField>
                                                                </div>
                                                                <div class="col-md-12">
                                                                    <asp:RadioButton ID="rbtLeaveApplication" runat="server" Text="Apply Leave" CssClass="radio radio-primary" GroupName="Option" Checked="true" />
                                                                </div>
                                                                <div class="col-md-12">
                                                                    <asp:RadioButton ID="rbtPermissionApplication" runat="server" Text="Apply Permission" CssClass="radio radio-primary" GroupName="Option" />
                                                                </div>
                                                                <div class="col-md-12">
                                                                    <asp:RadioButton ID="rbtOnduty" runat="server" Text="Apply Onduty" CssClass="radio radio-primary" GroupName="Option" />
                                                                </div>
                                                                <div class="col-md-12">
                                                                    <asp:Button runat="server" ID="btnApply" Text="Go" OnClick="btnApply_Click" class="btn btn-primary pull-right" />
                                                                    <%--<button type="button" class="btn btn-primary pull-right" data-dismiss="modal">
                                Close</button>--%>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="callout callout-info" style="margin-bottom: 0!important;">
                                                <asp:Label ID="lblImportNote" runat="server"></asp:Label>
                                            </div>
                                            <br />
                                            <ul style="background: #fff">
                                                <li>
                                                    <asp:Label ID="lblnotes1" runat="server" Text="By clicking the respective date, the remaining details like Shift, Total Late Hrs ,Total Break Hrs, will be shown in the right side of the view."></asp:Label>
                                                </li>
                                            </ul>
                                        </div>

                                    </div>
                                    <div class="col-md-12">
                                        <div id="createEventModal" class="modal fade">
                                            <div class="modal-dialog" style="width: 400px;">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                        <h4 class="modal-title">Applye For:</h4>
                                                    </div>
                                                    <div id="modalBody" class="modal-body">
                                                        <div class="row form-group">
                                                            <div class="col-xs-5">
                                                                <label for="title">From Date</label>
                                                            </div>
                                                            <div class="col-xs-7">
                                                                <input class="form-control" type="text" id="fromdate">
                                                            </div>
                                                        </div>
                                                        <div class="row form-group">
                                                            <div class="col-xs-5">
                                                                <label for="title">To Date</label>
                                                            </div>
                                                            <div class="col-xs-7">
                                                                <input class="form-control" type="text" id="todate">
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-xs-5">
                                                            </div>
                                                            <div class="col-xs-7">
                                                                <asp:RadioButtonList ID="rdbtnlist1" runat="server">
                                                                    <asp:ListItem Text="Leave Application" Value="1" Selected="True"></asp:ListItem>
                                                                    <asp:ListItem Text="Permission Application" Value="2"></asp:ListItem>
                                                                    <asp:ListItem Text="Onduty Entry" Value="3"></asp:ListItem>
                                                                </asp:RadioButtonList>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                                                        <button type="submit" class="btn btn-primary" id="submitButton">Apply</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="tab2" runat="server">
                            <div class="form-horizontal">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-md-12">
                                            <i class="fa fa-square" style="color: #008247; font-size: 16px"></i>&nbsp;&nbsp;<asp:Label ID="lblteamPresent" runat="server" />&nbsp;
                                            <i class="fa fa-square" style="color: #FF5151; font-size: 16px"></i>&nbsp;&nbsp;<asp:Label ID="lblteamAbsent" runat="server" />&nbsp;
                                            <i class="fa fa-square" style="color: #D0457B; font-size: 16px"></i>&nbsp;&nbsp;<asp:Label ID="lblteamLeave" runat="server" />&nbsp;
                                            <i style="color: red; font-size: 12px">* Click the count value, it will popup the detail of the particular date.</i>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="box box-primary">
                                                <div id="Teamcalendar"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->
    </section>
    <script type="text/javascript">
        $('.responsive-tabs').responsiveTabs({
            accordionOn: ['xs', 'sm']
        });
    </script>
</asp:Content>
