<div class="col-md-7">

    <div class="dataTables_length" id="clients_length">
        <label>

            <form id="filterForm" method="GET" action="">

             

                <div id="filterContainer" style="display: none;">

                    <div class="dt-button-collection">

                        <ul class="dropdown-menu" style="padding: 15px">

                            <!-- Dropdown for Customer Name Selection -->

                            <div class="form-group" app-field-wrapper="amount">

                                <label for="ten_kh" class="control-label">Tên KH:</label>

                                <select name="ten_kh" id="ten_kh" onchange="submitForm()" style="width:216px"
                                    class="selectpicker form-control" data-width="100%" data-none-selected-text="Chọn"
                                    data-live-search="true" tabindex="-98" aria-invalid="false">

                                    <option value=""></option>

                                    <?php $tenKHSet = array(); ?>

                                    <?php foreach ($congno_data_filtered as $row) {

                                                                                if (!in_array($row['Ten_KH'], $tenKHSet)) {

                                                                                    $tenKHSet[] = $row['Ten_KH'];

                                                                                    echo '<option value="' . htmlspecialchars($row['Ten_KH']) . '"';

                                                                                    if ($row['Ten_KH'] === $selected_ten_kh) {

                                                                                        echo ' selected';

                                                                                    }

                                                                                    echo '>' . htmlspecialchars($row['Ten_KH']) . '</option>';

                                                                                        }

                                                                            } ?>

                                </select>

                            </div>



                            <div class="form-group" app-field-wrapper="amount">

                                <label for="So_cont" class="control-label">Số Cont:</label>

                                <select name="So_cont" id="So_cont" onchange="submitForm()" style="width:216px"
                                    class="selectpicker form-control" data-width="100%" data-none-selected-text="Chọn"
                                    data-live-search="true" tabindex="-98" aria-invalid="false">

                                    <option value=""></option>

                                    <?php $soContSet = array(); ?>

                                    <?php foreach ($congno_data_filtered as $row) {

                                                                                if (!in_array($row['So_cont'], $soContSet)) {

                                                                                    $soContSet[] = $row['So_cont'];

                                                                                    echo '<option value="' . htmlspecialchars($row['So_cont']) . '"';

                                                                                    if ($row['So_cont'] === $selected_so_cont) {

                                                                                        echo ' selected';

                                                                                    }

                                                                                    echo '>' . htmlspecialchars($row['So_cont']) . '</option>';

                                                                                        }

                                                                            } ?>

                                </select>

                            </div>



                            <!-- Dropdown for Container Number Selection -->

                            <div class="form-group" app-field-wrapper="amount">

                                <label for="nha_xe" class="control-label">Xe Ngoài:</label>

                                <select name="nha_xe" id="nha_xe" onchange="submitForm()" style="width:216px"
                                    class="selectpicker form-control" data-width="100%" data-none-selected-text="Chọn"
                                    data-live-search="true" tabindex="-98" aria-invalid="false">

                                    <option value=""></option>

                                    <?php $nhaXeSet = array(); ?>

                                    <?php foreach ($status as $row) {

                                                                                if (!in_array($row['name'], $nhaXeSet)) {

                                                                                    $nhaXeSet[] = $row['name'];

                                                                                    echo '<option value="' . htmlspecialchars($row['id']) . '"';

                                                                                    if ($row['id'] === $selected_nha_xe) {

                                                                                        echo ' selected';

                                                                                    }

                                                                                    echo '>' . htmlspecialchars($row['name']) . '</option>';

                                                                                        }

                                                                            } ?>

                                </select>

                            </div>

                            <div class="form-group" app-field-wrapper="amount">

                                <label for="So_xe" class="control-label">Tên tài Xế ( Xe nhà):</label>

                                <select name="So_xe" id="So_xe" onchange="submitForm()" style="width:216px"
                                    class="selectpicker form-control" data-width="100%" data-none-selected-text="Chọn"
                                    data-live-search="true" tabindex="-98" aria-invalid="false">

                                    <option value=""></option>

                                    <?php foreach ($staff as $row) :

                                         if($row['role']==2 && $row['active']==1):

                                        echo '<option value="' . htmlspecialchars($row['staffid']) . '"';

                                        if ($row['staffid'] === $selected_xe_nha) {

                                            echo ' selected';

                                        }

                                        echo '>' . htmlspecialchars($row['staff_identifi']) . '</option>';

                                        endif;

                                    endforeach;

                                    ?>

                                </select>

                            </div>

                            <div class="form-group" app-field-wrapper="amount">

                                <label for="bien_so_xe" class="control-label">Biển số (xe nhà):</label>

                                <select name="bien_so_xe" id="bien_so_xe" onchange="submitForm()" style="width:216px"
                                    class="selectpicker form-control" data-width="100%" data-none-selected-text="Chọn"
                                    data-live-search="true" tabindex="-98" aria-invalid="false">

                                    <option value=""></option>

                                    <?php foreach ($xenha as $row) {

                                                                                    echo '<option value="' . htmlspecialchars($row['id']) . '"';

                                                                                    if ($row['id'] === $selected_bien_so) {

                                                                                        echo ' selected';

                                                                                    }

                                                                                    echo '>' . htmlspecialchars($row['name']) . '</option>';

                                                                                        

                                                                            } ?>



                                </select>

                            </div>

                        </ul>

                    </div>

                </div>



        </label>

    </div>



    <div class="dt-buttons btn-group">

        <button class="btn btn-default buttons-collection btn-sm btn-default-dt-options" tabindex="0"
            aria-controls="clients" type="button" aria-haspopup="true" aria-expanded="false" id="export-btn"
            onclick="return false;">

            <span>Xuất

                ra</span>

            <div class="dt-button-collection" id="export-menu" style="display: none;top: 30px; left: 0px;">

                <ul class="dropdown-menu" role="menu">

                    <li class="dt-button buttons-excel buttons-html5" tabindex="0" aria-controls="clients">

                        <a href="#" onclick="exportSelectedRowsToExcel(); return false;">Excel</a>

                    </li>

                    <!-- <li class="dt-button buttons-csv buttons-html5" tabindex="0" aria-controls="clients">

                        <a href="#" onclick="exportToPDF(); return false;">PDF</a>

                    </li>

                    <li class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="clients">

                        <a href="#" onclick="printTable(); return false;">In</a>

                    </li> -->

                </ul>

            </div>

        </button>

        <button class="btn btn-default btn-sm btn-default-dt-options" tabindex="0" aria-controls="clients" type="button"
            id="toggleFilterBtn" onclick="toggleFilter(); return false;"><span>Lọc</span></button>

        <button class="btn btn-default btn-sm btn-default-dt-options btn-dt-reload" tabindex="0" aria-controls="clients"
            type="button" data-toggle="tooltip" title="" id="delete-selected-button"
            onclick="deleteSelectedRows(); return false;">

            <span>Xoá Ô Chọn</span></button>

        <button class="color-selector btn btn-default btn-sm btn-default-dt-options" onclick="return false;">

            Màu

            <div class="color-selected"></div>

        </button>



        <div class="color-options" style="display: none;">

            <div class="colors-container">

                <?php

                                               $colors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 

                                                        '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D', 

                                                        '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 

                                                        '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A',

                                                        '#33FFCC', '#80e4f1', '#00FF00', '#FFC0CB', '#ff7540'];

                                               foreach ($colors as $color) {

                                                   echo "<div class='color-option' style='background-color: $color;'></div>";

                                               }

                                               ?>

            </div>

        </div>

        <button class="btn btn-default btn-sm btn-default-dt-options btn-dt-reload" tabindex="0" aria-controls="clients"
            type="button" data-toggle="tooltip" title="" data-original-title="Xoá lọc" onclick="resetFilters()"><span><i
                    class="fa fa-refresh"></i></span></button>

    </div>

