<?php

session_start();

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

$sql = "SELECT * FROM books";
$all_books = $mysqli->query($sql);

?>

<!DOCTYPE html>
<html lang="lv">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grāmatu pārvalde</title>
    <link rel="stylesheet" href="controlpanel.css"> 
</head>

<body>

    <?php if (isset($_SESSION["user_id"])): ?>   
    <div class="topSection">
            <a href="../login/logout.php" id="logout">Izrakstīties</a>
    </div>
    
    <h1>Grāmatu pārvalde</h1>
     
    <div class="middleSection">
        <button id="viewBooks">Visas grāmatas</button>
        <button id="createBook">Izveidot jaunu grāmatu</button>
    </div>

    <div class="contentSection">
        <?php while($row = mysqli_fetch_assoc($all_books)): ?>
        <div class="card">
            <div class="image">
                <img src="<?php echo "../uploads/" . $row["image"]?>" alt="">
            </div>
            <div class="info">
            <h2 class="heading" title="<?php echo $row["title"]?>">
                <?php echo mb_strlen($row["title"]) > 15 ? mb_substr($row["title"], 0, 8) . '...' : $row["title"] ?>
            </h2>
                <p class="description"><?php echo $row["description"];?></p>
            </div>
            <button id="delete" data-book-id="<?php echo $row['id']; ?>">X</button>
        </div>
        <?php endwhile; ?>
    </div>
        
    <div class="createSection">
        <form action="controlpanelform.php" method="post" enctype="multipart/form-data">
            <label for="title">Nosaukums: </label>
            <input type="text" id="title" name="title" maxlength="200">

            <br>

            <label for="author">Autors: </label>
            <input type="text" id="author" name="author" maxlength="200">

            <br>

            <label for="year">Gads: </label>
            <input type="number" id="year" name="year" minlength="1" maxlength="4">

            <br>

            <label for="description">Apraksts: </label>
            <input type="text" id="description" name="description" maxlength="2000" cols="100" rows="5">

            <br>

            <label for="image">Bilde: </label>
            <input type="file" id="image" name="image" maxlength="2000" accept="image/*">

            <br>
            <input type="submit" value="Izveidot">
        </form>        
    </div>
        
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        const viewBooks = document.getElementById("viewBooks");
        const createBook = document.getElementById("createBook");
        const contentSection = document.getElementsByClassName("contentSection")[0];
        const createSection = document.getElementsByClassName("createSection")[0];

        contentSection.style.display = "flex";
        createSection.style.display = "none";

        viewBooks.addEventListener("click", function() {
            contentSection.style.display = "flex";
            createSection.style.display = "none";
        });

        createBook.addEventListener("click", function() {
            createSection.style.display = "block";
            contentSection.style.display = "none";
        });

        const deleteButtons = document.querySelectorAll('#delete');
    deleteButtons.forEach(button => {
        button.addEventListener('click', function() {
            const card = this.parentNode;
            const bookId = this.getAttribute('data-book-id');

            const xhr = new XMLHttpRequest();
            xhr.open('GET', `deletebook.php?id=${bookId}`); 
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function() {
                if (xhr.status === 200) {
                    card.parentNode.removeChild(card);
                } else {
                    console.error('Error deleting book');
                }
            };
            xhr.send('book_id=' + encodeURIComponent(bookId));
        });
    });
});
    </script>

    <?php endif; ?>
    
</body>
</html>