<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
    crossorigin="anonymous"></script>

  <link rel="stylesheet" href="..\..\stylesheets\checkout.css">
  <script src="..\..\scripts\checkout.js"></script>

  <link rel="stylesheet" href="..\..\stylesheets\index.css">
  <script src="..\..\scripts\index.js"></script>
  <title>Checkout</title>
</head>

<body style="background-color: black;">
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <a href="/store/cart">
          Back to Cart
        </a>
      </div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
    <div class="row">
      <div class="col-2"></div>
      <div class="col-6">
        <div class="row">
          <h1 style="color: white;">Checkout</h1>
        </div>
        <div class="row">
          <h3 style="color: white;">Payment Information</h3>
        </div>
        <div class="card m-2" style="background-color: white;">
          <div class="card-body">
            <div class="row">
              <form action="">
                <div class="form-outline mb-4">
                  <input type="text" id="formControlLgXsd" class="form-control form-control-lg" value="Anna Doe" />
                  <label class="form-label" for="formControlLgXsd">Cardholder's Name</label>
                </div>

                <!-- card stuff -->
                
                <%- include("card") %>
                
                <div class = "row mt-4">
                  <div class = "col-4">
                    <div class = "form-outline mb-2">
                      <input type = "text" id = "formControlFirst" class = "form-control form-control-lg"/>
                      <label class="form-label" for="formControlFirst">First Name</label>
                    </div>
                  </div>
                  <div class = "col-4">
                    <div class = "form-outline mb-2">
                      <input type = "text" id = "formControlLast" class = "form-control form-control-lg"/>
                      <label class="form-label" for="formControlLast">Last Name</label>
                    </div>
                  </div>
                  <div class = "col-4">
                    <div class = "form-outline mb-2">
                      <input type = "number" id = "formControlPhone" class = "form-control form-control-lg"/>
                      <label class="form-label" for="formControlPhone">Phone Number</label>
                    </div>
                  </div>
                </div>
                <div class = "form-outline mb-4">
                  <input type = "text" id = "formControlAdd" class = "form-control form-control-lg"/>
                  <label class="form-label" for="formControlAdd">Shipping / Billing Address</label>
                  <input type = "text" id = "formControlAdd2" class = "form-control form-control-lg"/>
                  <label class="form-label" for="formControlAdd2">Shipping / Billing Address (Line 2)</label>
                </div>
                <div class = "row">
                  <div class = "col-8">
                    <div class = "form-outline mb-2">
                      <input type = "text" id = "formControlCity" class = "form-control form-control-lg"/>
                      <label class="form-label" for="formControlCity">City</label>
                    </div>
                  </div>
                  <div class = "col-2">
                    <div class = "form-outline mb-2">
                      <input type = "text" id = "formControlState" class = "form-control form-control-lg"/>
                      <label class="form-label" for="formControlState">State</label>
                    </div>
                  </div>
                  <div class = "col-2">
                    <div class = "form-outline mb-4">
                      <input type = "number" id = "formControlZip" class = "form-control form-control-lg"/>
                      <label class="form-label" for="formControlZip">Zipcode</label>
                    </div>
                  </div>
                </div>

              </form>
            </div>
          </div>
        </div>
        <div class="row">
          <h3 style="color: white;">Review Order</h3>
        </div>
        <div class="row">
          <div class="card m-2">
            <div class="card-body">
              <% total = 0 %>
              <% for (product of products) { %>
                <% total += product.productprice %>
                <div class="card m-2">
                  <div class="card-body">
                    <div class="row">
                      <div class="col-2">
                        <div style="height: 190px; width: 140px; background-color: red;">
                          <img style="height: 100%; width: 100%;" src=<%= "../../images/products/" + product.productimage %>>
                        </div>
                      </div>
                      <div class="col-sm-10 my-auto">
                        <div class="row">
                          <div class="col-10">
                            <h4>
                              <%= product.productname %>
                            </h4>
                            <h6>
                              Publisher:
                              <%= product.publisherid %>
                            </h6>
                          </div>
                          <div class="col-2">
                            <h4>
                              Price: $
                              <%= product.productprice %>
                            </h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <% } %>
            </div>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="card m-2" style="background-color: white;">
          <div class="card-body">
            <form class="row m-2 d-flex justify-content-center" method="post" action = "/store/orderComplete/" >
              <input type="hidden" id="token" name="tokenVal">
              <button class="btn btn-primary" id = "placeOrder" name = "placeOrder" disabled>Place Order</button>
            </form>
            <% subtotal = parseFloat(total.toFixed(2)) %>
            <% tax = ((total + 10)*.10).toFixed(2) %>
            <% total = parseFloat(subtotal) + parseFloat(tax) + 10 %>
            <p style="font-size: large;">Subtotal: $<%= subtotal %></p>
            <p style="font-size: large;">Shipping: $10</p>
            <p style="font-size: large;">Tax: <%= tax %></p>
            <p class="border-top py-3" style="font-size: large; font-weight: bolder;">Total: <%= total.toFixed(2) %></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>

</body>

</html>