</div>



<div class="col-md-5">

    <div id="clients_filter" class="dataTables_filter">

        <label>
        <select class="form-control input-sm " name="year" id="year" onchange="submitForm()" style="width:80px">
                    <option value="">Chọn Năm</option>
                        <?php for ($j = 2024; $j <= 2035; $j++) { ?>
                        <option value="<?php echo $j; ?>"
                            <?php echo ($selected_year == $j) ? 'selected' : ''; ?>>
                            <?php echo $j; ?>
                        </option>
                    <?php } ?>
                </select>
          </label>

        <label>
                <select class="form-control input-sm" name="ngay_thang" id="ngay_thang1" onchange="submitForm()" style="width:100px">
                    <option value="">Chọn Tháng</option>
                        <?php for ($j = 1; $j <= 12; $j++) {
                                $month_value = str_pad($j, 2, "0", STR_PAD_LEFT);
                        ?>
                        <option value="<?php echo $month_value; ?>"
                            <?php echo ($selected_ngay_thang == $month_value) ? 'selected' : ''; ?>>
                            <?php echo 'Tháng ' . $j; ?>
                        </option>
                    <?php } ?>
                </select>
        </label>

        </form>

        <label>

            <select class="form-control input-sm" id="recordsPerPage" onchange="changeRecordsPerPage()">

                <option value="10" <?php if ($records_per_page == 10) echo 'selected'; ?>>10</option>

                <option value="20" <?php if ($records_per_page == 20 || $records_per_page == '') echo 'selected'; ?>>20
                </option>

                <option value="50" <?php if ($records_per_page == 50) echo 'selected'; ?>>50</option>

                <option value="80" <?php if ($records_per_page == 80) echo 'selected'; ?>>80</option>

                <option value="100" <?php if ($records_per_page == 100) echo 'selected'; ?>>100</option>

                <option value="10000" <?php if ($records_per_page == 10000) echo 'selected'; ?>>Tất cả</option>

            </select>

        </label>

        <label>

            <div class="input-group"><span class="input-group-addon"><span class="fa fa-search"></span></span><input
                    type="search" class="form-control input-sm" placeholder="Tìm kiếm..." aria-controls="clients"
                    id="searchInput" oninput="searchTable()"></div>

        </label>

    </div>

</div>

<script>
function changeRecordsPerPage() {

    var recordsPerPage = document.getElementById('recordsPerPage').value;

    var queryParams = new URLSearchParams(window.location.search);

    queryParams.set('records_per_page', recordsPerPage);

    queryParams.set('page', 1); // Reset to the first page when changing records per page

    window.location.search = queryParams.toString();

}



function initializeTable() {

    var recordsPerPage = <?php echo $records_per_page; ?>;

    var currentPage = <?php echo $current_page; ?>;

    var totalPages = <?php echo $total_pages; ?>;

    var totalRecords = <?php echo $total_records; ?>;

    var startIndex = <?php echo $start_index + 1; ?>;

    var endIndex = <?php echo $end_index; ?>;



    document.getElementById('recordsPerPage').value = recordsPerPage;



    var paginationControls =
        '<?php echo generatePaginationControls($current_page, $total_pages, $records_per_page, $query_params); ?>';

    document.getElementById('paginationControls').innerHTML = paginationControls;



    var recordSummary = 'Hiển thị từ ' + startIndex + ' đến ' + endIndex + ' của ' + totalRecords + ' mục';

    document.getElementById('recordSummary').innerHTML = recordSummary;

}



window.onload = initializeTable;
</script>