<style>
.datepicker {
    z-index: 1110; /* must set here to let date picker display on top */
}
input[type=number] { 
    text-align: right; 
}
#contohdata {
  
    overflow-x: auto;
}
#equipmentData {
    display:block;
    overflow-x: auto;
}
</style>
<div class="form-horizontal">
   <div id="">
        <ul class="nav nav-tabs">
            <li style="display:none" ><a href="#job-quotation-verify" data-toggle="tab">Verify</a></li>
            <li class="active"><a href="#job-quotation-general" data-toggle="tab">Job</a></li>
            <li><a href="#job-quotation-task" data-toggle="tab">Job Task</a></li>
        </ul>
       
        <div class="tab-content clearfix">
            <div class="tab-pane" id="job-quotation-verify">
            <br>
                <div class="row">
                    <div class="col-md-6" style="<?php echo ($use_bu == 1 ? '' : 'display:none' ) ;?>">
                        
                        <label style="text-align:left;" for="cobQuotationBUverif" class="col-sm-4 control-label">BU</label>
                        <div class="col-sm-7" >
                            <select id="cobJobQuotationBU" class="form-control">
                                <?php echo $this->getCompanyOption(); ?>
                            </select>
                        </div>
                    </div>
                    
                </div>
                <br>
                <div class="row">
                    <div class="col-md-6">
                        <label style="text-align:left;" for="cobQuotationCustCodeverif" class="col-sm-4 control-label">Customer Code</label>
                        <div class="col-sm-7">
                            <select id="cobQuotationCustCodeverif" class="form-control" onchange="populateCustDetailverify();">
                                <?php echo $this->getCustomerOption(); ?>
                            </select>
                        </div>
                    </div>
                    
                </div>
                <br>
                <div class="row">
                    <div class="col-md-6">
                        <label style="text-align:left;" for="txtQuotationCoyNameverif" class="col-md-4 control-label">Customer Name</label>
                        <div class="col-sm-7">
                             <input id="txtQuotationCoyNameverif" maxlength="100" type="text" class="form-control" readonly>
                        </div>
                        <div class="col-sm-2" style="display:none;">
                            <input id="chkQuotationActiveverif" type="checkbox" checked> Active
                        </div>
                    </div> 
                    <div class="col-md-6">
                        <label style="text-align:left;" for="cobQuotationLocCodeverif" class="col-sm-4 control-label">Location Code</label>
                        <div class="col-sm-7">
                            <select id="cobQuotationLocCodeverif" class="form-control" onchange="populateLocationDetailverify();">
                                <?php echo $this->getLocationAllOption(); ?>
                            </select>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-12">
                                <label style="text-align:left;" for="txtQuotationLocContactNameverif" class="col-sm-4 control-label">Job Loc. Contact</label>
                                <div class="col-sm-7">
                                     <textarea style="resize:none;" id="txtQuotationLocContactNameverif" maxlength="100" type="text" class="form-control" rows="1" readonly></textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                            <br>
                                    <i class="fa fa-phone col-sm-1" style="text-align:left;color:black;margin-top: 10px;"></i>
                                    <div class="col-sm-4">
                                        <input id="txtQuotationLocContactPhoneverif" maxlength="100" type="text" class="form-control" readonly>
                                    </div>
                                    <i class="fa fa-envelope col-sm-1" style="text-align:left;color: black;margin-top: 10px;"></i>
                                    <div class="col-sm-5">
                                        <input id="txtQuotationLocContactEmailverif" maxlength="100" type="text" class="form-control" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label style="text-align:left;" for="txtQuotationLocContactAddressverif" class="col-sm-4 control-label">Job Location Address</label>
                        <div class="col-sm-7">
                             <textarea id="txtQuotationLocContactAddressverif" rows="4" type="text" class="form-control" readonly></textarea>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12" style="text-align: right; margin-top: 2%;">
                        <button title="Move to Job" onclick="return get_table_value();" id="btnMoveJobQuotation" class="btn btn-success">Move to Job</button>
                    </div>
                </div>
              
                <div class="row" style="display:none;">
                    <div class="col-md-4" style="text-align: right; margin-bottom:30px;">
                        
                        <input id="search" maxlength="100" type="text" class="form-control" placeholder="Search....">
                            
                    </div>
                </div>
                <div class="row" style="display:none;">
                    
                    <div class="col-md-12">
                        <table class="table table-striped" id="contohdata">
                            <thead>
                                <th style="display: none">
                                    Product_id
                                </th>
                                <th style="display: none">
                                    Brand_id
                                </th>
                                <th style="display: none">
                                    Model_id
                                </th>

                                <th>
                                    Product
                                </th>
                                <th>
                                    Brand
                                </th>
                                <th>
                                    Model
                                </th>
                                <th>
                                    Serial Number
                                </th>
                                <th>
                                    Warranty <br>Start Date
                                </th>
                                <th>
                                    Warranty <br>End Date
                                </th>
                                <th>
                                    Ext. <br>Warranty <br>Start Date
                                </th>
                                <th>
                                    Ext. <br>Warranty <br>End Date
                                </th>
                                <th>
                                    Schedule Date
                                </th>
                                <th>
                                    <input id="chkSelectAll" type="checkbox" onchange="selectAllCheckbox()">
                                </th>
                            </thead>
                            <tbody id="contohdata-body">

                            </tbody>
                        </table>
                    </div>
                </div>
                
            </div>
            <div class="tab-pane active" id="job-quotation-general">
                <br>
                <div class="row">
                    <div class="col-md-6" style="<?php echo ($use_bu == 1 ? '' : 'display:none' ) ;?>">
                        <label style="display:none;" for="txtJobQuotationId" class="col-sm-2 control-label">ID</label>
                        <div class="col-sm-3" style="display:none;">
                             <input id="txtJobQuotationId" maxlength="100" type="text" class="form-control" value="Auto" readonly>
                        </div>
                        <label style="text-align:left;" for="cobJobQuotationBU" class="col-sm-4 control-label">BU</label>
                        <div class="col-sm-7">
                            <select id="cobJobQuotationBU" class="form-control">
                                <?php echo $this->getCompanyOption(); ?>
                            </select>
                        </div>
                    </div>
                    
                </div>
                <br>
                <div class="row">
                <div class="col-md-6">
                        <label style="text-align:left;" for="cobQuotationCustCode" class="col-sm-4 control-label">Customer Code</label>
                        <div class="col-sm-7">
                            <select id="cobQuotationCustCode" class="form-control" onchange="populateCustDetail();">
                                <?php echo $this->getCustomerOption(); ?>
                            </select>
                        </div>
                    </div>
                    
                </div>
                <br>
                <div class="row">
                    <div class="col-md-6">
                        <label style="text-align:left;" for="txtQuotationCoyName" class="col-md-4 control-label">Customer Name</label>
                        <div class="col-sm-7">
                             <input id="txtQuotationCoyName" maxlength="100" type="text" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label style="text-align:left;" for="cobQuotationLocCode" class="col-sm-4 control-label">Location Code</label>
                        <div class="col-sm-7">
                            <select id="cobQuotationLocCode" class="form-control" onchange="populateLocationDetail();">
                                <?php echo $this->getLocationAllOption(); ?>
                            </select>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-12">
                                <label style="text-align:left;" for="txtQuotationLocContactName" class="col-sm-4 control-label">Job Loc. Contact</label>
                                <div class="col-sm-7">
                                     <textarea style="resize:none;" id="txtQuotationLocContactName" maxlength="100" type="text" class="form-control" rows="1" readonly></textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                            <br>
                                    <i class="fa fa-phone col-sm-1" style="text-align:left;color:black;margin-top: 10px;"></i>
                                    <div class="col-sm-4">
                                        <input id="txtQuotationLocContactPhone" maxlength="100" type="text" class="form-control" readonly>
                                    </div>
                                    <i class="fa fa-envelope col-sm-1" style="text-align:left;color: black;margin-top: 10px;"></i>
                                    <div class="col-sm-5">
                                        <input id="txtQuotationLocContactEmail" maxlength="100" type="text" class="form-control" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label style="text-align:left;" for="txtQuotationLocContactAddress" class="col-sm-4 control-label">Job Location Address</label>
                        <div class="col-sm-7">
                             <textarea style="" id="txtQuotationLocContactAddress" rows="4" type="text" class="form-control" readonly></textarea>
                        </div>
                    </div>
                </div>

                <hr/>
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-12">
                                <label style="text-align:left;" for="txtQuotationJobNumber" class="col-sm-4 control-label">Quotation Number</label>
                                <div class="col-sm-5">
                                     <input id="txtQuotationJobNumber" maxlength="100" type="text" class="form-control" value="Auto" readonly>
                                </div>
                                <div class="col-sm-3" style="display:none">
                                    <input id="chkQuotationActive" type="checkbox"> Complete
                                </div>
                            </div>
                            <div class="col-md-12">
                            <br>
                                <label style="text-align:left;" for="txtQuotationJobType" class="col-sm-4 control-label">Job Type</label>
                                <div class="col-sm-7">
                                    <select id="txtQuotationJobType" class="form-control">
                                        <?php echo $this->getJobTypeOption(); ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <br>
                                <label style="text-align:left;" for="txtQuotationJobConfirmDate" class="col-sm-4 control-label">Job Confirm Date</label>
                                <div class="col-sm-7">
                                    <input id="txtQuotationJobConfirmDate" maxlength="100" type="text" value="<?php echo date_create('now')->format('d/m/Y'); ?>" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">

                        <label style="text-align:left;" for="txtCentreJobName" class="col-sm-4 control-label">Project/Plan Number</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" disabled id="txtQuotationJobPlanNo">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <br>
                        <label style="text-align:left;" for="txtQuotationJobName" class="col-sm-4 control-label">Job Title</label>
                        <div class="col-sm-7">
                            <textarea id="txtQuotationJobName" maxlength="100" type="text" class="form-control" rows="4"></textarea>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <!-- <div class="col-md-6">
                        <label style="text-align:left;" for="txtQuotationJobConfirmDate" class="col-sm-4 control-label">Job Confirm Date</label>
                        <div class="col-sm-7">
                            <input id="txtQuotationJobConfirmDate" maxlength="100" type="text" value="<?php echo date_create('now')->format('d/m/Y'); ?>" class="form-control">
                        </div>
                    </div> -->
                    <div class="col-md-6">
                        <label style="text-align:left;" for="txtQuotationJobStartDate" class="col-sm-4 control-label">Job Start Date</label>
                        <div class="col-sm-7">
                            <input id="txtQuotationJobStartDate" maxlength="100" type="text" value="<?php echo date_create('now')->format('d/m/Y'); ?>" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label style="text-align:left;" for="txtQuotationTotalMandays" class="col-sm-4 control-label">Total Mandays</label>
                        <div class="col-sm-7">
                            <input id="txtQuotationTotalMandays" maxlength="100" type="text" class="form-control">
                        </div>
                    </div>
                </div>
                
                <div class="row" style="display:none;">
                    <div class="col-md-6">
                        <label style="text-align:left;" for="txtQuotationProductType" class="col-sm-4 control-label">Product</label>
                        <div class="col-sm-7">
                            <select id="txtQuotationProductType" class="form-control">
                                <option value='0'>-- Select a Product --</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label style="text-align:left;" for="txtQuotationBrand" class="col-sm-4 control-label">Brand</label>
                        <div class="col-sm-7">
                            <select id="txtQuotationBrand" class="form-control" onchange="populateModelbyBrandAndLoc()">
                                <?php //echo $this->getBrand(); ?>
                                <option value='0'>-- Select a Brand --</option>
                            </select>
                        </div>
                    </div>
                </div>
             
                <div class="row" style="display:none;">
                    <div class="col-md-6">
                        <label style="text-align:left;" for="txtQuotationModel" class="col-sm-4 control-label">Model</label>
                        <div class="col-sm-7">
                            <select id="txtQuotationModel" class="form-control" onchange="populateSerialNumByBrandLocModel()">
                                <?php //echo $this->getModel(); ?>
                                <option value='0'>-- Select a Model --</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label style="text-align:left;" for="txtQuotationSerialNumber" class="col-sm-4 control-label">Serial Number</label>
                        <div class="col-sm-7">
                            <!-- <input id="txtCentreSerialNumber" maxlength="100" type="text" class="form-control"> -->
                            <select id="txtQuotationSerialNumber" class="form-control">
                                <?php //echo $this->getModel(); ?>
                                <option value='0'>-- Select a Serial Number --</option>
                            </select>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <!-- <div class="col-md-6">
                        <label style="text-align:left;" for="txtQuotationTotalMandays" class="col-sm-4 control-label">Total Mandays</label>
                        <div class="col-sm-7">
                            <input id="txtQuotationTotalMandays" maxlength="100" type="text" class="form-control">
                        </div>
                    </div> -->
                    <div class="col-md-6" style="display:none">
                        <label style="text-align:left;" for="txtQuotationGrn" class="col-sm-4 control-label">Quotation Status</label>
                        <div class="col-sm-7">
                            <select id="txtQuotationGrn" class="form-control">
                                
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row" style="display:none;">
                    <div class="col-md-6" style="margin-top: 20px;">
                        <label style="text-align:left;" class="col-sm-4 control-label"></label>
                        <div class="col-sm-7">
                            <button title="Move to Job" onclick="return showJobEquipment();" id="btnShowEquipment" class="btn btn-primary">Show Equipment</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane" id="job-quotation-task">
                <div class="row" style="margin-left: 20px;margin-right: 20px;margin-top: 20px;">
                    <button class="btn btn-success" onclick="popupSaveTemplateQuotation();"><span><i class="glyphicon glyphicon-floppy-disk"></i></span> Save As Template</button>
                    <button class="btn btn-primary" onclick="popupLoadTemplateQuotation();"><span><i class="glyphicon glyphicon-transfer"></i></span> Load Template</button>
                </div>
                <div class="row" style="margin-left: 20px;margin-right: 20px;">
                    <table class="table table-striped" style="width:100%;" >
                        <thead>
                            <tr>
                                
                                <th style="width: 5%">Phase</th>
                                <th style="width: 20%">Task</th>
                             
                                <th style="width: 33%">Task Description</th>
                                <th style="width: 15%">Date</th>
                                <th style="width: 12%">End Date</th>
                                <th style="width: 5%">Allocated <br> Hours</th>
                                <th style="width: 5%"></th>
                                <th style="width: 5%"></th>
                                
                            </tr>
                        </thead>
                        <tbody id="job-task-table">
                        </tbody>
                    </table>
                    <button style="float:right;" id="btnAddItem" onclick="javascript:addJobTask(this);" class="btn btn-success btnAddDetail">+</button>

                </div>
                <hr>
                <div class="row" style="margin-left: 20px;margin-right: 20px;">
                        <div class="form-group" style="margin-top: 20px;">
                            <label for="txtTotalTaskAllocated" class="col-sm-10 control-label">Allocated Hours:</label>
                            <div class="col-sm-1">
                                
                                <input type="text" class="form-control" disabled id="txtTotalTaskAllocated" style="text-align:right;" value="0">
                            </div>
                            <!-- <label style="text-align:left;max-width:180px;margin-left:79%" for="txtTotalTaskAllocated" class="col-sm-2 control-label">Total Allocated Hours</label>
                            <div class="col-sm-1" style="width:120px;float:right;" >
                                <input style="text-align:right" id="txtTotalTaskAllocated" maxlength="100" type="number" class="form-control" >
                            </div> -->
                        </div>   
                        <div class="form-group" style="margin-top: 20px;">
                            <label for="txtTotalTaskMandays" class="col-sm-10 control-label">Allocated Mandays:</label>
                            <div class="col-sm-1">
                                
                                <input type="text" class="form-control" disabled id="txtTotalTaskMandays" style="text-align:right;" value="0">
                            </div>
                            <!-- <label style="text-align:left;max-width:180px;margin-left:79%" for="txtTotalTaskMandays" class="col-sm-2 control-label">Total mandays</label>
                            <div class="col-sm-1" style="width:120px;float:right;" >
                                <input style="text-align:right" id="txtTotalTaskMandays" maxlength="100" type="number" class="form-control" >
                            </div> -->
                        </div>  
                    
                </div>
            </div>
        </div>
   </div>
