var body = document.body; body.className += " u-body u-clearfix u-xl-mode"; body.style.cssText += " "; var dataBg = ''; if (dataBg) { body.setAttribute('data-bg', dataBg); } Pretoria Bookroom Catalogue June 2026 How to Order: Browse the catalog and select the items you are interested in. After selecting an item, scroll to the bottom of the page and click " Check Availability". An email will be created containing your selected items. Send the email to request stock availability. Wait for confirmation that the items are available before making any payment. Important: Do not make a payment until you have received confirmation that the selected items are available. <!DOCTYPE html><div class="book-catalog-container"><div class="controls"><div class="search-box"><input type="text" id="searchInput" placeholder="Search for books, authors, or categories..."><button id="searchBtn"><i class="fas fa-search"></i></button></div><div class="filter"><select id="categoryFilter"><option value="all">All Categories</option></select></div></div><div id="catalogView"><table class="book-table" id="bookTable"><thead><tr><th>Select</th><th>Book</th><th>Category</th><th>Price</th></tr></thead><tbody id="bookTableBody"><tr><td colspan="4"><div class="empty-state"><i class="fas fa-book-open"></i><h3>Loading books...</h3><p>Please wait while we load the book catalog</p></div></td></tr></tbody></table></div></div><!-- Lightbox Overlay --><div id="lightboxOverlay"><img id="lightboxImage" src="" alt="Enlarged Book Image"></div><style>/* General */.book-catalog-container * {margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}.book-catalog-container {background:#f5f7fa; color:#333; line-height:1.6; padding:20px; border-radius:8px; margin:20px 0;}.book-catalog-container .controls {display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; flex-wrap:wrap; gap:1rem; background:white; padding:1rem; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1);}.book-catalog-container .search-box {display:flex; flex:1; max-width:500px;}.book-catalog-container .search-box input {flex:1; padding:0.8rem 1rem; border:1px solid #ddd; border-radius:4px 0 0 4px; font-size:1rem;}.book-catalog-container .search-box button {padding:0.8rem 1.2rem; background:#4a69bd; color:white; border:none; border-radius:0 4px 4px 0; cursor:pointer;}.book-catalog-container .filter select {padding:0.8rem; border:1px solid #ddd; border-radius:4px; font-size:1rem;}/* Table */.book-catalog-container .book-table {width:100%; border-collapse:collapse; background:white; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.1);}.book-catalog-container .book-table th {background:#f1f5f9; padding:1rem; text-align:left; font-weight:600; color:#374151; border-bottom:1px solid #e5e7eb;}.book-catalog-container .book-table td {padding:1rem; border-bottom:1px solid #e5e7eb;}.book-catalog-container .book-table tr:last-child td {border-bottom:none;}.book-catalog-container .book-table tr:hover {background:#f8fafc;}.book-catalog-container .book-thumbnail {/* width: 60px;height: 80px; */max-width: 100px;border-radius: 4px;background: #e2e8f0;display: flex;align-items: center;justify-content: center;color: #94a3b8;cursor: pointer;overflow: hidden; /* Ensure image doesn't overflow */}.book-catalog-container .book-thumbnail img {max-width: 100%;max-height: 100%;width: auto;height: auto;object-fit: contain; /* Keep aspect ratio */}.book-catalog-container .book-info {display:flex; align-items:center; gap:1rem;}.book-catalog-container .book-title {font-weight:600; color:#1e293b; margin-bottom:0.25rem;}.book-catalog-container .book-author {color:#64748b; font-size:0.9rem;}.book-catalog-container .book-category {display:inline-block; background:#e0e7ff; color:#4a69bd; padding:0.3rem 0.6rem; border-radius:4px; font-size:0.8rem;}.book-catalog-container .book-description {color:#64748b; font-size:0.9rem; max-width:300px;}.book-catalog-container .book-price {font-weight:700; color:#e74c3c;}.book-catalog-container .empty-state {text-align:center; padding:3rem; background:white; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1);}.book-catalog-container .empty-state i {font-size:3rem; color:#ddd; margin-bottom:1rem;}.book-catalog-container .empty-state p {color:#7f8c8d; margin-bottom:1.5rem;}/* Pagination */#paginationControls {margin-top:1em; display:flex; flex-direction:column; align-items: flex-start; gap:0.5em;}#pageButtons button {margin:0 4px; padding:0.3em 0.6em; border:1px solid #ddd; background:#fff; border-radius:4px; cursor:pointer;}#pageButtons button:disabled {background:#4a69bd; color:#fff; font-weight:bold; cursor:default;}/* Selected Books Card */#selectedBooks {margin-top:1em; padding:1em; background:#f1f5f9; border-radius:8px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; box-shadow:0 2px 8px rgba(0,0,0,0.05);}#selectedBooks pre {white-space:pre-wrap; margin:0; flex:1; min-width:200px;}#selectedBooks button {padding:0.5em 1em; border:none; border-radius:4px; background:#4a69bd; color:white; cursor:pointer; margin-left:1em;}#selectedBooks button:disabled {background:#ccc; cursor:default;}/* Lightbox */#lightboxOverlay {position:fixed; top:0; left:0; width:100vw; height:100vh;background:rgba(0,0,0,0.8);display:none; justify-content:center; align-items:center;z-index:9999; cursor: pointer; }#lightboxOverlay img {max-width:90%; max-height:90%;width:auto; height:auto;border:4px solid #fff;border-radius:8px;box-shadow:0 0 20px rgba(0,0,0,0.5);animation: zoomIn 0.2s ease;}@keyframes zoomIn {from{transform:scale(0.8); opacity: 0;} to{transform:scale(1); opacity: 1;}}@media (max-width:768px) {.book-catalog-container .controls {flex-direction:column; align-items:stretch;}.book-catalog-container .search-box {max-width:100%;}.book-catalog-container .book-table {display:block; overflow-x:auto;}.book-catalog-container .book-info {flex-direction:column; align-items:flex-start; gap:0.5rem;}#selectedBooks {flex-direction:column; align-items:flex-start;}#selectedBooks button {margin-left:0; margin-top:0.5em;}}</style><script>document.addEventListener('DOMContentLoaded', function(){const searchInput = document.getElementById('searchInput');const searchBtn = document.getElementById('searchBtn');const categoryFilter = document.getElementById('categoryFilter');const bookTableBody = document.getElementById('bookTableBody');const lightboxOverlay = document.getElementById('lightboxOverlay');const lightboxImage = document.getElementById('lightboxImage');// Pagination controlsconst paginationContainer = document.createElement('div');paginationContainer.id = 'paginationControls';bookTableBody.parentElement.parentElement.appendChild(paginationContainer);const resultsSummary = document.createElement('div');resultsSummary.id='resultsSummary';paginationContainer.appendChild(resultsSummary);const rowsSelector = document.createElement('select');[5,10,20,50].forEach(n=>{const opt=document.createElement('option');opt.value=n;opt.textContent=n+' per page';if(n===10) opt.selected=true;rowsSelector.appendChild(opt);});paginationContainer.appendChild(rowsSelector);const pageButtonsContainer = document.createElement('div');pageButtonsContainer.id='pageButtons';paginationContainer.appendChild(pageButtonsContainer);let books=[], categories=new Set(), currentPage=1, rowsPerPage=parseInt(rowsSelector.value);// Load CSVfunction loadCSVFromServer(){fetch('books-feed.php').then(res=>res.ok?res.text():Promise.reject('CSV not found')).then(parseCSV).catch(err=>{bookTableBody.innerHTML='<tr><td colspan="4">Error loading books</td></tr>';});}function parseCSV(csvData){const lines = csvData.split('\n'); books=[]; categories.clear();for(let i=1;i<lines.length;i++){const line=lines[i].trim(); if(!line) continue;const parts=line.split(',');if(parts.length>=5){let imageUrl=parts.length>5?parts[5].trim():'';if(imageUrl && !imageUrl.startsWith('http')) imageUrl='images/csv_files/images/'+imageUrl;books.push({title:parts[0].trim(),author:parts[1].trim(),category:parts[2].trim(),price:parseFloat(parts[3].trim()),description:parts[4].trim(),imageUrl:imageUrl,selected:false});categories.add(parts[2].trim());}}updateCategoryFilter();renderBooks();}function updateCategoryFilter(){while(categoryFilter.options.length>1) categoryFilter.remove(1);Array.from(categories).sort().forEach(cat=>{const option=document.createElement('option');option.value=cat;option.textContent=cat;categoryFilter.appendChild(option);});}searchBtn.addEventListener('click',()=>{currentPage=1; renderBooks();});searchInput.addEventListener('keyup',()=>{currentPage=1; renderBooks();});categoryFilter.addEventListener('change',()=>{currentPage=1; renderBooks();});rowsSelector.addEventListener('change',()=>{rowsPerPage=parseInt(rowsSelector.value); currentPage=1; renderBooks();});function renderBooks(){const searchTerm=searchInput.value.toLowerCase();const selectedCategory=categoryFilter.value;const filtered=books.filter(book=>{const matchSearch=book.title.toLowerCase().includes(searchTerm)||book.author.toLowerCase().includes(searchTerm)||book.description.toLowerCase().includes(searchTerm)||book.category.toLowerCase().includes(searchTerm);const matchCategory=selectedCategory==='all'||book.category===selectedCategory;return matchSearch && matchCategory;});if(filtered.length===0){bookTableBody.innerHTML='<tr><td colspan="4">No books found</td></tr>';pageButtonsContainer.innerHTML='';resultsSummary.textContent='';removeSelectedBlock();return;}const totalPages=Math.ceil(filtered.length/rowsPerPage);if(currentPage>totalPages) currentPage=totalPages;const start=(currentPage-1)*rowsPerPage, end=start+rowsPerPage;const paginated=filtered.slice(start,end);resultsSummary.textContent=`Showing ${start+1}–${Math.min(end,filtered.length)} of ${filtered.length} results`;renderTableView(paginated);renderPaginationControls(totalPages);updateSelectedBooks();}function renderTableView(booksToRender){bookTableBody.innerHTML = booksToRender.map(book=>`<tr><td><input type="checkbox" data-index="${books.indexOf(book)}" ${book.selected?'checked':''}></td><td><div class="book-info"><div class="book-thumbnail">${book.imageUrl?`<img src="${book.imageUrl}" alt="${book.title}">`:`<i class="fas fa-book" style="font-size:24px;"></i>`}</div><div><div class="book-title">${book.title}</div><div class="book-author">${book.author}</div></div></div></td><td>${book.category}</td><td>R${book.price.toFixed(2)}</td></tr>`).join('');bookTableBody.querySelectorAll('input[type="checkbox"]').forEach(cb=>{cb.addEventListener('change', function(){const idx=parseInt(this.dataset.index); books[idx].selected=this.checked;updateSelectedBooks();});});addLightboxEvents();}function renderPaginationControls(totalPages){pageButtonsContainer.innerHTML='';function goToPage(p){currentPage = p;renderBooks();document.getElementById('bookTable').scrollIntoView({behavior:'smooth', block:'start'});}if(currentPage>1){const btn=document.createElement('button');btn.textContent='Prev';btn.onclick=()=>goToPage(currentPage-1);pageButtonsContainer.appendChild(btn);}for(let i=1;i<=totalPages;i++){const btn=document.createElement('button');btn.textContent=i;if(i===currentPage) btn.disabled=true;btn.onclick=()=>goToPage(i);pageButtonsContainer.appendChild(btn);}if(currentPage<totalPages){const btn=document.createElement('button');btn.textContent='Next';btn.onclick=()=>goToPage(currentPage+1);pageButtonsContainer.appendChild(btn);}}function updateSelectedBooks() {const old = document.getElementById('selectedBooks');if (old) old.remove();const selected = books.filter(b => b.selected);if (selected.length === 0) return;const container = document.createElement('div');container.id = 'selectedBooks';const list = document.createElement('pre');list.textContent = selected.map(b => `${b.title} by ${b.author} - R${b.price.toFixed(2)}`).join('\n');container.appendChild(list);const emailBtn = document.createElement('button');emailBtn.textContent = 'Check Availability';emailBtn.addEventListener('click', () => {const to = 'booksales@ministryoflife.co.za';const subject = 'Book Selection';const intro = 'Dear book room serving ones,\n\nI am interested in the following books:\n\n';const items = selected.map(b => `- ${b.title} by ${b.author} - R${b.price.toFixed(2)}`).join('\n');const closing = '\n\nPlease advise availability\n\n'; const body = intro + items + closing;const mailto = `mailto:${to}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;window.location.href = mailto;});container.appendChild(emailBtn);const clearBtn = document.createElement('button');clearBtn.textContent = 'Clear Selection';clearBtn.addEventListener('click', () => {books.forEach(b => b.selected = false);renderBooks();removeSelectedBlock();});container.appendChild(clearBtn);bookTableBody.parentElement.parentElement.appendChild(container);}function removeSelectedBlock(){const old=document.getElementById('selectedBooks'); if(old) old.remove();}function addLightboxEvents(){document.querySelectorAll('.book-table .book-thumbnail img').forEach(img=>{img.addEventListener('click', ()=>{lightboxImage.src = img.src;lightboxOverlay.style.display = 'flex';document.body.style.overflow = 'hidden';});});}// Close lightbox on click outside image or scrolllightboxOverlay.addEventListener('click', (e)=>{if(e.target !== lightboxImage){ lightboxOverlay.style.display='none';document.body.style.overflow='';lightboxImage.src='';}});window.addEventListener('scroll', ()=>{if(lightboxOverlay.style.display==='flex'){lightboxOverlay.style.display='none';document.body.style.overflow='';lightboxImage.src='';}});loadCSVFromServer();});</script>{/source} Our Bank detail Account Name: Ministry of Life Books Bank: First National Bank HatfieldAccount Number: 6252 599 3780Branch: HATFIELD PRETORIABranch code: 252145 Universal Branch code for EFT: 250655 69
