// ... existing code ...
        <table class="table table-bordered" id="booksTable">
            <thead>
                <tr>
                    <th>Cover</th>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Category</th>
                    <th>Link</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
        <!-- Pagination Controls -->
        <div class="d-flex justify-content-between align-items-center my-3" id="paginationControls">
            <button class="btn btn-secondary" id="prevPage">Previous</button>
            <span id="pageInfo"></span>
            <button class="btn btn-secondary" id="nextPage">Next</button>
        </div>
// ... existing code ...
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    const apiUrl = 'api/books.php';
    const booksTableBody = document.querySelector('#booksTable tbody');
    let allBooks = [];
    let showFavoritesOnly = false;
    let currentPage = 1;
    let totalPages = 1;
    const limit = 10; // books per page

    function getFavorites() {
        return JSON.parse(localStorage.getItem('favoriteBooks') || '[]');
    }
    function setFavorites(favs) {
        localStorage.setItem('favoriteBooks', JSON.stringify(favs));
    }
    function isFavorite(bookId) {
        return getFavorites().includes(bookId);
    }
    function toggleFavorite(bookId) {
        let favs = getFavorites();
        if (favs.includes(bookId)) {
            favs = favs.filter(id => id !== bookId);
        } else {
            favs.push(bookId);
        }
        setFavorites(favs);
        renderBooks();
    }
    function renderBooks() {
        booksTableBody.innerHTML = '';
        let booksToShow = allBooks;
        if (showFavoritesOnly) {
            const favs = getFavorites();
            booksToShow = allBooks.filter(book => favs.includes(book.id));
        }
        booksToShow.forEach(book => {
            const fav = isFavorite(book.id);
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td><img src="${book.cover}" alt="Cover" style="max-height:60px;max-width:60px;"></td>
                <td>${book.title}</td>
                <td>${book.author}</td>
                <td>${book.category}</td>
                <td><a href="${book.link}" target="_blank">Link</a></td>
                <td>
                    <button class="btn btn-sm btn-warning me-1" onclick='openEditModal(${JSON.stringify(book)})'>Edit</button>
                    <button class="btn btn-sm btn-danger me-1" onclick="deleteBook(${book.id})">Delete</button>
                    <button class="btn btn-sm btn-${fav ? 'warning' : 'outline-warning'}" onclick="toggleFavorite(${book.id})" title="${fav ? 'Remove from' : 'Add to'} Favorites">
                        <span style="font-size:1.2em;">${fav ? '★' : '☆'}</span>
                    </button>
                </td>
            `;
            booksTableBody.appendChild(tr);
        });
    }
    function fetchBooks(page = 1) {
        fetch(`${apiUrl}?page=${page}&limit=${limit}`, {
            headers: {
                'X-API-KEY': 'b7f2e1c4-8a3d-4e6b-9d2a-7c5e1f8b2a6d'
            }
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success') {
                allBooks = data.data.map(book => ({ ...book, id: parseInt(book.id) }));
                currentPage = data.page;
                totalPages = Math.ceil(data.total / data.limit);
                renderBooks();
                updatePaginationControls();
            }
        });
    }
    function updatePaginationControls() {
        document.getElementById('pageInfo').textContent = `Page ${currentPage} of ${totalPages}`;
        document.getElementById('prevPage').disabled = currentPage <= 1;
        document.getElementById('nextPage').disabled = currentPage >= totalPages;
    }
    // Pagination button events
    document.getElementById('prevPage').addEventListener('click', function() {
        if (currentPage > 1) {
            fetchBooks(currentPage - 1);
        }
    });
    document.getElementById('nextPage').addEventListener('click', function() {
        if (currentPage < totalPages) {
            fetchBooks(currentPage + 1);
        }
    });
    document.getElementById('toggleFavorites').addEventListener('click', function() {
        showFavoritesOnly = !showFavoritesOnly;
        this.textContent = showFavoritesOnly ? 'Show All' : 'Show Favorites';
        renderBooks();
    });
    fetchBooks();

    // Add Book
    const addBookForm = document.getElementById('addBookForm');
    addBookForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(addBookForm);
        fetch(apiUrl, {
            method: 'POST',
            body: formData,
            headers: {
                'X-API-KEY': 'b7f2e1c4-8a3d-4e6b-9d2a-7c5e1f8b2a6d'
            }
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success') {
                addBookForm.reset();
                bootstrap.Modal.getInstance(document.getElementById('addBookModal')).hide();
                fetchBooks(currentPage);
            } else {
                alert(data.message);
            }
        });
    });

    // Edit Book
    function openEditModal(book) {
        document.getElementById('editId').value = book.id;
        document.getElementById('editTitle').value = book.title;
        document.getElementById('editAuthor').value = book.author;
        document.getElementById('editCategory').value = book.category;
        document.getElementById('editLink').value = book.link;
        document.getElementById('editCoverUrl').value = book.cover || '';
        bootstrap.Modal.getOrCreateInstance(document.getElementById('editBookModal')).show();
    }

    const editBookForm = document.getElementById('editBookForm');
    editBookForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(editBookForm);
        formData.append('id', document.getElementById('editId').value);
        formData.set('_method', 'PUT');
        fetch(apiUrl, {
            method: 'POST',
            body: formData,
            headers: {
                'X-API-KEY': 'b7f2e1c4-8a3d-4e6b-9d2a-7c5e1f8b2a6d'
            }
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success') {
                editBookForm.reset();
                bootstrap.Modal.getInstance(document.getElementById('editBookModal')).hide();
                fetchBooks(currentPage);
            } else {
                alert(data.message);
            }
        });
    });

    // Delete Book
    function deleteBook(id) {
        if (!confirm('Are you sure you want to delete this book?')) return;
        fetch(apiUrl, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-API-KEY': 'b7f2e1c4-8a3d-4e6b-9d2a-7c5e1f8b2a6d'
            },
            body: new URLSearchParams({id})
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success') {
                fetchBooks(currentPage);
            } else {
                alert(data.message);
            }
        });
    }
    </script>
// ... existing code ...