<style>
    .table-borderless th, .table-borderless td, .table-borderless thead th, .table-borderless tbody + tbody{
        padding:4px;
    }

    .kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell, .kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__body .kt-datatable__row > .kt-datatable__cell, .kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__foot .kt-datatable__row > .kt-datatable__cell > .kt-marginless{
        padding:4px;
    }
</style>
<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="chkSelectItems" onclick="javascript:onCheckChanged(this, 'txtPageItems');" /> Tab Select
                                <span></span>
                            </label>
                        </div>
                        <span class="form-text text-muted"></span>
                    </div>
                    <div class="col-lg-2" style="max-width: 75px;">
                        <input style="text-align:right" type="number" class="form-control" id="txtPageItems" />
                    </div>
                    <label class="col-lg-2 col-form-label">Tab Sequence</label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-sm-2" style="display: none">
<select id="cmbItemAdditionalComb" class="form-control cmbItemAdditionalComb">
    <?php echo $this->getAdditionalItemOption(); ?>
</select>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="card-body row" style="padding-top: 0px;">
            <div class="col-lg-12">
                <input type="hidden" class="form-control" id="txtSalesQuotationItemsId" value="-1">
                <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded" id="div_table_data" >
                    <table class="kt-datatable__table" id="table_data" >
                        <thead class="kt-datatable__head" >
                            <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="lineno" class="kt-datatable__cell" id="col_lineno" style="display: none;"><span>Line #</span></th>
                                <th data-field="number" class="kt-datatable__cell" id="col_no"><span style="width: 60px;">No. </th>
                                <th data-field="description" class="kt-datatable__cell" id="col_description"><span style="width: 600px;">Description </span></th>
                                <th data-field="unitprice" class="kt-datatable__cell" id="col_unitprice"><span style="width: 130px;">Unit Price </span></th>
                                <th data-field="qty" class="kt-datatable__cell" id="col_qty"><span style="width: 100px;">Quantity </span></th>
                                <th data-field="discount" class="kt-datatable__cell" id="col_discount"><span style="width: 120px;">Discount </span></th>
                                <th data-field="amount" class="kt-datatable__cell" id="col_amount"><span style="width: 120px;">Amount </span></th>
                                <th data-field="delete" class="kt-datatable__cell" style="width:50px;" id="col_delete"></th>
                                <th data-field="blank" class="kt-datatable__cell" style="width: 100%;" id="col_blank">&nbsp;</th>
                            </tr>                            
                        </thead>
                        <tbody class="kt-datatable__body"  id="sales-quotation-item-list">
                        </tbody>
                        <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;"><span>ID </span></th>
                                <th data-field="lineno" class="kt-datatable__cell" id="col_lineno" style="display: none;"><span>Line #</span></th>
                                <th data-field="number" class="kt-datatable__cell" id="col_no" ><span style="width: 50px;"> </span></th>
                                <th data-field="description" class="kt-datatable__cell" id="col_description" ><span style="width: 600px;"> </th>
                                <th data-field="unitprice" class="kt-datatable__cell" id="col_unitprice"><span style="width: 120px;"></span></th>
                                <th data-field="qty" class="kt-datatable__cell" id="col_qty">
                                <input type='hidden' class='form-control' name='input_row' id='txtsalesitemqtytotal' style='text-align:right' disabled />
                                </th>
                                <th data-field="discount" class="kt-datatable__cell" id="col_discount" >
                                    <span>Subtotal</span>
                                </th>
                                <th data-field="amount" class="kt-datatable__cell" id="col_amount" >
                                    <input type='text' class='form-control' name='input_row' id='txtsalesitemsubtotal' value='0.00' placeholder='0.00' style='text-align:right' onchange="javascript:calculateTotal();" disabled />
                                 </th>
                                <th data-field="delete" class="kt-datatable__cell kt-datatable__cell--center" style="width:50px;" id="col_delete">
                                    <button type='button' style="margin-left:3px" class='btn btn btn-icon btn-success btn-sm btn-icon-md' id="btnNewItem" onclick='addSalesQuotationItemData()' title="Add New Item"><i class='fa fa-plus'></i></button>
                                    <!-- <button type='button' style="margin-left:3px;display:none;" class='btn btn btn-icon btn-success btn-sm btn-icon-md' id="btnNewItemAdditional" onclick='addSalesQuotationItemAdditionalData()' title="Add New Item"><i class='fa fa-plus'></i></button> -->
                                </th>
                                <th data-field="blank" class="kt-datatable__cell" style="width: 100%;" id="col_blank">
                                <button type='button' style="margin-left:3px" class='btn btn btn-icon btn-default btn-sm btn-icon-md' onclick='addSalesQuotationItemSection()' title="Add New Section"><i class='fa fa-plus'></i></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 </span></th>
                                <th data-field="lineno" class="kt-datatable__cell" id="col_lineno" style="display: none;"><span>Line #</span></th>
                                <th data-field="number" class="kt-datatable__cell" id="col_no" ><span style="width: 50px;"> </span></th>
                                <th data-field="description" class="kt-datatable__cell" id="col_description" ><span style="width: 600px;"> </th>
                                <th data-field="unitprice" class="kt-datatable__cell" id="col_unitprice"><span style="width: 120px;"></span></th>
                                <th data-field="qty" class="kt-datatable__cell" id="col_qty">
                                    <select class="form-control" style="min-width: 120px;" id="cobsalesitemdisctype" onchange="changeItemDiscountType(this);">
                                    <option value="">-- Select --</option>    
                                    <option value="P">Percentage</option>
                                    <option value="A">Amount</option>
                                    </select>
                                </th>
                                <th data-field="discount" class="kt-datatable__cell" id="col_discount">
                                    <div class="form-group row col-md-12">
                                        <span style="width: 30px;margin-top:7px;">Disc</span>&nbsp;<input type="text" class="form-control" style="width: 50px;text-align:right;" id='txtsalesitemdiscpercentage' value="0" onchange="javascript:calculateTotal();">&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='txtsalesitemdisctotal' value='0.00' placeholder='0.00' style='text-align:right'  onchange="javascript:calculateTotal();" />
                                 </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;"><span>ID </span></th>
                                <th data-field="lineno" class="kt-datatable__cell" id="col_lineno" style="display: none;"><span>Line #</span></th>
                                <th data-field="number" class="kt-datatable__cell" id="col_no" ><span style="width: 50px;"> </span></th>
                                <th data-field="description" class="kt-datatable__cell" id="col_description" ><span style="width: 600px;"> </th>
                                <th data-field="unitprice" class="kt-datatable__cell" id="col_unitprice"><span style="width: 120px;"></span></th>
                                <th data-field="qty" class="kt-datatable__cell" id="col_qty"><span style="width: 100px;"></span></th>
                                <th data-field="discount" class="kt-datatable__cell" id="col_discount" >
                                    <div class="form-group row col-md-12">
                                        <span style="width: 30px;margin-top:7px;">GST</span>&nbsp;<input type="text" class="form-control" style="width: 50px;text-align:right;" id='txtsalesitemgstpercentage' value="0" onchange="javascript:calculateTotal();">&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='txtsalesitemgsttotal' 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;"><span>ID </span></th>
                                <th data-field="lineno" class="kt-datatable__cell" id="col_lineno" style="display: none;"><span>Line #</span></th>
                                <th data-field="number" class="kt-datatable__cell" id="col_no" ><span style="width: 50px;"> </span></th>
                                <th data-field="description" class="kt-datatable__cell" id="col_description" ><span style="width: 600px;"> </th>
                                <th data-field="unitprice" class="kt-datatable__cell" id="col_unitprice"><span style="width: 120px;"></span></th>
                                <th data-field="qty" class="kt-datatable__cell" id="col_qty"><span style="width: 100px;"></span></th>
                                <th data-field="discount" class="kt-datatable__cell" id="col_discount" >
                                    <span>Grand Total</span>
                                </th>
                                <th data-field="amount" class="kt-datatable__cell" id="col_amount" >
                                    <input type='text' class='form-control' name='input_row' id='txtsalesitemgrandtotal' 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>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>