<!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>
        .btn:focus {
            outline: none !important;
            box-shadow: none !important;
        }
    </style>

    <style>
        h1 {
            color: #333;
        }

        p {
            color: #666;
        }

        .support-info {
            background-color: #f4f4f4;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
        }

        .contact-info {
            margin-top: 20px;
        }
    </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 text-uppercase">Support Page</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">

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

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

            <!--start features-->


            <!--end features-->




            <div class="support-info">
                <p>For support inquiries, please contact us using the information below:</p>
                <div class="contact-info">
                    <p><strong>Email:</strong> support@example.com</p>
                    <p><strong>Phone:</strong> +1 (123) 456-7890</p>
                </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>

</body>

</html>