<%- include('../partials/header.ejs') -%>
    <link rel="stylesheet" href="css/cart.css">
    <br>
    <br>
    <div class="container ">
        <!-- Shopping cart table -->
        <div class="card">
            <div style="padding: .75rem 1.25rem; background-color: rgba(0,0,0,.03);
        border-bottom: 1px solid rgba(0,0,0,.125);">
                <h2>Shopping Cart</h2>
            </div>

            <div class="table-responsive" style="padding: 10px;">
                <table id="card" class="table table-striped table-hover ">
                    <thead class="table-bordered">
                        <tr>
                            <!-- Set columns width -->
                            <th style="width:40%">Product</th>
                            <th style="width:8%">Quantity</th>
                            <th style="width:10%">Price</th>
                            <th style="width:20%" class="text-center">Subtotal</th>
                            <th style="width:10%"> update</th>
                            <th style="width:12%"> remove</th>
                        </tr>
                    </thead>
                    <tbody class="table-bordered">
                        <% console.log(data); data.forEach((item)=>{  %>
                            <tr class="table-bordered">
                                <td>
                                    <p>
                                        <%=item.name %>
                                    </p>
                                </td>
                                <form method="post" action="/cart.html/update">
                                    <td>
                                        <input type="text" name="quantity" class="form-control text-center" value="<%=item.quantity %>">
                                    </td>
                                    <td>$
                                        <%=item.price %>
                                    </td>
                                    <td class="text-center">$
                                        <%=item.total_price_per_product %>
                                    </td>
                                    <td class="actions" data-th="">

                                        <input type="hidden" name="id" value="<%=item.cart_products_id %>">
                                        <input type="hidden" name="price" value="<%=item.price %>">
                                        <button type="submit" class="btn btn-info btn-sm"><i class="fa fa-refresh"></i></button>
                                </form>

                                </td>
                                <td class="actions" data-th="">
                                    <form method="post" action="/cart.html/delete">
                                        <input type="hidden" name="id" value="<%=item.cart_products_id %>">
                                        <button type="submit" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
                                    </form>
                                </td>
                            </tr>
                            <% }) %>

                    </tbody>

                    <tfoot>
                        <tr>

                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><strong>Total <%=total %></strong></td>
                        </tr>
                        <tr>
                            <td><a href="/shop.html" class="btn btn-warning"><i class="fa fa-angle-left"></i> Continue Shopping</a></td>
                            <td colspan="2" class="hidden-xs"></td>
                            <td></td>
                            <td></td>
                            <td><a href="/checkout.html" class="btn btn-success btn-block">Checkout ></a></td>
                        </tr>
                    </tfoot>
                </table>
            </div>

        </div>
    </div>
    <br>
    <br>

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