<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include("partials/meta.ejs") %>
    <title>RecipEasy: Results</title>
  </head>
  <body>
    <div class="container search-results">
      <%- include('partials/header-nav.ejs') %>
      <main>
        <% if (typeof(count)=="undefined" ){ %>
          <h2>Cannot connect to the server.</h2>
          <h3>Please contact ChefDevs team. Sorry for the inconvenience.</h3>
          <% } else{  %>
        <form action="search-results" method="get">        
            <div class="labelwrapper-search">
              <div class=""></div>
              <div class="fieldwrapper-search">
                <label for="search_keywords" >Ingredients</label>
                <input
                  type="text"
                  id="search_keywords"
                  name="search_keywords"
                  placeholder="Ingredients"
                  value="<%= q %> "
                />
              </div>
              <div>
                <input type="submit" Value="Filter Search" />
              </div>
            </div>
        
         <div id="filterwrapper-search">
          <div class="labelwrapper-search">
            <div class="fieldwrapper-search">
              <label for="cuisineType"> Cuisine Type </label>
              <select id="select_cuisine" name="cuisineType">
                <option value="">___</option>
              </select>
            </div>
            <div class="fieldwrapper-search">
              <label for="mealType"> Meal Type </label>
              <select id="select_meal" name="mealType">
                <option value="">___</option>
              </select>
            </div>
            <div class="fieldwrapper-search">
              <label for="dietLabel"> Diet Type</label>
              <select id="select_dietLabel" name="dietLabel">
                <option value="">___</option>
              </select>
            </div>
            <div class="fieldwrapper-search">
              <label for="healthLabel"> Health Label</label>
              <select id="select_healthLabel" name="healthLabel" multiple  style="height:100px; padding: 5px;">
                <option value="">___</option>
              </select>
            </div>
          </div>
         </div>
          
        </form>
  
        <div class="recipe-result">
          <p> <%
            if (typeof(cuisineSelected) != "undefined" && cuisineSelected != "") {
            %>
              Cuisine Type: <%= cuisineSelected %> <br>
            <% }
            if (typeof(mealSelected) != "undefined" && mealSelected != "") {
            %>
              Meal Type: <%= mealSelected %> <br>
            <% } 
            if (typeof(dietSelected) != "undefined" && dietSelected != "") {
            %>
              Diet Type: <%= dietSelected %> <br/>
            <% } 
            if (typeof(healthSelected) != "undefined" && healthSelected[0] != "") {
            %>
              Health Label: <%= healthSelected %> 
            <% } %>
          </p>
          <% 
            var totalHits=0; 
            if (count != 0){
              if (count < to){ 
                totalHits=count; 
              } else { 
                totalHits=to; 
              } 
          %> 
          <h2>Showing results for: <%= q %></h2>

          <div class="recipe-grid">
          <%
            for (let index=0; index < totalHits; index++) {
          %>
              <div class="recipe-card">
                <div class="recipe-img-details">
                  <img src="<%= hits[index].recipe.image %>" alt="recipe photo" />
                  <div>
                    <p><i class="fa fa-cutlery" aria-hidden="true"></i> <b> <%= hits[index].recipe.label %> </b> <br>
                      <i class="fa fa-link" aria-hidden="true"></i> Source: <a href="<%= hits[index].recipe.url %>" target="_blank">
                      <%= hits[0].recipe.source %> </a> 
                    </p>
                    <p><i class="fa fa-globe" aria-hidden="true"></i> Cuisine Type: <%= hits[index].recipe.cuisineType %> <br />
                      <i class="fa-solid fa-bell-concierge"></i> Meal Type: <%= hits[index].recipe.mealType %> <br />
                      <i class="fa-solid fa-wheat-awn"></i> Diet Type: <%= hits[index].recipe.dietLabels %> <br /> <br>
                      <a href="/print-recipe/<%= encodeURIComponent(hits[index].recipe.uri) %>" target="_blank"> <i class="fa-solid fa-print"></i></a> &ensp;
                      <a href="/add-favourite/<%= encodeURIComponent(hits[index].recipe.uri) %>" > <i class="fa-regular fa-heart"></i>  </a></p>
                    </p> 
                  </div>
                </div>
                <div class="recipe-card-hover">
                    <p><i class="fa-solid fa-bowl-food"></i> Ingredients: </p>
                    <ul>
                      <% let items = hits[index].recipe.ingredientLines;
                      items.forEach(function(ingr, index){ %>
                        <li> <%= ingr %> </li>
                      <% }) %>
                    </ul>
                </div>
              </div>
          <% }%>
          </div>
          <% }else{ %>
            <h2> Nothing found for: <%= q %> </h2>
          <% } } %>
        </div>
      </main>
      <%- include("partials/footer.ejs") %>
    </div>
  </body>
  <script>
    const cuisineTypeArr = ["American", "Asian",	"British",	"Caribbean",	"Central Europe",	"Chinese",	"Eastern Europe",	"French",	"Indian",	"Italian",	
    "Japanese",	"Kosher",	"Mediterranean",	"Mexican",	"Middle Eastern",	"Nordic",	"South American",	"South East Asian"];
    cuisineTypeArr.forEach((cuisineType) => {
    let opt = document.createElement("option");
    opt.value = cuisineType;
    opt.text = cuisineType;
    select_cuisine.appendChild(opt);
    });

    const mealTypeArr = [	"Breakfast", "Brunch",	"Lunch",	"Dinner",	"Snack", "Teatime"];
    mealTypeArr.forEach((mealType) => {
    let opt = document.createElement("option");
    opt.value = mealType;
    opt.text = mealType;
    select_meal.appendChild(opt);
    });

    const healthLabelArr = ["alcohol-free", "immuno-supportive", "celery-free", "crustacean-free", "dairy-free", "egg-free", "fish-free", "fodmap-free", "gluten-free", "keto-friendly", 
    "kidney-friendly", "kosher", "low-potassium", "lupine-free", "mustard-free", "low-fat-abs", "No-oil-added", "low-sugar", "paleo", "peanut-free", "pecatarian", "pork-free", 
    "red-meat-free", "sesame-free", "shellfish-free", "soy-free", "tree-nut-free", "vegan", "vegetarian", "Wheat-free"];
    healthLabelArr.forEach((healthLabel) => {
    let opt = document.createElement("option");
    opt.value = healthLabel;
    opt.text = healthLabel;
    select_healthLabel.appendChild(opt);
    });

    const dietLabelArr = ["balanced", "high-fiber", "high-protein", "low-carb", "low-fat", "low-sodium"];
    dietLabelArr.forEach((dietLabel) => {
    let opt = document.createElement("option");
    opt.value = dietLabel;
    opt.text = dietLabel;
    select_dietLabel.appendChild(opt);
    });

  </script>
</html>
