(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 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,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 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 && (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 (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 mapUrl = 'https://www.google.com/maps/search/?api=1&query=' + encodeURIComponent(listing.location_text || 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.

'; 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(listing.location_text) + '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' : 'About this place') + '

' + '

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

' + '

' + (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; 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'); }); })();

' + escapeHtml(listing.title) + '

' + (isHotel ? 'About this room' : '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?