<%- include('../partials/header') -%>
<% if(locals.product){ %>
<link rel="stylesheet" href="/product/p_details.css">


<!-- Page Content -->
<div class="container">

    <!-- Portfolio Item Heading -->
    <h2 class="my-4 col-md-8"><%=product.name%>
    </h2>
  
    <!-- Portfolio Item Row -->
    <div class="row">
  
      <div class="col-md-8">
        <img id="main_img" class="img-fluid" src="<%=product.images?.[0].secure_url || product.images?.[0]%>" alt="">
        Other images:
        <div id="other_images">
          <% for(var i=1;i<product.images.length;i++){%>
          <img class="card" src="<%=product.images?.[i].secure_url || product.images?.[i]%>" alt="" onclick="change_img(this)">
          <% } %>
        </div>
      </div>

      <div class="col-md-4">
        <h3 class="my-3"><%=product.price%> DH</h3>
        <form class="order-form" action="/order_checkout" method="get">
        <input type="number" class="form-control" id="detail-qty" name="qty" value="1">
        <input style="display: none;" type="text" name="product_id" id="" value="<%=product._id%>">
        <br>
        <%if(product.in_stock){%>
        <button onclick="" role="button" id="buy_now" class="btn btn-outline-primary btn-lg mt16 d-block d-sm-inline-block te_theme_button details-act" href="#"><i class="fa fa-bolt"></i> Buy Now</button>
      </form>
        <a onclick="add_to_cart('<%=product._id%>',document.querySelector('#detail-qty').value)" role="button" id="add_cart" class="btn btn-outline-primary btn-lg mt16 d-block d-sm-inline-block te_theme_button details-act" href="#"><i class="fa fa-shopping-cart"></i> Add to Cart</a>
        <%} else {%>
          <button onclick="" role="button" id="buy_now" class="btn btn-outline-primary btn-lg mt16 d-block d-sm-inline-block te_theme_button details-act" href="#" disabled><i class="fa fa-bolt"></i> Buy Now</button>
        </form>
          <button id="add_cart" class="btn btn-outline-primary btn-lg mt16 d-block d-sm-inline-block te_theme_button details-act" disabled><i class="fa fa-shopping-cart"></i> Add to Cart</button>
          <p style="color: #C82A26;">Out of Stock</p>
          <%if(!currentUser){%>
          <input id="avail_email" type="hidden" placeholder="your email here">
          <% }%>
          <button id="email_btn" onclick="email_availability('<%=product._id%>','<%=currentUser ? currentUser.email : `` %>')" class="btn btn-warning">Notify Me when this is available</button>
          <%}%>
          <div id="email_positive_notif" style="display: none;margin-top: 1%;" class="alert alert-success" role="alert">
            You will be notified once available!
        </div>

        <% if(product.description){%>
          <div id="description" class="">
            <h4 style="">Description</h4>
            <hr>
  <%- product.description%>
          </div>
        <% } %>

    </div>
    
</div>
<br>
    <!-- /.row related products-->
  
    <!-- Related Products Row -->
    <!--h3 class="my-4">Related Projects</h3>
  
    <div class="row">
  
      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
              <img class="img-fluid" src="http://placehold.it/500x300" alt="">
            </a>
      </div>
  
      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
              <img class="img-fluid" src="http://placehold.it/500x300" alt="">
            </a>
      </div>
  
      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
              <img class="img-fluid" src="http://placehold.it/500x300" alt="">
            </a>
      </div>
  
      <div class="col-md-3 col-sm-6 mb-4">
        <a href="#">
              <img class="img-fluid" src="http://placehold.it/500x300" alt="">
            </a>
      </div>
  
    </div-->
    <!-- /.row -->
  
  </div>

  <script src="/product/p_details.js"></script>
  <!-- /.container -->

<%}%>  <!-- closing tag of checking if product exist -->
  <%- include('../partials/footer') -%>