<head>
<style type="text/css">
button {
 	margin-left: 2px;
 	margin-right: 2px;
}

#messageView {
    z-index: 1114!important; /* must set here to let date picker display on top */
}

#jobAssignAttachmentView {
    z-index: 1110!important; /* must set here to let date picker display on top */
}

#AgentStatus {
    z-index: 1110!important; /* must set here to let date picker display on top */
}

#remarkInputView {
    z-index: 1111!important; /* must set here to let date picker display on top */
}

#jobDetailView {
    z-index: 1111!important; /* must set here to let date picker display on top */
}
.modal-header {
	background-color: #3c8dbc;
	color: white;
}
#calendar-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .fc-header-toolbar {
    /*
    the calendar will be butting up against the edges,
    but let's scoot in the header's buttons
    */
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
  }
</style>
</head>
<!-- Add Project Modal HTML -->
<div id="addJobAssignmentView" class="modal fade" style="overflow: auto;overflow-y: scroll;" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width: 95%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Job Assignment</h4>
            </div>
            <div class="modal-body">
	            <div id="modalAddJobAssignmentHeaderViewContent">
	        	</div>
            </div>
            <?php if($designation!=1) { ?>
                <div class="modal-footer">
                	<div id="modalAddJobAssignmentHeaderViewButtonContent">
			        </div>
                </div>
            <?php }else{ ?>
                <div class="modal-footer">
                	<div id="modalAddJobAssignmentHeaderViewButtonContentUser">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-success" onclick="return generateServiceReport();">Generate Service Report</button>
			        </div>
                </div>
            <?php } ?>
        </div>
    </div>
</div>

<!-- attachment modal -->
<div id="jobAssignAttachmentView" class="modal fade" style="overflow: auto;overflow-y: scroll;">
    <div class="modal-dialog" style="width: 764px">
        <div class="modal-content">
            <div class="modal-header" id="jobAssignAttachmentHeader" style="background-color:#31B0D5">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="requestApprovalAdditionalAttachmentTitle" >Additional Attachment</h4>
            </div>
            <div class="modal-body">
                <div id="jobAssignAttachmentContent">
                </div>
            </div>
            <div class="modal-footer" style="padding:5px">
                <div id="jobAssignAttachmentButton">
                </div>
            </div>
        </div>
    </div>
</div>


<!-- confirmation message Modal HTML -->
<div id="agentSchedule" class="modal fade" style="overflow: auto;overflow-y: scroll;" tabindex="-1">
    <div class="modal-dialog" style="width: 100%">
        <div class="modal-content">
            <div class="modal-header" id="modalConfirmationMessageHeaderContent">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="modalConfirmationMessageViewTitle" >Schedule</h4>
            </div>
            
            <div class="modal-body">
                
	            <div id="modalConfirmationMessageViewContent">
                    <div class="row">
                        <div class="col-sm-2">
                            <select id="cobSchMonth" class="form-control" onchange="showAgentSchedule();">
                                <?php echo $this->getSchMonth(); ?>
                            </select>
                        </div>
                    
                        <div class="col-sm-2">
                            <select id="cobSchYear" class="form-control" onchange="showAgentSchedule();">
                                <?php echo $this->getSchYear(); ?>
                            </select>
                        </div>
                                              
                    
                    </div>
                    <div class="row" style="margin-top: 3%;">
                        <div class="col-sm-12" style="text-align: center;overflow: auto;overflow-x: scroll;">
                            <table id='tableContent' class="table table-bordered" >

                            </table>

                        </div>
                    </div>
	        	</div>
            </div>
            <div class="modal-footer">
            	<div id="modalcCnfirmationMessageButtonContent">
            		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			   </div>
            </div>
        </div>
    </div>
</div>

