<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<title> Responsive Sidebar Menu  | CodingLab </title>-->
    <link rel="stylesheet" href="style.css">
    <!-- Boxicons CDN Link -->
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="/script.js" defer></script>
    <title>Ecommerce</title>
</head>
<body>
    <div class="sidebar">
        <div class="logo-details">
          <i class='bx bxs-bot icon'></i>
            <div class="logo_name">E-COMM</div>
            <i class='bx bx-menu' id="btn" ></i>
        </div>
        <ul class="nav-list">
          <li>
              <i class='bx bx-search' ></i>
             <input type="text" id="buscarInput" onkeyup="myFunction()" placeholder="Buscar...">
             <span class="tooltip">Buscar</span>
          </li>
          <li>
            <a href="/">
              <i class='bx bx-home'></i>
              <span class="links_name">Homepage</span>
            </a>
             <span class="tooltip">Homepage</span>
          </li>
          <li>
           <a href="/login">
             <i class='bx bx-log-in' ></i>
             <span class="links_name">Login</span>
           </a>
           <span class="tooltip">Login</span>
         </li>
         <li>
           <a href="/cadastro">
             <i class='bx bx-user-plus' ></i>
             <span class="links_name">Cadastro</span>
           </a>
           <span class="tooltip">Cadastro</span>
         </li>
         <!--LEMBRAR DE CONFIGURAR PARA APARECER O NOME DO USUARIO ONLINE E UMA FOTINHA DE HOMEM OU MULHER-->
         <!--<li class="profile">
             <div class="profile-details">
               <img src="profile.jpg" alt="profileImg">
               <div class="name_job">
                 <div class="name">Prem Shahi</div>
                 <div class="job">Web designer</div>
               </div>
             </div>
             <i class='bx bx-log-out' id="log_out" ></i>
         </li>-->
        </ul>
      </div>
      <section class="home-section">
        <header id="home"> <img src='./img/icone-header.png' alt='Imagem da mascara da serie mister robot' width="100px" height="100px">
          <h2>Sejam bem vindos ao E-COMM, o Mr. Robot E-commerce</h2>
          <!--BOTAO DO CARRINHO NO HEADER-->
            <div class="menu-aberto">
            <span id="carrinho">0</span>
            <a href="/carrinho"></a>
            <i id="carrinho" class='bx bx-cart-alt'></i>
            <span class="links_name"></span>
          </div>
        </header>
        <% if(msg != "") {  %>
          <section id="msg">
              <p><%= msg %></p> <span id="close">&times;</span>
          </section>
        <% } %>
        <div class="produtos">
          <div class="models-produto">
            <a href="">
              <div class="models-produto-img">
                <img src="" alt="">
              </div>
              <div class="models-produto-add">+</div>
            </a>
            <div class="models-produto-valor">R$</div>
            <div class="models-produto-nome" id="nome-busca">---</div>
            <div class="models-produto-descri">---</div>
          </div>
          <div class="cart-produto">
            <img src="" alt="">
            <div class="cart-produto-qtdarea">
              <button class="cart-item-">-</button>
              <div class="cart-produto-qtd">1</div>
              <button class="cart-item+">+</button>
            </div>
          </div>
        </div>
        <main id="area-prod">
          <div class="modelo-area" id="modelo-area-id">
            <% items.forEach(item => { %>
              <div class="models-produto">
                <a href="" class="allas" id="<%= item.id %>">
                  <div class="models-produto-img">
                    <img src="/img/<%= item.img %>" width="250px" height="250px" alt="">
                  </div>
                  <div class="models-produto-add">+</div>
                </a>
                <div class="models-produto-valor">R$<%= item.preco.toFixed(2) %></div>
                <div class="models-produto-nome"><%= item.nome %></div>
              </div>
            <% }); %>
          </div>
        </main>
        <aside>
          <div class='cart-area'>
            <div class="menu-closer">
              <span class="material-icons">close</span>
            </div>
            <!--CÓDIGO DO CARRINHO LATERAL
              <h2>seus produtos</h2>
            <div class="cart"></div>
            <div class="cart-detalhes">
              <div class="cart-total-produto subtotal">
                <span>Subtotal</span>
                <span>R$--</span>
              </div>
              <div class="cart-finalizar">comprar</div>
            </div>
          </div>
        </aside>-->
        <% items.forEach(item => { %>
        <div class="modelsWindowArea" id="w<%= item.id %>">    
          <div class="modelsWindowsBody" id="win-body">
              <div class="modelsbig" id="bigmodels">
                <img src="/img/<%= item.img %>" width="250px" height="250px" alt="<%= item.nome %>">
              </div>
              <div class="modelsInfo" id="infomodels">
                <h2><%= item.nome %></h2>
                <div class="modelsInfo-descri" id="descriInfoModels"><%= item.descricao %></div>
                <div class="models-preco" id="precoModels">
                  <div class="modelsInfo-preco" id="preco-modelsInfo">R$<%= item.preco.toFixed(2) %></div>
                </div>
                <div class="modelsInfo-addbutton" id="btn-add-cart">Adcionar ao carrinho</div>
                <button class="modelsInfo-cancelbutton" id="voltarflex<%= item.id %>">Voltar</button>
              </div>
          </div>
        </div>
        <% }); %>
      </section>
      <script>
      let sidebar = document.querySelector(".sidebar");
      let closeBtn = document.querySelector("#btn");
      let searchBtn = document.querySelector(".bx-search");
    
      closeBtn.addEventListener("click", ()=>{
        sidebar.classList.toggle("open");
        console.log("rodou");
        menuBtnChange();
      });
    
      searchBtn.addEventListener("click", ()=>{
        sidebar.classList.toggle("open");
        menuBtnChange();
      });
    
      function menuBtnChange() {
       if(sidebar.classList.contains("open")){
         closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");
       }else {
         closeBtn.classList.replace("bx-menu-alt-right","bx-menu");
       }
      }
      </script>

      <script class="busca-dinamica">
        function myFunction() {
          // Declare variables
          var input, filter, ul, li, a, i, txtValue;
          input = document.getElementById('buscarInput');
          filter = input.value.toUpperCase();
          ul = document.getElementById("modelo-area");
          li = ul.getElementsByTagName('nome-busca');
        
          // Loop through all list items, and hide those who don't match the search query
          for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            txtValue = a.textContent || a.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
              li[i].style.display = "";
            } else {
              li[i].style.display = "none";
            }
          }
        }
        </script>
  
        <footer>Todos os direitos reservados para Leonardo Fleck e Frederico Lima 2021 ®</footer>
      </body>

</html>