<style>
.datepicker {
	z-index: 1110; /* must set here to let date picker display on top */
}
input[type=number] { 
    text-align: right; 
}
</style>
<input id="txtSchedulePlanCount"  type="text" val="0" style="display:none">
<input id="txtIsUpdate"  type="text" value="add" style="display:none">
<input id="generatedPLanCount"  type="text" value="0" style="display:none">
<div class="form-horizontal">
   <div id="formProject">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tabPlan" data-toggle="tab">Plan</a></li>
            <li><a href="#tabParticipant" data-toggle="tab">Agent</a></li>
        </ul>
       
        <div class="tab-content clearfix">
            <div class="tab-pane active" id="tabPlan">
                <br>
                <div class="form-group">
                    <label style="text-align:left;padding-left: 50px;width:170px;" for="txtPlanID" class="col-sm-2 control-label">ID</label>
                    <div class="col-sm-2">
                        <input id="txtPlanID" maxlength="20" type="text" readonly class="form-control" value="Auto">
                    </div>
                </div>
                <div class="form-group">
                    <label style="text-align:left;padding-left: 50px;width:170px;" for="cmbPlanJobNumber" class="col-sm-2 control-label">Job Number</label>
                    <div class="col-sm-5">
                        <select id="cmbPlanJobNumber" class="form-control">
                            <?php echo $this->getJobNumberOption(); ?>
                        </select>
                    </div>
                    <button class="btn btn-info" onclick="showJobDetail();"><i class="glyphicon glyphicon-eye-open" style="color: white"></i></button>
                </div>
                <div class="form-group">
                    <label style="text-align:left;padding-left: 50px;width:170px;" for="txtPlanDesc" class="col-sm-2 control-label">Description</label>
                    <div class="col-sm-5">
                         <input id="txtPlanDesc" maxlength="255" type="text" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label style="text-align:left;padding-left: 50px;width:170px;" for="cmbPlanSchedule" class="col-sm-2 control-label">Schedule Type</label>
                    <div class="col-sm-5">
                        <select id="cmbPlanSchedule" class="form-control" onChange="generateSchedule();ChangeScheduleType();">
                            <?php echo $this->getPlanScheduleOpt(); ?>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label style="text-align:left;padding-left: 50px;width:170px;" for="txtPlanStart" class="col-sm-2 control-label">Start Date</label>
                    <div class="col-sm-2">
                         <input id="txtPlanStart" maxlength="10" type="text" class="form-control" value="<?php echo date_create('now')->format('d/m/Y'); ?>" onkeydown="return false">
                    </div>
                    <label style="text-align:left;" for="txtPlanEnd" class="col-sm-1 control-label">End Date</label>
                    <div class="col-sm-2">
                         <input id="txtPlanEnd" maxlength="10" type="text" class="form-control" value="<?php echo date_create('now')->format('d/m/Y'); ?>" onkeydown="return false">
                    </div>
                    <label style="text-align:left;" for="txtPlanTime" class="col-sm-1 control-label">Time</label>
                    <div class="col-sm-2">
                         <div class="input-group bootstrap-timepicker timepicker">
                            <input id="txtPlanTime" type="text" class="form-control input-small">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                        </div>
                    </div>
                </div>
                 <div class="form-group" id="fgPlanSchedule">
                </div>
            </div>
            <div class="tab-pane" id="tabParticipant">
                <br>
                <div class="form-group">
                    <label style="text-align:left;padding-left: 50px;width:170px;" for="cmbPtcType" class="col-sm-2 control-label">Action</label>
                    <div class="col-sm-3">
                        <select id="cmbPtcType" class="form-control">
                            <?php echo $this->getParticipantOpt(); ?>
                        </select>
                    </div>
                    <label style="text-align:left;padding-left: 50px;width:100px;" for="cmbPtcUserId" class="col-sm-1 control-label">Agent</label>
                    <div class="col-sm-3">
                        <select id="cmbPtcUserId" class="form-control" onChange="getUserDetail()">
                            <?php echo $this->getUserOpt(); ?>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label style="text-align:left;padding-left: 50px;width:170px;" for="cmbPtcName" class="col-sm-2 control-label">Name</label>
                    <div class="col-sm-3">
                         <input id="cmbPtcName" maxlength="255" type="text" class="form-control">
                    </div>
                    <label style="text-align:left;padding-left: 50px;width:100px;" for="cmbPtcEmail" class="col-sm-1 control-label">Email</label>
                    <div class="col-sm-3">
                         <input id="cmbPtcEmail" maxlength="255" type="text" class="form-control">
                    </div>
                    <div class="col-sm-1">
                        <button id="btnAddParticipant" class="btn btn-primary" onclick="return addParticipantItem();">Add </button>
                    </div>
                </div>
                <hr>
                <table class="table table-striped" style="width:100%" >
                    <thead>
                        <tr>
                            <th style="width: 30%">Action</th>
                            <th style="width: 10%">User</th>
                            <th style="width: 20%">Name</th>
                            <th style="width: 20%">Email</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="project-participant-table">
                    </tbody>
                </table>
            </div>
        </div>
   </div>
</div>
    
<hr/>
<script>
$(document).ready(function () {
    $('#txtPlanStart').datepicker({
        format: "dd/mm/yyyy"
    });
    $('#txtPlanStart').on('changeDate', function(ev){
        $(this).datepicker('hide');
    });

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

    $('#txtPlanTime').timepicker({
        minuteStep:1
    });
});
</script>