Notes

document.addEventListener('DOMContentLoaded', function () {
const usernameSearch = document.getElementById('usernameSearch');
const bookSearch = document.getElementById('bookSearch');
const userResults = document.getElementById('userResults');
const bookResults = document.getElementById('bookResults');
const userDetailsContainer = document.getElementById('userDetails');
const userDetailInfo = document.getElementById('userDetailInfo');
const bookDetailsContainer = document.getElementById('bookDetails');
const bookDetailInfo = document.getElementById('bookDetailInfo');
const issueBookForm = document.getElementById('issueBookForm');
const responseMessage = document.getElementById('responseMessage');
let selectedUserId = null;
let selectedBookId = null;
let allBooks = []; // This will hold all the book data
let allUsers = []; // This will hold all user data

// Function to fetch all books initially
async function fetchAllBooks() {
try {
const response = await fetch('http://127.0.0.1:8000/api/books/');
const data = await response.json();
allBooks = data.books; // Assuming 'books' is the key where book array is stored
} catch (error) {
console.error('Error fetching all books:', error);
}
}

// Function to fetch all users initially
async function fetchAllUsers() {
try {
const response = await fetch('http://127.0.0.1:8000/api/userslist/'); // Adjust the URL as needed
const data = await response.json();
allUsers = data.members; // Assuming 'members' is the key where user array is stored
} catch (error) {
console.error('Error fetching all users:', error);
}
}

// Fetch all books and users when the page loads
fetchAllBooks();
fetchAllUsers();

// Function to search books
function searchBooks() {
const searchInput = bookSearch.value.toLowerCase();
const filteredBooks = allBooks.filter(book => {
return book.name.toLowerCase().includes(searchInput) ||
book.isbn_number.toLowerCase().includes(searchInput) ||
book.author_details.first_name.toLowerCase().includes(searchInput) ||
book.author_details.last_name.toLowerCase().includes(searchInput) ||
book.category_details.name.toLowerCase().includes(searchInput);
});
displayBooks(filteredBooks); // Display filtered books
}

// Function to display filtered books
function displayBooks(books) {
bookResults.innerHTML = ''; // Clear previous results
if (books.length === 0) {
bookResults.innerHTML = '<li>No books found</li>'; // Show no books found
} else {
books.forEach(book => {
const li = document.createElement('li');
li.textContent = book.name;
li.addEventListener('click', () => {
selectedBookId = book.id;
bookSearch.value = book.name;
bookResults.innerHTML = '';
showBookDetails(book); // Display book details
});
bookResults.appendChild(li);
});
}
}

// Search books on input change
bookSearch.addEventListener('input', searchBooks);

// Function to search users
function searchUsers() {
const searchInput = usernameSearch.value.toLowerCase();
const filteredUsers = allUsers.filter(user => {
return user.username.toLowerCase().includes(searchInput) ||
user.email.toLowerCase().includes(searchInput) ||
user.phone_number.toLowerCase().includes(searchInput) ||
user.address.toLowerCase().includes(searchInput);
});
displayUsers(filteredUsers); // Display filtered users
}

// Function to display filtered users
function displayUsers(users) {
userResults.innerHTML = ''; // Clear previous results
if (users.length === 0) {
userResults.innerHTML = '<li>No users found</li>'; // Show no users found
} else {
users.forEach(user => {
const li = document.createElement('li');
li.textContent = user.username;
li.addEventListener('click', () => {
selectedUserId = user.id;
usernameSearch.value = user.username;
userResults.innerHTML = '';
showUserDetails(user); // Display user details
});
userResults.appendChild(li);
});
}
}

// Search users on input change
usernameSearch.addEventListener('input', searchUsers);

// Function to display user details
function showUserDetails(user) {
userDetailsContainer.style.display = 'block';
userDetailInfo.innerHTML = `
<strong>Username:</strong> ${user.username}<br>
<strong>Email:</strong> ${user.email}<br>
<strong>Full Name:</strong> ${user.first_name || 'N/A'} ${user.last_name || 'N/A'}<br>
<strong>Phone:</strong> ${user.phone_number}<br>
<strong>Address:</strong> ${user.address}<br>
`;
}

// Function to display book details
function showBookDetails(book) {
bookDetailsContainer.style.display = 'block';
bookDetailInfo.innerHTML = `
<strong>Title:</strong> ${book.name}<br>
<strong>Author:</strong> ${book.author_details.first_name || 'N/A'} ${book.author_details.last_name || 'N/A'}<br>
<strong>ISBN:</strong> ${book.isbn_number}<br>
<strong>Category:</strong> ${book.category_details.name}<br>
`;
}

// Handle form submission for issuing a book
issueBookForm.addEventListener('submit', async function (e) {
e.preventDefault();
if (!selectedUserId || !selectedBookId) {
responseMessage.textContent = 'Please select both a user and a book to issue.';
return;
}

const dueDate = document.getElementById('dueDate').value;

try {
const response = await fetch('http://127.0.0.1:8000/api/issue-book/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
user_id: selectedUserId,
book_id: selectedBookId,
due_date: dueDate
})
});
const data = await response.json();

if (response.ok) {
responseMessage.textContent = 'Book issued successfully!';
} else {
responseMessage.textContent = `Error: ${data.message}`;
}
} catch (error) {
console.error('Error issuing book:', error);
responseMessage.textContent = 'Failed to issue book. Please try again.';
}
});
});