<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">
                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label">Add. Appendix:</label>
                            <div class="col-lg-7">
                                <input type="text" class="form-control" id="txtAdditionalAppendix" />
                                <span class="form-text text-muted"></span>
                            </div>
                        </div>
                    </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="chkSelectAppendix" onclick="javascript:onCheckChanged(this, 'txtPageAppendix');" /> 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="txtPageAppendix" />
                    </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" id="cmbSectionCombDiv">
    <select id="cmbSectionComb" class="form-control cmbSectionComb">
        <?php echo $this->getSectionOption(); ?>
    </select>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="card-body row" style="padding-top: 0px;">
            <div class="col-lg-8">
                <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="popupSaveTemplateAppendix();populateAppendixTemplateList();" data-target="#SaveAppendixTemplateConfirmationView" id="btnSaveTempAppendix" data-toggle="modal">Save As Template</button><button class="btn btn-success ml-2" onclick="popupLoadTemplateAppendix();" data-target="#LoadAppendixTemplateConfirmationView" data-toggle="modal" id="btnLoadTempAppexni">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" style="width: 50px;"><span>No. </th>
                                <th data-field="section" class="kt-datatable__cell" id="col_section" style="width: 300px;"><span>Section</span></th>
                                <th data-field="subject" class="kt-datatable__cell" id="col_subject" style="width: 320px;"><span>Subject</span></th>
                                <th data-field="description" class="kt-datatable__cell" id="col_description" style="width: 600px;"><span>Description</span></th>
                                <th data-field="copy" class="kt-datatable__cell" style="width:50px;" id="col_copy"></th>
                                <th data-field="action" class="kt-datatable__cell" style="width:50px;" id="col_action"></th>
                            </tr>                            
                        </thead>
                        <tbody class="kt-datatable__body"  id="sales-quotation-appendix-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 <i class="fa"></i></span></th>
                                <th data-field="" class="kt-datatable__cell" id="" ><span> <i class="fa"></i></span></th>
                                <th data-field="" class="kt-datatable__cell" id="" ><span> </span></th>
                                <th data-field="" class="kt-datatable__cell" id="" ><span> </span></th>
                                <th data-field="" class="kt-datatable__cell" id="" ><span> </span></th>
                                <th data-field="copy" class="kt-datatable__cell text-right" style="width:50px;" id="col_copy"></th>
                                <th data-field="action" class="kt-datatable__cell" style="width:50px;" id="col_action">
                                    <button type='button' class='btn btn btn-icon btn-success btn-sm btn-icon-md' onclick='addSalesQuotationAppendixData()'><i class='fa fa-plus'></i></button>
                                </th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>