<div class="row">
    <div class="col-lg-12">
        <div class="card-body row">
            <div class="col-lg-4">
                <div class="form-group row">
                    <div class="col-lg-12">
                        <label class="col-lg-12 col-form-label"></label>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group row">
                    <label class="col-lg-2 col-form-label" style="font-weight:bold;">Preview = </label>
                    <div class="col-lg-2">
                        <div class="kt-checkbox-inline">
                            <label class="kt-checkbox kt-checkbox--brand">
                                <input type="checkbox" id="chkSelectMS" onclick="javascript:onCheckChanged(this, 'txtPageMS');" /> Tab Select
                                <span></span>
                            </label>
                        </div>
                    </div>
                    <div class="col-lg-2" style="max-width: 75px;">
                        <input style="text-align:right" type="number" class="form-control" id="txtPageMS">
                    </div>
                    <label class="col-lg-2 col-form-label">Tab Sequence</label>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="card-body row" style="padding-top: 0px;">
            <div class="col-lg-12">
                <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded">
                    <table class="kt-datatable__table" id="table_data">
                        <thead class="kt-datatable__head" >
                            <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                <th colspan="6" style="padding:0px;padding-bottom: 10px;" data-field="number" class="kt-datatable__cell" id="col_no"><button class="btn btn-primary" onclick="popupSaveTemplateMaintenance();populateMaintenanceTemplateList();" data-target="#SaveMaintenanceTemplateConfirmationView" id="btnSaveTempMS" data-toggle="modal">Save As Template</button><button class="btn btn-success ml-2" onclick="popupLoadTemplateMaintenance();" data-target="#LoadMaintenanceTemplateConfirmationView" data-toggle="modal" id="btnLoadTempMS">Load Template</button></th>
                            </tr>
                            <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                <th data-field="id" class="kt-datatable__cell" id="col_id" style="display: none;"><span>ID </th>
                                <th data-field="number" class="kt-datatable__cell" id="col_no"><span style="width: 50px;">No. </th>
                                <th data-field="description" class="kt-datatable__cell" id="col_description"><span style="width: 650px;">Description </span></th>
                                <th data-field="amount" class="kt-datatable__cell" id="col_amount"><span style="width: 120px;">Amount </span></th>
                                <th data-field="copy" class="kt-datatable__cell" style="width:50px;" id="col_copy"></th>
                                <th data-field="delete" class="kt-datatable__cell" style="width:50px;" id="col_delete"></th>
                            </tr>                            
                        </thead>
                        <tbody class="kt-datatable__body" id="sales-quotation-maintenance-list">
                        </tbody>
                        <tfoot>
                            <!-- <tr data-row="row0" class="dnd-moved kt-datatable__row" style="left: 0px;" >
                                <td style="display: none;"></td>
                                <td data-field="nomber" class="kt-datatable__cell" style="vertical-align:top;width:50px;"></td>
                                <td data-field="desc" class="kt-datatable__cell" style="width: 600px;text-align:right;"></td>                                
                                <td data-field="type" class="kt-datatable__cell" style="vertical-align:top;width: 120px;"></td>
                                <td data-field="type" class="kt-datatable__cell" style="vertical-align:top;width: 50px;"></td>
                                <th data-field="delete" class="kt-datatable__cell" style="width:50px;" id="col_delete">
                                    <button type='button' class='btn btn-icon btn-success' id='btnAddMaintenance' onclick='javascript:addSalesQuotationMaintenanceData();'><i class='fa fa-plus'></i></button>
                                </th>
                            </tr> -->
                            <tfoot>
                            <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                <th data-field="id" class="kt-datatable__cell" id="col_id" style="display: none;"></th>
                                <th data-field="number" class="kt-datatable__cell" id="col_no" ></th>
                                <th data-field="qty" class="kt-datatable__cell" id="col_qty" style="display: none;">
                                </th>
                                <th data-field="discount" class="kt-datatable__cell" id="col_discount" style="text-align: -webkit-right;">
                                <div class="form-group row col-md-3"><span>Subtotal</span></div>
                                </th>
                                <th data-field="amount" class="kt-datatable__cell" id="col_amount" >
                                    <input type='text' class='form-control' name='input_row' id='txtSalesMaintenanceSubtotal' value='0.00' placeholder='0.00' style='text-align:right' disabled />
                                 </th>
                                <th data-field="delete" class="kt-datatable__cell kt-datatable__cell--center" style="width:50px;" id="col_delete">
                                    <button type='button' class='btn btn-icon btn-success btn-sm btn-icon-md' id='btnAddMaintenance' onclick='javascript:addSalesQuotationMaintenanceData();'><i class='fa fa-plus'></i></button>
                                </th>
                                <th data-field="blank" class="kt-datatable__cell" style="width: 100%;" id="col_blank">&nbsp;</th>
                            </tr>

                            <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                <th data-field="id" class="kt-datatable__cell" id="col_id" style="display: none;"></th>
                                <th data-field="number" class="kt-datatable__cell" id="col_no" ></th>
                                <th data-field="qty" class="kt-datatable__cell" id="col_qty" style="display: none;"></th>
                                <th data-field="discount" class="kt-datatable__cell" id="col_discount" style="text-align: -webkit-right;">
                                    <div class="form-group row col-md-6" style="padding-left: 45px;">
                                        <select class="form-control col-md-2" style="min-width: 120px;" id="cobSalesMaintenanceDiscType" onchange="changeMaintenanceDiscountType(this);">
                                        <option value="">-- Select --</option>    
                                        <option value="P">Percentage</option>
                                        <option value="A">Amount</option>
                                        </select>&nbsp;&nbsp;
                                        <span style="width: 30px;margin-top:7px;">Disc</span>&nbsp;<input type="text" class="form-control" style="width: 50px;text-align:right;" id='txtSalesMaintenanceDiscPercentage' value="0" onchange="javascript:calculateMaintenanceTotal();">&nbsp;<span style="width: 10px;margin-top:7px;"> %</span>
                                    </div>
                                </th>
                                <th data-field="amount" class="kt-datatable__cell" id="col_amount" >
                                    <input type='text' class='form-control' name='input_row' id='txtSalesMaintenanceDiscTotal' value='0.00' placeholder='0.00' style='text-align:right' disabled />
                                 </th>
                                <th data-field="delete" class="kt-datatable__cell kt-datatable__cell--center" style="width:50px;" id="col_delete">
                                    
                                </th>
                                <th data-field="blank" class="kt-datatable__cell" style="width: 100%;" id="col_blank">&nbsp;</th>
                            </tr>

                            <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                <th data-field="id" class="kt-datatable__cell" id="col_id" style="display: none;"></th>
                                <th data-field="number" class="kt-datatable__cell" id="col_no" ></th>
                                <th data-field="qty" class="kt-datatable__cell" id="col_qty" style="display: none;"></th>
                                <th data-field="discount" class="kt-datatable__cell" id="col_discount" style="text-align: -webkit-right;">
                                    <div class="form-group row col-md-3">
                                        <span style="width: 30px;margin-top:7px;">GST</span>&nbsp;<input type="text" class="form-control" style="width: 50px;text-align:right;" id='txtSalesMaintenanceGstPercentage' value="0" onchange="javascript:calculateMaintenanceTotal();">&nbsp;<span style="width: 10px;margin-top:7px;"> %</span>
                                    </div>
                                </th>
                                <th data-field="amount" class="kt-datatable__cell" id="col_amount" >
                                    <input type='text' class='form-control' name='input_row' id='txtSalesMaintenanceGstTotal' value='0.00' placeholder='0.00' style='text-align:right' disabled />
                                 </th>
                                <th data-field="delete" class="kt-datatable__cell kt-datatable__cell--center" style="width:50px;" id="col_delete">
                                    
                                </th>
                                <th data-field="blank" class="kt-datatable__cell" style="width: 100%;" id="col_blank">&nbsp;</th>
                            </tr>

                            <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                <th data-field="id" class="kt-datatable__cell" id="col_id" style="display: none;"></th>
                                <th data-field="number" class="kt-datatable__cell" id="col_no" ></th>
                                <th data-field="qty" class="kt-datatable__cell" id="col_qty" style="display: none;"></th>
                                <th data-field="discount" class="kt-datatable__cell" id="col_discount" style="text-align: -webkit-right;">
                                <div class="form-group row col-md-3"><span>Grand Total</span></div>
                                </th>
                                <th data-field="amount" class="kt-datatable__cell" id="col_amount" >
                                    <input type='text' class='form-control' name='input_row' id='txtSalesMaintenanceGrandTotal' value='0.00' placeholder='0.00' style='text-align:right' disabled />
                                 </th>
                                <th data-field="delete" class="kt-datatable__cell kt-datatable__cell--center" style="width:50px;" id="col_delete">
                                    
                                </th>
                                <th data-field="blank" class="kt-datatable__cell" style="width: 100%;" id="col_blank">&nbsp;</th>
                            </tr>
                        </tfoot>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<label class="col-lg-10 col-form-label text-right" style="font-weight:bold;display: none;" id="lblSalesMaintenanceCurr">SGD</label>
<input type="text" class="form-control text-right" style="display: none;" value="0" id="txtSalesMaintenanceId">

<!-- <div class="row">
    <div class="col-lg-12">
        <div class="card-body row">
            <div class="col-lg-4">
                <div class="form-group row">
                    <div class="col-lg-12">
                        <label class="col-lg-12 col-form-label"></label>
                    </div>
                </div>
                
            </div>
            <div class="col-lg-2">
                <div class="form-group row">
                    <div class="col-lg-2" style="display: none;">
                    </div>
                    <div class="col-lg-1"></div>
                    <div class="col-lg-2">
                       <label class="col-lg-10 col-form-label text-right" style="font-weight:bold;" id="lblSalesMaintenanceCurr">SGD</label>
                    </div>
                    <div class="col-lg-6">
                       <input type="text" class="form-control text-right" style="font-weight:bold;" value="0.00" id="txtSalesMaintenanceTotalAmount" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> -->