<!-- confirmation message Modal HTML -->
<div id="agentSchedule2" class="modal fade" style="overflow: auto;overflow-y: scroll;" tabindex="-1">
    <div class="modal-dialog" style="width: 20%">
        <div class="modal-content">
            <div class="modal-header" id="modalConfirmationMessageHeaderContent">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="modalConfirmationMessageViewTitle" >Schedule</h4>
            </div>
            
            <div class="modal-body">
                
	            <div id="modalConfirmationMessageViewContent">
                    <div class="row">
                        <div class="col-sm-6">
                            <select id="cobSchMonth2" class="form-control" onchange="showAgentSchedule2();">
                                <?php echo $this->getSchMonth(); ?>
                            </select>
                        </div>
                        <div class="col-sm-6">
                            <select id="cobSchYear2" class="form-control" onchange="showAgentSchedule2();">
                                <?php echo $this->getSchYear(); ?>
                            </select>
                        </div>
                    </div>
               
                    <div class="row" style="margin-top: 3%;" >
                        <div class="col-sm-12" style="max-height:600px;text-align: center;overflow: auto;overflow-y: scroll;">
                            <table id='tableContent2' class="table " >

                            </table>

                        </div>
                    </div>
	        	</div>
            </div>
            <div class="modal-footer">
            	<div id="modalcCnfirmationMessageButtonContent">
            		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			   </div>
            </div>
        </div>
    </div>
</div>
<!-- confirmation message Modal HTML -->
<div id="agentSchedule3" class="modal fade" style="overflow: auto;overflow-y: scroll;" tabindex="-1">
    <div class="modal-dialog" style="width: 100%">
        <div class="modal-content">
            <div class="modal-header" id="modalConfirmationMessageHeaderContent">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="modalConfirmationMessageViewTitle" >Schedule</h4>
            </div>
            
            <div class="modal-body">
                
	            <div id="modalConfirmationMessageViewContent">
                    <div class="row">
                        <div class="col-sm-1">
                            <select id="cobSchMonth3" class="form-control" onchange="showAgentSchedule3();">
                                <?php echo $this->getSchMonth(); ?>
                            </select>
                        </div>
                        <div class="col-sm-1">
                            <select id="cobSchYear3" class="form-control" onchange="showAgentSchedule3();">
                                <?php echo $this->getSchYear(); ?>
                            </select>
                        </div>
                    </div>
               
                    <div class="row" style="margin-top: 3%;" >
                        <div class="col-sm-12" style="max-height:600px;text-align: center;overflow: auto;overflow-y: scroll;overflow-x: scroll;">
                            <table id='tableContent3' class="table table-bordered" >

                            </table>

                        </div>
                    </div>
	        	</div>
            </div>
            <div class="modal-footer">
            	<div id="modalcCnfirmationMessageButtonContent">
            		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			   </div>
            </div>
        </div>
    </div>
</div>
<!-- confirmation message Modal HTML -->
<div id="agentSchedule4" class="modal fade" style="overflow: auto;overflow-y: scroll;" tabindex="-1">
    <div class="modal-dialog" style="width: 80%;">
        <div class="modal-content">
            <div class="modal-header" id="modalConfirmationMessageHeaderContent">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="modalConfirmationMessageViewTitle" >Schedule</h4>
            </div>
            
            <div class="modal-body" style="overflow: auto;overflow-y: scroll;" >
                <div id="modalConfirmationMessageViewContent">
                    <div class="row" style="text-align: center">
                        <div class="col-sm-1">
                            <select id="cobSchMonth4" class="form-control" onchange="showAgentSchedule4();">
                                <?php echo $this->getSchMonth(); ?>
                            </select>
                        </div>
                        <div class="col-sm-1">
                            <select id="cobSchYear4" class="form-control" onchange="showAgentSchedule4();">
                                <?php echo $this->getSchYear(); ?>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <select id="cobSchAgent4" class="form-control" onchange="showAgentSchedule4();">
                                <?php echo $this->getUserOption(); ?>
                            </select>
                        </div>
                    </div>
               
                    <div class="row" style="margin-top: 3%;" >
                       
                            <div id='calendar'></div>
                    
                    </div>
	        	</div>
                    
	        	
            </div>
            <div class="modal-footer">
            	<div id="modalcCnfirmationMessageButtonContent">
            		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			   </div>
            </div>
        </div>
    </div>
</div> 
<!-- message Modal HTML -->
<div id="jobDetailView" class="modal fade" style="overflow: auto;overflow-y: scroll;z-index: 300;"  >
    <div class="modal-dialog" style="width: 60%;">
        <div class="modal-content">
            <div class="modal-header" id="modalMessageHeaderContent">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="modalMessageViewTitle" >Job Detail</h4>
            </div>
            
            <div class="modal-body">
	            <div id="jobDetailViewViewContent">
	        	</div>
            </div>
            
            <div class="modal-footer">
            	<div id="jobDetailViewButtonContent">
            		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			   </div>
            </div>
        </div>
    </div>
