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

    <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" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- DataTables CSS and JS -->



    <style>
        .btn:focus {
            outline: none !important;
            box-shadow: none !important;
        }
    </style>

    <style>
        @media (max-width: 767px) {
            .text-mobile {
                text-align: start !important;
            }
        }
    </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 PENDING ORDER</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 mb-2">
                <div class="col-12">
                    <input type="text" class="form-control" placeholder="Search Orders" id="searchInput">
                </div>
            </div>

            <div class="row" id="orderContainer">
                <!-- Repeat the structure for the first card -->
                <div class="col-lg-6 col-md-6 col-sm-12 order-card" data-orderid="DSS32714" data-trackingid="9400109205568111911445" data-zipcode="22635-2652">
                    <div class="card mb-3 mt-3 shadow">
                        <div class="card-header table-header">
                            <h5 class="table-card-title">Order ID : DSS32714</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <tbody>
                                        <tr>
                                            <th class="w-25 text-dark text-start text-mobile" scope="row">Product</th>
                                            <td class="text-start">lam</td>
                                        </tr>
                                        <tr>
                                            <th scope="row" class="text-dark text-start">Quantity</th>
                                            <td class="text-start">90</td>
                                        </tr>
                                        <tr>
                                            <th scope="row" class="text-dark text-start">Amount</th>
                                            <td class="text-start">$220</td>
                                        </tr>
                                        <tr>
                                            <th scope="row" class="text-dark text-start">Track</th>
                                            <td class="text-start">9400109205568111911445 <a href="#" class="star-link"><img src="usps-logo.png" style="height:30px; width:50px" alt=""></a></td>
                                        </tr>
                                        <tr>
                                            <th scope="row" class="text-dark text-start">Status</th>
                                            <td class="text-start">Status</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="row mt-3">
                                <div class="col-12">
                                    <!-- Button container -->
                                    <div class="details-button-container d-flex justify-content-between">
                                        <button class="btn background btn-sm table-button text-white fw-bold" data-toggle="collapse" data-target="#details1">More Details</button>
                                        <button class="btn btn-secondary table-button background text-white fw-bold ml-2"><a href="user_new_order.php" class="text-white" style="text-decoration:none;">Repeat
                                                Order</a></button>
                                    </div>
                                </div>
                            </div>

                            <!-- Collapsible content -->
                            <div id="details1" class="collapse mt-3">
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <tbody>
                                            <tr>
                                                <th class="w-25 text-dark text-start" scope="row">Name</th>
                                                <td class="text-start">John Doe</td>
                                            </tr>
                                            <tr>
                                                <th scope="row" class="text-dark text-start">Address</th>
                                                <td class="text-start">123 Main St</td>
                                            </tr>
                                            <tr>
                                                <th scope="row" class="text-dark text-start">City</th>
                                                <td class="text-start">okhala</td>
                                            </tr>
                                            <tr>
                                                <th scope="row" class="text-dark text-start">State</th>
                                                <td class="text-start">Nevada</td>
                                            </tr>
                                            <tr>
                                                <th scope="row" class="text-dark text-start">Zipcode</th>
                                                <td class="text-start">22635-2652</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Repeat the structure for the second card -->
                <div class="col-lg-6 col-md-6 col-sm-12 order-card" data-orderid="DSS32715" data-trackingid="9400109205568111911446" data-zipcode="22635-2653">
                    <div class="card mb-3 mt-3 shadow">
                        <div class="card-header table-header">
                            <h5 class="table-card-title">Order ID : DSS32714</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <tbody>
                                        <tr>
                                            <th class="w-25 text-dark text-start text-mobile" scope="row">Product</th>
                                            <td class="text-start">lam</td>
                                        </tr>
                                        <tr>
                                            <th scope="row" class="text-dark text-start">Quantity</th>
                                            <td class="text-start">90</td>
                                        </tr>
                                        <tr>
                                            <th scope="row" class="text-dark text-start">Amount</th>
                                            <td class="text-start">$220</td>
                                        </tr>
                                        <tr>
                                            <th scope="row" class="text-dark text-start">Track</th>
                                            <td class="text-start">9400109205568111911445 <a href="#" class="star-link"><img src="usps-logo.png" style="height:30px; width:50px" alt=""></a></td>
                                        </tr>
                                        <tr>
                                            <th scope="row" class="text-dark text-start">Status</th>
                                            <td class="text-start">Status</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="row mt-3">
                                <div class="col-12">
                                    <!-- Button container -->
                                    <div class="details-button-container d-flex justify-content-between">
                                        <button class="btn background btn-sm table-button text-white fw-bold" data-toggle="collapse" data-target="#details2">More Details</button>
                                        <button class="btn btn-secondary table-button background text-white fw-bold ml-2"><a href="user_new_order.php" class="text-white" style="text-decoration:none;">Repeat
                                                Order</a></button>
                                    </div>
                                </div>
                            </div>

                            <!-- Collapsible content -->
                            <div id="details2" class="collapse mt-3">
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <tbody>
                                            <tr>
                                                <th class="w-25 text-dark text-start" scope="row">Name</th>
                                                <td class="text-start">John Doe</td>
                                            </tr>
                                            <tr>
                                                <th scope="row" class="text-dark text-start">Address</th>
                                                <td class="text-start">123 Main St</td>
                                            </tr>
                                            <tr>
                                                <th scope="row" class="text-dark text-start">City</th>
                                                <td class="text-start">okhala</td>
                                            </tr>
                                            <tr>
                                                <th scope="row" class="text-dark text-start">State</th>
                                                <td class="text-start">Nevada</td>
                                            </tr>
                                            <tr>
                                                <th scope="row" class="text-dark text-start">Zipcode</th>
                                                <td class="text-start">22635-2652</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-12">
                    <button id="moreOrderBtn" class="btn btn-secondary background text-white fw-bold ml-2 w-100">
                        VIEW MORE ORDERS
                    </button>
                </div>
            </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>
        // jQuery script for search functionality
        $(document).ready(function() {
            $("#searchInput").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#orderContainer > div").filter(function() {
                    var orderID = $(this).data("orderid").toLowerCase();
                    var trackingID = $(this).data("trackingid").toLowerCase();
                    var zipcode = $(this).data("zipcode").toLowerCase();
                    $(this).toggle(orderID.includes(value) || trackingID.includes(value) || zipcode.includes(value));
                });
            });
        });

        $(document).ready(function() {
            // Hide all order cards initially
            $(".order-card").hide();

            // Randomly show one card
            var randomIndex = Math.floor(Math.random() * $(".order-card").length);
            $(".order-card").eq(randomIndex).show();

            // Handle the "More Order" button click
            $("#moreOrderBtn").on("click", function() {
                // Show all hidden order cards
                $(".order-card:hidden").slideDown();

                // Hide the "More Order" button
                $(this).hide();
            });
        });

        // Additional scripts as needed
    </script>
    <script>
        $(document).ready(function() {
            // Handle More Details button click
            $('.table-button').click(function() {
                // Find the target details section based on the button's data-target attribute
                var targetDetails = $($(this).data('target'));

                // Toggle the visibility of the details section manually
                targetDetails.toggle();

                // Close other open details sections
                $('.details-section').not(targetDetails).hide();
            });
        });
    </script>


</body>

</html>