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

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

    #customerLoadingModal {
        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="exportcustomerhistory-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('exportcustomerhistory-row-filter',this,true);"></i>
                        </th>
                        <th data-field="user" class="kt-datatable__cell" style="width: 20%;" id="col_user" name="exportcustomerhistory_sort_column" onclick="sortingColumn(this,'col_user','desc');">
                            User<i class="fa"></i>
                        </th>
                        <th data-field="destination" class="kt-datatable__cell" style="width: 20%;" id="col_destination" name="exportcustomerhistory_sort_column" onclick="sortingColumn(this,'col_destination','desc');">
                            Destination<i class="fa fa-sort-up"></i>
                        </th>
                        <th data-field="date" class="kt-datatable__cell" style="width: 20%;" id="col_date" name="exportcustomerhistory_column" onclick="sortingColumn(this,'col_date','desc');">
                            Date<i class="fa"></i>
                        </th>
                        <th data-field="status" class="kt-datatable__cell" style="width: 20%;" id="col_status" name="exportcustomerhistory_sort_column" onclick="sortingColumn(this,'col_status','desc');">
                            Status<i class="fa"></i>
                        </th>
                        <!-- <th data-field="status" class="kt-datatable__cell" style="width: 20%;" id="col_status" name="exportcustomerhistory_sort_column" onclick="sortingColumn(this,'col_status','asc');">
                            Status<i class="fa"></i>
                        </th> -->
                    </tr>
                    <tr style="left: 0px;" id="exportcustomerhistory-row-filter">
                        <td width="4%" data-field="filter" id="col_filter">&nbsp;</td>
                        <td width="20%" data-field="user" id="col_user">
                            <input type="text" class="form-control" name="exportcustomerhistory-input-filter" id="txtcoluser" onkeyup="filterData(this,1);" />
                        </td>
                        <td width="20%" data-field="destination" id="col_destination">
                            <input type="text" class="form-control" name="exportcustomerhistory-input-filter" id="txtcoldestination" onkeyup="filterData(this,2);" />
                        </td>
                        <td width="20%" data-field="date" id="col_date">
                            <input type="text" class="form-control" name="exportcustomerhistory-input-filter" id="txtcoldate" onkeyup="filterData(this,3);" />
                        </td>
                        <td width="20%" data-field="status" id="col_status">
                            <input type="text" class="form-control" name="exportcustomerhistory-input-filter" id="txtcolstatus" onkeyup="filterData(this,4);" />
                        </td>
                        <!-- <td width="20%" data-field="status" id="col_status">
                            <input type="text" class="form-control" name="exportcustomerhistory-input-filter" id="txtcolstatus" onkeyup="filterData(this,3);" />
                        </td> -->
                    </tr>
                </thead>
                <tbody id="exportcustomerhistory-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" data-toggle="modal" onclick="reviewExportHistory();">Review</button>
        <button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;" type="button" data-toggle="modal" onclick="onclickShowExportCustomer();">CCM API</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="customerLoadingModal" 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="customerLoadingModalTitle">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>

<!-- //Import Modal -->
<div id="viewExportCustomerHistoryModal" class="modal fade" style="overflow: auto;overflow-y: scroll;">
    <div class="modal-dialog" style="width: 750px">
        <div class="modal-content">
            <div class="modal-header" id="exportCustomerModalHeader" style="background-color:#3c8dbc;color:white;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="exportCustomerModalTitle">Export Customer History Detail</h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-12">
                            <span class="col-sm-2">User</span>
                            <label id="txtExportCustomerUser" class="col-sm-10"> : </label>
                            <span class="col-sm-2">Destination</span>
                            <label id="txtExportCustomerDestination" class="col-sm-10"> : </label>
                            <span class="col-sm-2">Date</span>
                            <label id="txtExportCustomerDate" class="col-sm-10"> : </label>
                            <span class="col-sm-2">Status</span>
                            <label id="txtExportCustomerStatus" class="col-sm-10"> : </label>
                        </div>
                        <div class="col-md-12">
                            <h4 style="margin-bottom: 0px;"><strong>Error Log<strong></h4>
                            <hr>
                        </div>
                        <div class="col-md-12">
                            <label id="txtExportCustomerLog"></label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="padding:5px">
                    <div id="importCustomerModalButton">
                        <button type="button" class="btn btn-secondary" style="background-color:grey;color:white;" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- //Import Modal -->
<div id="exportCustomerModal" class="modal fade" style="overflow: auto;overflow-y: scroll;">
    <div class="modal-dialog" style="width: 750px">
        <div class="modal-content">
            <div class="modal-header" id="exportCustomerModalHeader" style="background-color:#3c8dbc;color:white;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="exportCustomerModalTitle">Export Customer</h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-12">
                            <span class="col-sm-2">Destination: </span>
                            <div class="col-sm-6"> 
                                <select id="cobExportCustomerHistory" class="form-control">
                                    <?php echo $this->getDestinationOption()?>
                                </select>
                            </div>
                            <div class="col-sm-4"> 
                                <input type="button" onclick="sendDataCCMAPI();" style="background-color:#3c8dbc;color:white;" class="btn btn-md" value="Export Customer" role="button">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="padding:5px">
                    <div id="importCustomerModalButton">
                        <button type="button" class="btn btn-secondary" style="background-color:grey;color:white;" data-dismiss="modal">Close</button>
                    </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('exportcustomerhistory-row-filter', this, false);
        exportCustomerHistoryFilter();
    });
</script>