<style>
    #screen[index] {
      
        top: 10%;
        right: 0;
        bottom: 0;
        left: 4%;
    }

    .input-group .date {
        z-index: 1110;
    }

    label {
        word-wrap: break-word;
    }

    @media only screen and (max-width: 768px) {
      .divComplete {
        display: none;
            margin-bottom:15px!important;
      }

      #txtCentreTotalMandays {
            margin-top:5px!important;
      }
    }

</style>

<div id="screen[index]" > 
<!-- begin:: Content -->
    <!--begin::Portlet-->
    <div class="kt-portlet kt-portlet--tabs kt-portlet--responsive-mobile" id="kt_page_portlet">
    <!-- <div class="kt-portlet kt-portlet--tabs kt-portlet--height-fluid" style="background-color: #cceeff!important;"> -->
        <div class="kt-portlet__head" style="background-color: #fff!important">
            <div class="kt-portlet__head-toolbar">
                <ul class="nav nav-tabs nav-tabs-space-xl nav-tabs-line nav-tabs-bold nav-tabs-line-3x nav-tabs-line-brand" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link " data-toggle="tab" href="#job_screen" role="tab">
                            <i class="la la-briefcase"></i><b>Job</b>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " data-toggle="tab" href="#resource_screen" role="tab">
                            <i class="la la-briefcase"></i><b>Resources</b>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " data-toggle="tab" href="#billing_screen" role="tab">
                            <i class="flaticon-edit-1"></i><b>Billing</b>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " data-toggle="tab" href="#service_screen" role="tab">
                            <i class="flaticon-edit-1"></i><b>Service Report</b>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

            <div class="kt-portlet__body" style="clear: both;padding-bottom: 0px;padding-top:0px;">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card-body row" style="padding-bottom:0px">
                            <div class="col-lg-8">
                                <div class="form-group row" style="display: none;">
                                    <label class="col-lg-3 col-form-label" >Plan ID:</label>
                                    <div class="col-lg-3">
                                        <input type="text" class="form-control" id="txtCentreId">
                                        <span class="form-text text-muted"></span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-lg-1 col-form-label" >BU:</label>
                                    <div class="col-lg-2">
                                        <select  class="form-control" id="cobCentreBU">
                                             <?php echo $this->getCompanyOption(); ?>
                                        </select>
                                        <span class="form-text text-muted"></span>
                                    </div>
                                    <div style="width:50px;">&nbsp;</div>
                                    <label class="col-lg-1 col-form-label" >Cust. Code:</label>
                                    <div class="col-lg-2">
                                        <select class="form-control" id="cobCentreCustCode" onchange="populateCustDetail();">
                                            <?php echo $this->getCustomerOption(); ?>
                                        </select>
                                        <span class="form-text text-muted"></span>
                                    </div>
                                    <div style="width:50px;">&nbsp;</div>
                                    <label class="col-lg-1 col-form-label" >Customer:</label>
                                    <div class="col-lg-3">
                                        <input type="text" class="form-control" id="txtCentreCoyName" disabled>
                                        <span class="form-text text-muted"></span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-lg-1 col-form-label">Job # :</label>
                                    <div class="col-lg-2">                                       
                                        <input type="text" class="form-control" id="txtCentreJobNumber" disabled>
                                        <span class="form-text text-muted"></span>
                                    </div>
                                    <div style="width:50px;">&nbsp;</div>
                                    <label class="col-lg-1 col-form-label">Job Type:</label>
                                    <div class="col-lg-2">
                                        <select class="form-control" id="txtCentreJobType">
                                            <?php echo $this->getJobTypeOption(); ?>
                                        </select>
                                        <span class="form-text text-muted"></span>
                                    </div>
                                    <div style="width:50px;">&nbsp;</div>
                                    <label class="col-lg-1 col-form-label">Title:</label>
                                    <div class="col-lg-3">
                                        <input type="text" class="form-control" id="txtCentreJobName">
                                        <span class="form-text text-muted"></span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-lg-1 col-form-label">Start Date:</label>
                                    <div class="col-lg-2">                                       
                                        <div class="input-group date">                                            
                                            <input type="text" class="form-control"  placeholder="Select date" id="txtCentreJobStartDate" maxlength="10"/>
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    <i class="la la-calendar-check-o"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="width:50px;">&nbsp;</div>
                                    <label class="col-lg-1 col-form-label">End Date:</label>
                                    <div class="col-lg-2">
                                        <div class="input-group date">
                                            <input type="text" class="form-control"  placeholder="Select date" id="txtCentreJobEndDate" maxlength="10"/>
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    <i class="la la-calendar-check-o"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="width:50px;">&nbsp;</div>
                                    <label class="col-lg-1 col-form-label">PM Name:</label>
                                    <div class="col-lg-3">
                                        <select class="form-control" id="txtCentrePMName">
                                           
                                        </select>
                                        <span class="form-text text-muted"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group row">
                                    <div class="col-lg-7" id="divComplete">
                                        <div class="kt-checkbox-inline">
                                            <label class="kt-checkbox kt-checkbox--brand">
                                                <input type="checkbox" id="chkCentreActive"> Complete
                                                <span >&nbsp;</span>
                                            </label>
                                        </div>
                                        <span class="form-text text-muted"></span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-lg-3 col-form-label" >Total Mandays:</label>
                                    <div class="col-lg-3">
                                        <input  type="text" class="form-control text-right" id="txtCentreTotalMandays" onkeyup="calculateMandaysToHours()" value="0">
                                        <span class="form-text text-muted"></span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-lg-3 col-form-label">Total Hours:</label>
                                    <div class="col-lg-3">
                                        <input type="text" class="form-control text-right" id="txtCentreTotalHours" onkeyup="calculateHoursToMandays()" value="0">
                                        <span class="form-text text-muted"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-content" style="margin-top:0px;">
                    <div class="tab-pane active" id="job_screen">
                        <div class="kt-section kt-section--first">
                            <div class="kt-section__body">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="card-body row">
                                            <br>
                                            <div class="col-lg-12 kt-separator kt-separator--dashed"></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 class="col-lg-12">
                                                <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded" style="overflow-x:auto;">
                                                    <table class="kt-datatable__table">
                                                        <thead class="kt-datatable__head" style="background-color: #E0E0E0">
                                                            <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                                                <th data-field="id" class="kt-datatable__cell" style="display: none;"></th>
                                                                <th style="width:59%" class="kt-datatable__cell" colspan="5"><button class="btn btn-primary" onclick="popupSaveTemplateJobPlan();populateJobPlanTemplateList();" data-target="#SaveJobPlanTemplateConfirmationView" id="btnSaveTemp" data-toggle="modal">Save As Template</button><button class="btn btn-success ml-2" onclick="popupLoadTemplateJobPlan();" data-target="#LoadJobPlanTemplateConfirmationView" data-toggle="modal" id="btnLoadTemp">Load Template</button></th>
                                                                <!-- <th style="width:11%" class="kt-datatable__cell"></th> -->
                                                                
                                                                <th style="width:10%;" class="kt-datatable__cell">Total Allocated Hours</th>
                                                                <th style="width:7%" class="kt-datatable__cell"><input type="text" class="col-lg-12 form-control text-right" id="txtAllocatedHours"></th>
                                                                <th style="width:7%" class="kt-datatable__cell"></th>
                                                                <th style="width:5%" class="kt-datatable__cell"></th>
                                                                <th style="width:5%" class="kt-datatable__cell"></th>
                                                                <th colspan="4" class="kt-datatable__cell"></th>
                                                            </tr>
                                                            <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                                                <th data-field="id" class="kt-datatable__cell" id="col_id" onclick="sortColumn(this,'col_id','asc');" style="display: none;">
                                                                    <span>ID <i class="fa"></i></span>
                                                                </th>
                                                                <th style="width:5%" data-field="phase" class="kt-datatable__cell" id="col_phase">Phase</th>
                                                                <th style="width:17%" class="kt-datatable__cell">Task</th>
                                                                <th style="width:17%" data-field="description" class="kt-datatable__cell" id="col_description">Description</th>
                                                          
                                                                <th style="width:10%" data-field="startdate" class="kt-datatable__cell" id="col_startdate">Start Date</th>
                                                                <th style="width:10%" data-field="enddate" class="kt-datatable__cell" id="col_enddate" style="padding-left:0px;">End Date</th>
                                                                <th style="width:10%" data-field="consultant" class="kt-datatable__cell" id="col_consultant">Consultant</th>
                                                                <th style="width:7%" data-field="allocatedhours" class="kt-datatable__cell" id="col_allocatedhours" >Allocated Hours</th>
                                                                <th style="width:7%" data-field="venue" class="kt-datatable__cell" >Venue
                                                                    <div style="display:none;"><select id="cmbJobPlanVenue" class="form-control">
                                                                        <?php echo $this->getJobVenueOption(); ?>
                                                                    </select></div>
                                                                </th>
                                                                
                                                                <th style="width:5%" data-field="status" class="kt-datatable__cell" id="col_status">Status</th>
                                                                <th style="width:5%" data-field="balance" class="kt-datatable__cell" id="col_balance">Balance</th>
                                                                <th colspan="4" data-field="action" class="kt-datatable__cell" id="col_action">Action</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody class="kt-datatable__body" id="job-plan-table">
                                                        </tbody>
                                                    </table>
                                                    <br>
                                                    <div class="col-lg-12 text-right">
                                                        <button type="button" class="btn btn-success btn-sm btn-icon btn-icon-md btnAddDetail" id="btnAddItem" onclick="javascript:addJobPlan(this);"><i class="fa fa-plus"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane" id="resource_screen">
                        <div class="kt-section kt-section--first">
                            <div class="kt-section__body">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="card-body row">
                                        <br>
                                            <div class="col-lg-12 kt-separator kt-separator--dashed"></div>
                                                <div class="col-lg-6">
                                                     <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded" style="overflow-x:auto;">
                                                        <table>
                                                            <thead>

                                                            </thead>
                                                            <tbody class="kt-datatable__body" id="acc-mgr-table">
                                                                <tr id ="trAccMgr-0" class="dnd-moved kt-datatable__row" style="left: 0px;">
                                                                    <td width="25%" data-field="phase" class="kt-datatable__cell" id="col_phase">Account Manager</td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase">(AM)</td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase" style="display: none;">
                                                                        <input class="form-control txtIdAccMgr" id="txtIdAccMgr0" value="-1">
                                                                    </td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <select id="cmbAccMgr-0" class="form-control cmbAccMgr">
                                                                            <?php echo $this->getUserOption(); ?>
                                                                        </select>
                                                                    </td>
                                                                    <td style="width:5%" data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <button type="button" class="btn btn-success btn-sm btn-icon btn-icon-md btnAddAccMgr" id="btnAddAccManager" onclick="javascript:addAccManager(this);"><i class="fa fa-plus"></i>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded" style="overflow-x:auto;">
                                                        <table>
                                                            <thead>
                                                                
                                                            </thead>
                                                            <tbody class="kt-datatable__body" id="cust-proj-sponsor-table">
                                                                <tr id ="trCustProjSponsor-0" class="dnd-moved kt-datatable__row" style="left: 0px;">
                                                                    <td width="25%" data-field="phase" class="kt-datatable__cell" id="col_phase">Project Sponsor</td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase"></td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase" style="display: none;">
                                                                        <input class="form-control txtIdCustProjSponsor" id="txtIdCustProjSponsor0" value="-1">
                                                                    </td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <select id="cmbCustProjSponsor-0" class="form-control cmbCustProjSponsor">
                                                                        </select>
                                                                    </td>
                                                                    <td style="width:7%" data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <button type="button" class="btn btn-success btn-sm btn-icon btn-icon-md btnAddCustProjSponsor" id="btnAddCustProjectSponsor" onclick="javascript:addCustProjSponsor(this);"><i class="fa fa-plus"></i>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded" style="overflow-x:auto;">
                                                        <table>
                                                            <thead>
                                                                
                                                            </thead>
                                                            <tbody class="kt-datatable__body" id="proj-mgr-table">
                                                                <tr id ="trProjManager-0" class="dnd-moved kt-datatable__row" style="left: 0px;">
                                                                    <td width="25%" data-field="phase" class="kt-datatable__cell" id="col_phase">Project Manager</td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase">(PM)</td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase" style="display: none;">
                                                                        <input class="form-control txtIdProjMgr" id="txtIdProjMgr0" value="-1">
                                                                    </td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <select id="cmbProjMgr-0" class="form-control cmbProjMgr">
                                                                            <?php echo $this->getUserOption(); ?>
                                                                        </select>
                                                                    </td>
                                                                    <td style="width:5%" data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <button type="button" class="btn btn-success btn-sm btn-icon btn-icon-md btnAddProjMgr" id="btnAddProjManager" onclick="javascript:addProjManager(this);"><i class="fa fa-plus"></i>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded" style="overflow-x:auto;">
                                                        <table>
                                                            <thead>
                                                                
                                                            </thead>
                                                            <tbody class="kt-datatable__body" id="cust-proj-advisor-table">
                                                                <tr id ="trCustProjAdvisor-0" class="dnd-moved kt-datatable__row" style="left: 0px;">
                                                                    <td width="25%" data-field="phase" class="kt-datatable__cell" id="col_phase">Project Advisor</td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase"></td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase" style="display: none;">
                                                                        <input class="form-control txtIdCustProjAdvisor" id="txtIdCustProjAdvisor0" value="-1">
                                                                    </td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <select id="cmbCustProjAdvisor-0" class="form-control cmbCustProjAdvisor">
                                                                        </select>
                                                                    </td>
                                                                    <td style="width:7%" data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <button type="button" class="btn btn-success btn-sm btn-icon btn-icon-md btnAddCustProjAdvisor" id="btnAddCustProjectAdvisor" onclick="javascript:addCustProjAdvisor(this);"><i class="fa fa-plus"></i>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded" style="overflow-x:auto;">
                                                        <table>
                                                            <thead>
                                                                
                                                            </thead>
                                                            <tbody class="kt-datatable__body" id="tech-consultant-table">
                                                                <tr id ="trTechConsultant-0" class="dnd-moved kt-datatable__row" style="left: 0px;">
                                                                    <td width="25%" data-field="phase" class="kt-datatable__cell" id="col_phase">Technical Consultant</td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase">(TC)</td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase" style="display: none;">
                                                                        <input class="form-control txtIdTechConsultant" id="txtIdTechConsultant0" value="-1">
                                                                    </td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <select id="cmbTechConsultant-0" class="form-control cmbTechConsultant">
                                                                            <?php echo $this->getUserOption(); ?>
                                                                        </select>
                                                                    </td>
                                                                    <td style="width:5%" data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <button type="button" class="btn btn-success btn-sm btn-icon btn-icon-md btnAddTechCons" id="btnAddTechConsultant" onclick="javascript:addTechConsultant(this);"><i class="fa fa-plus"></i>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded" style="overflow-x:auto;">
                                                        <table>
                                                            <thead>
                                                                
                                                            </thead>
                                                            <tbody class="kt-datatable__body" id="cust-proj-mgr-table">
                                                                <tr id ="trCustProjManager-0" class="dnd-moved kt-datatable__row" style="left: 0px;">
                                                                    <td width="25%" data-field="phase" class="kt-datatable__cell" id="col_phase">Project Manager</td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase"></td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase" style="display: none;">
                                                                        <input class="form-control txtIdcmbCustProjMgr" id="txtIdcmbCustProjMgr0" value="-1">
                                                                    </td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <select id="cmbCustProjMgr-0" class="form-control cmbCustProjMgr">
                                                                        </select>
                                                                    </td>
                                                                    <td style="width:7%" data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <button type="button" class="btn btn-success btn-sm btn-icon btn-icon-md btnAddCustProjMgr" id="btnAddCustProjManager" onclick="javascript:addCustProjManager(this);"><i class="fa fa-plus"></i>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded" style="overflow-x:auto;">
                                                        <table>
                                                            <thead>
                                                                
                                                            </thead>
                                                            <tbody class="kt-datatable__body" id="app-consultant-table">
                                                                <tr id ="trAppConsultant-0" class="dnd-moved kt-datatable__row" style="left: 0px;">
                                                                    <td width="25%" data-field="phase" class="kt-datatable__cell" id="col_phase">Application Consultant</td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase">(AC)</td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase" style="display: none;">
                                                                        <input class="form-control txtIdAppConsultant" id="txtIdAppConsultant0" value="-1">
                                                                    </td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <select id="cmbAppConsultant-0" class="form-control cmbAppConsultant">
                                                                            <?php echo $this->getUserOption(); ?>
                                                                        </select>
                                                                    </td>
                                                                    <td style="width:5%" data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <button type="button" class="btn btn-success btn-sm btn-icon btn-icon-md btnAddAppCons" id="btnAddAppConsultant" onclick="javascript:addAppConsultant(this);"><i class="fa fa-plus"></i>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded" style="overflow-x:auto;">
                                                        <table>
                                                            <thead>
                                                                
                                                            </thead>
                                                            <tbody class="kt-datatable__body" id="cust-proj-member-table">
                                                                <tr id ="trCustProjMember-0" class="dnd-moved kt-datatable__row" style="left: 0px;">
                                                                    <td width="25%" data-field="phase" class="kt-datatable__cell" id="col_phase">Project Member</td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase"></td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase" style="display: none;">
                                                                        <input class="form-control txtIdCustProjMember" id="txtIdCustProjMember0" value="-1">
                                                                    </td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <select id="cmbCustProjMember-0" class="form-control cmbCustProjMember">
                                                                        </select>
                                                                    </td>
                                                                    <td style="width:7%" data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <button type="button" class="btn btn-success btn-sm btn-icon btn-icon-md btnAddCustProjMember" id="btnAddCustProjMember" onclick="javascript:addCustProjMember(this);"><i class="fa fa-plus"></i>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded" style="overflow-x:auto;">
                                                        <table>
                                                            <thead>
                                                                
                                                            </thead>
                                                            <tbody class="kt-datatable__body" id="developer-table">
                                                                <tr id ="trDeveloper-0" class="dnd-moved kt-datatable__row" style="left: 0px;">
                                                                    <td width="25%" data-field="phase" class="kt-datatable__cell" id="col_phase">Developer</td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase">(DV)</td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase" style="display: none;">
                                                                        <input class="form-control txtIdDeveloper" id="txtIdDeveloper0" value="-1">
                                                                    </td>
                                                                    <td data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <select id="cmbDeveloper-0" class="form-control cmbDeveloper">
                                                                            <?php echo $this->getUserOption(); ?>
                                                                        </select>
                                                                    </td>
                                                                    <td style="width:5%" data-field="phase" class="kt-datatable__cell" id="col_phase">
                                                                        <button type="button" class="btn btn-success btn-sm btn-icon btn-icon-md btnAddDeveloper" id="btnAddDeveloper" onclick="javascript:addDeveloper(this);"><i class="fa fa-plus"></i>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane" id="billing_screen">
                        <div class="kt-section kt-section--first">
                            <div class="kt-section__body">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="card-body row">
                                        <br>
                                            <div class="col-lg-12 kt-separator kt-separator--dashed"></div>
                                            <div class="col-lg-12">
                                                <div class="form-group row">
                                                    <label class="col-lg-1 col-form-label" >Billing Interval(%):</label>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreBillInt1">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreBillInt2">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreBillInt3">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreBillInt4">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <button class="btn btn-brand" title="Add Attachment" data-toggle="modal" data-target="#uploadDocJobCentreView" onclick="return showJobCentreDocsView(<?php echo $id ?>, this);" id="btnSysUpload" data-toggle="modal">Upload</button>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-lg-1 col-form-label">Billing Amount:</label>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreBillAmt1">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreBillAmt2">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreBillAmt3">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreBillAmt4">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-lg-1 col-form-label">Billing Month/Year:</label>
                                                    <div class="col-lg-2">                                       
                                                        <div class="input-group date">                                            
                                                            <input type="text" class="form-control"  placeholder="Select date" id="txtBillDate1" maxlength="10"/>
                                                            <div class="input-group-append">
                                                                <span class="input-group-text">
                                                                    <i class="la la-calendar-check-o"></i>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-2">                                       
                                                        <div class="input-group date">                                            
                                                            <input type="text" class="form-control"  placeholder="Select date" id="txtBillDate2" maxlength="10"/>
                                                            <div class="input-group-append">
                                                                <span class="input-group-text">
                                                                    <i class="la la-calendar-check-o"></i>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-2">                                       
                                                        <div class="input-group date">                                            
                                                            <input type="text" class="form-control"  placeholder="Select date" id="txtBillDate3" maxlength="10"/>
                                                            <div class="input-group-append">
                                                                <span class="input-group-text">
                                                                    <i class="la la-calendar-check-o"></i>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-2">                                       
                                                        <div class="input-group date">                                            
                                                            <input type="text" class="form-control"  placeholder="Select date" id="txtBillDate4" maxlength="10"/>
                                                            <div class="input-group-append">
                                                                <span class="input-group-text">
                                                                    <i class="la la-calendar-check-o"></i>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-lg-1 col-form-label">Billing Mandays:</label>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreBillMandays1">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreBillMandays2">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreBillMandays3">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreBillMandays4">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-lg-1 col-form-label">Invoice No:</label>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreInvoiceNo1">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreInvoiceNo2">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreInvoiceNo3">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentreInvoiceNo4">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-lg-1 col-form-label">Paid Mandays:</label>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentrePaidMandays1">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentrePaidMandays2">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentrePaidMandays3">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="text" class="form-control" id="txtCentrePaidMandays4">
                                                        <span class="form-text text-muted"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane" id="service_screen">
                        <div class="kt-section kt-section--first">
                            <div class="kt-section__body">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="card-body row">
                                            <br>
                                            <div class="col-lg-12 kt-separator kt-separator--dashed"></div>
                                            <div class="col-lg-12">
                                                <div class=" kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded">
                                                <table class="kt-datatable__table">
                                                    <thead class="kt-datatable__head" style="background-color: #E0E0E0">
                                                        <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                                            <th data-field="phase" class="kt-datatable__cell" id="col_phase" style="display:none;"></th>
                                                            <th style="width: 7%;" class="kt-datatable__cell" id="col_phase"></th>
                                                            <th style="width: 22%;" class="kt-datatable__cell"></th>
                                                            <th style="width: 9%;" class="kt-datatable__cell"></th>
                                                            <th style="width: 19%;" class="kt-datatable__cell"></th>
                                                            <th style="width: 8%;padding-right:2px;" class="kt-datatable__cell text-right" colspan="2">Total Service Hours</th>
                                                            <th style="width: 8%;" class="kt-datatable__cell"><input type="text" class="col-lg-12 form-control text-right" id="txtTotalServiceHours"></th>
                                                            <th style="width: 300px;" class="kt-datatable__cell"></th>
                                                        </tr>
                                                        <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                                            <th data-field="id" class="kt-datatable__cell" id="col_id" onclick="sortColumn(this,'col_id','asc');" style="display: none;">
                                                                <span>ID <i class="fa"></i></span>
                                                            </th>
                                                            <th style="width: 7%;" class="kt-datatable__cell" id="col_phase">Service No</th>
                                                            <th style="width: 22%;" class="kt-datatable__cell">Service Title</th>
                                                            <th style="width: 9%;padding-left:0px;" class="kt-datatable__cell">Consultant</th>
                                                            <th style="width: 19%;" class="kt-datatable__cell">Customer Rep</th>
                                                            <th style="width: 8%;" class="kt-datatable__cell">Status</th>
                                                            <th style="width: 8%;padding-right:0px;" class="kt-datatable__cell text-right">Total Mandays</th>
                                                            <th style="width: 8%;padding-right:12px;" class="kt-datatable__cell text-right">Total Hours</th>
                                                            <th style="width: 300px;"  class="kt-datatable__cell">Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody class="kt-datatable__body" id="service-plan-table">
                                                    </tbody>
                                                </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>  
            </div>

        <div class="col-lg-12 text-right" id="btnJobCentre" style="padding-right: 50px;padding-bottom:20px">
        </div>

    </div>
    <!--end::Portlet-->

