<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" id="div-cover-print">
                <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="chkSelectCover" onclick="javascript:onCheckChanged(this, 'txtPageCover');" /> 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="txtPageCover" />
                    </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="cmbCoverPageDiv">
    <select id="cmbCoverPageDefault" class="form-control cmbCoverPageDefault">
        <?php echo $this->getCoverPageOption(); ?>
    </select>
</div>

<!-- use template? -->
<!--  <div class="col-lg-6">
   <input type="text" class="form-control" value="0" id="txtUseTemplate">
   <input type="text" class="form-control" value="0" id="txtTemplateId">
</div>
 -->

 <button class="btn btn-primary" onclick="popupSaveTemplateCover();populateCoverTemplateList();" data-target="#SaveCoverTemplateConfirmationView" id="btnSaveTempCover" data-toggle="modal">Save As Template</button>
 <button class="btn btn-success ml-2" onclick="popupLoadTemplateCover();" data-target="#LoadCoverTemplateConfirmationView" data-toggle="modal" id="btnLoadTempCover">Load Template</button>

<form id="form_cover" action="#" enctype="multipart/form-data">
<div class="row">
    <div class="col-lg-12">
        <div class="card-body row" style="padding-top: 0px;">
            <div class="col-lg-10">
                <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"></th>
                            </tr>
                            <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                <th class="kt-datatable__cell" style="display: none;"><span>ID </th>
                                <th class="kt-datatable__cell" style="display: none;"><span>Line No. </th>
                                <th class="kt-datatable__cell"><span>Cover</span></th>
                                <!-- <th class="kt-datatable__cell" style="width: 25%;"><span>Upload</span></th>
                                <th class="kt-datatable__cell" style="width:1%;"></th>
                                <th class="kt-datatable__cell" style="width:1%;"></th>
                                <th class="kt-datatable__cell" style="width:1%;"></th> -->
                            </tr>                            
                        </thead>
                        <tbody class="kt-datatable__body"  id="sales-quotation-cover-list">
                        <tr data-row='sales-quotation-cover-rows-1' id='sales-quotation-cover-rows-1' class='dnd-moved kt-datatable__row' style='left: 0px;'> 
                            <td data-field='id' class='kt-datatable__cell' style='display: none;'>
                            <input type='text' class='form-control' name='input_row' id='txtCoverId1' value='-1' />
                            </td> 

                            <td data-field='lineno' class='kt-datatable__cell' style='display: none;'>
                            <input type='text' class='form-control' name='input_row' id='txtCoverLineNo1' />
                            </td> 

                            <td class='kt-datatable__cell' style='width:15%;vertical-align:top;'>
                            <div style='width:250px;vertical-align:top;'>
                            <select id="cmbCoverPage1" class="form-control cmbCoverPage1" onchange="javascript:onChangedSelectionCoverPage(this,1);">
                                <?php echo $this->getCoverPageOption(); ?>
                            </select>
                            </div><div>Maximum Lines: <span id='maximum_lines1'>0</span></div>
                            <!-- <div>Lines Used: <span id='lines_used1'>0</span></div> -->
                            <input type='hidden' class='form-control' id='txtCoverPageId1' value='0' />
                            <input type='hidden' class='form-control' id='txtCoverPageLine1' value='0' /><br/>                    
                            <textarea class='form-control' style='width:850px;resize:none;' rows='1' placeholder='Description' id='txtCoverDesc1' onkeypress='javascript:onInputCoverDescription(this, 1);'></textarea>
                            </td>

                            <!-- <td class='kt-datatable__cell' style='width: 25%;vertical-align:top;'>
                            <input type='file' class='form-control' name='txtCoverUpload1' id='txtCoverUpload1' placeholder='Select file...' onchange='javascript:onChangedSalesQuotationCoverUpload(this.form, 1);' />
                            <input type='text' class='form-control' id='txtCoverFilename1' />
                            <input type='hidden' class='form-control' id='txtCoverDocument1' />
                            </td>

                            <td class='kt-datatable__cell' style='width: 1%;vertical-align:top;'>
                            <button type='button' class='btn btn-icon btn-warning btn-sm btn-icon-md' id='btnCoverUpload1' onclick='uploadSalesQuotationCoverPage(1);'><i class='fa fa-upload'></i></button></td> 

                            <td class='kt-datatable__cell' style='width: 1%;vertical-align:top;'>
                            <button type='button' class='btn btn-icon btn-danger btn-sm btn-icon-md' id='btnRemoveCover1' onclick='clearSalesQuotationCoverData(1);'><i class='fa fa-trash'></i></button></td>  -->
                        </tr>
                        <tr data-row='sales-quotation-cover-rows-2' id='sales-quotation-cover-rows-2' class='dnd-moved kt-datatable__row' style='left: 0px;'> 
                            <td data-field='id' class='kt-datatable__cell' style='display: none;'>
                            <input type='text' class='form-control' name='input_row' id='txtCoverId2' value='-1' />
                            </td> 

                            <td data-field='lineno' class='kt-datatable__cell' style='display: none;'>
                            <input type='text' class='form-control' name='input_row' id='txtCoverLineNo2' />
                            </td> 

                            <td class='kt-datatable__cell' style='width:15%;vertical-align:top;'>
                            <div style='width:250px;vertical-align:top;'>
                            <select id="cmbCoverPage2" class="form-control cmbCoverPage2" onchange="javascript:onChangedSelectionCoverPage(this,2);">
                                <?php echo $this->getCoverPageOption(); ?>
                            </select>
                            </div><div>Maximum Lines: <span id='maximum_lines2'>0</span></div>
                            <!-- <div>Lines Used: <span id='lines_used2'>0</span></div> -->
                            <input type='hidden' class='form-control' id='txtCoverPageId2' value='0' />
                            <input type='hidden' class='form-control' id='txtCoverPageLine2' value='0' /><br/>                    
                            <textarea class='form-control' style='width:850px;resize:none;' rows='1' placeholder='Description' id='txtCoverDesc2' onkeypress='javascript:onInputCoverDescription(this, 2);'></textarea>
                            </td>

                            <!-- <td class='kt-datatable__cell' style='width: 25%;vertical-align:top;'>
                            <input type='file' class='form-control' name='txtCoverUpload2' id='txtCoverUpload2' placeholder='Select file...' onchange='javascript:onChangedSalesQuotationCoverUpload(this.form, 2);' />
                            <input type='text' class='form-control' id='txtCoverFilename2' />
                            <input type='hidden' class='form-control' id='txtCoverDocument2' />
                            </td>

                            <td class='kt-datatable__cell' style='width: 1%;vertical-align:top;'>
                            <button type='button' class='btn btn-icon btn-warning btn-sm btn-icon-md' id='btnCoverUpload2' onclick='uploadSalesQuotationCoverPage(2);'><i class='fa fa-upload'></i></button></td> 

                            <td class='kt-datatable__cell' style='width: 1%;vertical-align:top;'>
                            <button type='button' class='btn btn-icon btn-danger btn-sm btn-icon-md' id='btnRemoveCover2' onclick='clearSalesQuotationCoverData(2);'><i class='fa fa-trash'></i></button></td>  -->
                        </tr>
                        <tr data-row='sales-quotation-cover-rows-3' id='sales-quotation-cover-rows-3' class='dnd-moved kt-datatable__row' style='left: 0px;'> 
                            <td data-field='id' class='kt-datatable__cell' style='display: none;'>
                            <input type='text' class='form-control' name='input_row' id='txtCoverId3' value='-1' />
                            </td> 

                            <td data-field='lineno' class='kt-datatable__cell' style='display: none;'>
                            <input type='text' class='form-control' name='input_row' id='txtCoverLineNo3' />
                            </td> 

                            <td class='kt-datatable__cell' style='width:15%;vertical-align:top;'>
                            <div style='width:250px;vertical-align:top;'>
                            <select id="cmbCoverPage3" class="form-control cmbCoverPage3" onchange="javascript:onChangedSelectionCoverPage(this,3);">
                                <?php echo $this->getCoverPageOption(); ?>
                            </select>
                            </div><div>Maximum Lines: <span id='maximum_lines3'>0</span></div>
                            <!-- <div>Lines Used: <span id='lines_used3'>0</span></div> -->
                            <input type='hidden' class='form-control' id='txtCoverPageId3' value='0' />
                            <input type='hidden' class='form-control' id='txtCoverPageLine3' value='0' /><br/>                    
                            <textarea class='form-control' style='width:850px;resize:none;' rows='1' placeholder='Description' id='txtCoverDesc3' onkeypress='javascript:onInputCoverDescription(this, 3);'></textarea>
                            </td>

                            <!-- <td class='kt-datatable__cell' style='width: 25%;vertical-align:top;'>
                            <input type='file' class='form-control' name='txtCoverUpload3' id='txtCoverUpload3' placeholder='Select file...' onchange='javascript:onChangedSalesQuotationCoverUpload(this.form, 3);' />
                            <input type='text' class='form-control' id='txtCoverFilename3' />
                            <input type='hidden' class='form-control' id='txtCoverDocument3' />
                            </td>

                            <td class='kt-datatable__cell' style='width: 1%;vertical-align:top;'>
                            <button type='button' class='btn btn-icon btn-warning btn-sm btn-icon-md' id='btnCoverUpload3' onclick='uploadSalesQuotationCoverPage(3);'><i class='fa fa-upload'></i></button></td> 

                            <td class='kt-datatable__cell' style='width: 1%;vertical-align:top;'>
                            <button type='button' class='btn btn-icon btn-danger btn-sm btn-icon-md' id='btnRemoveCover3' onclick='clearSalesQuotationCoverData(3);'><i class='fa fa-trash'></i></button></td>  -->
                        </tr>
                        </tbody>
                        <!-- <tfoot>
                            <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                <th class="kt-datatable__cell" id="col_id" style="display: none;"><span>ID </span></th>
                                <th class="kt-datatable__cell" style="display: none;"><span>Line No. </th>
                                <th class="kt-datatable__cell" ><span> </span></th>
                                <th class="kt-datatable__cell" ><span> </span></th>
                                <th class="kt-datatable__cell" style="width:1%;"></th>
                                <th data-field="delete" class="kt-datatable__cell" style="width:1%;" id="col_delete">
                                    <button type='button' class='btn btn btn-icon btn-success btn-sm btn-icon-md' onclick='javascript:addSalesQuotationCoverData()'><i class='fa fa-plus'></i></button>
                                </th>
                            </tr>
                        </tfoot> -->
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</form>

<script>
$(document).ready(function () {
    showCoverPage(1);
    onChangedSelectionCoverPage($('#cmbCoverPage1'),1);
});
</script>