<style type="text/css">
    label {
        font-weight: normal !important;
    }

    #businessNature-body-table tr {
        cursor: pointer;
    }

    tbody>tr.highlight>td {
        background: #aed1ea !important;
    }

    tbody>tr.highlight>td input {
        background: #aed1ea !important;
    }

    .tableFixHead {
        overflow: auto;
        height: 100px;
    }

    .tableFixHead thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: grey;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        padding: 8px 16px;
    }

    td {
        vertical-align: middle !important;
        padding: 0px !important;
        padding-left: 8px !important;
        text-align: left !important;
        background-color: #eee;
    }

    td.numericalValue {
        vertical-align: middle !important;
        padding: 0px !important;
        text-align: right !important;
        background-color: #eee;
    }

    td input,
    td select {
        border-radius: 0px !important;
        border-color: transparent !important;
        background-color: white;
    }

    #businessNatureLoadingModal {
        z-index: 9999 !important;
    }
</style>
<div id="screen[index]" style="padding-top: 20px;">
    <div>
        <div class="col-md-12">
        </div>
    </div>

    <div class="col-md-12" id="errorShow"></div>

    <div class="col-md-6" style="margin-top: 20px;">
        <div class="tableFixHead" id="testData" style="height: 600px;overflow: auto;">
            <table class="table table-bordered" style="width: 100%; max-width: 100%; margin-bottom: 20px;" id="businessNature-table">
                <thead style="background-color: grey;color:white;">
                    <tr>
                        <th width='4%'>
                            <i class="fa fa-filter" style="font-size:12px;cursor:pointer;" onclick="filterRow('businessNature-row-filter',this,true);"></i>
                        </th>
                        <th data-field="desc" class="kt-datatable__cell" style="width: 50%;" id="col_desc" name="businessNature_sort_column" onclick="sortingColumn(this,'col_desc','desc');">
                            Description<i class="fa fa-sort-up"></i>
                        </th>
                    </tr>
                    <tr style="left: 0px;" id="businessNature-row-filter">
                        <td width="4%" data-field="filter" id="col_filter">&nbsp;</td>
                        <td width="50%" data-field="desc" id="col_desc">
                            <input type="text" class="form-control" name="businessNature-input-filter" id="txtcoldesc" onkeyup="filterData(this,1);" />
                        </td>
                    </tr>
                </thead>
                <tbody id="businessNature-table-body">
                </tbody>
            </table>
        </div>
    </div>

    <div class="col-md-8" style="margin-top: 20px;clear: both;">
        <button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;" type="button" onclick="saveBusinessNature();">Ok</button>
		<button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;" type="button" onclick="addNewBusinessNatureLine();">Add New</button>
		<button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;" type="button" onclick="amendBusinessNatureLine();">Amend</button>
		<button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;" type="button" onclick="deleteBusinessNatureLine();">Delete</button>
    </div>
</div>

<!-- button to trigger the things -->
<button id="activatebuttonscreen[index]" onclick='reactivatescreen();' style="display: none;">activate screen button</button>
</div>

<div id="screen[index]a"></div>

<!-- //================================================================= -->
<!-- LOADING PROGRESS MODAL -->
<div id="businessNatureLoadingModal" tabindex="-1" class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color:#3c8dbc;color:white;">
                <h4 class="modal-title" id="businessNatureLoadingModalTitle">Processing...</h4>
            </div>
            <div class="modal-body">
                <div class="progress progress-striped active">
                    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:100%">
                        <!-- <span class="sr-only">70% Complete</span> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- //================================================================= -->

<!-- the function index that you want to run -->
<script type="text/javascript">
    function reactivatescreen() {
        swal2("activation screen [index]");
    }
</script>

<script>
    $(document).ready(function() {
        sorts = "";

        filterRow('businessNature-row-filter', this, false);
        businessNatureFilter();
    });
</script>