<%- 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" style="background-color: #f5f5fc;">
        <div class="container">
            <h3>Checkout</h3>
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 py-30 px-20" style="background: #fff;">
                    <div class="mb-3 flex-responsive">
                        <h2 class="title-3">Billing Address</h2>
                        <button type="button" class="btn btn-primary" data-toggle="modal"
                            data-target="#staticBackdropp">Add
                            New Address <i class="fa fa-shopping-cart"></i></button>
                    </div>
                    <div class="col-lg-12 col-md-12">
                        <ul>
                            <% if (addressLength==0) { %>
                                <li class="text-center">No Address Found</li>
                                <% }else{ address.forEach(element=> { %>
                                    <li class="d-flex mb-2">
                                        <input type="radio" name="address" value="<%= element.id %>">
                                        <p class="ms-1" style="color: #0b9e4f;font-weight:bold;">
                                            <%= element.name %>
                                        </p>
                                    </li>
                                    <li class="d-flex mb-2">
                                        <p style="font-weight:bold;
                                                color:#d81517;">
                                            ADDRESS: </p>

                                        <p class="ms-3 fw-bold" style="color:#000">
                                            <%= element.address %>, <%= element.city %>, <%= element.state %>,
                                                        <%= element.pincode %>
                                        </p>
                                    </li>
                                    <li class="d-flex mb-2">
                                        <p><strong style="font-weight:bold;color:#d81517;">PHONE : </strong>
                                        </p>
                                        <p class="ms-3 fw-bold" style="color:#000">
                                            <%= element.mobile %>
                                        </p>
                                    </li>
                                    <li class="d-flex mb-2">
                                        <p><strong style="font-weight:bold;color:#d81517;">ADDRESS
                                                TYPE : </strong>
                                        </p>
                                        <p class="ms-3 fw-bold" style="color:#000">
                                            <%= element.type==0 ? 'HOME' : element.type==1 ? 'OFFICE' : 'OTHER' %>
                                        </p>

                                    </li>
                                    <%}) } %>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 py-10 px-10">
                    <div class="order-table">
                        <h2 class="title-5">Products</h2>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr class="table-heading">
                                        <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>
                                            <td class="product-thumb">
                                                <a href="#" class="cart-product"><img src="<%= element.thumbnail %>"
                                                        alt="shop-img"></a>
                                            </td>
                                            <td class="product-details"><span>
                                                    <%= element.title %>
                                                </span></td>
                                            <td>₹<%= element.selling_price %>
                                            </td>
                                            <td>
                                                <span class="px-3">
                                                    <%= element.quantity %>
                                                </span>
                                            </td>
                                            <td>₹<%= element.selling_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-lg-12 col-md-12">
                                <div class="cart-totals">
                                    <h3>Cart
                                        Totals</h3>
                                    <ul>
                                        <li>Subtotal:
                                            <span>₹
                                                <%= total - processing_fee%>
                                            </span>
                                        </li>
                                        <li>Shipping/Handling:
                                            <span>₹
                                                -
                                                <%= shipping %>
                                            </span>
                                        </li>
                                        <li>Processing
                                            Fees:
                                            <span>₹
                                                +
                                                <%= processing_fee %>
                                            </span>
                                        </li>
                                        <li class="border"></li>
                                        <li><b>Total
                                                <span>₹<%= total %></span></b></li>
                                    </ul>
                                    <div class="text-center">
                                        <a href="cart" class="btn btn-primary"><i class="fa fa-angle-left"></i> Back
                                            to Cart</a>
                                        <button class="btn btn-primary" id="buyNow" data-amount="<%= razorpay.amount %>"
                                            data-order-id="<%= razorpay.id %>"
                                            data-key="<%= process.env.razorpay_key_id %>">Pay Now
                                            <i class="fa fa-angle-right"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script>
        var userString = '<%- JSON.stringify(user) %>'
        var user = JSON.parse(userString)
    </script>
    <!-- Start Footer Area -->
    <!-- Modal -->
    <div class="modal fade" id="staticBackdropp" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form id="addressForm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Modal
                            title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body p-5">
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <input type="hidden" name="id" id="addressID">
                                    <label for="name">Name</label>
                                    <input id="name" name="name" type="text" class="form-control"
                                        placeholder="Enter Name">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="mobile">Mobile</label>
                                    <input id="mobile" name="mobile" type="text" maxlength="10"
                                        oninput="this.value=this.value.replace(/[^0-9]/g,'').replace(/(\.*)/g,'');"
                                        required="" class="form-control phone" placeholder="Enter Mobile">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="address">Address</label>
                                    <textarea id="address" name="address" class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="city">City</label>
                                    <input id="city" name="city" type="text" class="form-control"
                                        placeholder="Enter City">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="state">State</label>
                                    <input id="state" name="state" type="text" class="form-control"
                                        placeholder="Enter State">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="pincode">Pincode</label>
                                    <input id="pincode" name="pincode" type="number" class="form-control"
                                        placeholder="Enter Pincode">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="type">Address
                                        Type</label>
                                    <select id="type" name="type" class="form-control">
                                        <option value="">Select
                                            Address
                                            Type</option>
                                        <option value="0">Home</option>
                                        <option value="1">Work</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary closeModal" data-dismiss="modal">Close</button>
                        <button type="submit" data-type="add" id="addressSubmitBtn" class="btn tn-primary">Add</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <%- include('../includes/footer') %>
        <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
        <script src="/js/razorpay.js"></script>