<% layout('layouts/customer-boilerplate')  -%>

    <div class="row">
        <div class="container">
            <table id="cart" class="table table-hover table-condensed">
                <thead>
                    <tr>
                        <th style="width:50%">Product name</th>
                        <th style="width:10%">Price</th>
                        <th style="width:8%">Quantity</th>
                        <th style="width:22%" class="text-center">Subtotal</th>
                        <th style="width:10%"></th>
                    </tr>
                </thead>
                <tbody>
                    <% for (let index in shopping_cart.products) { %>
                        <tr>
                            <td data-th="Product">
                                <div class="row">
                                    <div class="col-sm-2 hidden-xs display-none-sm-screen"><img src="<%=shopping_cart.products[index].cart_item.images[0].tiny_thumbnail%>" alt="..." class="img-responsive" /></div>
                                    <div class="col-sm-10">
                                        <a href="/products/<%= shopping_cart.products[index].cart_item._id %>">
                                            <h6 class="nomargin" style="text-transform: capitalize;">
                                                <%= shopping_cart.products[index].cart_item.name %>
                                            </h6>
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td data-th="Price">
                                <span><%= shopping_cart.products[index].cart_item.price %></span> zl</td>
                            <td data-th="Quantity">
                                <input type="number" class="form-control text-center" onchange="updateHiddenInputValue('actual-quantity-update-input-<%= shopping_cart.products[index]._id%>', 'hidden-quantity-update-input-<%= shopping_cart.products[index]._id%>')" id="actual-quantity-update-input-<%= shopping_cart.products[index]._id%>"
                                    value="<%= shopping_cart.products[index].item_quantity %>">
                            </td>
                            <td data-th="Subtotal" class="text-center">
                                <%= shopping_cart.products[index].cart_item.price * shopping_cart.products[index].item_quantity%> zl</td>
                            <td class="actions" data-th="">
                                <form action="/shopping-cart/update=<%= shopping_cart.products[index]._id%>?_method=PUT" method="POST">
                                    <input type="number" hidden name="quantityupdate" id="hidden-quantity-update-input-<%= shopping_cart.products[index]._id%>" value="<%= shopping_cart.products[index].item_quantity %>">
                                    <button class="btn btn-info btn-sm"><i class="fa fa-refresh"></i></button>
                                </form>
                                <form action="/shopping-cart/delete=<%= shopping_cart.products[index]._id%>?_method=DELETE" method="POST">
                                    <button class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
                                </form>
                            </td>
                        </tr>
                        <% } %>
                </tbody>
                <tfoot>
                    <tr>
                        <td><a href="/products" class="btn btn-warning btn-responsive"><i class="fa fa-angle-left"></i> Continue Shopping</a></td>
                        <td colspan="2" class="hidden-xs"></td>
                        <td class="hidden-xs text-center"><strong>Total: <span>
                            <% let result = 0; %>
                            <% for (let index in shopping_cart.products) {%>
                                <%   result += shopping_cart.products[index].cart_item.price * shopping_cart.products[index].item_quantity  %>
                            <% } %> 
                            <br>
                            <%= result %> zl
                        </span></strong></td>
                        <td>
                            <button class="btn btn-success btn-responsive" data-bs-toggle="modal" data-bs-target="#orderCheckout">
                                    Checkout <i class="fa fa-angle-right"></i>
                            </button>
                        </td>
                    </tr>
                </tfoot>
            </table>

        </div>
    </div>


    <!-- order checkout modal-->
    <!-- Modal -->

    <div class="modal fade" id="orderCheckout" tabindex="-1" aria-labelledby="orderCheckout" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Order Checkout</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div>
                        <table class="table table-hovers">
                            <thead>
                                <tr>

                                    <th scope="col">Product name</th>
                                    <th scope="col">Price</th>
                                    <th scope="col">Quantity</th>
                                    <th scope="col">Subtotal</th>
                                </tr>
                            </thead>
                            <tbody>
                                <% for (let index in shopping_cart.products) { %>
                                    <tr>
                                        <th scope="row" style="text-transform: capitalize;">
                                            <%= shopping_cart.products[index].cart_item.name %>
                                        </th>
                                        <td data-th="Price">
                                            <span><%= shopping_cart.products[index].cart_item.price %></span> zl</td>
                                        <td data-th="Quantity">
                                            <%= shopping_cart.products[index].item_quantity %>
                                                <%= shopping_cart.products[index].cart_item.quantity_type %>
                                        </td>
                                        <td data-th="Subtotal" class="text-center">
                                            <%= shopping_cart.products[index].cart_item.price * shopping_cart.products[index].item_quantity%> zl</td>
                                    </tr>
                                    <% } %>

                            </tbody>
                            <tfoot>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <th scope="row">
                                        Total: <strong><%= result %> zl</strong>
                                    </th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                    <div>
                        <form action="/shopping-cart/checkout=<%= shopping_cart._id%>" method="POST">
                            <input hidden type="text" name="total_price" value="<%= result %>" required>
                            <select class="form-select" aria-label="Payment method selection" name="payment_method" required>
                                <option selected disabled>Choose payment method</option>
                                <option value="Cash-on-delivery">Payment in Cash on delivery</option>
                                <option value="Card-on-delivery">Payment by Card on delivery</option>
                                <option value="Online">Online - pay now</option> 
                            </select>

                            <br>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-success">Confirm order</button>
                        </form>

                    </div>
                </div>

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