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

<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>09
    <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 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();
            }
        }
    </script>
    <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>

    <section class="content">
        <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;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">
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <div class="panel-group" id="accordion">
                                                <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 </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 </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>
                                    <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>
    <script>
       
        <%--function MyCalendarDataTeam(MyCalendarDataString) {

            $('#tablist a[href="#ctl00_BodyContentPH_tab2"]').tab('show');
            if (MyCalendarDataString != "") {
                var ArrTotalEmployee = MyCalendarDataString.split('~');
                var ArrMyCalendarMonth = ArrTotalEmployee[0].split('%');
                var ArrMyCalendarDay = [];
                var DataPoints = [];
                for (var i = 0; i < ArrMyCalendarMonth.length; i++) {
                    ArrMyCalendarDay = ArrMyCalendarMonth[i].split(',');
                    var date = ArrMyCalendarDay[0];
                    if (ArrMyCalendarDay[1] == "P - 0 / 0" && ArrMyCalendarDay[2] == "A - 0 / 0" && ArrMyCalendarDay[3] == "L - 0 / 0") {
                        if (ArrMyCalendarDay[4] != "W - 0 / 0") {
                            var SplitData = ArrMyCalendarDay[4].split('-');
                            var SplitCount = SplitData[1].split('/');
                            if (ArrTotalEmployee[1].trim() == SplitCount[0].trim() && ArrTotalEmployee[1].trim() == SplitCount[1].trim()) {
                                DataPoints.push({
                                    title: "Weekly Off",
                                    start: date,
                                    url: 'Reports/TA_UI_Report_ReportViewer.aspx?ReportName=MonthlyAttendance&MyEmpAutoID=' +<%= Session["EmpAutoID"].ToString() %> +'&MonthlydataLoadingVer=0&dtFrom=' + date + '&dtTo=' + date + '&empid=&shft=0&EmpName=&Level=0&EmpCategory=0&EmpType=0&ParentLevelId=0&UserGroupName=SuperAdmin&GradeLevel=0&MinWorkHours=&SwipeCard=&Designation=0&Gender=Both',
                                    color: '#02749E',
                                    textColor: '#FFF',
                                    center: true,
                                });
                            }
                            else {
                                DataPoints.push({
                                    title: ArrMyCalendarDay[1] + '\n' + ArrMyCalendarDay[2] + '\n' + ArrMyCalendarDay[3],
                                    start: date,
                                    url: 'Reports/TA_UI_Report_ReportViewer.aspx?ReportName=MonthlyAttendance&MyEmpAutoID=' +<%= Session["EmpAutoID"].ToString() %> +'&MonthlydataLoadingVer=0&dtFrom=' + date + '&dtTo=' + date + '&empid=&shft=0&EmpName=&Level=0&EmpCategory=0&EmpType=0&ParentLevelId=0&UserGroupName=SuperAdmin&GradeLevel=0&MinWorkHours=&SwipeCard=&Designation=0&Gender=Both',
                                    color: '#33aae6',//#FFF
                                    textColor: '#FFF',
                                    tooltip: 'Present - First Session / Second Session \nAbsent - First Session / Second Session \nLeave - First Session / Second Session',
                                    center: true,
                                });

                            }
                        }
                        else if (ArrMyCalendarDay[5] != "H - 0 / 0") {
                            var SplitData = ArrMyCalendarDay[5].split('-');
                            var SplitCount = SplitData[1].split('/');
                            if (ArrTotalEmployee[1].trim() == SplitCount[0].trim() && ArrTotalEmployee[1].trim() == SplitCount[1].trim()) {
                                DataPoints.push({
                                    title: "Holiday",
                                    start: date,
                                    url: 'Reports/TA_UI_Report_ReportViewer.aspx?ReportName=MonthlyAttendance&MyEmpAutoID=' +<%= Session["EmpAutoID"].ToString() %> +'&MonthlydataLoadingVer=0&dtFrom=' + date + '&dtTo=' + date + '&empid=&shft=0&EmpName=&Level=0&EmpCategory=0&EmpType=0&ParentLevelId=0&UserGroupName=SuperAdmin&GradeLevel=0&MinWorkHours=&SwipeCard=&Designation=0&Gender=Both',
                                    color: '#FF7F00',
                                    textColor: '#FFF',
                                    center: true,
                                });
                            }
                            else {
                                DataPoints.push({
                                    title: ArrMyCalendarDay[1] + '\n' + ArrMyCalendarDay[2] + '\n' + ArrMyCalendarDay[3],
                                    start: date,
                                    url: 'Reports/TA_UI_Report_ReportViewer.aspx?ReportName=MonthlyAttendance&MyEmpAutoID=' +<%= Session["EmpAutoID"].ToString() %> +'&MonthlydataLoadingVer=0&dtFrom=' + date + '&dtTo=' + date + '&empid=&shft=0&EmpName=&Level=0&EmpCategory=0&EmpType=0&ParentLevelId=0&UserGroupName=SuperAdmin&GradeLevel=0&MinWorkHours=&SwipeCard=&Designation=0&Gender=Both',
                                    color: '#33aae6',//#FFF
                                    textColor: '#FFF',
                                    tooltip: 'Present - First Session / Second Session \nAbsent - First Session / Second Session \nLeave - First Session / Second Session',
                                    center: true,
                                });
                            }
                        }
                        else {
                            DataPoints.push({
                                title: ArrMyCalendarDay[1] + '\n' + ArrMyCalendarDay[2] + '\n' + ArrMyCalendarDay[3],
                                start: date,
                                url: 'Reports/TA_UI_Report_ReportViewer.aspx?ReportName=MonthlyAttendance&MyEmpAutoID=' +<%= Session["EmpAutoID"].ToString() %> +'&MonthlydataLoadingVer=0&dtFrom=' + date + '&dtTo=' + date + '&empid=&shft=0&EmpName=&Level=0&EmpCategory=0&EmpType=0&ParentLevelId=0&UserGroupName=SuperAdmin&GradeLevel=0&MinWorkHours=&SwipeCard=&Designation=0&Gender=Both',
                                color: '#33aae6',//#FFF
                                textColor: '#FFF',
                                tooltip: 'Present - First Session / Second Session \nAbsent - First Session / Second Session \nLeave - First Session / Second Session',
                                center: true,
                            });
                        }
                }
                else {
                    DataPoints.push({
                        title: ArrMyCalendarDay[1] + '\n' + ArrMyCalendarDay[2] + '\n' + ArrMyCalendarDay[3],
                        start: date,
                        url: 'Reports/TA_UI_Report_ReportViewer.aspx?ReportName=MonthlyAttendance&MyEmpAutoID=' +<%= Session["EmpAutoID"].ToString() %> +'&MonthlydataLoadingVer=0&dtFrom=' + date + '&dtTo=' + date + '&empid=&shft=0&EmpName=&Level=0&EmpCategory=0&EmpType=0&ParentLevelId=0&UserGroupName=SuperAdmin&GradeLevel=0&MinWorkHours=&SwipeCard=&Designation=0&Gender=Both',
                        color: '#33aae6',//#FFF
                        textColor: '#FFF',
                        tooltip: 'Present - First Session / Second Session \nAbsent - First Session / Second Session \nLeave - First Session / Second Session',
                        center: true,
                    });
                }
            }
        }
        $('#Teamcalendar').fullCalendar({
            header: {
                left: 'prev,next today week',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            buttonText: {
                today: 'today',
                month: 'month',
                week: 'week',
                day: 'day'
            },
            events: DataPoints,
            eventRender: function (event, element) {
                element.attr('title', event.tooltip);
            },
            eventClick: function (event) {
                // opens events in a popup window
                if (event.url != null) {
                    //alert(event.start.format());
                    window.open(event.url, 'gcalevent', 'left=10px, top=60px, width=1000px, height=600px, scrollbars=yes, status=no, resizable=yes');
                    return false;
                }
            }
        });
    }--%>
        <%-- function MyCalendarData(MyCalendarDataString) {
        if (MyCalendarDataString != "") {
            var ArrMyCalendarMonth = MyCalendarDataString.split('%');
            //var arr = ArrMyCalendarMonth.split('%');
            var ArrMyCalendarDay = [];
            var DataPoints = [];
            for (var i = 0; i < ArrMyCalendarMonth.length; i++) {
                ArrMyCalendarDay = ArrMyCalendarMonth[i].split(',');
                var date = ArrMyCalendarDay[2];
                var Datesplit = date.split('-');
                var d = Datesplit[2],
                    m = Datesplit[1],
                    y = Datesplit[0];
                if (ArrMyCalendarDay[5] == ArrMyCalendarDay[6]) {
                    if (ArrMyCalendarDay[5] == "Present") {
                        DataPoints.push({
                            title: 'HW : ' + ArrMyCalendarDay[4] + ' - EH : ' + ArrMyCalendarDay[7],
                            start: ArrMyCalendarDay[2],
                            //url: 'Reports/TA_UI_Report_ReportViewer.aspx?ReportName=MonthlyAttendance&MonthlydataLoadingVer=0&dtFrom=' + ArrMyCalendarDay[2] + '&dtTo=' + ArrMyCalendarDay[2] + '&empid=' + ArrMyCalendarDay[1] + '&shft=0&EmpName=&Level=0&EmpCategory=0&EmpType=0&ParentLevelId=0&UserGroupName=SuperAdmin&GradeLevel=0&MinWorkHours=&SwipeCard=&Designation=0&Gender=Both',
                            //backgroundColor: "#83DAF6", //red
                            //borderColor: "#fff", //red
                            color: '#008247',
                            center: true,
                            tooltip: 'HW : Hours Worked - EH : Late In + Early Exit',
                            //description: ' HW : ' + ArrMyCalendarDay[4] + ' - EH : ' + ArrMyCalendarDay[6]
                        });
                        //DataPoints.push({
                        //    title: "Work Hrs: " + ArrMyCalendarDay[4],
                        //    start: ArrMyCalendarDay[2],
                        //    backgroundColor: "#fff", //red
                        //    borderColor: "#fff", //red
                        //    center: true
                        //});
                        //DataPoints.push({
                        //    title: "Exp Hrs : " + ArrMyCalendarDay[6],
                        //    start: ArrMyCalendarDay[2],
                        //    backgroundColor: "#fff", //red
                        //    borderColor: "#fff", //red
                        //    center: true
                        //});
                    }
                    else if (ArrMyCalendarDay[5] == "Weekly Off") {
                        DataPoints.push({
                            title: 'Weekly Off',
                            start: ArrMyCalendarDay[2],
                            //rendering: 'background',
                            color: '#02749E'
                        });
                    }
                    else if (ArrMyCalendarDay[5] == "Holiday") {
                        DataPoints.push({
                            title: 'Holiday',
                            start: ArrMyCalendarDay[2],
                            //rendering: 'background',
                            color: '#FF7F00'
                        });
                    }
                    else if (ArrMyCalendarDay[5] == "Absent") {
                        DataPoints.push({
                            title: 'Absent',
                            start: ArrMyCalendarDay[2],
                            //rendering: 'background',
                            color: '#FF5151'
                        });
                    }
                    else {
                        DataPoints.push({
                            title: 'Leave - ' + ArrMyCalendarDay[5],
                            start: ArrMyCalendarDay[2],
                            //rendering: 'background',
                            color: '#D0457B'
                        });
                    }
                }
                else {
                    DataPoints.push({
                        title: ArrMyCalendarDay[5] + " / " + ArrMyCalendarDay[6],
                        start: ArrMyCalendarDay[2],
                        //rendering: 'background',
                        color: '#A9A9A9'
                    });
                }
            }
        }
        else {
            var date = new Date();
            var d = date.getDate(),
                m = date.getMonth(),
                y = date.getFullYear();
            var DataPoints = [];
        }
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today week',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            buttonText: {
                today: 'today',
                month: 'month',
                week: 'week',
                day: 'day'
            },
            dayClick: function (date, jsEvent, view) {
                //$('#<%= lbldate.ClientID %>').val(date.format());
                var formatdate;
                formatdate = date.format();
                //alert(formatdate);
                ajaxGetmyCalendar(formatdate);
                //$('#myModal').modal('show');
            },
            eventClick: function (event) {
                var formatdate;
                formatdate = event.start.format();
                ajaxGetmyCalendar(formatdate);
                return false;
            },
            //prev: function () {
            //    $('#calendar').load("events/findbymonth/" + $('#calendar').fullCalendar('getDate').getMonth());
            //},
            //next: function () {
            //    $('#calendar').load("events/findbymonth/" + $('#calendar').fullCalendar('getDate').getMonth());
            //},
            //Random default events
            events: DataPoints,
            eventRender: function (event, element) {
                element.attr('title', event.tooltip);
            },
            //eventClick: function (event) {
            //    // opens events in a popup window
            //    if (event.url != null) {
            //        window.open(event.url, 'gcalevent', 'left=10px, top=60px, width=1000px, height=600px, scrollbars=yes, status=no, resizable=yes');
            //        return false;
            //    }
            //}
            //,
            //eventRender: function (event, element, view) {
            //    element.find('.fc-title').append('<br/><br/><br/><div class="hr-line-solid-no-margin"></div><span style="font-size: 10px; text-decoration: none !important;">' + event.description + '</span></div>');
            //}
        });
    }--%>
    </script>
</asp:Content>
