<!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>

    <!-- Plugins -->
    <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://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" 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" />

    <style>
        .input-group .form-control:focus {
            box-shadow: none;
            border-color: #ced4da;
            /* You can set the border color to a color of your choice */
        }
    </style>


    <?php
    include('headerlink.php');
    ?>
</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 USDT HISTORY</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="card-header">
                <h1 class="fs-2 text-white">Payment History</h1>
            </div>

            <div class="payment-container" id="paymentContainer">

                <!-- Search bar -->
                <div class="input-group search-bar pt-4">
                    <input type="text" class="form-control" placeholder="Search transactions...">
                </div>

                <!-- Transactions -->
                <div id="transactions" class="mb-5">
                    <!-- Transactions will be dynamically added here -->
                </div>

                <!-- Add more transactions as needed -->

                <button id="allHistoryBtn" class="btn background text-white" onclick="showAllHistory()">View All History</button>

            </div>



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


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


        <!--end to footer-->


        <?php
        include('sidebar.php');
        ?>


    </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.5.3/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.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>
        $(document).ready(function() {
            $('#dtBasicExample').DataTable();
            $('.dataTables_length').addClass('bs-select');
        });
    </script>
    <script>
        // Mock data for transactions
        const transactionsData = [{
                id: 1,
                title: "Amount Deposit",
                date: "2023-11-16",
                amount: "$50.00",
            },
            {
                id: 2,
                title: "Amount Refund",
                date: "2023-11-15",
                amount: "$30.00"

            },
            {
                title: "Payment for product ABC",
                date: "2023-11-15",
                amount: "$30.00"
            },
            {
                title: "Payment for product ABC",
                date: "2023-11-15",
                amount: "$30.00"
            },
            {
                title: "Payment for product ABC",
                date: "2023-11-15",
                amount: "$30.00"
            },
            {
                title: "Payment for product ABC",
                date: "2023-11-15",
                amount: "$30.00"
            },
            {
                title: "Payment for product ABC",
                date: "2023-11-15",
                amount: "$30.00"
            },
            {
                title: "Payment for product ABC",
                date: "2023-11-15",
                amount: "$30.00"
            },
            {
                title: "Payment for product ABC",
                date: "2023-11-15",
                amount: "$30.00"
            },
            {
                title: "Payment for product shakshi",
                date: "2023-11-15",
                amount: "$30.00"
            },
            {
                title: "Payment for product Chunmun",
                date: "2023-11-15",
                amount: "$30.00"
            },
            {
                title: "Payment for product maurya",
                date: "2023-11-15",
                amount: "$30.00"
            },

            // Add more transactions as needed
        ];

        // Function to show transactions

        function showTransactions(transactions) {
            const transactionsContainer = document.getElementById('transactions');
            transactionsContainer.innerHTML = ''; // Clear existing transactions

            transactions.forEach(transaction => {
                const transactionElement = document.createElement('div');
                transactionElement.className = 'transaction';

                const infoElement = document.createElement('div');
                infoElement.className = 'info';

                const titleElement = document.createElement('p');
                titleElement.className = 'fw-bold';
                titleElement.textContent = transaction.title;

                const dateElement = document.createElement('p');
                dateElement.className = 'date';
                dateElement.textContent = transaction.date;

                const idElement = document.createElement('p');
                idElement.className = 'transaction-id';
                idElement.textContent = 'Transaction ID: ' + transaction.id;

                infoElement.appendChild(titleElement);
                infoElement.appendChild(dateElement);
                infoElement.appendChild(idElement); // Display Transaction ID after the date

                const amountElement = document.createElement('div');
                amountElement.className = 'amount';
                amountElement.textContent = transaction.amount;

                transactionElement.appendChild(infoElement);
                transactionElement.appendChild(amountElement);

                transactionsContainer.appendChild(transactionElement);
            });
        }

        // Function to show all transaction history
        function showAllHistory() {
            showTransactions(transactionsData);
            document.getElementById('allHistoryBtn').style.display = 'none'; // Hide the button
            document.getElementById('paymentContainer').style.overflow = 'visible'; // Allow overflow
        }

        // Initial load - show first 10 transactions
        showTransactions(transactionsData.slice(0, 10));
    </script>

</body>

</html>