<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="formActivityHeader"> 
        <div class="form-group">
            <label style="text-align:left;padding-left:40px;" for="txtActivityCode" class="col-lg-1 control-label">B.U.</label>
            <div class="col-lg-2">
                <select class="form-control" name="" id="">
                    <option value="">STRATEGIC BUSINESS GROUP PTE. LTD.</option>
                    <option value="">STRATEGIC BUSINESS GROUP SDN. BHD.</option>
                </select>            
            </div>

            <label style="text-align:left;padding-left:50px;" for="txtActivityCode" class="col-lg-1 control-label">Type</label>
            <div class="col-lg-1">
                <select class="form-control" name="" id="">
                    <option value="">Ad Svc</option>
                    <option value="">Contract</option>
                    <option value="">Project</option>
                    <option value="">License</option>
                </select>            
            </div>

            <button class="btn btn-success">Retrieve</button>
        </div>
        <div class="form-group">
            <label style="text-align:left;padding-left:40px;" for="txtActivityCode" class="col-lg-1 control-label">P. Co. Name</label>
            <div class="col-lg-2">
                <select class="form-control" name="" id="">
                    <option value="">SVG PTE. LTD.</option>
                </select>            
            </div>

            
        </div>
        <div class="form-group">
            <label style="text-align:left;padding-left:40px;" for="txtActivityCode" class="col-lg-1 control-label">Contact</label>
            <div class="col-lg-2">
                <select class="form-control" name="" id="">
                    <option value="">Mr. James</option>
                    <option value="">Mr. Bond</option>
                </select>            
            </div>

            <label style="text-align:left;padding-left:50px;" for="txtActivityCode" class="col-lg-1 control-label">Base Currency</label>
            <div class="col-lg-1">
                <input type="text" class="form-control">            
            </div>

        </div>
   </div>
</div>
<hr />
<ul class="nav nav-tabs">
    <li class="active"><a href="#quotissuetr" data-toggle="tab">Issue To Resolve</a></li>
    <li><a href="#quotitems" data-toggle="tab">Items</a></li>
    <li ><a href="#quotms" data-toggle="tab">M & S</a></li>
    <li ><a href="#quotpp" data-toggle="tab">Project Plan</a></li>
    <li ><a href="#quotcover" data-toggle="tab">Cover</a></li>
    <li ><a href="#quotfooter" data-toggle="tab">Footer</a></li>
    <li ><a href="#quotappen" data-toggle="tab">Appendix</a></li>
    <li ><a href="#quotfinal" data-toggle="tab">Final</a></li>
  </ul>
  <br>

<div class="tab-content clearfix">
    <div class="tab-pane active" id="quotissuetr">
        <div class="row">
            <label style="text-align:left;padding-left:50px;" for="txtActivityCode" class="col-lg-4 control-label">Issue to Solve</label>
            <div class="col-lg-1" >
                <span>select</span>
                <input type="checkbox">
            </div>
            
            <div class="col-lg-1" style="max-width: 90px;">
                <input type="text" class="form-control" style="text-align: right;">
            </div>
            
        </div>
        
        <div class="row" >
           
            <div class="col-md-6" style="text-align:left;padding-left:50px;margin-top:10px">
                <textarea class="form-control" name="" id="" cols="10" rows="10"></textarea>
            </div>
            
        </div>
    </div>
    <div class="tab-pane" id="quotitems">
        <div class="row">
            <label style="text-align:left;padding-left:50px;" for="txtActivityCode" class="col-lg-4 control-label"></label>
            <div class="col-lg-1" >
                <span>select</span>
                <input type="checkbox">
            </div>
            
            <div class="col-lg-1" style="max-width: 90px;">
                <input type="text" class="form-control" style="text-align: right;">
            </div>
            
        </div>
        <div class="row">
            <div class="col-lg-12" style="margin-top:10px">
                <table class="table">
                    <thead>
                        <tr>
                            <th rowspan="2" width="5%">No.</th>
                            <th width="55%">Line Item</th>
                            <th width="25%">Discount Reason</th>
                            <th width="15%">unit Price</th>
                        </tr>
                     
                    </thead>
                    <tbody>
                        <tr>
                            <td rowspan="2">1</td>
                            <td><input class="form-control" type="text" value="Item 1 - LG Curve Monitor 24' 75Hz "> </td>
                            <td></td>
                            <td><input class="form-control" type="number" value="200"></td>
                        </tr>
                        <tr>
                         
                            <td style="padding-left:50px"><input  class="form-control" type="text" value="Fragile item, must put bubble warp before sent to courier"></td>
                            <td><input class="form-control" type="text" value="New Year Discount"></td>
                            <td><input class="form-control" type="number" value="20"></td>
                        </tr>

                        <tr>
                            <td rowspan="2">2</td>
                            <td><input class="form-control" type="text" placeholder="Item"></td>
                            <td></td>
                            <td><input class="form-control" type="number" value="0"></td>
                        </tr>
                        <tr>
                         
                            <td style="padding-left:50px"><input class="form-control" type="text" placeholder="Comment"></td>
                            <td><input class="form-control" type="text" placeholder="Discount Reason"></td>
                            <td><input class="form-control" type="number" value="0"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12" style="margin-top:10px">
                <table class="table">
                    <thead>
                        <tr>
                            <th rowspan="2" width="5%"></th>
                            <th width="55%"></th>
                            <th width="25%"></th>
                            <th width="15%"></th>
                        </tr>
                       
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><label class="control-label" for="" style="float:right;margin-top:6px;">SGD</label></td>
                            <td><input class="form-control" type="number" value="180"></td>
                        </tr>
                       
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="quotms">
        <div class="row">
            <label style="text-align:left;padding-left:50px;" for="txtActivityCode" class="col-lg-4 control-label">Maintenace & Support</label>
            <div class="col-lg-1" >
                <span>select</span>
                <input type="checkbox">
            </div>
            
            <div class="col-lg-1" style="max-width: 90px;">
                <input type="text" class="form-control" style="text-align: right;">
            </div>
        </div>
    </div>
    <div class="tab-pane" id="quotpp">
    </div>
    <div class="tab-pane" id="quotfooter">
    </div>
    <div class="tab-pane" id="quotappen">
    </div>
    <div class="tab-pane" id="quotfinal">
    </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>