<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>
            <label style="text-align:left;width:125px;" for="cobCheckList" class="col-sm-2 control-label">Checklist</label>
            <div class="col-sm-2">
                <select id="cobCheckList" class="form-control">
                    <?php echo $this->getChecklistOption(); ?>
                </select>
            
            </div>
            <button onclick="showJobDetailAssignHeaderList();" class="btn btn-info"><i class="glyphicon glyphicon-eye-open" style="color: white"></i></button>
        </div>
        <div class="form-group">
            
            <label style="text-align:left;width:125px;display:none;" for="cobAssignProductType" class="col-sm-2 control-label">Product</label>
            <div class="col-sm-2" style="display:none;">
                <select id="cobAssignProductType" class="form-control" disabled>
                    <?php echo $this->getProductType(); ?>
                </select>
            </div>
        </div>
        <div class="form-group" style="display:none;">
            <label style="text-align:left;padding-left:150px;display:none;" for="cobAssignBrand" class="col-sm-2 control-label">Brand</label>
            <div class="col-sm-2" style="display:none;">
                <select id="cobAssignBrand" class="form-control" disabled>
                    <?php echo $this->getBrandOption(); ?>
                </select>
            </div>
            <label style="text-align:left;width:125px;display:none;" for="cobAssignModel" class="col-sm-2 control-label">Model</label>
            <div class="col-sm-2" style="display:none;">
                <select id="cobAssignModel" class="form-control" disabled>
                    <?php echo $this->getModelType(); ?>
                </select>
            </div>
            <label style="text-align:left;width:125px;display:none;" for="txtAssignSerialNumb" class="col-sm-2 control-label">Serial Number</label>
            <div class="col-sm-2" style="display:none;">
                 <input id="txtAssignSerialNumb" maxlength="100" type="text" class="form-control" readonly>
            </div>
            <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>
            <label style="text-align:left;width:125px;" for="txtAssignConfirmDate" class="col-sm-2 control-label">Job Confirm Date</label>
            <div class="col-sm-2">
                 <input id="txtAssignConfirmDate" maxlength="100" type="text" class="form-control" readonly>
            </div>
            <label style="text-align:left;padding-left:150px;" for="txtAssignStartDate" class="col-sm-2 control-label">Job Start Date</label>
            <div class="col-sm-2">
                 <input id="txtAssignStartDate" maxlength="100" type="text" class="form-control" readonly>
            </div>
            <label style="text-align:left;width:125px;" for="cobAssignJobType" class="col-sm-2 control-label">Job Type</label>
            <div class="col-sm-2">
                <select id="cobAssignJobType" class="form-control" disabled>
                    <?php echo $this->getJobTypeOption(); ?>
                </select>
            </div>
        </div>
        
        <?php if($designation!=1) { ?>
        <div class="form-group">
            <label style="text-align:left;padding-left: 150px;" for="txtAssignDate" class="col-sm-2 control-label">Assign Date</label>
            <div class="col-sm-2" >
                <input id="txtAssignDate" maxlength="100" type="text" class="form-control" >
            </div>

            <label style="text-align:left;width:125px;" for="txtAssignAgent" class="col-sm-2 control-label">Agent</label>
            <div class="col-sm-2" >
                <select id="txtAssignAgent" class="form-control">
                </select>
            </div>
            <div class="col-sm-2" style="display: none" id="txtAssignAgentCombDiv">
                <select id="txtAssignAgentComb" class="form-control txtAssignAgentComb">
                <?php echo $this->getUserOption(); ?>
                </select>
            </div>
            <label style="text-align:left;width:125px;" for="cobAssignEquiptment" class="col-sm-2 control-label">Equipment</label>
                <div class="col-sm-2">
                    <select id="cobAssignEquiptment" class="form-control" >
                    
                    </select>
                </div>
                
                <button style="text-align:left;margin-left: 35px;width:50px" id="" class="col-sm-1 btn btn-primary" onclick="return addAssignmentDetail();">Add </button>
                
                <label style="text-align:right;margin-left: 50px;"  for="txtAssignDate" class="col-sm-1 control-label">Total Allocated</label>
                <div class="col-sm-1" style="margin-left: 15px;width:95px;" >
                    <input id="txtTotalAllocated" maxlength="100" type="text" class="form-control" >
                </div>
        </div>
        <?php } ?>
        <hr>
        <table class="table table-striped" style="width:100%" >
            <thead>
                <tr>
                    <th style="width: 3%">Phase</th>
                    <th style="width: 12%">Task</th>
                    <th style="width: 12%">Sub Task</th>
                    <th style="width: 18%">Job Scope</th>
                    <th style="width: 8%">Date</th>
                    <th style="width: 7%">Assign Time</th>
                    <th style="width: 5%">Allocated <br> Hours</th>
                    <th style="width: 8%">Agent</th>
                    <th style="width: 5%">Attachment</th>
                    <th style="width: 5%">Status</th>
                    <th style="width: 7%">Checklist</th>
                    <th style="width: 10%">Equipment</th>
                    <th style="width: 3%"></th>
                </tr>
            </thead>
            <tbody id="assignment-detail-table">
            </tbody>
        </table>
        <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();
    });
    
    $('#txtAssignDate').val("<?php echo date_create('now')->format('d/m/Y'); ?>");
    populateAssignAgent();
});
</script>