<!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 href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,900;1,700&family=Oswald:wght@600&family=Roboto:wght@700&display=swap" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <!-- Plugins -->
    <?php
    include('headerlink.php');
    ?>
    <style>
        /* Add this style to your external CSS file or within a style tag in the head */
        input::placeholder {
            color: #495057;
            opacity: 1 !important;
        }

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


    <script>
        $(document).ready(function() {
            // Add minus icon for collapse element which is open by default
            $(".collapse.show").each(function() {
                $(this).prev(".card-header").addClass("highlight");
            });

            // Highlight open collapsed element 
            $(".card-header .btn").click(function() {
                $(".card-header").not($(this).parents()).removeClass("highlight");
                $(this).parents(".card-header").toggleClass("highlight");
            });
        });
    </script>
</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 NEW 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">
                        <!-- <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>


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


            <section class="my-3">
                <div class="row">
                    <div class="div">
                        <div class="row">
                            <div class="col-8 col-lg-8 col-12">
                                <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">New Order</h3>
                                    </div>

                                    <form action="" class="p-2 rounded text-dark" style="margin: 10px;">
                                        <div class="form-group input-group d-flex align-items-center ">
                                            <span class="input-group-text background text-white text-center mt-2"><i class="fas fa-user"></i></span>
                                            <input type="text" required class="form-control mt-2" name="name" id="name" placeholder="Name">
                                        </div>

                                        <div class="form-group mb-2 input-group d-flex align-items-center">
                                            <span class="input-group-text mt-2  background text-white"><i class="fas fa-address-card"></i></span>
                                            <input type="text" required class="form-control mt-2" name="address" id="address" placeholder="Address">
                                        </div>

                                        <div class="form-group mb-2 input-group d-flex align-items-center">
                                            <span class="input-group-text mt-2 background text-white"><i class="fas fa-city"></i></span>
                                            <input type="text" required class="form-control mt-2" name="city" id="city" placeholder="City">
                                        </div>

                                        <div class="form-group mb-2 input-group d-flex align-items-center">
                                            <span class="input-group-text mt-2  background text-white"><i class="fas fa-flag"></i></span>
                                            <input type="text" required name="state" class="form-control mt-2" id="state" placeholder="State">
                                        </div>

                                        <div class="form-group mb-2 input-group d-flex align-items-center">
                                            <span class="input-group-text mt-2 background text-white"><i class="fas fa-map-pin"></i></span>
                                            <input type="text" required name="zipcode" class="form-control mt-2" id="zipcode" placeholder="Zipcode">
                                        </div>

                                        <div class="form-group mb-2 input-group d-flex align-items-center">
                                            <span class="input-group-text mt-2  background text-white"><i class="fas fa-globe"></i></span>
                                            <input type="text" required name="country" class="form-control mt-2" value="USA" readonly class="form-control" id="country" placeholder="Country" style="background-color: #f0f0f0;">
                                        </div>

                                        <div class="form-group mb-2 input-group d-flex align-items-center">
                                            <span class="input-group-text mt-2 background text-white"><i class="fas fa-globe"></i></span>
                                            <select class="form-select form-control mt-2" id="origin" name="origin" required>
                                                <option value="" class="form-control ">Select an origin</option>
                                            </select>
                                        </div>

                                        <div class="form-group mb-2 input-group d-flex align-items-center">
                                            <span class="input-group-text mt-2 background text-white"><i class="fas fa-globe"></i></span>
                                            <select class="form-select form-control mt-2" id="salt" name="salt" required>
                                                <option value="">Select an origin first</option>
                                            </select>
                                        </div>

                                        <div class="form-group mb-2 input-group d-flex align-items-center">
                                            <span class="input-group-text mt-2  background text-white"><i class="fas fa-globe"></i></span>
                                            <select class="form-select form-control mt-2" id="product" name="product" required>
                                                <option value="">Select a salt first</option>
                                            </select>
                                        </div>

                                        <div class="form-group mb-2 input-group d-flex align-items-center">
                                            <span class="input-group-text mt-2 background text-white"><i class="fas fa-globe"></i></span>
                                            <select class="form-select form-control mt-2" id="quantity" name="quantity" required>
                                                <option value="">Select a product first</option>
                                            </select>
                                        </div>

                                        <div class="form-group mb-2 input-group d-flex align-items-center">
                                            <span class="input-group-text mt-2 card-header text-white"><i class="fas fa-dollar-sign"></i></span>
                                            <input type="text" placeholder="Price" class="form-control mt-2" id="price" name="price" readonly style="color: darkgray;">
                                        </div>


                                        <div class="form-group mb-2 form-check mx-4">
                                            <input type="checkbox" class="form-check-input " id="acceptAgreement" required>
                                            <label class="form-check-label mx-3" for="acceptAgreement">
                                                <p>I accept the terms and conditions</p>
                                            </label>
                                        </div>


                                        <div class="row">
                                            <div class="col-sm-6 col-6">
                                                <button type="submit" name="submit" id="butsave" class="btn background btn-block w-100 text-white">Submit</button>
                                            </div>
                                            <div class="col-sm-6 col-6">
                                                <button type="submit" name="submit" id="butsave" class="btn background btn-block w-100 text-white">Clear</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <div class="col-4 col-12 col-lg-4">

                                <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">TERMS & CONDITIONS</h3>
                                    </div>

                                    <div class="container-sm">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <!-- <h1 class="page-title">FAQs</h1> -->
                                                <div class="accordion" id="accordionExample">
                                                    <div class="card shadow">
                                                        <div class="card-header" id="headingOne">
                                                            <h2 class="clearfix mb-0">
                                                                <a class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><i class="fa fa-chevron-circle-down"></i> How soon will the tracking information be updated?</a>
                                                            </h2>
                                                        </div>
                                                        <div id="collapseOne" class="collapse " aria-labelledby="headingOne" data-parent="#accordionExample">
                                                            <div class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.</div>
                                                        </div>
                                                    </div>
                                                    <div class="card shadow">
                                                        <div class="card-header" id="headingTwo">
                                                            <h2 class="mb-0">
                                                                <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><i class="fa fa-chevron-circle-down"></i> Can I cancel my order for any reason?</a>
                                                            </h2>
                                                        </div>
                                                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                                                            <div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</div>
                                                        </div>
                                                    </div>
                                                    <div class="card shadow">
                                                        <div class="card-header" id="headingThree">
                                                            <h2 class="mb-0">
                                                                <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><i class="fa fa-chevron-circle-down"></i> Does Bootstrap Framework Provide Cross-browser Support?</a>
                                                            </h2>
                                                        </div>
                                                        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                                                            <div class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.</div>
                                                        </div>
                                                    </div>
                                                    <div class="card shadow">
                                                        <div class="card-header" id="headingFour">
                                                            <h2 class="mb-0">
                                                                <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><i class="fa fa-chevron-circle-down"></i> Can I Use Bootstrap for Mobile App Development?</a>
                                                            </h2>
                                                        </div>
                                                        <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
                                                            <div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>

                            </div>


                        </div>
                    </div>
                </div>
            </section>


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


        <!--start to footer-->
        <div class="footer-menu circular background ">
            <ul class="mt-1">
                <li>
                    <a href="dashboard.php"><i class="fa fa-home text-white" aria-hidden="true"></i>
                        <span class="text-white">Home</span>
                    </a>
                </li>
                <li>
                    <a href="sub-account.html"><i class="fa fa-cart-plus text-white" aria-hidden="true"></i>
                        <span class="text-white">Cart</span>
                    </a>
                </li>

                <li>
                    <a href="sub-screens.html"><i class="fa fa-cog text-white" aria-hidden="true"></i>
                        <span class="text-white">Setting</span>
                    </a>
                </li>
                <li>
                    <a href="user_product_price.php"><i class="fa fa-money text-white" aria-hidden="true"></i>
                        <span class="text-white">Price</span>
                    </a>
                </li>
                <li>
                    <a href="sub-userinterface.html"> <i class="fa fa-shopping-basket text-white" aria-hidden="true"></i>
                        <span class="text-white">Interface</span>
                    </a>
                </li>

            </ul>
        </div>




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


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


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

</body>

</html>