<!doctype html>
<html lang="en" class="light-theme">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>Synrok - Mobile HTML Template</title>

    <link rel="stylesheet" type="text/css" href="assets/plugins/metismenu/metisMenu.min.css">
    <link rel="stylesheet" type="text/css" href="assets/plugins/metismenu/mm-vertical.css">
    <link rel="stylesheet" type="text/css" href="assets/plugins/slick/slick.css">
    <link rel="stylesheet" type="text/css" href="assets/plugins/slick/slick-theme.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!--CSS Files-->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../../css2-1?family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../npm/bootstrap-icons%401.8.3/font/bootstrap-icons-1.css">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/dark-theme.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="custom.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />


</head>

<body>

    <!--page loader-->
    <div class="loader-wrapper">
        <div class="d-flex justify-content-center align-items-center position-absolute top-50 start-50 translate-middle">
            <div class="spinner-border text-white" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </div>
    <!--end loader-->

    <!--start wrapper-->
    <div class="wrapper">

        <!--start to header-->
        <header class="top-header background fixed-top border-bottom d-flex align-items-center">
            <nav class="navbar navbar-expand w-100 p-0 gap-3 align-items-center">
                <div class="nav-button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSidenav"><a href="javascript:;"><i class="bi bi-list text-white"></i></a></div>
                <div class="brand-logo ">
                    <h1 style="font-size: 20px;  margin: 2px;" class="text-white">USER PRODUCT PRICE</h1>
                </div>
                <form class="searchbar">
                    <div class="position-absolute top-50 translate-middle-y search-icon start-0"><i class="bi bi-search"></i></div>
                    <input class="form-control px-5" type="text" placeholder="Search for anything">
                    <div class="position-absolute top-50 translate-middle-y end-0 search-close-icon"><i class="bi bi-x-lg"></i></div>
                </form>
                <ul class="navbar-nav ms-auto d-flex align-items-center top-right-menu">
                    <li class="nav-item">

                    </li>
                </ul>
            </nav>
        </header>
        <!--end to header-->

        <!--start to page content-->
        <div class="page-content">

            <!--start features-->
            <div class="features-section">
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-3">
                    <!-- Card 1 -->
                    <div class="col-6 col-sm-6 col-md-3">
                        <div class="card card1 rounded-3 new-card border-0 shadow-sm text-center">
                            <div class="card-body  d-flex flex-column justify-content-center align-items-center">
                                <div class="noti-box mb-3">
                                    <i class="fa fa-smile-o fw-bold p-2 " aria-hidden="true" style="font-size: 30px;"></i>
                                </div>
                                <h5 class="fw-bold  mb-0 text-white">USER NAME</h5>
                                <p>Hello Demouser</p>
                            </div>
                        </div>
                    </div>
                    <!-- Card 2 -->
                    <div class="col-6 col-sm-6 col-md-3">
                        <div class="card card2 rounded-3 new-card  border-0 shadow-sm text-center">
                            <div class="card-body d-flex flex-column justify-content-center align-items-center">
                                <div class="noti-box mb-3 p-2  ">
                                    <i class="fa fa-usd " aria-hidden="true" style="font-size: 30px;"></i>
                                </div>
                                <h5 class="fw-bold mb-0 text-white">CREDIT</h5>
                                <p class="">3248</p>
                            </div>
                        </div>
                    </div>
                    <!-- Card 3 -->
                    <div class="col-6 col-sm-6 col-md-3">
                        <div class="card card3 rounded-3 new-card border-0 shadow-sm text-center">
                            <div class="card-body  d-flex flex-column justify-content-center align-items-center">
                                <div class="noti-box mb-3 p-2 text-light">
                                    <i class="fa fa-shopping-bag " aria-hidden="true" style="font-size: 30px;"></i>
                                </div>
                                <h5 class="fw-bold  mb-0 text-white">YOUR ORDER</h5>
                                <p>4</p>
                            </div>
                        </div>
                    </div>
                    <!-- Card 4 -->
                    <div class="col-6 col-sm-6 col-md-3">
                        <div class="card card4 rounded-3 new-card border-0 shadow-sm text-center">
                            <div class="card-body  d-flex flex-column justify-content-center align-items-center">
                                <div class="noti-box mb-3  text-light p-2">
                                    <i class="fa fa-shopping-cart " aria-hidden="true" style="font-size: 30px;"></i>
                                </div>
                                <h5 class="fw-bold  mb-0 text-white">PANEL ORDER</h5>
                                <p>94</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--end features-->



            <div class="row px-3">
                <div class="section my-3">
                    <div class="row">
                        <input type="text" id="search" class="form-control" placeholder="Find Products">
                    </div>
                    <div class="row">
                        <table class="table table-striped table text-center table-bordered">
                            <thead>
                                <tr>
                                    <th>Products</th>
                                    <th>Quantity</th>
                                    <th>Origin</th>
                                    <th>Price</th>
                                </tr>
                            </thead>
                            <tbody id="productTableBody">
                                <!-- Add your initial 10 rows here -->
                                <tr>
                                    <td>
                                        Phones
                                        <!-- Button trigger modal -->
                                        <a data-toggle="modal" data-target="#PhonesModal">
                                            <i class="far fa-image"></i>
                                        </a>
                                        <!-- Modal -->
                                        <div class="modal fade" id="PhonesModal" tabindex="-1" role="dialog" aria-labelledby="PhonesModalLabel" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header background">
                                                        <h5 class="modal-title text-white" id="PhonesModalLabel">Phones</h5>
                                                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <img class="img-fluid" src="assets/images/avatars/01.webp" alt="Image">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>

                                    <td>180<i class="far fa-check-circle" data-text="Samsung Phones Mobiles"></i></td>
                                    <td>US2US</td>
                                    <td class="price-usd" data-original-price="132">$132</td>
                                </tr>
                                <!-- Repeat this row to have a total of 10 rows -->
                            </tbody>
                        </table>
                    </div>
                    <div class="row justify-content-center">
                        <button id="loadMoreBtn" class="btn background text-white"> More Product</button>
                    </div>
                </div>
            </div>

            <!-- Pagination outside of the table structure -->



        </div>
        <!--end to page content-->


        <!--start to footer-->
        <?php
        include('footer.php');
        ?>
        <!--end to footer-->


        <!--start sidenav-->
        <?php
        include('sidebar.php');
        ?>
        <!--end sidenav-->


    </div>
    <!--end wrapper-->


    <!--JS Files-->

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <!--JS Files-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.6/js/jquery.dataTables.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>

    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/cookies-theme-switcher.js"></script>
    <script src="assets/plugins/metismenu/metisMenu.min.js"></script>
    <script src="assets/plugins/slick/slick.min.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/index.js"></script>
    <script src="assets/js/loader.js"></script>
    <!-- <script>
        const searchInput = document.getElementById('search');
        const rows = document.querySelectorAll('tbody tr');

        searchInput.addEventListener('input', function() {
            const searchText = searchInput.value.trim().toLowerCase();

            rows.forEach(row => {
                const tds = row.querySelectorAll('td');

                let rowShouldBeDisplayed = false;

                tds.forEach(td => {
                    if (td.textContent.toLowerCase().includes(searchText)) {
                        rowShouldBeDisplayed = true;
                    }
                });

                const icons = row.querySelectorAll('td i'); // Select <i> elements within the current row
                icons.forEach(icon => {
                    const dataText = icon.getAttribute('data-text');
                    if (dataText && dataText.toLowerCase().includes(searchText)) {
                        rowShouldBeDisplayed = true;
                    }
                });

                if (rowShouldBeDisplayed) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    </script> -->
    <script>
        $(document).ready(function() {
            var totalData = 50; // Adjust this to the total number of data items you have
            var rowsToShow = 10;
            var currentIndex = 10; // Initial index to show 10 rows

            // Function to show additional rows
            function showRows(startIndex, endIndex) {
                var tableBody = $("#productTableBody");
                for (var i = startIndex; i < endIndex; i++) {
                    tableBody.append('<tr><td>Product ' + (i + 1) + '</td><td>180</td><td>US2US</td><td class="price-usd" data-original-price="132">$132</td></tr>');
                }
            }

            // Initial load
            showRows(0, rowsToShow);

            // Load more button click event
            $("#loadMoreBtn").on("click", function() {
                if (currentIndex < totalData) {
                    showRows(currentIndex, currentIndex + rowsToShow);
                    currentIndex += rowsToShow;

                    // Disable the button when all data is loaded
                    if (currentIndex >= totalData) {
                        $(this).prop("disabled", true);
                    }
                }
            });
        });
    </script>



</body>

</html>