<%- include('../partials/header.ejs') -%>
    <link rel="stylesheet" href="css/product.css">
    <br>
    <br>
        <!-- product -->
        <div class="product-content product-wrap clearfix product-deatil">
            <div class="row">
                <div class="col-md-4 col-sm-12">
                    <div class="container">
                        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                                <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                                <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="carousel-item active " id="img-container" >
                                    <img src="images/uploads/<%=item.primary_image %>" class="d-block w-100" style=" height: 300px;" alt="first">
                                   
                                </div>
                                <% images.forEach((e)=> { %>
                                    <div class="carousel-item " >
                                        <img src="images/uploads/<%= e.image_url %>" class="d-block w-100"  style=" height:300px;" alt="first">
                                        
                                    </div>
                                    <% }); %>


                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" 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="col-md-7 col-md-offset-1 col-sm-12 col-xs-12">
            <form action="/cart.html/add" method="post">
                
                    <h2 class="name">
                        <%=item.name %>
                    </h2>
                    <hr />
                    <h3 class="price-container">
                        <%=item.price %>$
                            <small>*includes tax</small>
                    </h3>
                    <div class="certified">
                        <ul>
                            <li>
                                <a>Delivery time<span>7 Working Days</span></a>
                            </li>
                            <li>
                                <a>Certified<span>Quality Assured</span></a>
                            </li>
                        </ul>
                    </div>
                    <hr />
                                <strong  style="color: mediumseagreen;">Description</strong>
                                <p>
                                    <%=item.desc %>
                                </p>


                    <hr />
                    
                        
                            <input type="hidden" name="itemID" value="<%=item.products_id %>">
                            <% if (item.quantity<=0){%>
                                <span>this product out of stock </span>
                                <input type="submit" class="btn btn-success btn-lg" value="Add to cart" disabled>
                                <% }else{ %>
                                    <input type="submit" class="btn btn-success btn-lg" value="Add to cart">
                                    <% } %>
            </form>
        </div>
        </div>
    </div>
            
        <script>
            var options = {
                zoomPosition: 'original',
                zoomWidth: 500
};
new ImageZoom(document.getElementById("img-container"), options);
        </script>
 


    <%- include( '../partials/footer.ejs') -%>