(async function(){ const skeleton = document.getElementById('skeleton'); const bookingPage = document.getElementById('booking-page'); const pageError = document.getElementById('page-error'); const breadcrumb = document.getElementById('breadcrumb'); const params = new URLSearchParams(window.location.search); const listingId = params.get('listing'); // ---------- Icon library (no emoji — matches app's line-icon style) ---------- const ICON_STAR = ''; const ICON_VERIFIED = ''; const ICON_GRID = ''; const ICON_MESSAGE = ''; const SIDEBAR_ICONS = { elie: '', home: '', hostMarketplace: '', clientMarketplace: '', saved: '', bookings: '', chats: ICON_MESSAGE, notifications: '', listSpace: '', myListings: '', analytics: '', profile: '', settings: '', support: '', upgrade: '' }; function renderBookingSidebar(role) { const isHost = role === 'host'; const items = isHost ? [ ['/chats?conversation=elie', 'Elie', SIDEBAR_ICONS.elie], ['/host-home', 'Home', SIDEBAR_ICONS.home], ['/marketplace', 'Marketplace', SIDEBAR_ICONS.hostMarketplace, true], ['/host-home', 'Saved', SIDEBAR_ICONS.saved], ['/bookings', 'Bookings', SIDEBAR_ICONS.bookings], ['/chats', 'Chats', SIDEBAR_ICONS.chats], ['/notifications', 'Notifications', SIDEBAR_ICONS.notifications], ['/list', 'List a space', SIDEBAR_ICONS.listSpace], ['/host-home', 'My Listings', SIDEBAR_ICONS.myListings], ['/analytics', 'Analytics', SIDEBAR_ICONS.analytics], ['/profile', 'Profile', SIDEBAR_ICONS.profile], ['/settings', 'Settings', SIDEBAR_ICONS.settings], ['/support', 'Help and Support', SIDEBAR_ICONS.support], ['/pricing', 'Upgrade', SIDEBAR_ICONS.upgrade] ] : [ ['/chats?conversation=elie', 'Elie', SIDEBAR_ICONS.elie], ['/client-home', 'Home', SIDEBAR_ICONS.home], ['/marketplace', 'Discover marketplace', SIDEBAR_ICONS.clientMarketplace, true], ['/client-home?view=saved', 'Saved', SIDEBAR_ICONS.saved], ['/bookings', 'Bookings', SIDEBAR_ICONS.bookings], ['/chats', 'Chat', SIDEBAR_ICONS.chats], ['/notifications', 'Notifications', SIDEBAR_ICONS.notifications], ['/profile', 'Profile', SIDEBAR_ICONS.profile], ['/settings', 'Settings', SIDEBAR_ICONS.settings], ['/support', 'Help and Support', SIDEBAR_ICONS.support] ]; return items.map(function(item) { const active = item[3] ? ' active' : ''; const current = item[3] ? ' aria-current="page"' : ''; return '' + item[2] + ''; }).join(''); } const ICON_LOCATION = ''; const ICON_HEART_OUTLINE = ''; const ICON_HEART_FILLED = ''; const AMENITY_ICON = { wifi: '', mountain: '', parking: '', kitchen: '', heating: '', tv: '', workspace: '', balcony: '', breakfast: '', bonfire: '', pet: '', power: '', air_conditioning: '', washing_machine: '', pool: '', refrigerator: '', gym: '', garden: '', bbq_grill: '', hot_tub: '', elevator: '', security_cameras: '', smoke_alarm: '', towels_linens: '', hair_dryer: '', security: '', proximity_main_road: '', proximity_schools: '', furnished: '', unfurnished: '', in_unit_laundry: '', onsite_laundry: '', borehole_water: '' }; const AMENITY_LABEL = { wifi: 'Free Wi-Fi', mountain: 'Mountain View', parking: 'Free Parking', kitchen: 'Kitchen', heating: 'Heating', tv: 'TV', workspace: 'Workspace', balcony: 'Balcony', breakfast: 'Breakfast', bonfire: 'Bonfire Area', pet: 'Pet Friendly', power: '24/7 Power Backup', air_conditioning: 'Air conditioning', refrigerator: 'Refrigerator', washing_machine: 'Washing machine', pool: 'Swimming pool', gym: 'Gym', garden: 'Garden', bbq_grill: 'BBQ grill', hot_tub: 'Hot tub', elevator: 'Elevator', security_cameras: 'Security cameras', smoke_alarm: 'Smoke alarm', towels_linens: 'Towels & linens', hair_dryer: 'Hair dryer', security: '24/7 Security & Guard', proximity_main_road: 'Proximity to main roads', proximity_schools: 'Proximity to schools', furnished: 'Furnished', unfurnished: 'Unfurnished', in_unit_laundry: 'In-unit laundry', onsite_laundry: 'On-site laundry', borehole_water: 'Borehole / Water backup' }; const ICON_GENERIC_AMENITY = ''; // This is intentionally independent of AMENITY_LABEL: hotel listings // persist hotel_* keys from their dedicated room-and-hotel checklist. const HOTEL_AMENITY_LABEL = { hotel_high_speed_wifi: 'Free High-Speed Wi-Fi', hotel_quality_bedding: 'Quality Bedding & Pillows', hotel_climate_control: 'Air Conditioning / Climate Control', hotel_bedside_outlets: 'Bedside Outlets & USB/USB-C Ports', hotel_smart_tv: 'Smart TV / Streaming', hotel_coffee_maker: 'Coffee Maker / Nespresso', hotel_mini_fridge: 'Mini-Fridge', hotel_blackout_curtains: 'Blackout Curtains', hotel_hot_water: 'Hot Water & Strong Water Pressure', hotel_in_room_safe: 'In-Room Safe', hotel_complimentary_breakfast: 'Complimentary Breakfast', hotel_onsite_parking: 'Free / On-Site Parking', hotel_swimming_pool: 'Swimming Pool', hotel_fitness_center: 'Fitness Center / Gym', hotel_front_desk: '24-Hour Front Desk', hotel_restaurant_bar: 'On-Site Restaurant & Bar', hotel_luggage_storage: 'Luggage Storage', hotel_airport_shuttle: 'Airport Shuttle / Transport', hotel_pet_friendly: 'Pet-Friendly', hotel_room_service: 'Room Service' }; const HOTEL_AMENITY_ICON = { hotel_high_speed_wifi: AMENITY_ICON.wifi, hotel_climate_control: AMENITY_ICON.air_conditioning, hotel_smart_tv: AMENITY_ICON.tv, hotel_coffee_maker: AMENITY_ICON.breakfast, hotel_mini_fridge: AMENITY_ICON.refrigerator, hotel_complimentary_breakfast: AMENITY_ICON.breakfast, hotel_onsite_parking: AMENITY_ICON.parking, hotel_swimming_pool: AMENITY_ICON.pool, hotel_fitness_center: AMENITY_ICON.gym, hotel_pet_friendly: AMENITY_ICON.pet }; // ---------- Paper airplane icon for booking CTA animation ---------- const ICON_AIRPLANE = ''; // ---------- Booking CTA sending animation ---------- // State machine: idle → sending → success OR idle → sending → error → idle // Returns { complete: () => Promise, error: () => void } function initSendingAnimation(btn, successText) { var MIN_ANIM_MS = 1800; var prefersRM = window.matchMedia('(prefers-reduced-motion: reduce)').matches; var idleText = btn.textContent; var rect = btn.getBoundingClientRect(); btn.style.minHeight = rect.height + 'px'; // Lock immediately — prevents duplicate clicks at the DOM level btn.disabled = true; btn.setAttribute('aria-busy', 'true'); btn.classList.add('cta-sending'); // Replace content with animation layers btn.innerHTML = '' + '' + ICON_AIRPLANE + '' + ''; var progEl = btn.querySelector('.cta-progress'); var planeEl = btn.querySelector('.cta-airplane'); var labelEl = btn.querySelector('.cta-label'); var cur = 0; var running = true; function setProgress(p) { cur = Math.min(Math.max(p, 0), 1); progEl.style.transform = 'scaleX(' + cur + ')'; if (!prefersRM) { var maxX = btn.clientWidth - 24; planeEl.style.transform = 'translateY(-50%) translateX(' + (cur * maxX) + 'px)'; } } function easeIO(t) { return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2, 3)/2; } function easeOut(t) { return 1 - Math.pow(1 - t, 3); } if (prefersRM) { // Reduced-motion: static sending state, no animation labelEl.textContent = 'Sending\u2026'; progEl.style.transform = 'scaleX(0.5)'; planeEl.style.display = 'none'; } else { // Phase 1: animate 0 → 85% over MIN_ANIM_MS var t0 = performance.now(); function phase1(now) { if (!running) return; var t = Math.min((now - t0) / MIN_ANIM_MS, 1); setProgress(easeIO(t) * 0.85); if (t < 1) { requestAnimationFrame(phase1); return; } // Phase 2: slowly creep 85% → 95% (waiting for API) var cs = performance.now(); function creep(now) { if (!running) return; var t = Math.min((now - cs) / 10000, 1); setProgress(0.85 + t * 0.1); if (t < 1) requestAnimationFrame(creep); } requestAnimationFrame(creep); } requestAnimationFrame(phase1); } return { // Call when the API responds with success complete: function() { return new Promise(function(resolve) { running = false; if (prefersRM) { progEl.style.transform = 'scaleX(1)'; setTimeout(function() { btn.classList.remove('cta-sending'); btn.classList.add('cta-sent'); btn.removeAttribute('aria-busy'); btn.setAttribute('aria-label', successText); labelEl.textContent = successText; progEl.style.display = 'none'; btn.style.minHeight = ''; resolve(); }, 150); return; } // Smoothly finish from current → 100% var sp = cur, s = performance.now(); var dur = Math.max(400, (1 - sp) * 800); function fin(now) { var t = Math.min((now - s) / dur, 1); setProgress(sp + (1 - sp) * easeOut(t)); if (t < 1) { requestAnimationFrame(fin); return; } // Fade green → reveal red underneath progEl.style.transition = 'opacity .35s ease'; progEl.style.opacity = '0'; planeEl.style.transition = 'opacity .25s ease'; planeEl.style.opacity = '0'; setTimeout(function() { btn.classList.remove('cta-sending'); btn.classList.add('cta-sent'); btn.removeAttribute('aria-busy'); btn.setAttribute('aria-label', successText); progEl.style.display = 'none'; planeEl.style.display = 'none'; labelEl.textContent = successText; btn.style.minHeight = ''; resolve(); }, 380); } requestAnimationFrame(fin); }); }, // Call when the API responds with an error error: function() { running = false; if (prefersRM) { btn.classList.remove('cta-sending'); btn.removeAttribute('aria-busy'); btn.disabled = false; btn.textContent = idleText; btn.style.minHeight = ''; return; } // Reverse animation back to 0 var sp = cur, s = performance.now(); function rev(now) { var t = Math.min((now - s) / 400, 1); setProgress(sp * (1 - t)); if (t < 1) { requestAnimationFrame(rev); return; } setTimeout(function() { btn.classList.remove('cta-sending'); btn.removeAttribute('aria-busy'); btn.disabled = false; btn.textContent = idleText; btn.style.minHeight = ''; }, 80); } requestAnimationFrame(rev); } }; } function showError(msg){ skeleton.style.display = 'none'; pageError.textContent = msg; pageError.style.display = 'block'; } function escapeHtml(str){ const d = document.createElement('div'); d.textContent = str || ''; return d.innerHTML; } function getCleanTruncatedDescription(fullText, maxChars, maxLines) { if (!maxChars) maxChars = 220; if (!maxLines) maxLines = 3; const normalized = (fullText || '').replace(/\r\n/g, '\n').replace(/\r/g, '\n').trim(); if (!normalized) return { text: '', hasOverflow: false }; const rawLines = normalized.split('\n'); if (rawLines.length <= maxLines && normalized.length <= maxChars) { return { text: normalized, hasOverflow: false }; } let accumulated = []; let currentLength = 0; for (let i = 0; i < rawLines.length; i++) { const line = rawLines[i]; if (accumulated.length >= maxLines) break; if (currentLength + line.length > maxChars && accumulated.length > 0) { const remaining = Math.max(30, maxChars - currentLength); let partial = line.slice(0, remaining); const lastSpace = partial.search(/\s+[^\s]*$/); if (lastSpace > partial.length * 0.5) { partial = partial.slice(0, lastSpace); } partial = partial.replace(/[\s,;:\-\u2013\u2014\.\*\u2022]+(\s*and)?$/i, '').trim(); if (partial) accumulated.push(partial); break; } accumulated.push(line); currentLength += line.length + 1; if (currentLength >= maxChars) { let longLine = accumulated.pop(); let cut = longLine.slice(0, maxChars); const lastSpace = cut.search(/\s+[^\s]*$/); if (lastSpace > cut.length * 0.5) { cut = cut.slice(0, lastSpace); } cut = cut.replace(/[\s,;:\-\u2013\u2014\.\*\u2022]+(\s*and)?$/i, '').trim(); if (cut) accumulated.push(cut); break; } } let result = accumulated.join('\n').trim(); if (!result) { result = normalized.slice(0, maxChars); const lastSpace = result.search(/\s+[^\s]*$/); if (lastSpace > result.length * 0.5) { result = result.slice(0, lastSpace); } result = result.replace(/[\s,;:\-\u2013\u2014\.\*\u2022]+(\s*and)?$/i, '').trim(); } result = result.replace(/[\s,;:\-\u2013\u2014\.\*\u2022]+(\s*and)?$/i, '').trim(); if (result.length >= normalized.length) { return { text: normalized, hasOverflow: false }; } return { text: result, hasOverflow: true }; } function formatDescriptionHtml(text, isExpanded, hasOverflow) { const normalized = (text || '').replace(/\r\n/g, '\n').replace(/\r/g, '\n').trim(); if (!normalized) return ''; const paragraphs = normalized.split(/\n\s*\n/).filter(function(p){ return p.trim().length > 0; }); if (!paragraphs.length) return ''; return paragraphs.map(function(p, idx){ const isLast = idx === paragraphs.length - 1; let html = escapeHtml(p.trim()); if (isLast && hasOverflow) { if (!isExpanded) { html += ' '; } else { html += ' '; } } return '

' + html + '

'; }).join(''); } function resolveAvatarUrl(avatarValue){ if (!avatarValue) return null; if (avatarValue.indexOf('http') === 0) return avatarValue; return supabaseClient.storage.from('avatars').getPublicUrl(avatarValue).data.publicUrl; } let currentUser = null; let currentRole = null; let homeHref = '/'; const { data: { session } } = await supabaseClient.auth.getSession(); if (!session) { const returnTo = window.location.pathname + window.location.search; window.location.href = '/?redirect=' + encodeURIComponent(returnTo); return; } currentUser = session.user; const { data: profile } = await supabaseClient.from('profiles').select('role,full_name,avatar_url,phone').eq('id', currentUser.id).maybeSingle(); if (!profile) { window.location.href = '/login'; return; } currentRole = profile.role === 'host' ? 'host' : 'client'; const bookingSidebar = document.getElementById('booking-sidebar'); bookingSidebar.innerHTML = renderBookingSidebar(currentRole); bookingSidebar.setAttribute('aria-label', currentRole === 'host' ? 'Host navigation' : 'Client navigation'); bookingSidebar.setAttribute('aria-hidden', 'false'); homeHref = currentRole === 'host' ? '/host-home' : '/client-home'; document.getElementById('logo-link').setAttribute('href', homeHref); document.getElementById('nav-explore').setAttribute('href', '/marketplace'); document.getElementById('menu-home-link').setAttribute('href', homeHref); document.getElementById('menu-home-text').textContent = currentRole === 'host' ? 'Host dashboard' : 'My home'; const myName = profile.full_name || currentUser.email || 'Account'; const myInitials = myName.trim().split(/\s+/).slice(0,2).map(function(w){ return w[0]; }).join('').toUpperCase(); const myAvatarUrl = resolveAvatarUrl(profile.avatar_url); document.getElementById('nav-avatar-circle').innerHTML = myAvatarUrl ? '

' : (myInitials || '•'); document.getElementById('nav-avatar-name').textContent = myName.split(' ')[0] || 'Account'; // ---------- Avatar dropdown ---------- const avatarBtn = document.getElementById('avatar-btn'); const avatarMenu = document.getElementById('avatar-menu'); avatarBtn.addEventListener('click', function(e){ e.stopPropagation(); avatarMenu.classList.toggle('show'); }); document.addEventListener('click', function(){ avatarMenu.classList.remove('show'); }); document.getElementById('menu-logout').addEventListener('click', async function(){ await supabaseClient.auth.signOut(); window.location.href = '/'; }); // ---------- Header search (wired to listings) ---------- const navSearch = document.getElementById('nav-search'); const searchResults = document.getElementById('search-results'); let searchTimer = null; navSearch.addEventListener('input', function(){ clearTimeout(searchTimer); const q = navSearch.value.trim(); if (q.length < 2) { searchResults.classList.remove('show'); searchResults.innerHTML = ''; return; } searchTimer = setTimeout(async function(){ const { data: results } = await supabaseClient .from('listings') .select('id,title,location_text') .or('title.ilike.%' + q + '%,location_text.ilike.%' + q + '%') .limit(6); if (!results || results.length === 0) { searchResults.innerHTML = '

No listings match "' + escapeHtml(q) + '".

'; } else { searchResults.innerHTML = results.map(function(r){ return '' + '

' + escapeHtml(r.title) + '

' + '

' + escapeHtml(r.location_text || '') + '

' + ''; }).join(''); } searchResults.classList.add('show'); }, 250); }); document.addEventListener('click', function(e){ if (!e.target.closest('.search-wrap')) { searchResults.classList.remove('show'); } }); if (!listingId) { showError('No listing specified.'); return; } const { data: listing, error: listingError } = await supabaseClient .from('listings') .select('id,title,description,property_description,location_text,city,neighborhood,address_visibility,category,listing_purpose,verified,availability_status,paid_listing_until,host_id,supports_stay,supports_table_reservation,' + 'host:profiles!listings_host_id_fkey(full_name,verified,avatar_url,username,phone),listing_photos(storage_path),' + 'listing_booking_details(*)') .eq('id', listingId) .maybeSingle(); if (listingError || !listing) { showError("Couldn't load that listing."); return; } if (currentRole === 'host' && listing.host_id === currentUser.id) { showError("This is your own listing — you can't book it."); return; } const listingLikeState = { count: 0, liked: false, confirmedCount: 0, confirmedLiked: false, ready: false, saving: false }; function isValidListingLikeSummary(summary){ const count = summary && Number(summary.like_count); return Number.isSafeInteger(count) && count >= 0 && typeof summary.liked_by_current_user === 'boolean'; } async function refreshListingLikeState(){ try { const { data, error } = await supabaseClient.rpc('get_listing_like_summaries', { p_listing_ids: [listingId] }); if (error) throw error; const summary = Array.isArray(data) ? data.find(function(item){ return item.listing_id === listingId; }) : null; if (!isValidListingLikeSummary(summary)) throw new Error('The listing-like summary response was invalid.'); listingLikeState.confirmedCount = Number(summary.like_count); listingLikeState.confirmedLiked = summary.liked_by_current_user; listingLikeState.count = listingLikeState.confirmedCount; listingLikeState.liked = listingLikeState.confirmedLiked; listingLikeState.ready = true; return true; } catch (error) { console.error('Listing likes could not be loaded:', error); listingLikeState.ready = false; return false; } } function updateBookingLikeButton(){ const button = document.getElementById('gallery-like-btn'); if (!button) return; button.innerHTML = (listingLikeState.liked ? ICON_HEART_FILLED : ICON_HEART_OUTLINE) + ''; button.disabled = !listingLikeState.ready; button.setAttribute('aria-label', listingLikeState.ready ? (listingLikeState.liked ? 'Unlike listing' : 'Like listing') : 'Like status unavailable'); if (listingLikeState.ready) { button.setAttribute('aria-pressed', listingLikeState.liked ? 'true' : 'false'); button.removeAttribute('title'); } else { button.removeAttribute('aria-pressed'); button.title = 'Like information is temporarily unavailable'; } } async function syncBookingLike(){ if (listingLikeState.saving || !listingLikeState.ready) return; listingLikeState.saving = true; try { while (listingLikeState.liked !== listingLikeState.confirmedLiked) { const targetLiked = listingLikeState.liked; let result; try { result = await supabaseClient.rpc('set_listing_like', { p_listing_id: listingId, p_liked: targetLiked }); } catch (error) { console.error('Listing like update failed:', error); await refreshListingLikeState(); break; } if (result.error) { console.error('Listing like update failed:', result.error); await refreshListingLikeState(); break; } const summary = Array.isArray(result.data) ? result.data[0] : null; if (!isValidListingLikeSummary(summary)) { console.error('Listing like update failed: The response was invalid.'); await refreshListingLikeState(); break; } listingLikeState.confirmedCount = Number(summary.like_count); listingLikeState.confirmedLiked = summary.liked_by_current_user; listingLikeState.count = Math.max(0, listingLikeState.confirmedCount + (listingLikeState.liked === listingLikeState.confirmedLiked ? 0 : (listingLikeState.liked ? 1 : -1))); updateBookingLikeButton(); } } finally { listingLikeState.saving = false; } if (!listingLikeState.ready) { listingLikeState.liked = listingLikeState.confirmedLiked; listingLikeState.count = listingLikeState.confirmedCount; updateBookingLikeButton(); return; } listingLikeState.liked = listingLikeState.confirmedLiked; listingLikeState.count = listingLikeState.confirmedCount; updateBookingLikeButton(); } await refreshListingLikeState(); function bookingLikeButtonHtml(){ return ''; } const supportsStay = listing.category !== 'hotel' || listing.supports_stay !== false; const supportsTableReservation = listing.category === 'hotel' && listing.supports_table_reservation === true; const supportsBoth = supportsStay && supportsTableReservation; let diningConfig = null; if (supportsTableReservation) { const diningResponse = await fetch('/api/listings/' + encodeURIComponent(listingId) + '/dining-config'); if (diningResponse.ok) diningConfig = (await diningResponse.json()).diningConfig; } const rawDetails = listing.listing_booking_details; const details = (Array.isArray(rawDetails) ? rawDetails[0] : rawDetails) || {}; const isProperty = listing.category === 'property'; const isOfficeShop = ['office', 'shop'].includes(listing.category); const officeShop = isOfficeShop && details.office_shop_details && typeof details.office_shop_details === 'object' && !Array.isArray(details.office_shop_details) ? details.office_shop_details : null; const propertyPurpose = isProperty ? (listing.listing_purpose || details.listing_purpose || 'rent') : null; const isPropertySaleOnly = isProperty && propertyPurpose === 'sale'; const propertyHasRentalPurpose = isProperty && (propertyPurpose === 'rent' || propertyPurpose === 'both'); const hasBookingDetails = Boolean(details && (officeShop || details.price_amount != null || details.sale_price_amount != null || details.size_or_type || (Array.isArray(details.amenities) && details.amenities.length > 0))); if (supportsStay && (!rawDetails || !hasBookingDetails)) { showError('This listing has no booking details set up yet.'); return; } if (supportsTableReservation && !diningConfig) { showError('This hotel has not finished setting up table reservations yet.'); return; } const paidTermExpired = listing.paid_listing_until && new Date(listing.paid_listing_until).getTime() <= Date.now(); const listingUnavailable = (listing.availability_status && listing.availability_status !== 'available') || paidTermExpired; const availabilityMessage = listingUnavailable ? (paidTermExpired ? 'This listing’s 30-day paid listing period has ended.' : 'This listing is currently ' + String(listing.availability_status).replace('_', ' ') + ' and cannot accept new bookings.') : ''; let reviews = []; let reviewSummary = { average_rating: null, review_count: 0 }; let reviewsError = null; try { const reviewsResponse = await fetch('/api/listings/' + encodeURIComponent(listingId) + '/reviews'); if (!reviewsResponse.ok) throw new Error('Unable to load reviews'); const reviewsPayload = await reviewsResponse.json(); reviews = Array.isArray(reviewsPayload.reviews) ? reviewsPayload.reviews : []; reviewSummary = reviewsPayload.summary || reviewSummary; } catch (error) { reviewsError = 'Reviews are temporarily unavailable.'; } // ---------- Breadcrumb ---------- const locParts = (listing.location_text || '').split(',').map(function(s){ return s.trim(); }).filter(Boolean); let crumbHtml = 'Home›'; locParts.forEach(function(part){ crumbHtml += '' + escapeHtml(part) + '›'; }); crumbHtml += '' + escapeHtml(listing.title) + ''; breadcrumb.innerHTML = crumbHtml; breadcrumb.style.display = 'flex'; const SHORT_STAY = ['airbnb', 'hotel', 'venue']; const isShortStay = supportsStay && SHORT_STAY.includes(listing.category); const isHotel = listing.category === 'hotel'; const isHourly = details.price_unit === 'hour'; const usesRentalBooking = !isShortStay && (!isProperty || propertyHasRentalPurpose); const photoUrls = (listing.listing_photos || []).map(function(p){ return supabaseClient.storage.from('listing-photos').getPublicUrl(p.storage_path).data.publicUrl; }); let listingVideoUrl = null; let listingVideoThumbnailUrl = null; try { const videoResponse = await fetch('/api/properties/' + encodeURIComponent(listingId) + '/media', { headers: { Authorization: 'Bearer ' + session.access_token } }); if (videoResponse.ok) { const mediaPayload = await videoResponse.json(); const videoItem = (Array.isArray(mediaPayload.media) ? mediaPayload.media : []) .find(function(item){ return item && item.type === 'video'; }); if (videoItem) { const playbackResponse = await fetch('/api/media/' + encodeURIComponent(videoItem.id) + '/playback', { headers: { Authorization: 'Bearer ' + session.access_token } }); if (playbackResponse.ok) { const playbackPayload = await playbackResponse.json(); listingVideoUrl = playbackPayload && playbackPayload.url ? playbackPayload.url : null; listingVideoThumbnailUrl = playbackPayload && playbackPayload.thumbnailUrl ? playbackPayload.thumbnailUrl : null; } } } } catch (mediaError) { listingVideoUrl = null; } // ---------- Booked/pending dates to grey out (short-stay only) ---------- let unavailableDates = new Set(); let openDates = new Set(); if (isShortStay) { const { data: avail } = await supabaseClient.from('availability').select('date').eq('listing_id', listingId); (avail || []).forEach(function(a){ openDates.add(a.date); }); const { data: existingBookings } = await supabaseClient .from('bookings').select('start_date,end_date,status').eq('listing_id', listingId).in('status', ['pending','approved']); (existingBookings || []).forEach(function(b){ if (!b.start_date || !b.end_date) return; let d = new Date(b.start_date); const end = new Date(b.end_date); while (d <= end) { unavailableDates.add(d.toISOString().slice(0,10)); d.setDate(d.getDate() + 1); } }); } // ---------- Gallery (swipeable carousel) ---------- let galleryHtml = ''; const mediaUrls = listingVideoUrl ? [listingVideoUrl].concat(photoUrls) : photoUrls; if (mediaUrls.length === 0) { galleryHtml = '

' + '' + bookingLikeButtonHtml() + '

'; } else { galleryHtml = '

' + (mediaUrls.length > 1 ? '

1/' + mediaUrls.length + '

' : '') + '

' + mediaUrls.map(function(u, index){ return '

' + (listingVideoUrl && index === 0 ? '

' : ' ' + escapeHtml(listing.title) + '

') + '

'; }).join('') + '

' + '' + bookingLikeButtonHtml() + (mediaUrls.length > 1 ? '' + '' + '

' + mediaUrls.map(function(_, i){ return ''; }).join('') + '

' : '') + '

'; } // ---------- Title / rating / host / about / amenities / reviews (main column) ---------- const badges = []; if (listing.verified) badges.push('GPS verified'); if (listing.host.verified) badges.push('Verified host'); const infoChips = []; if (listing.category) infoChips.push(listing.category.charAt(0).toUpperCase() + listing.category.slice(1)); if (listing.category === 'property') { infoChips.push(propertyPurpose === 'rent' ? 'For rent' : (propertyPurpose === 'sale' ? 'For sale' : 'Rent & sale')); if (details.units_available) { infoChips.push(details.units_available + ' unit' + (details.units_available === 1 ? '' : 's') + ' available'); } } if (officeShop && officeShop.subtype) { infoChips.push(commercialLabel(officeShop.subtype, { private_office: 'Private office', shared_office: 'Shared office', serviced_office: 'Serviced office', coworking_desk: 'Coworking desk', meeting_room: 'Meeting room', street_front_shop: 'Street-front shop', mall_unit: 'Mall unit', showroom: 'Showroom', studio: 'Studio' })); } if (details.size_or_type) infoChips.push(escapeHtml(details.size_or_type)); const hostName = listing.host.full_name || 'Host'; const initials = hostName.trim().split(/\s+/).slice(0,2).map(function(w){ return w[0]; }).join('').toUpperCase(); const hostAvatarUrl = resolveAvatarUrl(listing.host.avatar_url); const hostPhone = String(listing.host.phone || '').trim(); const ICON_PHONE = ''; const hostPhoneHtml = hostPhone ? '

' + ICON_PHONE + '' + escapeHtml(hostPhone) + '

' : ''; // Listings created before property_description was introduced only have // the legacy description/caption. Keep them readable while new listings // show their dedicated detailed description here. const description = listing.property_description || listing.description || ''; const previewLimit = (typeof window !== 'undefined' && window.innerWidth < 640) ? 140 : 220; const descTruncation = getCleanTruncatedDescription(description, previewLimit, 3); const hasDescriptionOverflow = descTruncation.hasOverflow; let isDescriptionExpanded = false; const descriptionHtml = description ? '

' + formatDescriptionHtml(descTruncation.text, false, hasDescriptionOverflow) + '

' : '

' + (isHotel ? 'The hotel hasn\'t added room details yet.' : 'The host hasn\'t added details about this place yet.') + '

'; const commercialPublicLocation = isOfficeShop ? [listing.neighborhood, listing.city].filter(Boolean).join(', ') : ''; const listingLocationText = commercialPublicLocation || listing.location_text || ''; const mapUrl = 'https://www.google.com/maps/search/?api=1&query=' + encodeURIComponent(listingLocationText || listing.title); // Real amenities selected by the host during listing creation. // Falls back gracefully for listings saved before this column existed. const rawAmenities = Array.isArray(details.amenities) ? details.amenities : []; const amenitiesHtml = rawAmenities.length ? '

' + rawAmenities.map(function(key){ const icon = (isHotel ? (HOTEL_AMENITY_ICON[key] || AMENITY_ICON[key]) : AMENITY_ICON[key]) || ICON_GENERIC_AMENITY; const label = (isHotel ? (HOTEL_AMENITY_LABEL[key] || AMENITY_LABEL[key]) : AMENITY_LABEL[key]) || (key.charAt(0).toUpperCase() + key.slice(1)); return '

' + icon + '' + escapeHtml(label) + '

'; }).join('') + '

' : '

No amenities have been listed for ' + (isHotel ? 'this hotel room' : 'this space') + ' yet.

'; function commercialLabel(value, labels) { return labels[value] || (value ? String(value).replace(/_/g, ' ') : null); } function commercialNumber(value) { const numberValue = Number(value); return Number.isFinite(numberValue) ? numberValue.toLocaleString() : null; } function commercialKes(value) { const numberValue = commercialNumber(value); return numberValue == null ? null : 'KSh ' + numberValue; } function commercialDate(value) { if (!/^\d{4}-\d{2}-\d{2}$/.test(String(value || ''))) return null; const date = new Date(value + 'T00:00:00'); return Number.isNaN(date.getTime()) ? null : date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }); } function commercialGrid(items) { const visible = items.filter(function(item){ return item && item.value !== null && item.value !== undefined && item.value !== ''; }); return visible.length ? '

' + escapeHtml(item.label) + ': ' + escapeHtml(String(item.value)) + '

' : ''; } let commercialDetailsHtml = ''; if (officeShop) { const space = officeShop.space || {}; const amenities = officeShop.amenities || {}; const parking = officeShop.parking || {}; const pricing = officeShop.pricing || {}; const costs = officeShop.costs || {}; const lease = officeShop.lease || {}; const rules = officeShop.rules || {}; const documents = officeShop.documents || {}; const isCommercialOffice = listing.category === 'office'; const enumLabels = { subtype: { private_office: 'Private office', shared_office: 'Shared office', serviced_office: 'Serviced office', coworking_desk: 'Coworking desk', meeting_room: 'Meeting room', street_front_shop: 'Street-front shop', mall_unit: 'Mall unit', showroom: 'Showroom', studio: 'Studio' }, role: { owner: 'Owner', authorized_manager: 'Authorised property manager', agent: 'Agent' }, fitout: { shell_core: 'Shell-and-core', partly_fitted: 'Partly fitted', fitted: 'Fitted', furnished: 'Furnished' }, measure: { usable: 'Usable area', rentable: 'Rentable area', estimate: 'Estimated area' }, pricing: { whole_month: 'Whole unit, per month', whole_year: 'Whole unit, per year', per_area: 'Per area', per_desk: 'Per desk or person', daily_weekly_hourly: 'Daily, weekly or hourly', turnover: 'Turnover rent' }, yesNo: { yes: 'Yes', no: 'No', allowed: 'Allowed', not_allowed: 'Not allowed', landlord_consent: 'Allowed with landlord consent', landlord_approval: 'Subject to landlord approval', to_confirm: 'To confirm', not_confirmed: 'Not confirmed', tenant_must_restore: 'Tenant must restore', not_required: 'Not required' }, service: { included: 'Included', not_included: 'Not included', not_confirmed: 'Not confirmed' }, utilities: { included: 'Included', metered: 'Metered separately', fixed_fee: 'Fixed monthly fee', tenant_arranges: 'Tenant arranges', not_confirmed: 'Not confirmed' }, tax: { included: 'Included', added: 'Added on top', not_applicable: 'Not applicable', needs_confirmation: 'Needs confirmation' }, afterHours: { '24_7': '24/7', business_hours: 'Business hours only', not_confirmed: 'Not confirmed' }, frequency: { monthly: 'Monthly', quarterly: 'Quarterly', annual: 'Annual', annually: 'Annually', one_off: 'One-off', custom: 'Custom' }, increases: { none: 'None', annual: 'Annual escalation', stepped: 'Stepped', index_linked: 'Index-linked', not_confirmed: 'Not confirmed' } }; const areaValue = commercialNumber(space.area); const areaText = areaValue == null ? null : areaValue + ' ' + (space.area_unit === 'm2' ? 'm²' : 'sq ft'); const trueAmenities = { mains_supply: 'Mains supply', backup_generator: 'Backup generator', ups: 'UPS', fibre: 'Fibre available', wifi_included: 'Wi-Fi included in rent', tenant_internet: 'Tenant arranges internet', reliable_water: 'Reliable water supply', borehole: 'Borehole', private_washroom: 'Private washroom', shared_washroom: 'Shared washroom', drainage: 'Drainage connection', guards: 'Guards', cctv: 'CCTV', controlled_entry: 'Controlled entry', alarm: 'Alarm', lighting: 'Lighting', lift: 'Lift', accessibility: 'Accessibility features', ac_ventilation: 'AC or ventilation', natural_light: 'Natural light', cleaning: 'Cleaning', maintenance: 'Maintenance', waste_collection: 'Waste collection', reception: 'Reception', shared_kitchen: 'Shared kitchen', meeting_rooms: 'Meeting rooms' }; const amenityItems = Object.keys(trueAmenities).filter(function(key){ return amenities[key] === true; }).map(function(key){ return trueAmenities[key]; }); const layout = isCommercialOffice ? space.office_layout : space.shop_layout; const locationHtml = commercialGrid([ { label: 'City / county', value: listing.city }, { label: 'Neighbourhood', value: listing.neighborhood }, { label: 'Building / complex', value: officeShop.location && officeShop.location.building_name }, { label: 'Listed by', value: commercialLabel(officeShop.role, enumLabels.role) } ]); const spaceHtml = commercialGrid([ { label: 'Area', value: areaText }, { label: 'Area type', value: commercialLabel(space.area_measure, enumLabels.measure) }, { label: 'Fit-out', value: commercialLabel(space.fitout_status, enumLabels.fitout) }, { label: 'Floor / level', value: space.floor_level }, { label: 'Rooms', value: commercialNumber(space.room_count) }, { label: 'Ceiling height', value: space.ceiling_height }, { label: 'Capacity', value: isCommercialOffice ? commercialNumber(space.capacity) : null }, { label: 'Desks', value: isCommercialOffice ? commercialNumber(space.desks) : null }, { label: 'Private offices / meeting rooms', value: isCommercialOffice ? commercialNumber(space.private_rooms) : null }, { label: 'Furniture / partitions', value: isCommercialOffice && space.furniture_included ? 'Included' : null }, { label: 'Customer-facing area', value: !isCommercialOffice ? commercialNumber(space.customer_area) : null }, { label: 'Storage / mezzanine area', value: !isCommercialOffice ? commercialNumber(space.storage_area) : null }, { label: 'Street frontage', value: !isCommercialOffice ? commercialLabel(space.street_frontage, enumLabels.yesNo) : null }, { label: 'Frontage width', value: !isCommercialOffice ? space.frontage_width : null }, { label: 'Display windows', value: !isCommercialOffice ? commercialLabel(space.display_windows, enumLabels.yesNo) : null }, { label: 'Delivery / loading access', value: !isCommercialOffice ? commercialLabel(space.loading_access, enumLabels.yesNo) : null }, { label: 'Foot traffic', value: !isCommercialOffice ? space.foot_traffic : null }, { label: 'Nearby anchors', value: !isCommercialOffice ? space.nearby_anchors : null } ]); const parkingText = parking.cost === 'paid' && commercialKes(parking.paid_amount) ? 'Paid · ' + commercialKes(parking.paid_amount) : commercialLabel(parking.cost, { free: 'Free', paid: 'Paid', not_confirmed: 'Not confirmed' }); const parkingHtml = commercialGrid([ { label: 'Parking spaces', value: commercialNumber(parking.spaces) }, { label: 'Parking cost', value: parkingText }, { label: 'Allocated to this unit', value: parking.allocated ? 'Yes' : null }, { label: 'Visitor parking', value: parking.visitor ? 'Available' : null }, { label: 'Customer parking', value: parking.customer ? 'Available' : null } ]); const priceAmount = commercialKes(pricing.amount); const pricingHtml = commercialGrid([ { label: 'Pricing basis', value: commercialLabel(pricing.basis, enumLabels.pricing) }, { label: 'Price', value: priceAmount }, { label: 'Per-area period', value: pricing.basis === 'per_area' ? commercialLabel(pricing.area_period, { month: 'Per month', year: 'Per year' }) : null }, { label: 'Monthly payment for annual rent', value: pricing.basis === 'whole_year' ? commercialLabel(pricing.monthly_payment, enumLabels.yesNo) : null }, { label: 'Desk fee includes', value: pricing.basis === 'per_desk' ? pricing.desk_included : null }, { label: 'Short-term terms', value: pricing.basis === 'daily_weekly_hourly' ? pricing.short_pricing_note : null }, { label: 'Turnover terms', value: pricing.basis === 'turnover' ? pricing.turnover_threshold : null } ]); const chargeItems = Array.isArray(costs.compulsory_charges) ? costs.compulsory_charges : []; const chargeLabels = { parking: 'Parking', access_cards: 'Access cards', cleaning: 'Cleaning', internet: 'Internet', agent_fee: 'Agent fee', legal_registration: 'Legal or registration', signage: 'Signage', building_fee: 'Building fee' }; const costsHtml = commercialGrid([ { label: 'Service charge', value: commercialLabel(costs.service_charge, enumLabels.service) + (costs.service_charge === 'not_included' && commercialKes(costs.service_amount) ? ' · ' + commercialKes(costs.service_amount) + (costs.service_frequency ? ' / ' + commercialLabel(costs.service_frequency, enumLabels.frequency).toLowerCase() : '') : '') }, { label: 'Utilities', value: commercialLabel(costs.utilities, enumLabels.utilities) + (costs.utilities === 'fixed_fee' && commercialKes(costs.utilities_amount) ? ' · ' + commercialKes(costs.utilities_amount) + ' / month' : '') }, { label: 'VAT / tax', value: commercialLabel(costs.tax, enumLabels.tax) }, { label: 'Security deposit', value: costs.security_deposit }, { label: 'Advance rent', value: costs.advance_rent }, { label: 'Rent increases', value: commercialLabel(costs.rent_increases, enumLabels.increases) } ]) + (chargeItems.length ? '

Other compulsory charges

' + escapeHtml(commercialLabel(charge.type, chargeLabels) + ': ' + (commercialKes(charge.amount) || 'Not provided') + ' · ' + commercialLabel(charge.frequency, enumLabels.frequency)) + '

' : ''); const leaseHtml = commercialGrid([ { label: 'Available from', value: commercialDate(lease.available_from) }, { label: 'Minimum lease term', value: commercialNumber(lease.minimum_term) ? commercialNumber(lease.minimum_term) + ' month(s)' : null }, { label: 'Payment frequency', value: commercialLabel(lease.payment_frequency, enumLabels.frequency) }, { label: 'Viewing before renting', value: commercialLabel(lease.viewing_required, enumLabels.yesNo) }, { label: 'Preferred lease term', value: commercialNumber(lease.preferred_term) ? commercialNumber(lease.preferred_term) + ' month(s)' : null }, { label: 'Renewal options', value: commercialLabel(lease.renewal, enumLabels.yesNo) }, { label: 'Notice period', value: lease.notice_period }, { label: 'Lock-in / early-exit rules', value: lease.lock_in }, { label: 'Viewing availability', value: lease.viewing_availability }, { label: 'Accepted payment methods', value: lease.payment_methods } ]); const rulesHtml = commercialGrid([ { label: 'Fit-out or renovation', value: commercialLabel(rules.fitout, enumLabels.yesNo) }, { label: 'Signage', value: commercialLabel(rules.signage, enumLabels.yesNo) }, { label: 'Subletting or assignment', value: commercialLabel(rules.subletting, enumLabels.yesNo) }, { label: 'Restoration on exit', value: commercialLabel(rules.restoration, enumLabels.yesNo) }, { label: 'Operating hour / noise limits', value: rules.noise_limits }, { label: 'Visitor policy', value: rules.visitor_policy } ]) + (Array.isArray(rules.permitted_uses) && rules.permitted_uses.length ? '

Permitted business uses: ' + escapeHtml(rules.permitted_uses.map(function(use){ return commercialLabel(use, { office_or_professional: 'Office or professional', general_retail: 'General retail', fashion: 'Fashion', electronics: 'Electronics', salon_or_beauty: 'Salon or beauty', food_or_cafe: 'Food or cafe', pharmacy_or_healthcare: 'Pharmacy or healthcare', creative_studio: 'Creative studio', other: 'Other', not_sure_renter_to_confirm: 'Not sure — renter to confirm' }); }).join(', ')) + '

' : ''); const amenityHtml = amenityItems.length ? '

' + amenityItems.map(function(label){ return '

' + ICON_GENERIC_AMENITY + '' + escapeHtml(label) + '

'; }).join('') + '

' : '

No commercial amenities were listed.

'; const amenityNotesHtml = commercialGrid([ { label: 'After-hours access', value: commercialLabel(amenities.after_hours, enumLabels.afterHours) }, { label: 'Power note', value: amenities.power_note }, { label: 'Internet note', value: amenities.internet_note }, { label: 'Accessibility note', value: amenities.accessibility_note } ]); const documentPaths = []; if (documents.floor_plan_path) documentPaths.push({ path: documents.floor_plan_path, label: 'Floor plan' }); if (documents.policy_path) documentPaths.push({ path: documents.policy_path, label: 'Policy or rules document' }); (Array.isArray(documents.management_document_paths) ? documents.management_document_paths : []).forEach(function(path, index){ if (path) documentPaths.push({ path: path, label: 'Ownership or management document ' + (index + 1) }); }); const signedDocuments = await Promise.all(documentPaths.map(async function(document){ try { const result = await supabaseClient.storage.from('listing-photos').createSignedUrl(document.path, 3600); return result.error || !result.data || !result.data.signedUrl ? null : { label: document.label, url: result.data.signedUrl }; } catch (error) { return null; } })); const documentHtml = signedDocuments.filter(Boolean).length ? '

' + signedDocuments.filter(Boolean).map(function(document){ return '' + escapeHtml(document.label) + ''; }).join('') + '

' : ''; commercialDetailsHtml = '

Commercial location

' + locationHtml + (listing.address_visibility === 'after_inquiry' ? '

The exact unit address is shared after an inquiry.

' : '') + '

' + '

Space

' + spaceHtml + (Array.isArray(layout) && layout.length ? '

Layout: ' + escapeHtml(layout.join(', ')) + '

' : '') + '

' + '

Amenities and building services

' + amenityHtml + amenityNotesHtml + parkingHtml + '

' + '

Pricing and costs

' + pricingHtml + costsHtml + '

' + '

Lease and availability

' + leaseHtml + '

' + '

Rules and policies

' + rulesHtml + '

Please confirm licences, zoning, and any approvals needed for your business before renting.

' + '

' + (documentHtml || documents.documents_on_request ? '

Documents

' + documentHtml + (documents.documents_on_request ? '

Ownership or management documents can be provided on request.

' : '') + '

' : ''); } const reviewCount = Number(reviewSummary.review_count || reviews.length); const averageRating = Number(reviewSummary.average_rating); const ratingText = reviewsError ? 'Reviews unavailable' : reviewCount && Number.isFinite(averageRating) ? averageRating.toFixed(1) : 'No reviews yet'; const ratingCountText = reviewCount ? '(' + reviewCount + ' ' + (reviewCount === 1 ? 'review' : 'reviews') + ')' : ''; const reviewStars = function(rating){ const roundedRating = Math.max(0, Math.min(5, Math.round(Number(rating) || 0))); return Array.from({ length: 5 }, function(_, index){ return index < roundedRating ? ICON_STAR : ''; }).join(''); }; const reviewTime = function(createdAt){ const date = new Date(createdAt); return Number.isNaN(date.getTime()) ? '' : date.toLocaleDateString(); }; const reviewCardsHtml = reviewsError ? '

' + escapeHtml(reviewsError) + '

' : reviews.length ? reviews.map(function(review){ const client = review.client || {}; const reviewerName = client.full_name || 'Anonymous guest'; const reviewerInitials = reviewerName.replace(/[^A-Za-z]/g, '').slice(0, 2).toUpperCase(); const reviewerAvatarUrl = resolveAvatarUrl(client.avatar_url); const reviewerAvatar = reviewerAvatarUrl ? '

' : escapeHtml(reviewerInitials || '?'); return '

' + '

' + reviewerAvatar + '' + '

' + escapeHtml(reviewerName) + '

' + escapeHtml(reviewTime(review.created_at)) + '

' + '

' + reviewStars(review.rating) + '

' + '

' + escapeHtml(review.comment) + '

' + '

'; }).join('') : '

No reviews yet for this listing.

'; let colMainHtml = galleryHtml + '

' + '

' + escapeHtml(listing.title) + '

' + '

' + '' + '

' + '

' + (reviewCount ? ICON_STAR + '' + escapeHtml(ratingText) + '' + escapeHtml(ratingCountText) + '' : '' + escapeHtml(ratingText) + '') + '

' + '

' + ICON_LOCATION + '' + escapeHtml(listingLocationText) + 'View on map

' + hostPhoneHtml + (badges.length ? '

' + badges.map(function(b){ return '' + ICON_VERIFIED + b + ''; }).join('') + '

' : '') + (infoChips.length ? '

' + infoChips.map(function(c){ return '' + c + ''; }).join('') + '

' : '') + '

' + '

' + (hostAvatarUrl ? '

' : escapeHtml(initials)) + '

' + '' + (isHotel ? 'Managed by ' : 'Hosted by ') + escapeHtml(hostName) + (listing.host.verified ? ICON_VERIFIED : '') + '' + '

' + '' + '

' + '

' + (isHotel ? 'About this room' : (isOfficeShop ? 'About this commercial space' : 'About this place')) + '

' + descriptionHtml + (isOfficeShop ? commercialDetailsHtml : '

' + (isHotel ? 'Room & hotel amenities' : 'Top amenities') + '

' + amenitiesHtml) + '

' + '

What guests say' + (reviewsError ? '' : reviewCount ? ' \u00b7 ' + ICON_STAR + ' ' + escapeHtml(ratingText) + ' ' + escapeHtml(ratingCountText) : ' \u00b7 No reviews yet') + '

' + 'See all reviews' + '

' + '

' + reviewCardsHtml + '

'; document.getElementById('col-main').innerHTML = colMainHtml; function setupDescriptionToggle() { if (!hasDescriptionOverflow) return; const descContainer = document.getElementById('about-desc-container'); if (!descContainer) return; function bindToggle() { const toggleBtn = document.getElementById('about-desc-toggle'); if (!toggleBtn) return; toggleBtn.addEventListener('click', function(e){ e.preventDefault(); isDescriptionExpanded = !isDescriptionExpanded; const targetText = isDescriptionExpanded ? description : descTruncation.text; descContainer.innerHTML = formatDescriptionHtml(targetText, isDescriptionExpanded, hasDescriptionOverflow); bindToggle(); if (!isDescriptionExpanded) { const aboutBlock = document.querySelector('.about-block'); if (aboutBlock) { const rect = aboutBlock.getBoundingClientRect(); if (rect.top < 0) { aboutBlock.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } } } }); } bindToggle(); } setupDescriptionToggle(); const galleryLikeBtn = document.getElementById('gallery-like-btn'); updateBookingLikeButton(); if (galleryLikeBtn) { galleryLikeBtn.addEventListener('click', function(event){ event.preventDefault(); event.stopPropagation(); if (!listingLikeState.ready) return; listingLikeState.liked = !listingLikeState.liked; listingLikeState.count = Math.max(0, listingLikeState.confirmedCount + (listingLikeState.liked === listingLikeState.confirmedLiked ? 0 : (listingLikeState.liked ? 1 : -1))); updateBookingLikeButton(); syncBookingLike(); }); } // Reporting remains available without competing with the primary booking actions. const reportListingBtn = document.getElementById('report-listing-btn'); if (reportListingBtn) { reportListingBtn.addEventListener('click', function(){ const reason = window.prompt('Why are you reporting this listing?'); if (reason && reason.trim()) { window.alert('Thanks. Your report has been noted for review.'); } }); } const galleryCloseBtn = document.getElementById('gallery-close-btn'); if (galleryCloseBtn) { galleryCloseBtn.addEventListener('click', function(){ if (window.history.length > 1 && document.referrer) { window.history.back(); } else { window.location.href = '/marketplace'; } }); } // ---------- Gallery carousel: click arrows, click dots, drag/swipe, trackpad horizontal scroll ---------- const galleryCarousel = document.getElementById('gallery-carousel'); if (galleryCarousel && mediaUrls.length > 1) { const track = document.getElementById('gallery-slide-track'); const dots = galleryCarousel.querySelectorAll('.gallery-dot'); const pill = document.getElementById('gallery-index-pill'); let activeIndex = 0; function applyGalleryState(){ track.style.transition = 'transform .3s ease'; track.style.transform = 'translateX(' + (-(activeIndex * 100)) + '%)'; dots.forEach(function(d, i){ d.classList.toggle('active', i === activeIndex); }); if (pill) pill.textContent = (activeIndex + 1) + '/' + mediaUrls.length; } function goToPhoto(i){ if (!mediaUrls || mediaUrls.length === 0) return; // Wrap around gracefully: 1/2 -> 2/2 -> 1/2 in both directions activeIndex = (i % mediaUrls.length + mediaUrls.length) % mediaUrls.length; applyGalleryState(); } const prevBtn = document.getElementById('gallery-prev'); const nextBtn = document.getElementById('gallery-next'); if (prevBtn) { prevBtn.addEventListener('pointerdown', function(e){ e.stopPropagation(); }); prevBtn.addEventListener('click', function(e){ e.preventDefault(); e.stopPropagation(); goToPhoto(activeIndex - 1); }); } if (nextBtn) { nextBtn.addEventListener('pointerdown', function(e){ e.stopPropagation(); }); nextBtn.addEventListener('click', function(e){ e.preventDefault(); e.stopPropagation(); goToPhoto(activeIndex + 1); }); } dots.forEach(function(d){ d.addEventListener('pointerdown', function(e){ e.stopPropagation(); }); d.addEventListener('click', function(e){ e.preventDefault(); e.stopPropagation(); goToPhoto(parseInt(d.getAttribute('data-index'), 10)); }); }); // Drag / touch swipe - ignore button/dot clicks so controls respond cleanly let startX = 0, currentX = 0, dragging = false; galleryCarousel.addEventListener('pointerdown', function(e){ if (e.target.closest('button') || e.target.closest('.gallery-nav') || e.target.closest('.gallery-dot')) return; dragging = true; startX = e.clientX; currentX = e.clientX; track.style.transition = 'none'; try { galleryCarousel.setPointerCapture(e.pointerId); } catch (err) {} }); galleryCarousel.addEventListener('pointermove', function(e){ if (!dragging) return; currentX = e.clientX; const delta = currentX - startX; track.style.transform = 'translateX(' + (-(activeIndex * 100) + (delta / galleryCarousel.clientWidth) * 100) + '%)'; }); function endDrag(e){ if (!dragging) return; dragging = false; track.style.transition = 'transform .3s ease'; const delta = currentX - startX; if (Math.abs(delta) > 40) goToPhoto(activeIndex + (delta < 0 ? 1 : -1)); else applyGalleryState(); try { galleryCarousel.releasePointerCapture(e.pointerId); } catch (err) {} } galleryCarousel.addEventListener('pointerup', endDrag); galleryCarousel.addEventListener('pointerleave', function(){ if (dragging) { dragging = false; track.style.transition = 'transform .3s ease'; applyGalleryState(); } }); // Trackpad / shift-wheel horizontal scroll — "scroll right to see the next photo" let wheelLock = false; galleryCarousel.addEventListener('wheel', function(e){ if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 10) { e.preventDefault(); if (wheelLock) return; wheelLock = true; goToPhoto(activeIndex + (e.deltaX > 0 ? 1 : -1)); setTimeout(function(){ wheelLock = false; }, 350); } }, { passive:false }); } // ---------- Lightbox ---------- const lightbox = document.getElementById('lightbox'); if (lightbox) { document.getElementById('lightbox-close').addEventListener('click', function(){ lightbox.classList.remove('show'); }); lightbox.addEventListener('click', function(e){ if (e.target === lightbox) lightbox.classList.remove('show'); }); document.addEventListener('keydown', function(e){ if (e.key === 'Escape') lightbox.classList.remove('show'); }); } // ---------- Contact host: real conversation, same as the feed's chat button ---------- document.getElementById('contact-host-btn').addEventListener('click', async function(){ const btn = this; btn.disabled = true; const { data, error } = await supabaseClient .from('conversations') .upsert( { listing_id: listingId, host_id: listing.host_id, client_id: currentUser.id }, { onConflict: 'listing_id,client_id' } ) .select() .single(); btn.disabled = false; if (error) { alert("Couldn't start that chat: " + error.message); return; } window.location.href = '/chats?c=' + data.id; }); // ---------- Sidebar booking widget (calendar first, guests below it) ---------- const legendHtml = '

' + 'Open' + 'Selected' + '

'; let pickerHtml = ''; if (isShortStay && isHourly) { pickerHtml = '

Pick a date & duration

' + '

Choose an open date and how many hours you need.

' + '

' + legendHtml + '

' + 'Hours' + '' + '

'; } else if (isShortStay) { pickerHtml = '

' + (isHotel ? 'Choose your stay' : 'Pick your dates') + '

' + '

Tap a check-in date, then a check-out date. Only open dates can be selected.

' + '

' + legendHtml + '

No dates selected yet.

'; } else if (usesRentalBooking) { const minDate = details.available_from || new Date().toISOString().slice(0,10); pickerHtml = '

Move-in details

' + '

' + (details.available_from ? 'Available from ' + escapeHtml(details.available_from) + '.' : 'Choose your desired start date.') + '

' + '

' + '' + (isProperty ? 'Desired move-in date' : 'Desired start date') + '' + '' + '

' + '

' + 'Lease length (months)' + '' + '

'; } const guestsHtml = isShortStay ? '

' + (isHotel ? 'Guests in this room' : 'Guests') + '

' : ''; const hotelStayDetailsHtml = isHotel ? '

' + (details.checkin_time ? 'Check-in from ' + escapeHtml(details.checkin_time) + '
' : '') + (details.checkout_time ? 'Check-out by ' + escapeHtml(details.checkout_time) + '
' : '') + (details.cancellation_policy ? escapeHtml(details.cancellation_policy.charAt(0).toUpperCase() + details.cancellation_policy.slice(1)) + ' cancellation policy' : '') + '

' : ''; const tableOnlyWidget = !supportsStay && supportsTableReservation ? '' : null; const salePrice = Number(details.sale_price_amount); const rentPrice = Number(details.price_amount); const hasSalePrice = details.sale_price_amount != null && Number.isFinite(salePrice) && salePrice >= 0; const hasRentPrice = details.price_amount != null && Number.isFinite(rentPrice) && rentPrice >= 0; const propertyPurposeSelectorHtml = isProperty ? '

' + '' + 'For sale' + '' + '' + 'For rent' + '' + '

' : ''; let propertyPolicyHtml = ''; if (isProperty) { const policyPath = String(details.policy_storage_path || ''); let policyDocumentHtml = '

No property policies provided.

'; if (policyPath) { let policyDocument = null; let policyError = null; try { const result = await supabaseClient.storage.from('listing-photos').createSignedUrl(policyPath, 3600); policyDocument = result.data; policyError = result.error; } catch (error) { policyError = error; } if (policyError || !policyDocument || !policyDocument.signedUrl) { console.error('Property policy document could not be opened:', policyError || new Error('No signed document URL was returned.')); policyDocumentHtml = '

The uploaded policy document is currently unavailable.

'; } else { const storedFilename = policyPath.split('/').pop() || 'Property policy document'; const filename = storedFilename.replace(/^policy_\d+_/, '') || 'Property policy document'; policyDocumentHtml = '' + '' + '' + escapeHtml(filename) + 'Open property policies' + ''; } } propertyPolicyHtml = '

' + '

Property Policies

' + policyDocumentHtml + '

'; } const propertyUnitItems = isProperty ? [ details.units_available != null ? '

' + escapeHtml(String(details.units_available)) + ' ' + (Number(details.units_available) === 1 ? 'unit' : 'units') + ' availableTotal units

' : '', details.size_or_type ? '

' + escapeHtml(details.size_or_type) + 'Unit types

' : '' ].filter(Boolean).join('') : ''; const propertyUnitsHtml = propertyUnitItems ? '

' + propertyUnitItems + '

' : ''; let propertyPricingHtml = ''; if (isProperty) { const saleValue = hasSalePrice ? (details.sale_price_mode === 'starting' ? 'From ' : '') + 'KES ' + salePrice.toLocaleString() : 'Sale price not provided.'; const rentValue = hasRentPrice ? 'KES ' + rentPrice.toLocaleString() + ' / month' : 'Monthly rent not provided.'; if (propertyPurpose === 'sale' || propertyPurpose === 'both') { propertyPricingHtml += '

Sale price' + (details.sale_price_mode === 'starting' ? ' Starting from' : '') + '

' + saleValue + '

'; } if (propertyPurpose === 'rent' || propertyPurpose === 'both') { propertyPricingHtml += '

Monthly rent

' + '

' + rentValue + '

'; } } const propertyActionHtml = isProperty ? (propertyHasRentalPurpose ? '' : '') + (propertyPurpose === 'sale' || propertyPurpose === 'both' ? '' : '') + '

' + (propertyHasRentalPurpose ? (availabilityMessage || 'This creates a rental request — the host needs to approve it before it\'s confirmed.') : 'Contact the host to discuss purchasing this property.') + '

