<%- include('../includes/header') %>
    <link rel="stylesheet" href="/cssNew/product-css/style.css">
    <link rel="stylesheet" href="/cssNew/product-css/responsive.css">
    <!-- header END -->
    <!-- Start Product Details Area -->
    <section class="produts-details-area ptb-80">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-md-5">
                    <div class="product-bike">
                        <ul id="lightSlider" class="text-center">
                            <li>
                                <img src="<%= details.thumbnail %>" alt="new">
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-7 col-md-7">
                    <div class="product-details">
                        <h3 class="title-1">
                            <%= details.title %>
                        </h3>
                        <div class="ec-single-price-stoke d-flex mt-2 border-bottom">
                            <p class="fs-4 mb-0">
                                <span style="background-color:#cd9722;"
                                    class="badge-1 me-2 <%= details.percent == 0 ? 'd-none' : '' %>">
                                    <%= details.percent %> % Off
                                </span>
                                <span
                                    class="fw-light text-decoration-line-through small <%= details.percent == 0 ? 'd-none' : '' %>">RS.
                                    <%= details.display_price %></span> <span class="text-dark fw-bold">RS. <%=
                                        details.selling_price %>
                                </span>
                            </p>
                            <div class="ec-single-stoke mt-2">
                                <span class="ec-single-ps-title">
                                    <%= details.total_qty> 0 ? 'IN STOCK' : 'OUT OF STOCK' %>
                                </span>
                            </div>
                        </div>
                        <div class="ec-single-sales">
                            <div class="ec-single-pro-tab-desc">
                                <%- details.description %>
                            </div>
                        </div>

                        <div class="buybox">
                            <label class="showQty-<%= details.id %> <%= details.inCart ? '' : 'd-none' %>">Qty:</label>
                            <div
                            style="margin-right: 10px;"
                                class="border p-2 rounded showQty-<%= details.id %> <%= details.inCart ? 'd-inline ' : 'd-none' %>">
                                <span class="buyPro btn-secondary p-1 rounded" data-type="minus"
                                    data-id="<%= cartItem ? JSON.stringify(cartItem) : JSON.stringify(details) %>"><i
                                        class="fa fa-minus" aria-hidden="true"></i></span>
                                <span class="px-3 text-black qty-<%= details.id %> <%= JSON.stringify(details) %>">
                                    <%= details.quantity %>
                                </span>
                                <span class="buyPro btn-secondary p-1 rounded"
                                    data-id="<%= cartItem ? JSON.stringify(cartItem) : JSON.stringify(details) %>"
                                    data-type="add"><i class="fa fa-plus" aria-hidden="true"></i></span>
                            </div>
                       
                            <button data-id="<%= cartItem ? JSON.stringify(cartItem) : JSON.stringify(details) %>"
                                data-type="add"
                                class="product-buy buyPro btn-outline-primary btn-sm hideQty-<%= details.id %> <%= details.inCart ? 'd-none' : '' %>" style="border-bottom:2px solid !important">Add
                                To Cart <i class="btn-icon-bx fas fa-plus"></i></button>

                            <button data-id="<%= cartItem ? JSON.stringify(cartItem) : JSON.stringify(details) %>"
                                data-type="buynow" type="submit" class="btn-outline-primary btn-sm buyPro">Buy
                                Now! <i class="btn-icon-bx fas fa-shopping-cart"></i></button>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </section>
    <!-- End Product Details Area -->

    <!-- Start Partner Area -->
    <section class="section-sp1 about-area">
        <div class="container">
            <div class="text-center">
                <h1>RELATED PRODUCTS</h1>
            </div>
        </div>
        <% if(relatedProductsLength> 0) { %>
            <div class="container pt-50">
                <div class="row">
                    <% relatedProducts.forEach(element=> { %>
                        <div class="col-lg-3 col-sm-6 mb-30">
                            <div class="feature-container feature-bx2 feature1">
                                <div class="feature-box-xl mb-30 detailsLink" data-pcode="<%= element.p_code %>">
                                    <span class="icon-cell">
                                        <img src="<%= element.thumbnail %>" alt="">
                                    </span>
                                </div>
                                <div class="icon-content">
                                    <h6 class="ttr-title" style="color: #565acf;
                                        font-weight: 600;">
                                        <%= element.title %>
                                            </>
                                    </h6>
                                    <div class="price-center">
                                        <p class="price">₹<%= element.selling_price %>
                                        </p>
                                        <div
                                            class="border  p-2 rounded showQty-<%= element.id %> <%= element.inCart ? 'd-inline ' : 'd-none' %>">
                                            <span class="buyPro btn-secondary p-1 rounded" data-type="minus"
                                                data-id="<%= JSON.stringify(element) %>"><i class="fa fa-minus"
                                                    aria-hidden="true"></i></span>
                                            <span
                                                class="px-3 text-black qty-<%= element.id %> <%= JSON.stringify(element) %>">
                                                <%= element.quantity %>
                                            </span>
                                            <span class="buyPro btn-secondary p-1 rounded"
                                                data-id="<%= JSON.stringify(element) %>" data-type="add"><i
                                                    class="fa fa-plus" aria-hidden="true"></i></span>
                                        </div>
                                        <span data-id="<%= JSON.stringify(element) %>" data-type="remove"
                                            class="btn-danger p-1 rounded buyPro ml-1 showQty-<%= element.id %> <%= element.inCart ? '' : 'd-none' %>"><i
                                                class="fa fa-times" aria-hidden="true"></i></span>

                                        <button data-id="<%= JSON.stringify(element) %>" data-type="add"
                                            class="product-buy buyPro btn btn-primary btn-sm hideQty-<%= element.id %> <%= element.inCart ? 'd-none' : '' %>">Add
                                            To Cart<i class="btn-icon-bx fas fa-plus"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <% }) %>
                </div>
            </div>
            <% } %>
    </section>
    <!-- header END -->
    <button onclick='window.scrollTo({top: 0, behavior: "smooth"});' class="back-to-top fa fa-chevron-up"></button>
    </div>
    <%- include('../includes/footer') %>