<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Checkout Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

  </head>
  <style>
    body {background-color: cornflowerblue;}
    .container-fluid{background-color: rgba(17, 77, 206, 0.25);}
    .col-lg-4 {font-size: large; color: ghostwhite;}  
    
  </style> 

   <body>
    <!--Utilising the bootstrap grid system-->
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-4 text-center">Welcome to checkout</div>
        </div><br>
        <div class="row justify-content-center flex-direction:column">
            <div id ="basket" class ="col-lg-4 text-center"></div>
        </div><br>

        <div class="row justify-content-center flex-direction:column">
            <div id ="basketcost" class ="col-lg-4 text-center">Your total is:</div>
        </div> <br>   

        <div class="row justify-content-center">
            <div class="col-lg-4 text-center">
                <!--Looking at the lines below all forms are required for the user to enter-->
                <form class="flex-direction:column" method="post" action="final">
                    <label for="firstname">First Name</label><br>
                    <input type="text" id="firstname" required><br>
                    <label for="surname">Surname</label><br>
                    <input type="text" id= "surname" required><br>
                    <label for="email">E-mail</label><br>
                    <!--Email type so user needs to insert charactters containing @-->
                    <input type="email" id="email" required><br><br>
                </form>    
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-4"></div>
            <div class="col-lg-4 text-center">
                    <label for="payment">
                        <select name="payment">
                            <option value="debit">Debit Card</option>
                            <option value="credit">Credit Card</option>
                            <option value="paypal">PayPal</option>
                        </select><br>

                <!--Post method to ensure security, will also cause a pop up informing user of resubmission of data-->        
                <form method="post" action="/final">       
                    <label for="cardno">Card number</label><br>
                    <input type="number" id="cardno" required><br>
                    <label for="cvc">CVC number</label><br>
                    <input type="number" id="CVC" required><br>
                    <br>
                   <button class="btn-primary btn">Confirm Order</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        /*
            Script to pull the information about the users basket and to give them a sub total
            and details of the products they ordered.
        */
          let basket_cost = 0;
          for(i = 0; i < localStorage.length; i++)
          {
              let product = localStorage.key(i);
              let content = JSON.parse(localStorage.getItem(product));
              let sumitems = content.q * content.p;
              basket_cost += sumitems;
              if(content.q > 0){
                  document.getElementById("basket").innerHTML += product + " x " + content.q + " = €" + sumitems + "<br>";
              }
              document.getElementById("basketcost").innerHTML = "Your total is: €" + basket_cost;
          };
      
      </script>

  </body>
  
</html>
