<?php

session_start();

require __DIR__ . "/../db/database.php";

?>

<!DOCTYPE html>
<html lang="lv">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lasītava</title>
    <link rel="stylesheet" href="homepage.css"> 
</head>

<body>
    <div class="topSection">
        <?php if (isset($_SESSION["user_id"])): ?>
            <a href="../login/logout.php" id="logout">Izrakstīties</a>

        <?php else: ?>
            <a href="../login/login.php" id="login">Autorizēties</a>
            <a href="../register/register.php" id="register">Reģistrēties</a>

        <?php endif; ?>
    </div>
    
    <h1>Lasītava</h1>
        
    <div class="middleSection">
        <div class="selectContent">
            <span id="letterRow">
                <button onclick="toggleLetter('A')">A</button>
                <button onclick="toggleLetter('Ā')">Ā</button>
                <button onclick="toggleLetter('B')">B</button>
                <button onclick="toggleLetter('C')">C</button>
                <button onclick="toggleLetter('Č')">Č</button>
                <button onclick="toggleLetter('D')">D</button>
                <button onclick="toggleLetter('E')">E</button>
                <button onclick="toggleLetter('Ē')">Ē</button>
                <button onclick="toggleLetter('F')">F</button>
                <button onclick="toggleLetter('G')">G</button>
                <button onclick="toggleLetter('Ģ')">Ģ</button>
                <button onclick="toggleLetter('H')">H</button>
                <button onclick="toggleLetter('I')">I</button>
                <button onclick="toggleLetter('Ī')">Ī</button>
                <button onclick="toggleLetter('J')">J</button>
                <button onclick="toggleLetter('K')">K</button>
                <button onclick="toggleLetter('Ķ')">Ķ</button>
                <button onclick="toggleLetter('L')">L</button>
                <button onclick="toggleLetter('Ļ')">Ļ</button>
                <button onclick="toggleLetter('M')">M</button>
                <button onclick="toggleLetter('N')">N</button>
                <button onclick="toggleLetter('Ņ')">Ņ</button>
                <button onclick="toggleLetter('O')">O</button>
                <button onclick="toggleLetter('P')">P</button>
                <button onclick="toggleLetter('R')">R</button>
                <button onclick="toggleLetter('S')">S</button>
                <button onclick="toggleLetter('Š')">Š</button>
                <button onclick="toggleLetter('T')">T</button>
                <button onclick="toggleLetter('U')">U</button>
                <button onclick="toggleLetter('Ū')">Ū</button>
                <button onclick="toggleLetter('V')">V</button>
                <button onclick="toggleLetter('Z')">Z</button>
                <button onclick="toggleLetter('Ž')">Ž</button>
            </span>
            <input id="search" type="text" placeholder="Meklēt...">
        </div>
    
    </div>

    <div class="contentContainer">
        <div class="card">
            <div class="image">
                <img src="" alt="">
            </div>
            <div class="info">
                <h2 class="heading"></h2>
                <p class="description"></p>
            </div>
        </div>
    </div>

    <script>
        function toggleLetter(letter) {
            var buttons = document.querySelectorAll('#letterRow button');
            buttons.forEach(function(btn) {
                if (btn.textContent === letter) {
                    btn.classList.toggle('active');
                    if (btn.classList.contains('active')) {
                        fetchBooks(letter);
                    } else {
                        fetchBooks('');
                    }
                } else {
                    btn.classList.remove('active');
                }
            });
        }

        function fetchBooks(letter = "") {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    appendBooks(xhr.responseText);
                }
            };
            xhr.open('GET', 'getbooks.php?letter=' + letter, true);
            xhr.send();
        }

        function appendBooks(booksHTML) {
            var contentContainer = document.querySelector('.contentContainer');
            contentContainer.innerHTML = '';
            contentContainer.insertAdjacentHTML('beforeend', booksHTML); 
        }

        fetchBooks();
        </script>

</body>
</html>