<!DOCTYPE html>
<html lang="en">
    <%- include("./partials/header.ejs") %>
<style>
    h2 span{
        color: blueviolet;
    }
    .star-box{
        color: white;
        font-size: 1.5rem;
    }
    .gold {
    color: gold !important;
    cursor: pointer;
    }
    .star {
    cursor: pointer;
    color: white;
    }
    .no-style {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none; /* Rimuovi il bordo quando il bottone è selezionato */
}
</style>
<body style="background-color: cornflowerblue;">
    <div class="d-flex flex-column justify-content-center align-items-center container-fluid mt-5">
        <% if (locals.id) {%>
        <div class="d-flex justify-content-between w-100 px-3">
            <a href="/" class="btn btn-secondary"> &larr; Back </a>
            <form action="/book_page" method="post">
                <input type="hidden" name="userId" value="<%= id %>">
                <input type="hidden" name="add" value= 1 >
                <button type="submit" class="btn btn-primary" name="add" value="new"> Add book</button>
            </form>
        </div>
            <h2>Genres: </h2>
            <div class="d-inline mb-5">
                <% genres.forEach(genre => { %>
                    <form action="/genre" method="post" class="d-inline">
                        <input type="hidden" name="id" value="<%= id %>">
                        <button type="submit" class="btn btn-secondary" name="genre" value="<%= genre %>"> <%= genre %></button>
                    </form>
                    <% }) %>
                </div>
            <h1 class="mb-2">Books read by <%= name%> </h1>
            <%
            function formatDate(dateString) {
              const date = new Date(dateString);
              const year = date.getFullYear();
              const month = String(date.getMonth() + 1).padStart(2, '0');
              const day = String(date.getDate()).padStart(2, '0');
              return `${year}-${month}-${day}`;
            }
            %>

              <% books.forEach((book, indx) => { %>
                <div class="text-center mb-5 w-50">
                  <h2><%= book.title %> - <%= book.author%></h2>
                    <div class="float-md-start mr-3 me-3 mt-4">
                        <img src="https://picsum.photos/200/300" class="" alt="book cover img" style="width: 150px; height: 200px;">
                        <div class="star-box" data-index="<%= indx %>">
                            <% for(let i = 0; i < 5; i++ ) { %>
                                <form action="/rating" method="post" class="d-inline">
                                    <input type="hidden" name="id" value="<%= id %>">
                                    <input type="hidden" name="bookid" value="<%= book.id %>">
                                    <button type="submit" class="star no-style" name="stars" value= "<%= i + 1 %>" data-star-index="<%= i %>" data-initial-star="<%= book.stars %>">&#9733;</button>
                                </form>
                            <% } %>
                        </div>
                    </div>
                    <div class="text-center mt-5">
                        <% if (book.finish_date) {%>
                            <h2 class="fs-6">start date: <%= formatDate(book.start_date) %> end date: <%= formatDate(book.finish_date) %> </h2>
                        <% }else {%>
                            <h2 class="fs-6">start date: <%= formatDate(book.start_date) %></h2>
                        <% } %>
                    </div>
                    <p> <%= book.review %> </p>
                    <div class="d-flex justify-content-around mt-3">
                        <!-- Bottone per la modifica -->
                        <form action="/book_page" method="post" class="d-inline">
                            <input type="hidden" name="userId" value="<%= id %>">
                            <input type="hidden" name="bookId" value="<%= book.id %>">
                            <input type="hidden" name="title" value="<%= book.title %>">
                            <input type="hidden" name="author" value="<%= book.author %>">
                            <input type="hidden" name="genre" value="<%= book.genre %>">
                            <input type="hidden" name="startDate" value="<%= formatDate(book.start_date) %>">
                            <input type="hidden" name="todayStart" value="<%= book.todayStart %>">
                            <input type="hidden" name="endDate" value="<%= formatDate(book.finish_date) %>">
                            <input type="hidden" name="todayEnd" value="<%= book.todayEnd %>">
                            <input type="hidden" name="review" value="<%= book.review %>">
                            <input type="hidden" name="modify" value="1">
                            <button type="submit" class="btn btn-warning">Modify</button>
                        </form>

                        <!-- Bottone per la cancellazione -->
                        <form action="/delete" method="post" class="d-inline">
                            <input type="hidden" name="userId" value="<%= id %>">
                            <input type="hidden" name="bookId" value="<%= book.id %>">
                            <button type="submit" class="btn btn-danger">Delete</button>
                        </form>
                    </div>
                </div>
            <% }) %>
        <% } %>
    </div>
</body>


<script>
    document.addEventListener('DOMContentLoaded', function() {
    const starContainers = document.querySelectorAll('.star-box');
    // Itera sui contenitori di stelle (libri)
    starContainers.forEach((container, containerIndex) => {
        // Seleziona le stelle all'interno del contenitore corrente
        const stars = container.querySelectorAll('.star');

        // Itera sulle stelle del contenitore corrente
        stars.forEach((star, starIndex) => {
            // 10 è la specifica della base numerica quando si utilizza parseInt
            const valueInStar = parseInt(star.dataset.initialStar, 10);
            // Aggiunge la classe 'gold' se l'indice è inferiore al valore iniziale delle stelle
            star.classList.toggle('gold', !isNaN(valueInStar) && starIndex < valueInStar);
        });

        // Aggiunge un listener per l'evento click su ogni stella
        stars.forEach((star) => {
            star.addEventListener('click', function() {
                const starIndex = parseInt(star.dataset.starIndex, 10);
                // Aggiorna dinamicamente il colore delle stelle
                updateStarsColor(starContainers, containerIndex, starIndex);
            });
        });
    });
    // Funzione per aggiornare dinamicamente il colore delle stelle
    function updateStarsColor(containers, containerIndex, selectedStarIndex) {
        const container = containers[containerIndex];
        const stars = container.querySelectorAll('.star');

        // Itera sulle stelle del contenitore corrente
        stars.forEach((star, starIndex) => {
            // Aggiunge la classe 'gold' se l'indice è inferiore o uguale all'indice selezionato
            star.classList.toggle('gold', starIndex <= selectedStarIndex);
        });
    }
});
 </script>

</html>