</div>

<!-- agent status -->
<div id="AgentStatus" class="modal fade" style="overflow: auto;overflow-y: scroll;z-index: 400;"  >
    <div class="modal-dialog" style="width: 50%;">
        <div class="modal-content">
            <div class="modal-header" id="modalMessageHeaderContent">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="modalMessageViewTitle" >Agent Status Detail</h4>
            </div>
            
            <div class="modal-body">
	            <div id="AgentStatusViewContent">
	        	</div>
            </div>
            
            <div class="modal-footer">
            	<div id="AgentStatusButtonContent">
            		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			   </div>
            </div>
        </div>
    </div>
</div>
<!-- confirmation message Modal HTML -->
<div id="remarkInputView" class="modal fade" style="overflow: auto;overflow-y: scroll;" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" id="remarkInputViewContent">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="remarkInputViewTitle" >Remarks</h4>
            </div>
            
            <div class="modal-body">
	            <div id="remarkInputViewContent">
                    <textarea class="form-control" name="checklistAgentRemarks" id="checklistAgentRemarks" cols="30" rows="3"></textarea>
	        	</div>
            </div>
            <div class="modal-footer">
            	<div id="remarkInputViewButtonContent">
            		
			   </div>
            </div>
        </div>
    </div>
</div>
<!-- generate plan -->
<div id="GeneratePlan" class="modal fade" style="overflow: auto;overflow-y: scroll;"  >
    <div class="modal-dialog" style="width: 60%;">
        <div class="modal-content">
            <div class="modal-header" id="modalMessageHeaderContent">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="modalMessageViewTitle" >Generate Plan</h4>
            </div>
            
            <div class="modal-body">
            <div id="GeneratePlanBodyContent"></div>
	        	
            </div>
            
            <div class="modal-footer">
            	<div id="GeneratePlanButtonContent">
            		
			   </div>
            </div>
        </div>
    </div>
</div>

<!-- confirmation message Modal HTML -->
<div id="confirmationMessageView" class="modal fade" style="overflow: auto;overflow-y: scroll;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" id="modalConfirmationMessageHeaderContent">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="modalConfirmationMessageViewTitle" >Message</h4>
            </div>
            
            <div class="modal-body">
	            <div id="modalConfirmationMessageViewContent">
	        	</div>
            </div>
            <div class="modal-footer">
            	<div id="modalcCnfirmationMessageButtonContent">
            		<button type="button" class="btn btn-default" data-dismiss="modal">Yes</button>
			   </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="activityLoadingModal" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalLoadingTitle">Processing...</h4>
            </div>
            <div class="modal-body">
                <div class="progress progress-striped active">
                    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:100%">
                        <span class="sr-only">70% Complete</span>
                      </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Submit pop up Modal HTML -->
<div id="deleteJobAssignmentConfirmationView" class="modal fade" style="overflow: auto;overflow-y: scroll;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="modalDeleteJobAssignmentConfirmationTitle">Confirm Job Assignment Deletion</h4>
            </div>
            
            <div class="modal-body">
	            <div id="modalDeleteJobAssignmentConfirmationContent">
	            
	        	</div>
            </div>
            
            <div class="modal-footer">
            	<div id="modalDeleteJobAssignmentConfirmationButton">
			   </div>
            </div>
        </div>
    </div>
</div>

<!-- message Modal HTML -->
<div id="messageView" class="modal fade" style="overflow: auto;overflow-y: scroll;" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" id="modalMessageHeaderContent">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="modalMessageViewTitle" >Message</h4>
            </div>
            
            <div class="modal-body">
	            <div id="modalMessageViewContent">
	        	</div>
            </div>
            
            <div class="modal-footer">
            	<div id="modalMessageButtonContent">
            		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			   </div>
            </div>
        </div>
    </div>
</div>


<input type="hidden" id="isManagerFilter" value="<?php echo isset($isManagerFilter) ? ($isManagerFilter ? 'true' : 'false' ) : 'false';?>" >

