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

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <title>Games</title>
        <style> 
            body{background-color: cornflowerblue;}
            .container-fluid {height: 700px; background-image: url("images/<%= myImage%>"); background-size: cover; background-position: center;}
            .opaque{background-color:rgba(20, 19, 19, 0.2);}
            .text{color: ghostwhite; opacity: 1;}

        </style>

    </head>
    <body>
        <div class="container-fluid p-0">
            <div class="row">
                <div class="col-sm-4 pt-5 pl-5 opaque rounded text">

                    <!--Retrieving product information from the SQL database and displaying for the user-->
                    <h1 id="item"><%= selectedProd %></h1>
                    <h1><%=model %></h1>
                    <h2 id="price"><%=myPrice %></h2>
                    <br>

                    <form>
                        <label for="quantity">Choose your quantity:</label>
                        <input type="number" id="quantity" name="quantity" min="0" max="5">
                    </form>

                    <!--Javascript function for the addition of items to their cart-->
                    <button class="btn-primary btn" onclick="purchase()">Add to Basket</button>
                    <br><br>

                    <div class="row">
                        <!--Return to the home page-->
                        <a href="home">Return to Browse</a>
                    </div>    
                </div>
            </div>    
        
        </div>
    </body>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


    
</html>

<script>
    /*
        Script so that when the user adds items to their basket, their item details 
        are stored for checkout. The alert function informs the user that the items 
        are added.
    */
    function purchase(){
            /*
                Utilisng Javascript objects to input into local storage
                and then pull them at checkout
            */
            let product = document.getElementById("item").innerHTML;
            let quantity = document.getElementById("quantity").value;
            let price = document.getElementById("price").innerHTML;
            let quan_price = {p: price, q: quantity}
            localStorage.setItem(product, JSON.stringify(quan_price));
            alert("Items added to basket!");
      
    };
</script>  