<%- include('../includes/header') %>
    <link rel="stylesheet" href="cssNew/product-css/style.css">
    <link rel="stylesheet" href="cssNew/product-css/responsive.css">
    <section class="cart-area ptb-80 appointment-inner"
      >
        <div class="container">
            <div class="d-flex justify-content-between">
                <div class="">
                    <h3>Cart</h3>
                </div>
                <div class="">
                    <div class="update-cart-btn">
                        <button class="btn btn-sm btn-outline-primary clearCart"
                            style="border: 1px solid;">Clear Cart <i
                                class="btn-icon-bx fas fa-eye"></i></button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12">
                    <div class="cart-table">
                        <div class="table-responsive">
                            <table class="table mt-2" style="border: 1px
                                solid;">
                                <thead>
                                    <tr class="table-heading">
                                        <th class="product-remove"></th>
                                        <th class="prodecut">Product</th>
                                        <th class="prodecut-name">Product Name</th>
                                        <th class="prodecut-price">Unit Price</th>
                                        <th class="prodecut-quantity">Quantity</th>
                                        <th class="prodecut-subtotal">Total</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <% if (cartLength> 0) {
                                        cart.forEach(element=> { %>
                                        <tr id="row-<%= element.id %>">
                                            <th><span class="color-red
                                                    product-buy buyPro"
                                                    data-type="remove"
                                                    data-id="<%=
                                                    JSON.stringify(element) %>"><i
                                                        class="fa
                                                        fa-times-circle"></i></span>
                                            </th>
                                            <td class="product-thumb">
                                                <a href="#"
                                                    class="cart-product"><img
                                                        src="<%= element.image
                                                        %>"
                                                    alt="shop-img"></a>
                                            </td>
                                            <td class="product-details"><span>
                                                    <%= element.title %>
                                                    </span></td>
                                                <td>₹<%= element.price %>
                                                    </td>
                                                    <td>
                                                        <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 qty-<%=element.id%>">
                                                            <%= 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>
                                                        </td>
                                                        <td id="perTotal-<%=
                                                            element.id %>">₹<%=
                                                                element.price *
                                                                element.quantity
                                                                %>
                                                            </td>
                                                        </tr>
                                                        <% }) } else { %>
                                                            <tr>
                                                                <td
                                                                    class="text-center"
                                                                    colspan="6">Cart
                                                                    Empty</td>
                                                            </tr>
                                                            <% } %>
                                                            </tbody>
                                                        </table>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-xl-12
                                                            col-lg-12
                                                            col-md-12">
                                                            <div
                                                                class="cart-totals">
                                                                <h3>Cart Totals</h3>
                                                                <ul>
                                                                    <li><b>Total
                                                                            <span
                                                                                id="total">₹<%=
                                                                                    total
                                                                                    %></span></b></li>
                                                                    </ul>
                                                                    <div
                                                                        class="text-center">
                                                                        <a
                                                                            href="javascript:history.back()"
                                                                            class="btn
                                                                            btn-outline-primary
                                                                            btn-sm"
                                                                            style="border:
                                                                            1px
                                                                            solid;">Continue
                                                                            Shopping
                                                                            <i
                                                                                class="btn-icon-bx
                                                                                fas
                                                                                fa-shopping-cart"></i></a>
                                                                        <a
                                                                            href="checkout"
                                                                            class="btn
                                                                            btn-outline-primary
                                                                            btn-sm"
                                                                            style="border:
                                                                            1px
                                                                            solid;">Checkout
                                                                            <i
                                                                                class="btn-icon-bx
                                                                                fas
                                                                                fa-check"></i></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                    <!-- Start Footer Area -->
                                    <div class="back-color mt-3" style="position: absolute;bottom: 0;right: 0;left: 0;z-index: 2;">
                                        <div class="container">
                                            <div class="footer-bottom">
                                                <div class="row">
                                                    <div class="col-12 text-center">
                                                        <p class="copyright-text">© Copyright 2022 Darwin Platform Pharmaceutical Limited <a href="#"
                                                                target="_blank" class="text-secondary"></a></p>
                                                    </div>
                                                </div>
                                          </div>
                                        </div>
                                    </div>
                                    
                                    
                                    <!-- JAVASCRIPT FILES ========================================= -->
                                    <script src="/js/jquery.min.js"></script>
                                    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
                                    <script src="/admin/modules/bootstrap/js/bootstrap.bundle.min.js"></script>
                                    <script src="/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
                                    <script src="/vendor/swiper/swiper.min.js"></script>
                                    <script src="/vendor/magnific-popup/jquery.magnific-popup.js"></script>
                                    <script src="/js/swiper.min.js"></script>
                                    <script src="/js/custom.js"></script>
                                    <script src="/vendor/toastify/toastify-js.js"></script>
                                    <script src="/js/sliderResponsive.js"></script>
                                    <script src="/js/functions.js"></script>
                                    
                                    
                                    </body>
                                    
                                    </html>