<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Paginated Table</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body style="background-color: #2C3E50; color: white;">

<div class="container mt-5" style="height:50vh">
    <h2 class="text-center">Paginated Table</h2>



    <table class="table table-bordered table-hover" style="color:white;font-size:18px;height:50vh" id="dataTable">
        <thead style="background-color:#19242e" class="text-center align-middle">
            <!-- Table Headers here -->
            <tr>
                <th rowspan="2">No</th>
                <th rowspan="2">Update</th>
                <th rowspan="2">Barcode</th>
                <th rowspan="2">Barcode 2</th>
                <th rowspan="2">ပစ္စည်းအမည်</th>
                <th rowspan="2">အမျိုးအစား</th>
                <th rowspan="2">သယ်ဆောင်ခ</th>
                <th rowspan="2">PF</th>
                <th rowspan="2" style="color:#ACE1AF">မူရင်းကဒ်</th>
                <th rowspan="2" style="color:#ACE1AF">မူရင်းဗူး</th>
                <th rowspan="2" style="color:#FFA62F">ဖာလိုက်ဝယ်ဈေး</th>
                <th rowspan="2" style="color:#ACE1AF">ငွေအမျိုးစား</th>
                <th colspan="3" style="color:#FFA62F">ရောင်းဈေး</th>
                <th rowspan="2">Delete</th>
            </tr>
            <tr>
                <th style="color:#FFA62F">ဖာ</th>
                <th style="color:#FFA62F">ကဒ်</th>
                <th style="color:#FFA62F">ဗူး</th>
            </tr>
        </thead>
        <tbody id="table-body">
            <?php 
            include 'database/database.php';
            include 'database/data.php';

                $sql = "SELECT * FROM ".$product." WHERE delete_d='0' ORDER BY id DESC";
                $result = mysqli_query($connection, $sql);
                $rows = [];

                // Fetch data and store it in an array
                if ($result) {
                    while ($row = mysqli_fetch_assoc($result)) {
                        $rows[] = $row;
                    }
                    mysqli_free_result($result);
                }
            ?>
        </tbody>
    </table>

    <!-- Pagination controls -->
    <nav>
        <ul class="pagination justify-content-center" id="pagination">
            <!-- Pagination items will be generated here -->
        </ul>
    </nav>

    
    <script>
        // Fetch PHP data into a JavaScript variable
        const data = <?php echo json_encode($rows); ?>;
        const rowsPerPage = 200;
        let currentPage = 1;

        // Function to render table rows for the current page
        function displayTable(page) {
            const tableBody = document.getElementById('table-body');
            tableBody.innerHTML = '';

            const start = (page - 1) * rowsPerPage;
            const end = start + rowsPerPage;
            const paginatedItems = data.slice(start, end);

            paginatedItems.forEach(row => {
                const rowElement = `
                    <tr>
                        <td>${row.id}</td>
                        <td><button type="button" class="btn btn-success" data-action="info">Update</button></td>
                        <td>${row.barcode}</td>
                        <td>${row.barcode_1}</td>
                        <td>${row.product_name}</td>
                        <td>${row.type}</td>
                        <td>${row.trans}</td>
                        <td>${row.profit}</td>
                        <td>${row.unit}</td>
                        <td>${row.pieces}</td>
                        <td>${new Intl.NumberFormat().format(row.buy)}</td>
                        <td>
                            <select>
                                <option value="${row.currency_buy}">${row.currency_buy}</option>
                                <option value="kyat">Kyat</option>
                                <option value="baht">Baht</option>
                                <option value="yuan">Yuan</option>
                            </select>
                        </td>
                        <td>${new Intl.NumberFormat().format(row.round_package_price)}</td>
                        <td>${new Intl.NumberFormat().format(row.round_unit_price)}</td>
                        <td>${new Intl.NumberFormat().format(row.round_pieces_price)}</td>
                        <td><button type="submit" class="btn btn-danger" data-action="delete">Delete</button></td>
                    </tr>
                `;
                tableBody.innerHTML += rowElement;
            });
        }

        // Function to generate pagination controls
        function setupPagination() {
            const pageCount = Math.ceil(data.length / rowsPerPage);
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = '';

            for (let i = 1; i <= pageCount; i++) {
                const pageItem = document.createElement('li');
                pageItem.className = 'page-item';
                pageItem.innerHTML = `<a class="page-link" href="#">${i}</a>`;

                if (i === currentPage) {
                    pageItem.classList.add('active');
                }

                pageItem.addEventListener('click', function () {
                    currentPage = i;
                    displayTable(currentPage);
                    setupPagination();
                });

                pagination.appendChild(pageItem);
            }
        }

        // Initialize the table and pagination
        displayTable(currentPage);
        setupPagination();
    </script>

    
</div>

</body>
</html>
