<!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" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <?php
    include('headerlink.php');
    ?>
</head>

<body onload="generateTransactionIdOnLoad()">

    <!--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 ADD PANEL REQUEST</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">
                        <!-- <a class="nav-link position-relative" href="user_logout.php">
                            <i class="fa fa-sign-out text-white" aria-hidden="true"></i>
                        </a> -->
                    </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 shadow">

                <div class="card-header bg-dark" style="height: 45px;">
                    <h3 class="card-title text-white fw-bold" style="font-size:20px">Secure Payment</h3>
                </div>
                <div class="card-body">

                    <div class="container mt-5">
                        <form>
                            <div class="form-group">
                                <label for="transactionId">Transaction Id</label>
                                <input type="text" class="form-control" id="transactionId" readonly>
                            </div>

                            <div class="form-group">
                                <label for="paymentMethod">Cryptocurrency</label>
                                <select class="form-control" id="paymentMethod" onchange="togglePaymentFields()">
                                    <option value="select">--Select--</option>
                                    <option value="usdt">USDT</option>
                                    <option value="bitcoin">Bitcoin</option>
                                </select>
                            </div>

                            <div class="form-group payment-method-fields" id="blockChainFields" style="display: none;">
                                <label for="blockChain">Block Chain</label>
                                <select class="form-control" id="blockChain" onchange="updateBlockchainInfo()">
                                    <option value="select">--Select--</option>
                                    <option value="trc20">TRC 20</option>
                                    <option value="solana">Solana</option>
                                </select>

                                <div id="qrCodeContainer" style="display: none;">
                                    <!-- QR code and wallet address will be displayed here -->
                                    <div class="text-center">
                                        <img src="qr.png" style="height:150px; width:150px;" id="qrCode" alt="QR Code"><br>
                                    </div>

                                    <label for="amount">Wallet Address</label>
                                    <input type="text" class="form-control" id="amount">

                                    <label for="amount">Amount</label>
                                    <input type="text" class="form-control" id="amount">

                                    <label for="transactionIdBlockchain">Transaction Id</label>
                                    <input type="text" class="form-control" id="transactionIdBlockchain">
                                </div>
                            </div>
                            <button class="btn background text-white w-100">ADD</button>
                        </form>
                    </div>
                </div>

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




        </div>
        <!--end wrapper-->
    </div>
    <?php
    include('sidebar.php');
    ?>

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

    <!--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>
        function generateTransactionIdOnLoad() {
            generateTransactionId();
        }

        function generateTransactionId() {
            var prefix = "DSSTXN";
            var randomDigits = Math.floor(1000 + Math.random() * 9000); // Generates a random 4-digit number
            var transactionId = prefix + randomDigits;

            document.getElementById("transactionId").value = transactionId;
        }
    </script>
    <script>
        function togglePaymentFields() {
            var paymentMethod = document.getElementById("paymentMethod").value;
            var blockChainFields = document.getElementById("blockChainFields");

            if (paymentMethod !== "select") {
                blockChainFields.style.display = "block";
            } else {
                blockChainFields.style.display = "none";
                resetBlockchainInfo();
            }
        }

        function updateBlockchainInfo() {
            document.getElementById("qrCodeContainer").style.display = "block";
        }

        function resetBlockchainInfo() {
            document.getElementById("blockChain").value = "select";
            document.getElementById("amount").value = "";
            document.getElementById("transactionIdBlockchain").value = "";
            document.getElementById("qrCodeContainer").style.display = "none";
        }
    </script>

</body>

</html>