// Theme toggle const themeToggle = document.getElementById('themeToggle'); const savedTheme = localStorage.getItem('tifapa-theme'); const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; function setTheme(theme) { document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('tifapa-theme', theme); if (themeToggle) themeToggle.setAttribute('aria-label', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'); } if (savedTheme) setTheme(savedTheme); else if (prefersDark) setTheme('dark'); if (themeToggle) { themeToggle.addEventListener('click', () => { const current = document.documentElement.getAttribute('data-theme'); setTheme(current === 'dark' ? 'light' : 'dark'); }); } // Visitor type popup — show on page load since they clicked a destination (function() { const popup = document.getElementById('visitorPopup'); const residentBtn = document.getElementById('visitorResident'); const nonresidentBtn = document.getElementById('visitorNonresident'); const hasSeen = sessionStorage.getItem('tifapa-visitor-seen'); if (!hasSeen && popup) { popup.classList.add('visible'); } function setVisitorType(type) { sessionStorage.setItem('tifapa-visitor-type', type); sessionStorage.setItem('tifapa-visitor-seen', 'true'); if (popup) popup.classList.remove('visible'); updateAllPrices(type); updateAllPackageDetails(type); } if (residentBtn) residentBtn.addEventListener('click', () => setVisitorType('resident')); if (nonresidentBtn) nonresidentBtn.addEventListener('click', () => setVisitorType('nonresident')); const existingType = sessionStorage.getItem('tifapa-visitor-type'); if (existingType) { updateAllPrices(existingType); updateAllPackageDetails(existingType); } // Package tag click handler document.querySelectorAll('.pkg-tag').forEach(tag => { tag.addEventListener('click', function() { const pkg = this.dataset.pkg; const parent = this.closest('.hotel-card'); parent.querySelectorAll('.pkg-tag').forEach(t => { t.style.borderColor = 'transparent'; t.style.background = 'rgba(200,162,74,0.12)'; }); this.style.borderColor = '#C8A24A'; this.style.background = 'rgba(200,162,74,0.25)'; parent.dataset.selectedPackage = pkg; const visitorType = sessionStorage.getItem('tifapa-visitor-type') || 'nonresident'; updateHotelPrice(parent, visitorType, pkg); showPackageDetails(parent, pkg, visitorType); }); }); // Sorting handler const sortSelect = document.getElementById('sortHotels'); if (sortSelect) { sortSelect.addEventListener('change', function() { const container = document.getElementById('hotelsContainer'); if (!container) return; const cards = Array.from(container.querySelectorAll('.hotel-card')); const visitorType = sessionStorage.getItem('tifapa-visitor-type') || 'nonresident'; if (this.value === 'recommended') { cards.forEach(c => container.appendChild(c)); return; } const isAsc = this.value === 'price-asc'; const prefix = visitorType === 'resident' ? 'resident' : 'nonresident'; cards.sort((a, b) => { const priceA = getSortPrice(a, prefix); const priceB = getSortPrice(b, prefix); return isAsc ? priceA - priceB : priceB - priceA; }); cards.forEach(c => container.appendChild(c)); }); } function getSortPrice(card, prefix) { const flying = parseFloat(card.getAttribute('data-' + prefix + '-flying')); if (flying && flying > 0) return flying; const prices = []; ['selfdrive', 'road', 'flying', 'train'].forEach(pkg => { const val = parseFloat(card.getAttribute('data-' + prefix + '-' + pkg)); if (val && val > 0) prices.push(val); }); return prices.length > 0 ? Math.min(...prices) : Infinity; } })(); function showPackageDetails(card, pkg, visitorType) { card.querySelectorAll('.pkg-detail-section').forEach(s => { s.style.display = 'none'; }); const selected = card.querySelector('.pkg-detail-section[data-pkg="' + pkg + '"]'); if (selected) { selected.style.display = 'block'; selected.querySelectorAll('.pkg-visitor-content').forEach(c => { c.style.display = 'none'; }); const visitorContent = selected.querySelector('.pkg-visitor-content[data-visitor="' + visitorType + '"]'); if (visitorContent) { visitorContent.style.display = 'block'; } else { const fallback = selected.querySelector('.pkg-visitor-content[data-visitor="resident"]'); if (fallback) fallback.style.display = 'block'; } } const hint = card.querySelector('.pkg-select-hint'); if (hint) hint.style.display = 'none'; } function updateAllPrices(visitorType) { document.querySelectorAll('.hotel-card').forEach(card => { const selectedPkg = card.dataset.selectedPackage; if (selectedPkg) { updateHotelPrice(card, visitorType, selectedPkg); } }); } function updateAllPackageDetails(visitorType) { document.querySelectorAll('.hotel-card').forEach(card => { const selectedPkg = card.dataset.selectedPackage; if (selectedPkg) { showPackageDetails(card, selectedPkg, visitorType); } }); } function updateHotelPrice(card, visitorType, selectedPackage) { const display = card.querySelector('.hotel-price-display'); if (!display) return; const prefix = visitorType === 'resident' ? 'resident' : 'nonresident'; const pkgMap = { 'Self-Drive': 'selfdrive', 'Road Package': 'road', 'Flying Package': 'flying', 'Train Package': 'train' }; const suffix = pkgMap[selectedPackage]; if (!suffix) { display.textContent = 'Select a package type to see pricing'; return; } const attrName = 'data-' + prefix + '-' + suffix; const price = card.getAttribute(attrName) || ''; if (price) { const currency = visitorType === 'resident' ? 'KES' : 'USD'; display.innerHTML = '' + currency + ' ' + price + ' per person sharing'; } else { display.textContent = 'Contact us for pricing on this package'; } } // WhatsApp enquiry buttons - add hotel name and URL document.querySelectorAll('.hotel-card .btn-secondary').forEach(btn => { const card = btn.closest('.hotel-card'); const hotelName = card.querySelector('h3').textContent; const url = window.location.href; const whatsappNumber = '254119614634'; const message = 'Hello, I would like to know more about ' + hotelName + ': ' + url; btn.href = 'https://wa.me/' + whatsappNumber + '?text=' + encodeURIComponent(message); }); // AI Chatbot — calls the read-only /api/ai-assistant endpoint const chatbotToggle = document.getElementById('chatbotToggle'); const chatbotPanel = document.getElementById('chatbotPanel'); const chatbotMinimize = document.getElementById('chatbotMinimize'); const chatbotClose = document.getElementById('chatbotClose'); const chatbotInput = document.getElementById('chatbotInput'); const chatbotSend = document.getElementById('chatbotSend'); const chatbotMessages = document.getElementById('chatbotMessages'); const whatsappNumber = '254119614634'; if (chatbotToggle && chatbotPanel) { chatbotToggle.addEventListener('click', () => { chatbotPanel.classList.toggle('open'); chatbotToggle.classList.toggle('open'); if (chatbotPanel.classList.contains('open')) chatbotInput.focus(); }); } if (chatbotMinimize) { chatbotMinimize.addEventListener('click', () => { chatbotPanel.classList.remove('open'); chatbotToggle.classList.remove('open'); }); } if (chatbotClose) { chatbotClose.addEventListener('click', () => { chatbotPanel.classList.remove('open'); chatbotToggle.classList.remove('open'); }); } function addBotMessage(html) { const div = document.createElement('div'); div.className = 'chatbot-msg chatbot-msg-bot'; div.innerHTML = '

