<style>
.datepicker {
    z-index: 1110; /* must set here to let date picker display on top */
}
input[type=number] { 
    text-align: right; 
}

body {
    margin: 40px 10px;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar {
   
    margin: 5 auto;
  }

</style>
<!-- fullcalendar UI -->

<div class="form-horizontal">
   <div id="">
        <br>
        <div class="form-group">
            <label style="display:none;" for="txtAssignId" class="col-sm-2 control-label">ID</label>
            <div class="col-sm-3" style="display:none;">
                 <input id="txtAssignId" maxlength="100" type="text" class="form-control" value="Auto" readonly>
            </div>
            <label style="text-align:left;padding-left: 150px;" for="cobAssignNumber" class="col-sm-2 control-label">Job Number</label>
            <div class="col-sm-2">
                <input id="cobAssignNumber" maxlength="100" type="text" class="form-control" readonly>
                <input style="display:none;" id="txtJobCentreId" maxlength="100" type="text" class="form-control" readonly>
            </div>
            <div class="col-sm-2">
                <button onclick="showJobDetailAssignHeader();" class="btn btn-info"><i class="glyphicon glyphicon-eye-open" style="color: white"></i></button>
                <!-- <input  id="toggle-plan" data-width="100" checked type="checkbox" onchange="changeToPlan()"> -->
                <button style="text-align:left;margin-left: 15px;" id="" class="btn btn-primary" onclick="showGeneratedJobschedule(<?php echo $jobId; ?>);">Generate Plan </button>
            </div>
            <div class="col-sm-2">
                
            </div>
            
        </div>
        <div class="form-group" style="display:none;">
            <label style="text-align:left;width:125px;" for="txtAssignJobName" class="col-sm-2 control-label">Job Name</label>
            <div class="col-sm-2">
                 <input id="txtAssignJobName" maxlength="100" type="text" class="form-control" readonly>
            </div>
            
            <div class="col-sm-2" style="display: none" id="txtAssignAgentCombDiv">
                <select id="txtAssignAgentComb" class="form-control txtAssignAgentComb">
                    <?php echo $this->getUserOption(); ?>
                </select>
            </div>

            <div class="col-sm-2" style="display: none" id="txtConsultantCombDiv">
                <select id="txtConsultantComb" class="form-control txtConsultantComb">
                    <?php echo $this->getUserOption(); ?>
                </select>
            </div>
        </div>
        
        <?php if($designation!=1) { ?>
        <div class="form-group">
                <!-- <label style="text-align:right;margin-left: 50px;"  for="txtAssignDate" class="col-sm-1 control-label">Total Allocated</label> -->
                <label style="text-align:left;padding-left: 150px;" for="txtAssignAgent" class="col-sm-2 control-label">Total Allocated</label>
                <div class="col-sm-1" style="width:95px;" >
                    <input id="txtTotalAllocated" maxlength="100" type="text" class="form-control" >
                </div>


                <label style="text-align:left;margin-left: 20px;width:100px;" for="cobAssignEquiptment" class="col-sm-1 control-label">Unused Hours</label>
                <div class="col-sm-1" style="width:95px;" >
                    <input id="txtTotalUnused" maxlength="100" type="text" class="form-control" >
                </div>
        </div>
        <?php } ?>
         <div class="row" style="margin-left: 20px;margin-right: 20px;">
            <table class="table table-striped" style="width:100%" >
                <thead>
                    <tr>
                        
                        <th style="width: 3%">Phase No</th>
                        <th style="width: 12%">Task</th>
                        <th style="width: 5%">Start Date</th>
                        <th style="width: 5%">End Date</th>
                        <th style="width: 3%">Allocated <br> Hours</th>
                        <th style="width: 5%">Consultant</th>
                        <!-- <th style="width: 5%">Attachment</th> -->
                        <th style="width: 10%">Line Remark</th>
                        <th style="width: 1%"></th>
                        <th style="width: 1%;text-align: left;"></th>
                    </tr>
                </thead>
                <tbody id="job-plan-table">
                </tbody>
            </table>
            <button style="float:right;" id="btnAddItem" onclick="javascript:addJobPlan(this);" class="btn btn-success btnAddDetail">+</button>
         </div>
        <button style="float:right;display:none;" id="btnAssignDetail" class="btn btn-primary" onclick="return assignJob();">Assign</button>

   </div>
</div>
    
<hr/>
<script>
$(document).ready(function () {
  
    $('#txtAssignDate').datepicker({
        format: "dd/mm/yyyy"
    }); 
    $('#txtAssignDate').on('changeDate', function(ev){
        $(this).datepicker('hide');
        populateAssignAgent();
    });
    
    $('#txtJobPlanStart').datepicker({
        format: "dd/mm/yyyy"
    });
    $('#txtJobPlanStart').on('changeDate', function(ev){
        $(this).datepicker('hide');
    });

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

    $('#txtJobPlanTime').timepicker({
        minuteStep:1
    });

    $('#txtAssignDate').val("<?php echo date_create('now')->format('d/m/Y'); ?>");

    
    populateAssignAgent();
});
</script>