' : ''; const propertyWidgetHtml = isProperty ? '' : null; const priceDisplayHtml = ''; const colSideHtml = propertyWidgetHtml || tableOnlyWidget || '

' + '' + pickerHtml + guestsHtml + hotelStayDetailsHtml + '

' + '' + (supportsBoth ? '' : '') + '

' + (availabilityMessage || (isHotel ? 'This sends a reservation request to the hotel for confirmation.' : 'This creates a request — the host needs to approve it before it\'s confirmed.')) + '

' + '

'; document.getElementById('col-side').innerHTML = colSideHtml; const propertyPurchaseButton = document.getElementById('property-purchase-btn'); if (propertyPurchaseButton) { propertyPurchaseButton.addEventListener('click', function(){ document.getElementById('contact-host-btn').click(); }); } skeleton.style.display = 'none'; bookingPage.style.display = 'block'; function openTableReservationCard(){ if (!diningConfig) return; const existing = document.getElementById('table-reservation-overlay'); if (existing) existing.remove(); const overlay = document.createElement('div'); overlay.id = 'table-reservation-overlay'; overlay.style.cssText = 'position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:1rem;background:rgba(25,20,18,.48);backdrop-filter:blur(7px);'; overlay.innerHTML = ''; document.body.appendChild(overlay); const form = overlay.querySelector('form'); const occasion = overlay.querySelector('#table-occasion'); const occasionDetails = overlay.querySelector('#table-occasion-details'); occasion.addEventListener('change', function(){ occasionDetails.style.display = occasion.checked ? 'block' : 'none'; occasionDetails.required = occasion.checked; }); overlay.querySelector('[data-close]').addEventListener('click', function(){ overlay.remove(); }); overlay.addEventListener('click', function(event){ if (event.target === overlay) overlay.remove(); }); var tableSubmitting = false; form.addEventListener('submit', async function(event){ event.preventDefault(); if (tableSubmitting) return; if (!form.reportValidity()) return; tableSubmitting = true; const submit = form.querySelector('[type="submit"]'); const errorEl = overlay.querySelector('#table-reservation-error'); errorEl.textContent = ''; var anim = initSendingAnimation(submit, 'Booking request sent'); var response; try { response = await fetch('/api/table-reservations', { method:'POST', headers:{ 'Content-Type':'application/json', Authorization:'Bearer ' + session.access_token }, body:JSON.stringify({ listing_id: listingId, phone: overlay.querySelector('#table-phone').value, guest_count:Number(overlay.querySelector('#table-guests').value), table_count:Number(overlay.querySelector('#table-count').value), requested_date:overlay.querySelector('#table-date').value, requested_time:overlay.querySelector('#table-time').value, special_occasion:occasion.checked, occasion_details:occasionDetails.value }) }); } catch(e) { anim.error(); tableSubmitting = false; errorEl.textContent = 'Network error — please try again.'; return; } const result = await response.json().catch(function(){ return {}; }); if (!response.ok) { anim.error(); tableSubmitting = false; errorEl.textContent = result.error || 'Unable to send the reservation request.'; return; } await anim.complete(); form.innerHTML = '