</div>
 <!-- Equipment Modal HTML -->
 <div id="equipmentModal" class="modal fade" style="overflow: auto;overflow-y: scroll;">
    <div class="modal-dialog" style="width: 85%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" onclick="return closeJobEquipment();" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Equipment Detail</h4>
            </div>
            
            <div class="modal-body" style="width: 100%">
                <div id="equipmentModalContent" style="width: 100%">
                <table class="table table-striped" id="equipmentData" style="width: 100%">
                            <thead>
                                <th style="display: none">
                                    Product_id
                                </th>
                                <th style="display: none">
                                    Brand_id
                                </th>
                                <th style="display: none">
                                    Model_id
                                </th>

                                <th>
                                    Product
                                </th>
                                <th>
                                    Brand
                                </th>
                                <th>
                                    Model
                                </th>
                                <th>
                                    Serial Number
                                </th>
                                <th>
                                    Warranty Start Date
                                </th>
                                <th>
                                    Warranty End Date
                                </th>
                                <th>
                                    Ext. <br>Warranty <br>Start Date
                                </th>
                                <th>
                                    Ext. <br>Warranty <br>End Date
                                </th>
                                <th>
                                    Schedule Date
                                </th>
                            </thead>
                            <tbody id="equipmentData-body">

                            </tbody>
                        </table>
                </div>
            </div>
            
            <div class="modal-footer">
                <div id="equipmentModalContent">
               </div>
            </div>
        </div>
    </div>
</div> 

<script type="text/javascript">
    $(document).ready(function () {
    for (var i = 1; i <= 4; i++) {
        $('#txtBillDate'+i).datepicker({
            format: "mm/yyyy",
            viewMode: "months", 
            minViewMode: "months"
        });

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

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

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