<!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">
  <title>Home</title>

  <!-- SHARED HEAD -->
  <%- include('partials/sharedHead') %>

  <!-- PAGE HEAD -->
  <link rel="stylesheet" href="/styles/home.css">

  <script type="text/javascript">
    /* Submit product form when user clicks on div -> redirects to product page */
    $(function() {
      $(".product").on("click", function() {
        $(this).submit();
      });

    });
  </script>

</head>

<body>
  <div class="page-container">
    <!-- header partial -->
    <%- include('partials/header'); %>

    <!-- Filter options -->
    <div id="first-level-filters">
      <form method="GET" id="dropdown-filters-form" action="/home">
        <div id="country-select-div">

          <!-- Country select -->
          <!-- Populate all countries from the products in db -->
          <label for="country-select">Country:</label>
          <select name="country" class="form-select form-select-sm" id="country-select">
            <% if(appliedFilters.chosenCountry !='All' ){ %>
            <option value='All'>All</option>
            <% } %>
            <option value=<%=appliedFilters.chosenCountry %> selected><%=
                                            appliedFilters.chosenCountry %>
            </option>
            <% allCountries.forEach(function(country_obj){ %>
            <% if(country_obj !=appliedFilters.chosenCountry){ %>
            <option value=<%=country_obj %>><%= country_obj %>
            </option>
            <% } %>
            <% }) %>
          </select>
        </div>

        <!-- City select -->
        <!-- populate select from all cities in the db -->
        <div id="city-select-div">
          <label for="city-select">City:</label>
          <select name="city" class="form-select form-select-sm" id="city-select">
            <% if(appliedFilters.chosenCity !='All' ){ %>
            <option value='All'>All</option>
            <% } %>
            <option value=<%=appliedFilters.chosenCountry %> selected><%=
                                            appliedFilters.chosenCity %>
            </option>
            <% cities.forEach(function(city_obj){ %>
            <% if(city_obj !=appliedFilters.chosenCity){ %>
            <option value=<%=city_obj %>><%= city_obj %>
            </option>
            <% } %>
            <% }) %>
          </select>
        </div>

        <!-- Wedding category select -->
        <div id="category-select-div">
          <label for="category-select">Category:</label>
          <select name="category" class="form-select form-select-sm" id="category-select">
            <% if(appliedFilters.chosenCategory !='All' ){ %>
            <option value='All'>All</option>
            <% } %>
            <option value=<%=appliedFilters.chosenCategory %> selected><%=
                                            appliedFilters.chosenCategory %>
            </option>
            <% categories.forEach(function(category){ %>
            <% if(category !=appliedFilters.chosenCategory){ %>
            <option value=<%=category %>><%= category %>
            </option>
            <% } %>
            <% }) %>
          </select>
        </div>

        <!-- Colour select -->
        <div id="color-select-div">
          <label for="color-select">Color:</label>
          <select name="color" class="form-select form-select-sm" id="color-select">
            <% if(appliedFilters.chosenColor !='All' ){ %>
            <option value='All'>All</option>
            <% } %>
            <option value=<%=appliedFilters.chosenColor %> selected><%=
                                            appliedFilters.chosenColor %>
            </option>
            <% colors.forEach(function(color){ %>
            <% if(color !=appliedFilters.chosenColor){ %>
            <option value=<%=color %>><%= color %>
            </option>
            <% } %>
            <% }) %>
          </select>
        </div>

        <!-- Wedding type select -->
        <div id="weddingType-select-div">
          <label for="weddingType-select">Wedding Type:</label>
          <select name="weddingType" class="form-select form-select-sm" id="weddingType-select">
            <% if(appliedFilters.chosenWeddingType !='All' ){ %>
            <option value='All'>All</option>
            <% } %>
            <option value=<%=appliedFilters.chosenWeddingType %> selected><%=
                                    appliedFilters.chosenWeddingType %>
            </option>
            <% weddingTypes.forEach(function(weddingType){ %>
            <% if(weddingType !=appliedFilters.chosenWeddingType){ %>
            <option value=<%=weddingType %>><%= weddingType %>
            </option>
            <% } %>
            <% }) %>
          </select>
        </div>
        <input id="submit-search-filters" class="btn btn-secondary" type="submit" value="Submit">
      </form>
    </div>
  </div>

  <!-- Display search results -->
  <div class="orders-container">
    <% if(products.length==0){ %>
    <div class="no-results">
      <p>We couldn't find anything matching your search results</p>
    </div>
    <% } %>
    <% products.forEach(function(product){ %>
    <form method="GET" class="product" action="/product_details/<%= product.product_id %>">
      <div class="picture-and-description">
        <div class="product-photo" style="background-image: url('<%= product.pictures[0]%>')">
        </div>
        <div class="product-description">
          <h5 class="product-title">
            <%= product.title %>
          </h5>
          <p class="product-description-text">
            <%= product.description %>
          </p>
          <p class="colors-available-p">Colors available: <%= product.colors %>
          </p>
          <p class="vendor-details">
            <%= product.vendor %>, <%= product.address %>
          </p>
          <% if(product.stars == null){ %>
          <p>No reviews yet</p>
          <% } else{ %>
          <div class="stars-rating">
            <% if (product.stars>= 1) { %>
            <span class="fa fa-star checked"></span>
            <% } else{ %>
            <span class="fa fa-star"></span>
            <% } %>
            <% if (product.stars>= 2) { %>
            <span class="fa fa-star checked"></span>
            <% } else{ %>
            <span class="fa fa-star"></span>
            <% } %>
            <% if (product.stars>= 3) { %>
            <span class="fa fa-star checked"></span>
            <% } else{ %>
            <span class="fa fa-star"></span>
            <% } %>
            <% if (product.stars>= 4) { %>
            <span class="fa fa-star checked"></span>
            <% } else{ %>
            <span class="fa fa-star"></span>
            <% } %>
            <% if (product.stars>= 5) { %>
            <span class="fa fa-star checked"></span>
            <% } else{ %>
            <span class="fa fa-star"></span>
            <% } %>
          </div>
          <div class="rating-and-reviews">
            <p>Rating: <%= product.stars %>/5</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;<%= product.number_reviews %> Reviews</p>
          </div>
          <% } %>
          <p>Price per unit: <%= product.currency %> <%= product.price %></p>
          <button class="btn btn-light ">See Product Details</button>
        </div>
      </div>
      <input input type="hidden" type="text" name="product_id" value="<%= product.product_id %>" />
    </form>
    <% }) %>
  </div>
  </div>

  <!-- footer partial -->
  <%- include('partials/footer'); %>

  <!-- auth modal partial -->
  <%- include('partials/authModal'); %>

  <!-- firebase interaction scrips -->
  <%- include('partials/firebaseInteraction') %>
</body>

</html>