Request sent

The hotel has your contact details and will follow up about your table reservation.

'; form.querySelector('[data-close]').addEventListener('click', function(){ overlay.remove(); }); }); } if (tableOnlyWidget) { document.getElementById('table-reserve-btn').addEventListener('click', openTableReservationCard); document.getElementById('share-btn').addEventListener('click', async function(){ try { await navigator.clipboard.writeText(window.location.href); } catch (e) {} }); return; } let bookingIntent = supportsBoth ? null : 'stay'; function openReservationChoice(){ const overlay = document.createElement('div'); overlay.style.cssText = 'position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:1rem;background:rgba(25,20,18,.45);backdrop-filter:blur(7px);'; overlay.innerHTML = '

What would you like to reserve?

Choose one reservation type to continue.

'; document.body.appendChild(overlay); overlay.querySelector('[data-stay]').addEventListener('click', function(){ bookingIntent = 'stay'; overlay.remove(); confirmBtn.click(); }); overlay.querySelector('[data-table]').addEventListener('click', function(){ overlay.remove(); openTableReservationCard(); }); overlay.addEventListener('click', function(event){ if (event.target === overlay) overlay.remove(); }); } const chooseReservationBtn = document.getElementById('choose-reservation-btn'); if (chooseReservationBtn) chooseReservationBtn.addEventListener('click', openReservationChoice); // ---------- Share (copies link) ---------- document.getElementById('share-btn').addEventListener('click', async function(){ try{ await navigator.clipboard.writeText(window.location.href); const span = this.querySelector('span'); const original = span.textContent; span.textContent = 'Copied!'; setTimeout(function(){ span.textContent = original; }, 1500); }catch(e){} }); // ---------- Price / details calculation ---------- const detailsBox = document.getElementById('details-box'); const confirmBtn = document.getElementById('confirm-btn'); detailsBox.hidden = true; function clearDetailsBox(){ detailsBox.innerHTML = ''; detailsBox.hidden = true; } function updateDetailsBox(nightsOrHours, label, extraFee){ const rate = Number(details.price_amount); const base = rate * nightsOrHours; const total = base + (extraFee || 0); let html = '