<script>
    $(document).ready(function () {
        filterRow("contact_row_filter",false);
        filterRow("project_row_filter",false);
    });
</script>
<!-- end:: Content -->
</div>
<div id="screen[index]a" > 
    <!-- Upload Document Modal HTML -->
    <div class="modal fade" id="uploadDocJobCentreView" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Document Detail</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="flaticon-times"></i></button>
                </div>
                <div class="modal-body">
                    <div id="modaluploadDocJobCentreContent">
                    </div>
                </div>
                <div class="modal-footer">
                    <div id="modaluploadDocJobCentreButtonContent">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- save template pop up Modal HTML -->
    <div class="modal fade" id="SaveJobPlanTemplateConfirmationView" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalSaveJobPlanTemplateConfirmationTitle">Template</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- <div class="col-md-12">
                        <input  type="text" class="form-control" id="JobPlanTemplateName" placeholder="Template Name...">
                    </div> -->
                    <div class="col-md-9">
                        <input data-switch="true" type="checkbox" checked="checked" id="chkJobPlanTempOption" data-on-text="New" data-off-text="Update" onchange="changeJobPlanTempOption()">
                        <input type="text" class="form-control" id="txtChkJobPlanTempOption" style="display: none;">
                    </div>
                    <br>
                    <div class="col-md-12" id="divJobPlanTemplateName">
                        <input type="text" class="form-control" id="JobPlanTemplateName" placeholder="Template Name...">
                    </div>
                    <div class="col-md-12" id="divJobPlanTemplateList" style="display: none;">
                        <select class="form-control" name="JobPlanTemplateList" id="JobPlanTemplateList"></select>
                        <!-- <input style="margin-top:10px;" type="text" class="form-control" id="jobPlanTemplateNewName" placeholder="New Name..."> -->
                    </div>
                </div>
                <div class="modal-footer">
                    <div id="modalSaveJobPlanTemplateConfirmationButton">
                   </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Load template pop up Modal HTML -->
    <div class="modal fade" id="LoadJobPlanTemplateConfirmationView" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLoadJobPlanTemplateConfirmationTitle">Template</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <div class="col-md-12" id="modalLoadJobPlanTemplateConfirmationContent">
                        <select class="form-control" name="JobPlanTemplateLoad" id="JobPlanTemplateLoad"></select>
                    </div>
                </div>
                <div class="modal-footer">
                    <div id="modalLoadJobPlanTemplateConfirmationButton">
                   </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Line Remarks pop up Modal HTML -->
    <div class="modal fade" id="lineRemakrsJobPlanView" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLineRemakrsJobPlanTitle">Line Remarks</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <div class="col-md-12" id="modalLineRemakrsJobPlanContent">
                    </div>
                </div>
                <div class="modal-footer">
                    <div id="modalLineRemakrsJobPlanButton">
                   </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
  $(function() {
    $('#chkJobPlanTempOption').bootstrapSwitch();
  })
</script>

<script type="text/javascript">
 $(document).ready(function(){
    var dteopt = {
            // todayHighlight: true,
            minViewMode: "months",
            viewMode: "months", 
            orientation: "bottom left",
            autoclose: true,
            format: 'mm/yyyy',
            templates: {
                leftArrow: '<i class="la la-angle-left"></i>',
                rightArrow: '<i class="la la-angle-right"></i>'
            },
        }

    $("#txtBillDate1").datepicker(dteopt) ;
    $("#txtBillDate2").datepicker(dteopt) ;
    $("#txtBillDate3").datepicker(dteopt) ;
    $("#txtBillDate4").datepicker(dteopt) ;

    //template
    if($('#chkJobPlanTempOption').is(':checked')){
        $('#divJobPlanTemplateList').hide();
        $('#divJobPlanTemplateName').show();

        $('#txtChkJobPlanTempOption').val("1");
    }else{
        $('#divJobPlanTemplateList').show();
        $('#divJobPlanTemplateName').hide();

        $('#txtChkJobPlanTempOption').val("0");
    }
});
</script>