<?php
session_start();

require 'connect.php'; 

    /* New Releases */
    $stmt = $conn->prepare("SELECT  book.bookid, coverimage, title, genre, publishedyear, firstname, lastname
                            FROM book
                            INNER JOIN book_author ON book.bookid = book_author.bookid
                            INNER JOIN author ON book_author.authorid = author.authorid
                            WHERE book.publishedyear BETWEEN 2020 AND 2024 LIMIT 20;
    ");
    $stmt->execute();
    $new_releases = [];

    while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
      $new_releases[] = $row;
    }

    /* Most Read Books */
    $stmt = $conn->prepare("SELECT book.bookid, book.CoverImage, book.Title, book.Genre, author.FirstName, author.LastName, COUNT(loan.LoanID) AS loan_count FROM book
                            INNER JOIN book_copies ON book.BookID = book_copies.BookID
                            LEFT JOIN loan ON book_copies.CopyID = loan.BookCopyID
                            INNER JOIN book_author ON book.BookID = book_author.BookID
                            INNER JOIN author ON book_author.AuthorID = author.AuthorID
                            GROUP BY book.BookID, book.Title, book.CoverImage, book.Genre, author.FirstName, author.LastName
                            ORDER BY loan_count DESC LIMIT 20;
    ");
    $stmt->execute();
    $most_read_books = [];

    while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $most_read_books[] = $row;
    }

    /* Least Read Books */
    $stmt = $conn->prepare("SELECT  book.bookid, book.CoverImage, book.Title, book.Genre, author.FirstName, author.LastName, COUNT(loan.LoanID) AS loan_count FROM book
                            INNER JOIN book_copies ON book.BookID = book_copies.BookID
                            LEFT JOIN loan ON book_copies.CopyID = loan.BookCopyID
                            INNER JOIN book_author ON book.BookID = book_author.BookID
                            INNER JOIN author ON book_author.AuthorID = author.AuthorID
                            GROUP BY book.BookID, book.Title, book.CoverImage, book.Genre, author.FirstName, author.LastName
                            ORDER BY loan_count ASC LIMIT 20;
");
    $stmt->execute();
    $least_read_books = [];

    while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $least_read_books[] = $row;
    }

    /* Classics */
    $stmt = $conn->prepare("SELECT  book.bookid, coverimage, title, genre, publishedyear, firstname, lastname
                            FROM book
                            INNER JOIN book_author ON book.bookid = book_author.bookid
                            INNER JOIN author ON book_author.authorid = author.authorid
                            WHERE book.publishedyear BETWEEN 1000 AND 1970 LIMIT 20;
    ");
    $stmt->execute();
    $classics = [];

    while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $classics[] = $row;
    }

    /* Comics */
    $stmt = $conn->prepare("SELECT  book.bookid, coverimage, title, genre, publishedyear, firstname, lastname
                            FROM book
                            INNER JOIN book_author ON book.bookid = book_author.bookid
                            INNER JOIN author ON book_author.authorid = author.authorid
                            WHERE book.genre IN ('Manga', 'Graphic Novel')
                            LIMIT 20;
    ");
    $stmt->execute();
    $comics = [];

    while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $comics[] = $row;
    }
    
?>


