book_details.php

<?php include 'session_manager.php';
include 'book_data.php';
include 'comments.php';
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book Details</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link href="style.css" rel="stylesheet">
</head>

<body class="flex flex-col min-h-screen">
    <!-- Sticky Navbar -->
    <nav class="bg-gray-800 text-white p-4 sticky top-0 z-50">
        <div class="container mx-auto flex justify-between items-center">
            <!-- Logo -->
            <a href="index.php" class="transition-transform duration-500 transform hover:scale-125 hover:rotate-180">
                <img src="./images/Logo.png" alt="Logo" class="h-8">
            </a>
            <!-- Login/Logout Button -->
            <div>
                <?php if (isset($_SESSION['userid'])) : ?>
                    <span>Welcome, <?php echo htmlspecialchars($_SESSION['username']); ?></span>
                    <a href="logout.php" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Logout</a>
                <?php else : ?>
                    <a href="signup.php" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Login</a>
                <?php endif; ?>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="flex-grow container mx-auto p-4 bg-gray-100">
        <?php if ($book) : ?>
            <div class="flex flex-wrap">
                <!-- Book Image -->
                <div class="w-full md:w-1/3 p-4">
                    <img src="<?php echo htmlspecialchars($book['image_url']); ?>" class="w-full h-auto object-cover">

                </div>

                <!-- Book Details and Comments -->
                <div class="w-full md:w-2/3 p-4">
                    <h2 class="text-2xl font-bold"><?php echo htmlspecialchars($book['title']); ?></h2>
                    <p><strong>Author:</strong> <?php echo htmlspecialchars($book['author_name']); ?></p>
                    <p><strong>Year Published:</strong> <?php echo htmlspecialchars($book['year_published']); ?></p>
                    <p><strong>Pages:</strong> <?php echo htmlspecialchars($book['pages']); ?></p>
                    <p><strong>Category:</strong> <?php echo htmlspecialchars($book['category_title']); ?></p>
                    <p><strong>Author Bio:</strong> <?php echo htmlspecialchars($book['bio']); ?></p>

                    <div class="my-8"></div>

                    <!-- Comments Section -->
                    <div class="mt-8">
                        <h3 class="text-2xl font-bold text-gray-800 mb-4">Comments</h3>
                        <div class="space-y-4">
                            <?php foreach ($commentsResult as $comment) : ?>
                                <div class="bg-white shadow rounded-lg p-4">
                                    <h5 class="font-semibold text-gray-800 mb-2"><?php echo htmlspecialchars($comment['username']); ?></h5>
                                    <p class="text-gray-600"><?php echo htmlspecialchars($comment['comment']); ?></p>
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <?php if (isset($_SESSION['comment_message'])) : ?>
                            <div class="bg-green-500 text-white text-sm p-4 rounded-lg mt-4">
                                <?php echo htmlspecialchars($_SESSION['comment_message']); ?>
                            </div>
                            <?php unset($_SESSION['comment_message']); ?>
                        <?php endif; ?>

                        <?php if (isset($_SESSION['username']) && (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin')) : ?>
                            <!-- Comment Submission Form -->
                            <form action="comments.php" method="post" class="mt-8">
                                <textarea name="comment" class="w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Leave a comment..." required></textarea>
                                <input type="hidden" name="book_id" value="<?php echo $bookId; ?>">
                                <button type="submit" class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out animate-bounce">Submit</button>
                            </form>
                        <?php elseif (!isset($_SESSION['username'])) : ?>
                            <p class="mt-8 text-lg font-semibold animate-bounce">
                                To leave comments, please <a href="signup.php" class="text-blue-500 hover:text-blue-700 transition duration-300 ease-in-out">Log in</a>.
                            </p>
                        <?php endif; ?>
                    </div>
                </div>
                <div class="my-8"></div>

                <!-- Private Notes -->
                <?php if (isset($_SESSION['username']) && (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin')) : ?>
                    <div class="mt-8">
                        <h3 class="text-xl font-bold mb-2 text-gray-800">Private Notes</h3>
                        <div class="bg-white shadow-sm rounded-lg p-4">
                            <form id="privateNotesForm" class="space-y-4">
                                <textarea name="note" class="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:shadow-outline" rows="4" placeholder="Your private note here"></textarea>
                                <input type="hidden" name="book_id" value="<?php echo $bookId; ?>">
                                <button type="button" id="saveNoteButton" class="w-full text-white bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Save Note</button>
                            </form>
                        </div>
                        <!-- Notes List -->
                        <div id="notesList" class="mt-4 space-y-2">
                            <!-- JavaScript goes here -->
                        </div>
                    </div>
                <?php elseif (!isset($_SESSION['username'])) : ?>
                    <p class="text-lg font-semibold">To add private notes, please <a href="signup.php" class="text-blue-500">Log in</a>.</p>
                <?php endif; ?>
            </div>
        <?php else : ?>
            <p>Book details not found.</p>
        <?php endif; ?>
    </div>
    <!-- Sticky Footer -->
    <footer class="bg-gray-800 text-white p-4 sticky bottom-0 z-50">
        <div class="container mx-auto text-center">
            <p id="quote"></p>
        </div>
    </footer>
    <script src="footer.js"></script>
    <script src="notes_ajax.js"></script>
</body>

</html>