' + label + 'KSh ' + base.toLocaleString() + '

'; if (extraFee) { html += '

' + (isHotel ? 'Service fee' : 'Cleaning fee') + 'KSh ' + extraFee.toLocaleString() + '

'; } html += '

TotalKSh ' + total.toLocaleString() + '

'; detailsBox.innerHTML = html; detailsBox.hidden = false; return total; } let computedTotal = 0; let selectedStart = null, selectedEnd = null; if (isShortStay && isHourly) { // ---------- Single date + hours ---------- let calMonth = new Date().getMonth(), calYear = new Date().getFullYear(); let pickedDate = null; function renderCal(){ const container = document.getElementById('cal-container'); const monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December']; const firstDay = new Date(calYear, calMonth, 1).getDay(); const daysInMonth = new Date(calYear, calMonth + 1, 0).getDate(); let html = '

' + monthNames[calMonth] + ' ' + calYear + '

' + '

' + ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].map(function(d){ return '

' + d + '

'; }).join(''); for (let i=0;i' + d + '

'; } html += ''; container.innerHTML = html; container.querySelectorAll('.cal-day.open').forEach(function(cell){ cell.addEventListener('click', function(){ pickedDate = cell.getAttribute('data-date'); selectedStart = pickedDate; renderCal(); recalc(); }); }); document.getElementById('cal-prev').addEventListener('click', function(){ calMonth--; if(calMonth<0){calMonth=11;calYear--;} renderCal(); }); document.getElementById('cal-next').addEventListener('click', function(){ calMonth++; if(calMonth>11){calMonth=0;calYear++;} renderCal(); }); } renderCal(); const hoursInput = document.getElementById('hours-input'); function recalc(){ const hours = parseInt(hoursInput.value, 10) || 0; if (!(selectedStart && hours > 0)) { computedTotal = 0; clearDetailsBox(); confirmBtn.disabled = true; return; } computedTotal = updateDetailsBox(hours, hours + ' hour' + (hours===1?'':'s'), null); confirmBtn.disabled = false; } hoursInput.addEventListener('input', recalc); recalc(); } else if (isShortStay) { // ---------- Date range (check-in / check-out) ---------- let calMonth = new Date().getMonth(), calYear = new Date().getFullYear(); function isRangeValid(start, end){ let d = new Date(start); const endD = new Date(end); while (d <= endD) { const ds = d.toISOString().slice(0,10); if (!openDates.has(ds) || unavailableDates.has(ds)) return false; d.setDate(d.getDate() + 1); } return true; } function renderCal(){ const container = document.getElementById('cal-container'); const monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December']; const firstDay = new Date(calYear, calMonth, 1).getDay(); const daysInMonth = new Date(calYear, calMonth + 1, 0).getDate(); let html = '