' + html + '

'; chatbotMessages.appendChild(div); chatbotMessages.scrollTop = chatbotMessages.scrollHeight; } function addUserMessage(text) { const div = document.createElement('div'); div.className = 'chatbot-msg chatbot-msg-user'; div.innerHTML = '

' + text.replace(//g, '>') + '

'; chatbotMessages.appendChild(div); chatbotMessages.scrollTop = chatbotMessages.scrollHeight; } function addSuggestionChips(suggestions) { if (!suggestions || suggestions.length === 0) return; const div = document.createElement('div'); div.className = 'chatbot-suggestions'; div.style.cssText = 'display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.3rem;'; suggestions.forEach(text => { const chip = document.createElement('button'); chip.textContent = text; chip.style.cssText = 'background:rgba(200,162,74,0.12);color:var(--gold,#C8A24A);border:1px solid rgba(200,162,74,0.3);border-radius:100px;padding:0.3rem 0.7rem;font-size:0.75rem;cursor:pointer;font-family:inherit;transition:all 0.2s;'; chip.addEventListener('click', () => { chatbotInput.value = text; handleChat(); }); div.appendChild(chip); }); chatbotMessages.appendChild(div); chatbotMessages.scrollTop = chatbotMessages.scrollHeight; } async function handleChat() { const text = chatbotInput.value.trim(); if (!text) return; addUserMessage(text); chatbotInput.value = ''; const typing = document.createElement('div'); typing.className = 'chatbot-msg chatbot-msg-bot chatbot-typing'; typing.innerHTML = '

typing...

'; chatbotMessages.appendChild(typing); chatbotMessages.scrollTop = chatbotMessages.scrollHeight; try { const visitorType = sessionStorage.getItem('tifapa-visitor-type') || 'nonresident'; const res = await fetch('/api/ai-assistant', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: text, visitorType }), }); const data = await res.json(); typing.remove(); let reply = data.reply || "I'm sorry, I couldn't find an answer. Let me connect you with our team."; reply = reply.replace(/\*\*(.*?)\*\*/g, '$1'); reply = reply.replace(/\n/g, '
'); if (data.showWhatsApp) { const waMsg = data.whatsappMessage || 'Hi Tifapa! I was just chatting on your website.'; reply += '

Would you like to continue on WhatsApp? Our team responds faster there. 💬 Chat on WhatsApp'; } else if (text.length > 80) { reply += '

Would you like to continue on WhatsApp? Our team responds faster there. 💬 Chat on WhatsApp'; } addBotMessage(reply); if (data.suggestions && data.suggestions.length > 0) { addSuggestionChips(data.suggestions); } } catch (err) { typing.remove(); addBotMessage("I'm having trouble connecting right now. Please try again or 💬 Chat on WhatsApp"); } } if (chatbotSend && chatbotInput) { chatbotSend.addEventListener('click', handleChat); chatbotInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') handleChat(); }); }

Samburu

Lodges & Camps in Samburu

Where are you visiting from?