<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <link rel="stylesheet" href="CSS/Home.css">
</head>
<body>
    <?php include 'Components/Header.html'; ?>

    <div class="snowflakes" aria-hidden="true">
        <div class="snowflake">
            <div class="inner">❄</div>
        </div>
        <div class="snowflake">
            <div class="inner">❄</div>
        </div>
        <div class="snowflake">
            <div class="inner">❄</div>
        </div>
        <div class="snowflake">
            <div class="inner">❄</div>
        </div>
        <div class="snowflake">
            <div class="inner">❄</div>
        </div>
        <div class="snowflake">
            <div class="inner">❄</div>
        </div>
        <div class="snowflake">
            <div class="inner">❅</div>
        </div>
        <div class="snowflake">
            <div class="inner">❅</div>
        </div>
        <div class="snowflake">
            <div class="inner">❅</div>
        </div>
        <div class="snowflake">
            <div class="inner">❆</div>
        </div>
        <div class="snowflake">
            <div class="inner">❆</div>
        </div>
        <div class="snowflake">
            <div class="inner">❆</div>
        </div>
    </div>

    <main class="main-content">
        <!-- Trending Books Slider -->
        <section class="book-slider-section">
            <h2>Most Read Books</h2>
            <div class="slider-container">
                <button class="slider-button prev">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M15 18l-6-6 6-6"/>
                    </svg>
                </button>
                
                <div class="book-slider">
                    <div class="book-track">
                        <!-- Books will be dynamically added here -->
                    </div>
                </div>

                <button class="slider-button next">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>
            </div>
        </section>

        <!-- Decorative Divider 1 -->
        <div class="section-divider">
            <img class="divider-image" src="/Images/Reindeer.jpg" alt="Decorative divider">
        </div>

        <!-- New Releases Slider -->
        <section class="book-slider-section">
            <h2>Least Read Books</h2>
            <div class="slider-container">
                <button class="slider-button prev">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M15 18l-6-6 6-6"/>
                    </svg>
                </button>
                
                <div class="book-slider">
                    <div class="book-track">
                        <!-- Books will be dynamically added here -->
                    </div>
                </div>

                <button class="slider-button next">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>
            </div>
        </section>

        <!-- Decorative Divider 2 -->
        <div class="section-divider">
            <img class="divider-image" src="/Images/Reindeer.jpg" alt="Decorative divider">
        </div>

        <!-- Bestsellers Slider -->
        <section class="book-slider-section">
            <h2>New Releases</h2>
            <div class="slider-container">
                <button class="slider-button prev">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M15 18l-6-6 6-6"/>
                    </svg>
                </button>
                
                <div class="book-slider">
                    <div class="book-track">
                        <!-- Books will be dynamically added here -->
                    </div>
                </div>

                <button class="slider-button next">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>
            </div>
        </section>

        <!-- Decorative Divider 3 -->
                <div class="section-divider">
            <img class="divider-image" src="/Images/Reindeer.jpg" alt="Decorative divider">
        </div>

        <!-- Classics Slider -->
        <section class="book-slider-section">
            <h2>Classics</h2>
            <div class="slider-container">
                <button class="slider-button prev">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M15 18l-6-6 6-6"/>
                    </svg>
                </button>
                
                <div class="book-slider">
                    <div class="book-track">
                        <!-- Books will be dynamically added here -->
                    </div>
                </div>

                <button class="slider-button next">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>
            </div>
        </section>

        <!-- Decorative Divider 4 -->
                <div class="section-divider">
            <img class="divider-image" src="/Images/Reindeer.jpg" alt="Decorative divider">
        </div>

        <!-- Graphics Novels & Manga Slider-->
        <section class="book-slider-section">
            <h2>Graphics Novels & Manga</h2>
            <div class="slider-container">
                <button class="slider-button prev">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M15 18l-6-6 6-6"/>
                    </svg>
                </button>
                
                <div class="book-slider">
                    <div class="book-track">
                        <!-- Books will be dynamically added here -->
                    </div>
                </div>

                <button class="slider-button next">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>
            </div>
        </section>



    </main>
    <script>

    const books = {
        MostRead: [
            <?php 
                foreach($most_read_books as $book) {
                    echo "{
                        title: '{$book['title']}',
                        author: '{$book['firstname']} {$book['lastname']}',
                        image: '{$book['coverimage']}',
                        genre: '{$book['genre']}',
                        bookid: '{$book['bookid']}',
                    },";
                }
            ?>
        ],
        LeastRead: [
            <?php
                foreach($least_read_books as $book) {
                    echo "{
                        title: '{$book['title']}',
                        author: '{$book['firstname']} {$book['lastname']}',
                        image: '{$book['coverimage']}',
                        genre: '{$book['genre']}',
                        bookid: '{$book['bookid']}',
                    },";
                }
            ?>
        ],
        newReleases: [
            <?php 
                foreach($new_releases as $book) {
                    echo "{
                        title: '{$book['title']}',
                        author: '{$book['firstname']} {$book['lastname']}',
                        image: '{$book['coverimage']}',
                        genre: '{$book['genre']}',
                        bookid: '{$book['bookid']}',
                    },";
                }
            ?>
        ],
        Classics: [
            <?php 
                foreach($classics as $book) {
                    echo "{
                        title: '{$book['title']}',
                        author: '{$book['firstname']} {$book['lastname']}',
                        image: '{$book['coverimage']}',
                        genre: '{$book['genre']}',
                        bookid: '{$book['bookid']}',
                    },";
                }
            ?>
        ],
        Comics: [
            <?php 
                foreach($comics as $book) {
                    echo "{
                        title: '{$book['title']}',
                        author: '{$book['firstname']} {$book['lastname']}',
                        image: '{$book['coverimage']}',
                        genre: '{$book['genre']}',
                        bookid: '{$book['bookid']}',
                    },";
                }
            ?>
        ],

    };

    document.addEventListener('DOMContentLoaded', () => {
        initializeSliders();
    
    });
    
    function initializeSliders() {
        const sections = ['MostRead', 'LeastRead', 'newReleases', 'Classics', 'Comics'];
        const sliderSections = document.querySelectorAll('.book-slider-section');
        
        sliderSections.forEach((section, index) => {
            const track = section.querySelector('.book-track');
            const category = sections[index];
            
            books[category].forEach((book) => {
                const bookCard = createBookCard(book);
                track.appendChild(bookCard);
            });
            
            const prevButton = section.querySelector('.slider-button.prev');
            const nextButton = section.querySelector('.slider-button.next');
            let currentPosition = 0;
            const step = 200; 
            
            prevButton.addEventListener('click', () => {
                currentPosition = Math.min(currentPosition + step, 0);
                updateSliderPosition(track, currentPosition);
            });
            
            nextButton.addEventListener('click', () => {
                const maxScroll = -(track.scrollWidth - track.parentElement.clientWidth);
                currentPosition = Math.max(currentPosition - step, maxScroll);
                updateSliderPosition(track, currentPosition);
            });
        });
    }
    
    function createBookCard(book) {
        // console.log(book);
        const card = document.createElement('div');
        card.className = 'book-card';
        card.innerHTML = `
            <img src="./BookImages/${book.image}" alt="${book.title}" class="book-cover">
            <div class="book-info">
                <a href='./BookView.php?bookid=${book.bookid}' style="text-decoration: none"><h3 class="book-title" style="color: green;">${book.title}</h3></a>
                <p class="book-author">${book.author}</p>
                <p class="book-genre">${book.genre}</p>


                <form action="./Books.php" method="GET">
                    <input type="hidden" name="bookid" value="${book.bookid}">
                    <button class="btn btn-primary" type="submit" value="add-to-cart" name="submit">Add to Cart</button>
            </form>
            </div> 
        `;
        return card;
    }
    
    function updateSliderPosition(track, position) {
        track.style.transform = `translateX(${position}px)`;
    }
    

    document.addEventListener('DOMContentLoaded', () => {
        const navItems = document.querySelectorAll('.nav-item.has-dropdown');
      
        navItems.forEach(item => {
          const navLink = item.querySelector('.nav-link');
      
          navLink.addEventListener('click', (e) => {
            if (window.innerWidth <= 768) {
              e.preventDefault();

              navItems.forEach(otherItem => {
                if (otherItem !== item) {
                  otherItem.classList.remove('active');
                }
              });
              item.classList.toggle('active');
            }
          });
        });
      
        document.addEventListener('click', (e) => {
          if (!e.target.closest('.nav-item')) {
            navItems.forEach(item => {
              item.classList.remove('active');
            });
          }
        });
      
        let timeout;
        window.addEventListener('resize', () => {
          clearTimeout(timeout);
          timeout = setTimeout(() => {
            if (window.innerWidth > 768) {
              navItems.forEach(item => {
                item.classList.remove('active');
              });
            }
          }, 100);
        });
      });
    </script>
    <?php include 'Components/Footer.html'; ?>
</body>
</html>