' + monthNames[calMonth] + ' ' + calYear + '

' + '

' + ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].map(function(d){ return '

' + d + '

'; }).join(''); for (let i=0;i selectedStart && dateStr < selectedEnd) cls += ' in-range'; html += '

' + d + '

'; } html += '

'; container.innerHTML = html; container.querySelectorAll('.cal-day.open').forEach(function(cell){ cell.addEventListener('click', function(){ const dateStr = cell.getAttribute('data-date'); if (!selectedStart || (selectedStart && selectedEnd)) { selectedStart = dateStr; selectedEnd = null; } else if (dateStr > selectedStart) { if (isRangeValid(selectedStart, dateStr)) { selectedEnd = dateStr; } else { document.getElementById('range-summary').textContent = 'Some dates in that range aren\'t open — pick a different check-out.'; selectedStart = dateStr; selectedEnd = null; } } else { selectedStart = dateStr; selectedEnd = null; } renderCal(); recalc(); }); }); document.getElementById('cal-prev').addEventListener('click', function(){ calMonth--; if(calMonth<0){calMonth=11;calYear--;} renderCal(); }); document.getElementById('cal-next').addEventListener('click', function(){ calMonth++; if(calMonth>11){calMonth=0;calYear++;} renderCal(); }); } renderCal(); function recalc(){ const summary = document.getElementById('range-summary'); if (selectedStart && selectedEnd) { const nights = Math.round((new Date(selectedEnd) - new Date(selectedStart)) / 86400000); summary.textContent = selectedStart + ' → ' + selectedEnd + ' (' + nights + ' night' + (nights===1?'':'s') + ')'; computedTotal = updateDetailsBox(nights, nights + ' night' + (nights===1?'':'s'), details.cleaning_fee || null); confirmBtn.disabled = false; } else if (selectedStart) { summary.textContent = 'Check-in: ' + selectedStart + ' — now pick a check-out date.'; computedTotal = 0; clearDetailsBox(); confirmBtn.disabled = true; } else { summary.textContent = 'No dates selected yet.'; computedTotal = 0; clearDetailsBox(); confirmBtn.disabled = true; } } } else if (!isPropertySaleOnly) { // ---------- Long-term ---------- const leaseMonthsInput = document.getElementById('lease-months'); const leaseStartInput = document.getElementById('lease-start'); let leaseDatePicked = false; function recalc(){ const months = parseInt(leaseMonthsInput.value, 10) || 0; if (!leaseDatePicked || months < 1) { computedTotal = 0; clearDetailsBox(); confirmBtn.disabled = true; return; } computedTotal = updateDetailsBox(months, months + ' month' + (months===1?'':'s'), null); confirmBtn.disabled = false; } leaseMonthsInput.addEventListener('input', recalc); leaseStartInput.addEventListener('change', function(){ leaseDatePicked = true; recalc(); }); recalc(); } // ---------- Confirm booking ---------- var staySubmitting = false; if (confirmBtn) confirmBtn.addEventListener('click', async function(){ if (staySubmitting) return; if (supportsBoth && !bookingIntent) { openReservationChoice(); return; } if (supportsBoth && bookingIntent === 'stay' && (!selectedStart || (!isHourly && !selectedEnd))) { bookingIntent = null; alert('Choose your stay dates before reserving a room.'); return; } staySubmitting = true; var anim = initSendingAnimation(confirmBtn, 'Reservation request sent'); const payload = { listing_id: listingId, host_id: listing.host_id, client_id: currentUser.id, price_unit: details.price_unit, total_price: computedTotal }; if (isShortStay && isHourly) { payload.start_date = selectedStart; payload.hours = parseInt(document.getElementById('hours-input').value, 10); } else if (isShortStay) { payload.start_date = selectedStart; payload.end_date = selectedEnd; } else { payload.lease_start_date = document.getElementById('lease-start').value; payload.lease_months = parseInt(document.getElementById('lease-months').value, 10); } const { data: newBooking, error } = await supabaseClient.from('bookings').insert(payload).select('id').single(); const successMsg = document.getElementById('success-msg'); if (error) { anim.error(); staySubmitting = false; successMsg.textContent = 'Something went wrong: ' + error.message; successMsg.classList.add('show', 'error'); return; } // Booking availability is reflected by the next feed revalidation. if (window.VaRoomListingFeedCache) window.VaRoomListingFeedCache.invalidateAll(); try { await window.VaRoomNotificationAPI.create({ recipient_user_id: listing.host_id, actor_user_id: currentUser.id, type: 'booking_request', title: 'New booking request', message: '"' + (currentUser.full_name || 'A guest') + '" requested to book "' + (listing.title || 'this listing') + '".', related_entity_type: 'booking', related_entity_id: newBooking ? newBooking.id : null, booking_id: newBooking ? newBooking.id : null, event_key: 'booking-request:' + (newBooking ? newBooking.id : listingId), metadata: { listing_id: listingId, listing_name: listing.title, booking_id: newBooking ? newBooking.id : null, client_id: currentUser.id, client_name: currentUser.full_name || currentUser.email || 'Guest' } }); } catch (notifErr) { console.error('Booking notification failed:', notifErr); } await anim.complete(); successMsg.textContent = 'Request sent! The host has 48 hours to respond — you\'ll be notified either way.'; successMsg.classList.add('show'); }); })();

Commercial location

Space

Amenities and building services

Pricing and costs

Lease and availability

Rules and policies

Documents

' + escapeHtml(listing.title) + '

' + (isHotel ? 'About this room' : (isOfficeShop ? 'About this commercial space' : 'About this place')) + '

' + (isHotel ? 'Room & hotel amenities' : 'Top amenities') + '

What guests say' + (reviewsError ? '' : reviewCount ? ' \u00b7 ' + ICON_STAR + ' ' + escapeHtml(ratingText) + ' ' + escapeHtml(ratingCountText) : ' \u00b7 No reviews yet') + '

Property Policies

Reserve a Table

Request sent

What would you like to reserve?