<!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>Vendor Registration</title>
  <!-- SHARED HEAD -->
  <%- include('partials/sharedHead') %>
  <!-- PAGE HEAD -->
  <link rel="stylesheet" href="/styles/product-details.css">
  <!-- date picker -->
  <!-- Jquery -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

  <!-- BootStrap 4 JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <!-- BootStrap 4 CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
  <!-- BootStrap DatePicker JS -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
  <!-- BootStrap DatePicker CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
  <script>
    function sendEmail(element) {
      var email_address = '<%= product.vendor_email %>';
      console.log(email_address);
      window.location.href = "mailto:" + email_address + "?subject=You And Me - Vendor enquiry &body= ";
    };
  </script>
  <script>
    // to pass user id to backend
    function userIdInFormInput() {
      let user_id = document.getElementById("user_id_navbar").innerHTML;
      document.getElementById("user_id").value = user_id;
    }
    window.onload = userIdInFormInput;
  </script>
</head>

<body>
  <div class="outer-page-container">
    <%- include('partials/header') %>
    <% if (is_authenticated === false) { %>
    <script>
      $(window).on('load', function() {
        $('#loginRequiredModal').modal('show');
      });
    </script>
    <% } %>

    <!-- Modal for Login required -->
    <div id="loginRequiredModal" class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Log in required</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>Please log in or register to complete this action.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
          </div>
        </div>
      </div>
    </div>
    <% if (addedToBasket === true || orderRequestSubmitted === true) { %>
    <script>
      $(window).on('load', function() {
        $('#actionSuccess').modal('show');
      });
    </script>
    <% } %>

    <!-- Action success modal -->
    <div id="actionSuccess" class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Thank you!</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <% if (addedToBasket === true) { %>
            <p>Product successfully added to wishlist. Go to your Profile
              page to see the content of your wishlist.</p>
            <% } else if (orderRequestSubmitted === true){ %>
            <p>Order successfully submitted and pending vendor confirmation. Go to your Profile
              page to see your order history.</p>
            <% } %>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Product page container -->
    <div class="page-container">
      <div class="text-container">
        <h1 id="product-title"><%= product.title %></h1>
        <h3 id="vendor"><%= product.vendor %></h3>
        <h4 id="address"><%= product.address %></h4>
      </div>
      <div class="pictures-overall-rating-message-vendor-container">
        <div class="pictures-container">
          <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="d-block w-100" src=<%= product.pictures[0] %> alt="Carousel slide">
              </div>
              <% product.pictures.slice(1).forEach(function(picture){ %>
              <div class="carousel-item">
                <img class="d-block w-100" src=<%= picture %> alt="Carousel slide">
              </div>
              <% }) %>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
        <div class="right-to-carousel">
          <div class="rating-container">
            <% if (product.stars != null) { %>
            <div class="overall-rating">
              <p>Overall Rating: </p>
              <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> <!-- end overall rating-->
            <div class="product-quality-rating">
              <p>Product Quality: </p>
              <div class="stars-rating">
                <% if (product.overall_product_quality_rating >= 1) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (product.overall_product_quality_rating>= 2) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (product.overall_product_quality_rating>= 3) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (product.overall_product_quality_rating>= 4) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (product.overall_product_quality_rating>= 5) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
              </div>
            </div> <!-- end product-quality rating-->
            <div class="vendor-quality-rating">
              <p>Vendor: </p>
              <div class="stars-rating">
                <% if (product.overall_vendor_quality_rating >= 1) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (product.overall_vendor_quality_rating >= 2) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (product.overall_vendor_quality_rating >= 3) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (product.overall_vendor_quality_rating >= 4) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (product.overall_vendor_quality_rating >= 5) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
              </div>
            </div> <!-- end vendor-quality rating-->
            <div class="product-description-quality-rating">
              <p>Product-description: </p>
              <div class="stars-rating">
                <% if (product.overall_product_description_rating >= 1) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (product.overall_product_description_rating>= 2) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (product.overall_product_description_rating>= 3) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (product.overall_product_description_rating>= 4) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (product.overall_product_description_rating>= 5) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
              </div>
            </div> <!-- end product-description-quality rating-->
            <% } else{ %>
            <p>No rating yet</p>
            <% } %>
          </div> <!-- end rating container-->
          <div class="product-details-container">
            <p>Product Category: <%= product.category %></p>
            <p>Wedding Type: <%= product.wedding_types %></p>
            <p>Available in Colors: <%= product.colors %></p>
          </div>
          <div class="message-vendor-container">
            <!-- Button to open email app to send email to vendor -->
            <button id="email-vendor-btn" onclick="sendEmail();" type="button" class="btn btn-secondary">
              Email vendor
            </button>
          </div>
        </div><!-- end right-to-carousel-->
      </div> <!-- end pictures-overall-rating-message-vendor-container-->
      <div class="order-now">
        <form method="POST" id="order-form" action="/product_details/<%= product.product_id %>">
          <div class="order-items-container">
            <div id="color-select-div">
              <p>Color:</p>
              <select name="color" class="form-select form-select-sm" id="color-select">
                <% product.colors.forEach(function(color){ %>
                <option value=<%=color %>><%= color %></option>
                <% }) %>
              </select>
            </div>
            <div class="product-quantity-container">
              <p>Quantity:</p>
              <input required class="product-number-input form-control" name="quantity" type="number" value="1" />
            </div>
            <div class="price-container">
              <p>Price per unit: <%= product.currency %> <%= product.price %></p>
            </div>
            <div class="date-picker">
              <p>Preferred Delivery:</p>
              <div class="input-group input-daterange">
                <input required name="preferred_delivery" id="preferred-delivery-date-picker" type="text" class="form-control" />
              </div>

              <script type="text/javascript">
                $(".input-daterange input").each(function() {
                  $(this).datepicker("clearDates");
                });
              </script>
            </div>
            <div id="buttons-container">
              <input type="hidden" id="user_id" name="user_id" value="">
              <% if (orderRequestSubmitted === true) { %>
              <input disabled id="confirm-availability-button" type="submit" value="Pending Acceptance">
              <% } else{ %>
              <input name="confirm_availability" id="confirm-availability-button" type="submit" value="Confirm Availability" class="btn btn-secondary" onclick="userIdInFormInput();">
              <% } %>
              <% if (addedToBasket === true) { %>
              <input name="add_to_basket" disabled id="add_to_basket_button" type="submit" value="Added to wishlist">
              <% } else{ %>
              <input name="add_to_basket" id="add_to_basket_button" type="submit" value="Add to wishlist" class="btn btn-secondary" onclick="userIdInFormInput();">
              <% } %>
            </div>

          </div>
        </form>
      </div> <!-- end orders container -->
      <div class="reviews-container">
        <h3>Reviews:</h3>
        <% if(product.reviews.length > 0){ %>
        <% product.reviews.forEach(function(review){ %>
        <div class="review-container">
          <div class="user_name">
            <p><%= review.firstName %> <%= review.lastName %></p>
          </div>
          <div class="review-date-container">
            <p><%= moment(review.date).format('Do MMM YYYY HH:MM')  %></p>
          </div>
          <div class="rating-container-review">
            <div class="overall-rating">
              <p>Overall Rating: </p>
              <div class="stars-rating">
                <% if (review.overall_rating >= 1) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.overall_rating>= 2) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.overall_rating>= 3) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.overall_rating>= 4) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.overall_rating>= 5) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
              </div>
            </div> <!-- end overall rating-->
            <div class="product-quality-rating">
              <p>Product Quality: </p>
              <div class="stars-rating">
                <% if (review.product_quality_rating >= 1) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.product_quality_rating>= 2) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.product_quality_rating>= 3) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.product_quality_rating>= 4) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.product_quality_rating>= 5) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
              </div>
            </div> <!-- end product-quality rating-->
            <div class="vendor-quality-rating">
              <p>Vendor: </p>
              <div class="stars-rating">
                <% if (review.vendor_quality_rating >= 1) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.vendor_quality_rating >= 2) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.vendor_quality_rating >= 3) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.vendor_quality_rating >= 4) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.vendor_quality_rating >= 5) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
              </div>
            </div> <!-- end vendor-quality rating-->
            <div class="product-description-quality-rating">
              <p>Product-description: </p>
              <div class="stars-rating">
                <% if (review.product_description_rating >= 1) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.product_description_rating>= 2) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.product_description_rating>= 3) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.product_description_rating>= 4) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
                <% if (review.product_description_rating>= 5) { %>
                <span class="fa fa-star checked"></span>
                <% } else{ %>
                <span class="fa fa-star"></span>
                <% } %>
              </div>
            </div> <!-- end product-description-quality rating-->
          </div> <!-- end rating container-->
          <div class="review-comment">
            <p><%= review.comment %></p>
          </div>
        </div>
        <% }) %>
        <% } else{ %>
        <p>No reviews yet</p>
        <% } %>
      </div>
    </div>
  </div>
  <!-- Footer partial -->
  <%- include('partials/footer') %>

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

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


</body>

</html>