
<link href="<?php echo SITE_LINK . THEME_PATH; ?>plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
<link href="<?php echo THEME_PATH; ?>plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="<?php echo THEME_PATH; ?>plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css" rel="stylesheet" type="text/css"/>
<script src="<?php echo THEME_PATH; ?>plugins/hammer.min.js"></script>
<script src="<?php echo THEME_PATH; ?>plugins/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="<?php echo THEME_PATH; ?>plugins/moment/moment.min.js"></script>
<script>var EventStatus = <?php echo json_encode($Announce->GetStatuses()) ;?>;</script>
<script>var Event = <?php echo json_encode($Update) ;?>;</script>
<script src="<?php echo THEME_PATH; ?>js/pages.calendar.min.js"></script>
<script src="<?php echo THEME_PATH; ?>js/calendar.js"></script>
<script src="<?php echo THEME_PATH; ?>plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
<?php 
include("xhr/calendar.php");
include("Views/HRM/AssignLeave.php");    
?>
<style type="text/css">
    button,#eventView{
        background-color:#12AFCB;
        color:#fff;
    }
    div[class*="eventState-"]{
        color:#fff;
    }
    .eventState-0,#CurrentAuditsTable .StatusTD-0 > .TableStatusContainer:before{
        background-color:rgb(247,150,70);
    }
    .eventState-1,#CurrentAuditsTable .StatusTD-1 > .TableStatusContainer:before{
        background-color:rgb(240,62,70);
    }
    .eventState-2,#CurrentAuditsTable .StatusTD-2 > .TableStatusContainer:before{
        background-color:rgb(0,145,65);
    }
    .eventState-3,#CurrentAuditsTable .StatusTD-3 > .TableStatusContainer:before{
        background-color:rgb(79,129,189);
    }
    .eventState-4,#CurrentAuditsTable .StatusTD-4 > .TableStatusContainer:before{
        background-color:rgb(150,150,150);
    }
    /*
    .eventState-5,#CurrentAuditsTable .StatusTD-5 > .TableStatusContainer:before{
    background-color:rgb(79,129,189);
    }
    .eventState-6,#CurrentAuditsTable .StatusTD-6 > .TableStatusContainer:before{
    background-color:rgb(150,150,150);
  
    }
      */
    #FrequenceDropDown > button{
        height: 35px;
        -webkit-border-radius:0;
        -moz-border-radius:0;
        border-radius:0;
    }
    #calendarContainer,.calendar{
        background: #fff;
    }
    #calendarContainer{
        opacity: 0
    }
    #txtEventFrequence{
        display:inline-block;
    }
    #FrequencyValueST{
        font-weight:bold;
    }
    #CalendarLoading{
        text-align: center;
        width: 500px;
        margin: 100px auto;
        font-size: 15px;
        border: 1px dashed rgba(0, 0, 0, 0.3);
        padding: 21px;
        color: rgb(85, 85, 85);
    }
    #NewAuditNoteTextArea{
        margin-top:13px;
        resize:none;
        height:100px;
    }
    #CancelNewAuditAction{
        width:auto;
    }
    #NewAuditMakeAction,#CancelNewAuditAction,#NewAuditMakeAction ~ .dropdown-menu,#NewAuditMakeAction ~ .dropdown-menu > li > a,#SubmitNewAuditAction{
        -webkit-border-radius:0 !important;
        -moz-border-radius:0 !important;
        border-radius:0 !important;
    }
    #NewAuditMakeAction ~ .dropdown-menu > li:first-child{
        margin-top:10px;
    }
    #NewAuditMakeAction ~ .dropdown-menu > li:last-child{
        margin-bottom:10px;
    }
    #NewAuditMakeAction ~ .dropdown-menu > li > a:hover{
        background:#e5e5e5;
    }
    #AddMembersContainer > .Member{
        margin-bottom:10px;
    }
    #AddMembersContainer > .Member > .row{
        margin:0;
    }
    #AddMembersContainer > .Member > .row > .col-md-8{
        padding-left: 0;
    }
    #AddMembersContainer > .Member > .row > .col-md-4{
        padding-right:0;
    }
    #AddMembersContainer .dropdown-menu{
        width: auto;
        min-width: auto;
    }
    #AddMembersContainer .MemberSelector > .dropdown-toggle{
        border-radius:35px;
        left:10px;
        width:110px;
    }
    #AddMembersContainer .MemberSelector > .dropdown-toggle > span{
        width: 100%;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #AddMembersContainer .MemberRemover,#AddMembersContainer .MemberAdder{
        color: rgb(240,62,70);
        font-size: 22px;
        padding: 5px;
        cursor:pointer;
        position:relative;
        opacity:0;
    }
    #AddMembersContainer .MemberAdder{
        color:rgb(0,145,65);
        font-size:18px;
        top:2px;
    }
    #AddMembersContainer > .Member:hover .MemberRemover,#AddMembersContainer > .Member:hover .MemberAdder{
        opacity:1;
    }
    #DateTimeEdit .form-control{
        display: inline-block;
        height: auto;
        width: 90px;
        font-size: 15px;
        min-height: auto;
        margin-left: 10px;
    }
    #DateTimeEdit td{
        padding:5px 0;
    }
    .select2-selection.select2-selection--multiple{
        height:auto !important;
    }
    .select2-search.select2-search--inline{
        font-size: 12px !important;
        padding:0;
    }
    .select2-selection--multiple .select2-selection__choice{
        margin-bottom:5px !important;
    }
    #main-wrapper{
        margin:6px;
    }
    #ViewMode{
        margin:10px 0;
    }
    #ViewMode > .btn-group > .btn > .radio{
        position:absolute;
        visibility:hidden;
    }
    #CurrentAuditsTable thead th{
        border: 1px solid rgb(204, 204, 204);
        color:#fff;
    }
    #CurrentAuditsTable tbody tr{
        cursor:pointer;
    }
    #CurrentAuditsTable tbody tr:hover > td{
        background:#f2f2f2;
    }
    #CurrentAuditsTable tbody tr td{
        position:relative;
        border: 1px solid rgb(204, 204, 204);
        padding: 7px;
        text-align:center;
    }
    #CurrentAuditsTable tbody tr td:nth-child(2),#CurrentAuditsTable tbody tr td:nth-child(3){
        text-align:left;
    }
    #CurrentAuditsTable th{
        text-align:center;
        padding:5px;
    }
    #CalendarBrowse .datepicker{
        padding:0 !important;
    }
    #CurrentAuditsTable .TableStatusContainer{
        position:relative;
        text-indent:12px;
    }
    #CurrentAuditsTable .TableStatusContainer:before{
        content:"";
        position:absolute;
        left:0px;
        top:50%;
        margin-top:-5px;
        width:10px;
        height:10px;
        -webkit-border-radius:40px;
        -moz-border-radius:40px;
        border-radius:40px;
    }
    #eventDelete,#EventCloser{
        float:right;
        width:auto;
        -webkit-border-radius:0;
        -moz-border-radius:0;
        border-radius:0;
    }
    #EventCloser{
        position:absolute;
        right:10px;
        z-index:999;
    }
    #DateTimeView.hidden{
        display:block !important;
        visibility:hidden;
        height:50px;
    }
    #CurrentAuditsTable tr.headerAudit{
        background-color:#12AFCB;
    }
    .datepicker table tr td span.active, .datepicker table tr td span:hover, .datepicker table tr td span:focus{
        background-color:#12AFCB !important;
    }
    .calendar .weeks-wrapper .week {
        padding-right: 0px;
        margin-left: 4px;
    }
    .calendar .options .months .month{
        padding-right: 47px;
        margin-left :10px  
    }
    .calendar .calendar-container .event-container .event-Employee_Name{
        margin-top: -10px;
        line-height: 20px;
        margin-left: -5px;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .calendar .calendar-container .event-container .time-wrap {
        line-height: 0px;
        margin-left: -5px;
    }
    .quickview-wrapper.open{
        top:60px;
        z-index: 9999;
    }
    .calendar .calendar-container .week-view .tble .trow .tcell.active{
        background-color: #FDDDDD; 
    }
    .calendar .calendar-container .event-container .event-title {
        margin-left: -5px;
    }
</style>
<div id="CalendarLoading"><?php print CommonLanguage::getMessage('loading');?></div>
<div class="quickview-wrapper calendar-event" id="calendar-event">
    <div class="view-port clearfix" id="eventFormController">
        <div class="view bg-white">
            <div class="scrollable">
                <div>
                    <button id="EventCloser" class="btn btn-default"><i class="fa fa-remove"></i></button>
                    <!--                    <a id="EventCloser" class="fa fa-close pg-close text-master link pull-right" data-toggle="quickview" data-toggle-element="#calendar-event" href="#"></a>-->
                    <div id="DateTimeView" style="padding: 0 30px;">
                        <h4 id="event-date">&amp;</h4>
                        <div class="m-b-20">
                            <i class="fa fa-clock-o"></i>
                            <span id="lblfromTime"></span> <?php print CommonLanguage::getMessage('To');?>
                            <span id="lbltoTime"></span>
                        </div>
                    </div>
                    <div id="DateTimeEdit" class="hidden">
                        <table>
                            <tr>
                                <td><?php print CommonLanguage::getMessage('Date');?>:</td>
                                <td colspan="3"><input class="form-control" style="width:215px" /></td>
                            </tr>
                            <tr>
                                <td><?php print CommonLanguage::getMessage('From');?></td>
                                <td><input class="form-control" data-format="hh:mm:ss" /></td>
                                <td>&nbsp;&nbsp;&nbsp;To</td>    
                                <td><input class="form-control" data-format="hh:mm:ss" /></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="p-t-15">
                    <input id="eventIndex" name="eventIndex" type="hidden">
                    <input id="LeaveID" name="LeaveID" type="hidden">
                    <div class="form-group-attached">
                        <div class="form-group form-group-default ">
                            <label><?php print CommonLanguage::getMessage('leave_name');?></label>
                            <div id="txtEventName"></div>
                            <!--                            <input class="form-control hidden"/>-->
                        </div>
                        <div class="row clearfix cursor" style="display:block">
                            <div class="form-group form-group-default">
                                <label><?php print CommonLanguage::getMessage('employee_name');?></label>
                                <div id="txtEventEmployeeName"></div>
                            </div>
                        </div>
                        <div class="row clearfix ">
                            <div class="form-group form-group-default" data-navigate="" data-view-port="#eventFormController" data-view-animation="push-parrallax">
                                <label><?php print CommonLanguage::getMessage('status');?></label>
                                <div id="txtEventStatus"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="p-l-10 p-r-15 p-t-30">
                    <button id="eventSave" class="btn btn-cons"><?php print CommonLanguage::getMessage('Edit');?></button>                   
                    <button id="eventDelete" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="content full-width full-height" id="calendarContainer">
    <div class="calendar">
        <div class="calendar-header">
            <div class="drager">
                <div class="years" id="years"></div>
            </div>
        </div>
        <div class="options">
            <div class="months-drager drager">
                <div class="months" id="months"></div>
            </div>
            <h4 class="semi-bold date" id="currentDate">&amp;</h4>
            <div class="drager week-dragger">
                <div class="weeks-wrapper" id="weeks-wrapper"></div>
            </div>
        </div>
        <div id="calendar" class="calendar-container"></div>
    </div>
</div>
