<style>
.datepicker {
	z-index: 1110; /* must set here to let date picker display on top */
}
input[type=number] { 
    text-align: right; 
}
</style>
<div class="form-horizontal">
   <div id="formProject">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#pnlProjectGeneral" data-toggle="tab">General</a></li>
            <li><a href="#pnlProjectInvoice" data-toggle="tab">Invoice</a></li>
        </ul>
       
        <div class="tab-content clearfix">
            <div class="tab-pane active" id="pnlProjectGeneral">
                <br>
                <div class="form-group">
                    <label for="txtProjectID" class="col-sm-2 control-label">ID</label>
                    <div class="col-sm-2">
                        <input id="txtProjectID" maxlength="20" type="text" readonly class="form-control" value="Auto">
                    </div>
                    <div class="col-sm-3">
                        <input id="chkProjectActive" type="checkbox"> Active
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtProjectCode" class="col-sm-2 control-label">Job No.</label>
                    <div class="col-sm-3">
                         <input id="txtProjectCode" maxlength="50" type="text" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtProjectTitle" class="col-sm-2 control-label">Title</label>
                    <div class="col-sm-5">
                         <input id="txtProjectTitle" maxlength="255" type="text" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label for="cmbProjectCustomer" class="col-sm-2 control-label">Customer</label>
                    <div class="col-sm-5">
                        <select id="cmbProjectCustomer" class="form-control">
                            <?php echo $this->getCustomerOption(true); ?>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtProjectDesc" class="col-sm-2 control-label">Description</label>
                    <div class="col-sm-9">
                         <input id="txtProjectDesc" maxlength="255" type="text" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtProjectTotalMandays" class="col-sm-2 control-label">Total Mandays</label>
                    <div class="col-sm-2">
                         <input id="txtProjectTotalMandays" maxlength="10" type="text" style="text-align: right" class="form-control">
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="pnlProjectInvoice">
                <br>
                <div class="form-group">
                    <label for="txtProjectInvoiceNo" class="col-sm-2 control-label">Invoice No</label>
                    <div class="col-sm-3">
                         <input id="txtProjectInvoiceNo" maxlength="255" type="text" class="form-control">
                    </div>
                    <label for="txtProjectInvoiceBilled" class="col-sm-1 control-label">Billed</label>
                    <div class="col-sm-2">
                         <input id="txtProjectInvoiceBilled" style="text-align:right" maxlength="255" type="text" class="form-control">
                    </div>
                    <label for="txtProjectInvoicePaid" class="col-sm-1 control-label">Paid</label>
                    <div class="col-sm-2">
                         <input id="txtProjectInvoicePaid" style="text-align:right" maxlength="255" type="text" class="form-control">
                    </div>
                    <div class="col-sm-1">
                        <button id="btnProjectAddInvoice" class="btn btn-primary" onclick="return addProjectInvoice();">Add </button>
                    </div>
                </div>
                <hr>
                <table class="table table-striped" style="width:100%" >
                    <thead>
                        <tr>
                            <th style="width: 30%">Invoice No</th>
                            <th style="width: 30%">Billed</th>
                            <th style="width: 30%">Paid</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="project-invoice-table">
                    </tbody>
                </table>
            </div>
        </div>
   </div>
</div>
    
<hr/>
<script>
$(document).ready(function () {
});
</script>