<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;
    }

    #software-list-table td input[type=text],
    #software-list-table td select {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        border: none;
        padding: 10px;
        box-sizing: border-box;
    }

    #software-list-table table {
        border-collapse: collapse;
        width: 100%;
    }

    #software-list-table th, td {
        padding: 8px 16px;
    }

    #software-list-table td {
        vertical-align: middle !important;
        padding: 0px !important;
        text-align: center !important;
        background-color: #eee;
    }

    #software-list-table td {
        position: relative;
    }
</style>

<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">

                    <div style="display:none;">
                        <select class="form-control" id="cobCustomerSoftwareOption">
                            <?php echo $this->getSoftwareOption(); ?>
                        </select>
                    </div>
                    <table class="kt-datatable__table" id="customer-software-table">
                        <thead class="kt-datatable__head" style="background-color: #E0E0E0">
                            <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                <th data-field="softwareid" class="kt-datatable__cell" id="col_softwareid" name="customer-software_sort_column" onclick="sortingColumn(this,'col_softwareid','asc');" style="display: none;">
                                    ID<span><i class="fa"></i></span>
                                </th>
                                <th data-field="softwarecode" class="kt-datatable__cell" style="width: 25%;" id="col_softwarecode" name="customer-software_sort_column" onclick="sortingColumn(this,'col_softwarecode','desc');">
                                    Software<span><i class="fa fa-sort-up"></i></span>
                                </th>
                                <th data-field="softwareVersion" class="kt-datatable__cell" style="width: 15%;" id="col_softwareVersion" name="customer-software_sort_column" onclick="sortingColumn(this,'col_softwareVersion','asc');">
                                    Version Number<span><i class="fa"></i></span>
                                </th>                                
                                <th data-field="softwareUser" class="kt-datatable__cell" style="width: 15%;" id="col_softwareUser" name="customer-software_sort_column" onclick="sortingColumn(this,'col_softwareUser','asc');">
                                    User Number<span><i class="fa"></i></span>
                                </th>                                
                                <th data-field="softwareType" class="kt-datatable__cell" style="width: 15%;" id="col_softwaretype" name="customer-software_sort_column" onclick="sortingColumn(this,'col_softwareType','asc');">
                                    Type<span><i class="fa"></i></span>
                                </th>                                
                                <th data-field="softwareLiveDate" class="kt-datatable__cell" style="width: 15%;" id="col_softwareLiveDate" name="customer-software_sort_column" onclick="sortingColumn(this,'col_softwareLiveDate','asc');">
                                    Go Live Date<span><i class="fa"></i></span>
                                </th>                                
                                <th data-field="softwareRenewDate" class="kt-datatable__cell" style="width: 15%;" id="col_softwareRenewDate" name="customer-software_sort_column" onclick="sortingColumn(this,'col_softwareRenewDate','asc');">
                                    Renew Date<span><i class="fa"></i></span>
                                </th>                                
                                <th data-field="filter" class="kt-datatable__cell" style="width: 2%;" id="col_filter">
                                    <button type="button" id="btnFilterSoftware" style="border:0px;" onclick="filterRow('software-row-filter',this,true);"><i class="fa fa-filter" style="color:black;"></i></button>
                                </th>
                            </tr>
                            <!-- <tr data-row="software-rows-0" class="dnd-moved kt-datatable__row" style="left: 0px;" id="software-row-filter"> -->
                            <tr class="dnd-moved kt-datatable__row" style="left: 0px; display:none;" id="software-row-filter">
                                <td data-field="softwareid" class="kt-datatable__cell" id="col_softwareid" style="display: none;">&nbsp;</td>
                                <td data-field="softwarecode" class="kt-datatable__cell" id="col_softwarecode">
                                    <input type="text" class="form-control" name="customer-software-input-filter" id="txtcolsoftwarecode" onkeyup="filterData(this,1);" />
                                </td>
                                <td data-field="softwareVersion" class="kt-datatable__cell" id="col_softwareversion">
                                    <input type="text" class="form-control" name="customer-software-input-filter" id="txtcolsoftwareversion" onkeyup="filterData(this,2);" />
                                </td>
                                <td data-field="softwareType" class="kt-datatable__cell" id="col_softwaretype">
                                    <input type="text" class="form-control" name="customer-software-input-filter" id="txtcolsoftwaretype" onkeyup="filterData(this,3);" />
                                </td>
                                <td data-field="softwareUser" class="kt-datatable__cell" id="col_softwareuser">
                                    <input type="text" class="form-control" name="customer-software-input-filter" id="txtcolsoftwareuser" onkeyup="filterData(this,4);" />
                                </td>
                                <td data-field="softwareLiveDate" class="kt-datatable__cell" id="col_softwarelivedate">
                                    <input type="text" class="form-control" name="customer-software-input-filter" id="txtcolsoftwarelivedate" onkeyup="filterData(this,5);" />
                                </td>
                                <td data-field="softwareRenewDate" class="kt-datatable__cell" id="col_softwarerenewdate">
                                    <input type="text" class="form-control" name="customer-software-input-filter" id="txtcolsoftwarerenewdate" onkeyup="filterData(this,6);" />
                                </td>                            
                                <td data-field="filter" class="kt-datatable__cell" id="col_filter">&nbsp;</td>
                            </tr>
                        </thead>
                        <tbody class="kt-datatable__body" id="customer-software-table-body">
                        </tbody>
                    </table>
                    <br>
                    <div class="col-lg-12 text-right">
                        <button class="btn btn-success btn-sm btn-icon btn-icon-md" type="button" id="btnNewSoftware" onclick="newCustomerSoftware();"><i class="fa fa-plus"></i></button>
                    </div>
                </div>
            </div>
            <div class="col-md-8" style="margin-top: 20px;clear: both;" id="btnSaveCancel">
                <button class="col-sm-2 btn btn-secondary btnSaveCustomer" style="background-color:grey;color:white;margin-right: 10px;" type="button" data-toggle="modal">OK</button>
                <button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;" type="button" data-toggle="modal" onclick="cancelCustomerEntry();">Cancel</button>
            </div>
        </div>
    </div>
</div>