<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="/header/47f38b024b.js"></script>
  <link href="/header/bootstrap.min.css" rel="stylesheet">
  <script src="/header/jquery.min.js"></script>
  <link rel="stylesheet" href="/app/app.css">
  <link rel="stylesheet" href="/header/header.css">
  <script src="/sweetalert.min.js"></script>
  <title>futureTech</title>
</head>

<body>


  <div id="cart-toast" class="toast align-items-center text-white border-0" role="alert" aria-live="assertive"
    aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        Product added to cart <img class="cart-i-s" src="/images/icons/shopping-cart-white.svg" alt="">
      </div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
        aria-label="Close"></button>
    </div>
  </div>

  <div id="myNav" class="navbar-dark">
    <!--div class="items">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="/">Home</a>
      </li>
    </ul>
  </div-->

    <a style="display: flex;" href="/">
      <img id="the_logo" src="/images/futuretech.png" alt="" class="d-inline-block align-text-top">
    </a>

    <div style="display: flex;">
      <!--a href="/">    
              <img id="the_logo" src="/images/futuretech.png" alt="" class="d-inline-block align-text-top">   
        </a-->
      <div class='' id="search-bar">
        <input type="text" id="searchInput" placeholder="What are you looking for today?">
        &nbsp;<div id='submitsearch' onclick="search()">
          <span>Search</span>
        </div>
      </div>
    </div>

    <div class="items inline_items">

      <div id="cart-div">
        <a href="#" style="position: relative;" onclick="init_text();fill_cart()" data-bs-toggle="modal"
          data-bs-target="#cartModal">
          <span class="badge">0</span>
          <span><img id="cart-i" src="/images/icons/shopping-cart-black.png" alt=""></span>
        </a>
      </div>

      <div class="menu-obj">
        <a class="active" href="#" id="account" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          <%if(currentUser){%>
            <span id="username_sp">
              <%=currentUser.last_name%> &nbsp;
            </span>
            <% }%>
              <img id="user_drop" src="/images/icons/user_black.png" alt="">
        </a>
        <ul class="dropdown-menu dropdown-menu-light" aria-labelledby="navbarDropdown">
          <%if(currentUser){%>
            <li><a class="dropdown-item" href="/order/all/<%=currentUser._id%>">My Orders</a></li>
            <li><a class="dropdown-item" href="/current_user/profile">Profile</a></li>
            <li><a class="dropdown-item" href="/logout">LogOut</a></li>
            <% } else{%>
              <li><a class="dropdown-item" href="/login">SignIn</a></li>
              <li><a class="dropdown-item" href="/register">Register</a></li>
              <% }%>
        </ul>
      </div>
    </div>
  </div>

  <div id="content">

    <!-------------------- Cart Modal -->
    <div class="modal fade" id="cartModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header border-bottom-0">
            <h5 class="modal-title" id="exampleModalLabel">
              Your Shopping Cart
            </h5>
            <button type="button" class="close btn" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <table class="table table-image">
              <thead>
                <tr>
                  <th scope="col"></th>
                  <th scope="col">Product</th>
                  <th scope="col">Price</th>
                  <th scope="col">Qty</th>
                  <th scope="col">Total</th>
                  <th scope="col">Actions</th>
                </tr>
              </thead>
              <tbody>

              </tbody>
            </table>
            <div class="d-flex justify-content-end">
              <h5>Total: <span id="total-cart" data-ototal="" class="price text-success"></span></h5>
            </div>
            <!--div class="d-flex justify-content-end">
            <span dataset-selected="1" id="tax-option" onclick="change_prices()" class="text-primary">
              See the tax-free Cart</span>
          </div-->
          </div>
          <div class="modal-footer border-top-0 d-flex justify-content-between">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <form id="checkout-form" action="/checkout_setup" method="POST">
              <input type="text" style="display: none;" name="cart_products" id="cart-prs-input">
              <button id="checkout-btn" type="submit" class="btn btn-success">Checkout</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!---------------------------------------- end Modal ----------->


    <!---------------------------------------- Menu ----------->
    <nav id="header-nav" class="navbar navbar-expand-lg navbar-dark">
      <div id="nav-div1">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">

            <%for(var i=0;i<menu.length;i++){ if(menu[i].Sub_items.length>1){%>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle active" href="#" id="navbarDropdown" role="button"
                  data-bs-toggle="dropdown" aria-expanded="false">
                  <%=menu[i].name%>
                </a>
                <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdown">
                  <%for(var j=0;j<menu[i].Sub_items.length;j++){ %>
                    <li><a class="dropdown-item" href="/category/<%=menu[i].Sub_items[j]._id%>/products">
                        <%=menu[i].Sub_items[j].name%>
                      </a></li>
                    <% } %>
                </ul>
              </li>
              <% } else { %>
                <li class="nav-item"><a class="nav-link active" href="/category/<%=menu[i]._id%>/all/products">
                    <%=menu[i].name%>
                  </a></li>
                <% } } %>

          </ul>
        </div>
      </div>
    </nav>


    <script src="/header/header.js"></script>