<div class="col-md-12" <?php echo isset($isManagerFilter) && $isManagerFilter ? "style='display:none'" : ''; ?>>
	<?php if(!isset($isManagerFilter) || $isManagerFilter == false) { ?>
    <div class="claim-btn">
        <table>
            <tr>
                <td>
                    <?php if($designation!=1) { ?>
                        <!-- <div>
                            <a onclick="return showAddJobAssignment();" role="button" class="btn btn-primary btn-sm" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span> Add</a>
                        </div> -->
                    <?php } ?>
                </td>
            </tr>
        </table>
    </div>
    <?php } ?>

	
        <div class="filter-unit">
            <select style="height: 30px;" id="filterJobTypePlan" >
                <?php echo $this->getJobTypeFilter(); ?>
            </select>
        </div>
        <div class="filter-unit">
            <input  style="height: 30px;"  type="text" placeholder="Job Title" id="filterTitleJobPlan">
        </div>
        <div class="filter-unit" style="display:none;">
            <input  style="height: 30px;"  type="text" placeholder="Customer Code" id="filterCustCodeJobPlan">
        </div>
        <div class="filter-unit">
            <input  style="height: 30px;"  type="text" placeholder="Customer Name" id="filterCustomerJobPlan">
        </div>
        <div class="filter-unit">
            <select style="height: 30px;" id="filterJobPlanStatus" >
                <?php echo $this->getJobStatusFilter(); ?>
            </select>
        </div>

    
        
        <div class="filter-unit">
            <a href="#" onclick="return filterJobAssignment();" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-plus"></span> Filter</a>
        </div>
	</div>
	<?php if(!isset($isManagerFilter) || $isManagerFilter == false) { ?>
	<div class="claim-btn">
		<table>
			<tr>
				<td style="text-align:right;display:none">
				</td>
			</tr>
		</table>
	</div>
	<?php } ?>
</div>

<div class="col-md-12" id="errorShow"></div>

<div class="col-md-12" style="margin-top: 20px">
	<div class="box" id="testData">
		<table class="table" style="width: 100%; max-width: 100%; margin-bottom: 20px;" id="job-assignment-table">
		</table>
	</div>
</div>
<script>
$(document).ready(function () {
    var claimDayLast = 30;
    if(!isNaN($('#txtClaimDayLast').val()))
        claimDayLast = parseInt($('#txtClaimDayLast').val());
    var date = new Date();
    var firstDay = new Date();
    var lastDay = new Date();
    var todayDate = new Date();
    var startDate = new Date(new Date().setDate(todayDate.getDate()-claimDayLast));

    var n = todayDate.getMonth();
    $('#cobSchMonth').val(n+1);
    $('#cobSchMonth2').val(n+1);
    $('#cobSchMonth3').val(n+1);
    $('#cobSchMonth4').val(n+1);

    firstDay.setFullYear(date.getFullYear(), date.getMonth(), 1);
    lastDay.setFullYear(date.getFullYear(), date.getMonth() + 1, 0);

    $('#fromDateAssignmentFilter').datepicker({
        format: "dd/mm/yyyy"
    }); 
    $('#fromDateAssignmentFilter').on('changeDate', function(ev){
        $(this).datepicker('hide');
    });
    
    $('#toDateAssignmentFilter').datepicker({
        format: "dd/mm/yyyy"
    });

    $('#toDateAssignmentFilter').on('changeDate', function(ev){
        $(this).datepicker('hide');
    });

    
    // last xx days
    $('#fromDateAssignmentFilter').datepicker('setValue', (todayDate.getDate() <= 9 ? "0" + todayDate.getDate() : todayDate.getDate()) + "/" + (todayDate.getMonth()+1 <= 9 ? "0" + (todayDate.getMonth()+1) : (todayDate.getMonth()+1) ) + "/" + todayDate.getFullYear());
    $('#toDateAssignmentFilter').datepicker('setValue', (todayDate.getDate() <= 9 ? "0" + todayDate.getDate() : todayDate.getDate()) + "/" + (todayDate.getMonth()+4 <= 9 ? "0" + (todayDate.getMonth()+4) : (todayDate.getMonth()+4) ) + "/" + todayDate.getFullYear());
	filterJobAssignment();
    getJobAssignmentAutoSearch();
});
</script>
<script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'dayGridMonth' ]
        });

        calendar.render();
      });

    </script>