<!DOCTYPE html>
<html lang="en">
<%- include('../../../public/layouts/head') %>
<%- include('../../../public/layouts/aside.ejs') %>

<body>
    <article id='detailPage'>
        <h1><%=game.title %> </h1>
        <div class='slideshow-container'>
            <div class="mySlides fade">
                <img src="<%=game.image_url %>">
            </div>
            <div class="mySlides fade">
                <video src='<%= game.preview %>' controls></video>
            </div>
            <div class="mySlides fade youtube">
                <iframe  width=100% height=100% src="https://www.youtube.com/embed/<%= game.trailer %>" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>
        <br>

        <div style="text-align:center">
            <span class="dot" onclick="currentSlide(1)"></span>
            <span class="dot" onclick="currentSlide(2)"></span>
            <span class="dot" onclick="currentSlide(3)"></span>
        </div>

        <form id='saveFavorite' action="/addFavorite" method="POST">
            <fieldset>
                <input type="hidden" name="title" value="<%= game.title %>" required>
                <input type="hidden" name="image_url" value="<%= game.image_url %>" required>
                <input type="hidden" name="rating" value="<%= game.rating %>" required>
                <input type="hidden" name="ratingCount" value="<%= game.ratingCount %>" required>
                <input type="hidden" name="platforms" value="<%= game.platforms %>" required>
                <input type="hidden" name="parent_platforms" value="<%= game.parent_platforms%>" required>
                <input type="hidden" name="genre" value="<%= game.genre %>" required>
                <input type="hidden" name="trailer" value="<%= game.trailer %>" required>
                <input type="hidden" name="preview" value="<%= game.preview %>" required>
                <input type="hidden" name="filters" value="<%= game.filters %>" required>
                <input type="hidden" name="description" value="<%= game.description %>" required>
                <input type="hidden" name="slug" value="<%= game.slug %>" required>
                <button type="submit"> SAVE THIS GAME </button>
            </fieldset>
        </form>

        <section id='gameDetails'>
            <p>Description:<br><br><%= game.description %></p>
            <p>Genres:<br><br><%= game.genres %></p>
            <p>Platforms:<br><br><%= game.platforms %></p>
            <p>Rating:<br><br><%= game.rating %> / 5</p>
            <p>Reviews:<br><br><%= game.ratingCount %></p>
        </section>

        <form action="/suggest" method="post">
            <input type="hidden" name="slug" value="<%= game.slug %>"/>
            <button class="favoritesButton" type="submit">See Similar Games</button>
        </form>

        <section id='dealDetails'> 
            <% deals.forEach(deal => { %>
                <section class='storeInfo'> 
                    <h2>Store: <%= deal.shop %></h2><br>
                    <ul>
                        <li><%= deal.sale %>% off</li><br>
                        <li>Currently <%= deal.price %><br>from <%= deal.originalPrice %></li>
                    </ul><br><br>
                </section>
            <% }); %>
        </section>
    </article>
    <%- include('../../../public/layouts/footer') %>
</body>

<script>
    // https://www.w3schools.com/howto/howto_js_slideshow.asp
    var slideIndex = 1;
    showSlides(slideIndex);

    // Next/previous controls
    function plusSlides(n) {
    showSlides(slideIndex += n);
    }

    // Thumbnail image controls
    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
    }
</script>
</html>