const obj404 = { template: `
    <div class="container-lg notfound-wrapper">
        <h1 class="text-center notfound-header">404</h1>
        <p class="text-center">Looks like you are lost. Please check your URL again.</p>
    </div>
` ,

        
    }
app.component('404', obj404); const objAgentprofile = { template: `
    <div v-if="$root.userDataFetched" class="agent-profile">
        <!-- Agent Info Section -->
        <div class="agent-info">
            <div class="container-lg py-4">
                <div class="row align-items-center">
                    <div class="col-md-3">
                        <img :src="agentPhoto" class="agent-photo" alt="Agent Photo">
                        
                    </div>
                    <div class="col-md-4">
                        <h1 class="agent-name">{{ agent.firstName }} {{ agent.lastName }}</h1>
                        <p class="company-name">{{ agent.title }}</p>
                        <p class="company-name">{{ agent.mlsLicense }}</p>
    
                        <div class="contact-details mt-3">
                            <!-- <div class="contact-header">Phone:</div> -->
                            <div class="contact-value">
                                <a :href="'tel:' + agent.phoneNumber" class="phone-link">{{ $root.formatPhone(agent.phoneNumber) }}</a>
                            </div>
    
                            <!-- <div class="contact-header mt-3">Email:</div> -->
                            <div class="contact-value">
                                <a :href="'mailto:' + agent.emailAddress" class="email-link">Email Me</a>
                            </div>
                        </div>
                    </div>
    
                    <!-- Contact Form -->
                    <agent-contact/>
                    
                </div>
                <div class="row">
                    <!-- Agent tagline, simplify -->
                    <p class="agent-tagline">{{ agent.shortBio }}</p>
                </div>
            </div>
        </div>

        <!-- Map Section -->
        <div v-if="propertiesFetched" :key="mapKey">
            <div class="map-controls container-lg">
                <div class="legend-container">
                    <div class="legend-item" :style="{ visibility: viewMode === 'map' ? 'visible' : 'hidden' }">
                        <img src="/images/map-marker-house.png" class="marker-icon" alt="For Sale marker"/>
                        <span>For Sale</span>
                    </div>
                    <div class="legend-item" :style="{ visibility: viewMode === 'map' ? 'visible' : 'hidden' }">
                        <img src="/images/map-marker.png" class="marker-icon" alt="Sold marker"/>
                        <span>Sold</span>
                    </div>
                </div>
                <div class="view-toggle">
                    <div :style="viewMode === 'map' ? $root.buttonPrimaryStyle : ''" class="map-btn" @click="viewMode = 'map'">Map</div>
                    <div :style="viewMode === 'list' ? $root.buttonPrimaryStyle : ''" class="list-btn" @click="viewMode = 'list'">List</div>
                </div>
            </div>

            <!-- Map View -->
            <div v-if="viewMode === 'map'" class="map-view">
                <global-map :properties="filteredProperties" zoomOutToShowAllProperties showPopups />
            </div>

            <!-- List View -->
            <div v-if="viewMode === 'list'" class="properties-list container-lg">
                <div class="row">
                    <div v-for="property in filteredProperties" :key="property.propertyId" class="col-md-4 mb-4">
                        <div class="property-card">
                            <div class="property-status" :class="{ 'status-sold': property.soldDate }">
                                <i class="fas" :class="property.soldDate ? 'fa-check-circle' : 'fa-home'"></i>
                                {{ property.soldDate ? 'Sold' : 'For Sale' }}
                            </div>
                            <div class="property-image-container">
                                <img :src="property.photos[0]" class="property-image" alt="Property Image">
                                <div class="photo-count" v-if="property.photos.length > 1">
                                    <i class="fas fa-camera"></i> {{ property.photos.length }}
                                </div>
                            </div>
                            <div class="property-details">
                                <div class="property-type">{{ property.propertyType }}</div>
                                <div class="listing-label">Listing Price:</div>
                                <div class="price-value">&#36;{{ property.price.toLocaleString() }}</div>
                                <div class="property-specs">
                                    <span><i class="fas fa-bed"></i> {{ property.bedrooms }} bd</span>
                                    <span><i class="fas fa-bath"></i> {{ property.bathrooms }} ba</span>
                                    <span><i class="fas fa-ruler-combined"></i> {{ property.sqft.toLocaleString() }} sq ft</span>
                                </div>
                                <div class="property-location">
                                    <i class="fas fa-map-marker-alt"></i>
                                    {{ property.address }}
                                    <div>{{ property.city }}, {{ property.state }} {{ property.zip }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Cities Section -->
        <div class="container-lg py-4">
            <h2 class="section-header">Cities</h2>
            <div class="cities-list">
                <div class="row">
                    <div class="col-md-3" v-for="(city, index) in cities" :key="index">
                        <a @click="setSearch(city)" class="city-link" style="cursor:pointer">{{ city }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-else class="loading-container">
        <div class="spinner-border" role="status">
            <span class="sr-only"></span>
        </div>
    </div>
` ,

    name: 'agentprofile',
    data() {
        return {
            agent: {
                firstName: '',
                lastName: '',
                company: '',
                title: '',
                phoneNumber: '',
                emailAddress: '',
                bio: '',
                yearsExperience: 0,
                mlsLicense: '',
                areasServed: '',
                photoUrl: ''
            },
            s3BaseUrl: 'https://lptprint.s3.amazonaws.com/',
            cities: [],
            properties: [],
            viewMode: 'map',
            searchQuery: '',
            loading: false,
            propertiesFetched: false,
            allPropertiesStr: 'All Properties',
            mapKey: 0
        }
    },
    computed: {
        agentPhoto() {
            if (this.$root.user.imgurl && this.$root.user.imgurl !== '') {
                return this.$root.user.imgurl;
            }
            return '/images/default-agent-photo.svg';
        },
        filteredProperties() {
            if (!this.searchQuery) return this.properties;

            const query = this.searchQuery.toLowerCase();
            return this.properties.filter(property => {
                const address = `${property.address} ${property.city} ${property.state} ${property.zip}`.toLowerCase();
                return address.includes(query);
            });
        }
    },
    watch: {
        '$route.query.q': {
            immediate: true,
            handler(newVal) {
                this.searchQuery = newVal || '';
                this.mapKey++
            }
        }
    },
    async created() {
        await this.$root.getUserById(this.$root.userId);
        await this.$root.getAllProperties(this.$root.userId);
        this.agent = this.$root.user;
        this.properties = this.$root.properties;
        this.propertiesFetched = true
        this.cities = [this.allPropertiesStr,...new Set(this.properties.map(property => property.city))];

        // Check for search query in URL
        const urlParams = new URLSearchParams(window.location.search);
        this.searchQuery = urlParams.get('q') || '';
        this.mapKey++
    },
    methods: {
        setSearch(str) {
            if (str == this.allPropertiesStr) this.searchQuery = ''
            else this.searchQuery = str
            this.mapKey++
        }
    }
}
app.component('agentprofile', objAgentprofile); const objHome = { template: `
    <div>
        <div v-if="$root.vanity?.marketingPropertyId">
            <property-hero :propertyParsedPhotos.sync="$root.propertyParsedPhotos"/>
            <property-overview :property.sync="$root.property"/>
            <div class="container-lg pt-4">
                <div class="row pb-4">
                    <div class="col-sm-6">
                        <property-amenities :property.sync="$root.property"/>
                    </div>
                    <div class="col-sm-6">
                        <property-appointment/>
                    </div>
                </div>
                <hr>
            </div>
            <property-photos :properties.sync="$root.properties" :property.sync="$root.property"/>
            <global-map v-if="$root.propertyDataFetched" :properties.sync="$root.properties" :property.sync="$root.property" showPopups/>
            <property-neighborhood 
                v-if="$root.nrData?.additionalData?.REPORTDATA?.categories && $root.nrData.additionalData.REPORTDATA.categories.length > 0" 
                :nrData.sync="$root.nrData" 
                :nrRestaurants.sync="$root.nrRestaurants"/>
            <property-contact :user=$root.user />
        </div>
        <div v-else></div>
    </div>
` ,

        data() {
            return {

            }
        },
        async created() {
            if (this.$root.vanity?.marketingPropertyId) {
                this.$root.getAllProperties(this.$root.vanity.appUserId)

                await Promise.all([
                    this.$root.getProperty(this.$root.vanity.marketingPropertyId),
                    this.$root.getNhrData(this.$root.vanity.marketingPropertyId)
                ])
            }
        }
    }
app.component('home', objHome); const objProperty = { template: `
    <div>
        <property-hero :propertyParsedPhotos.sync="$root.propertyParsedPhotos"/>
        <property-overview :property.sync="$root.property"/>
        <div class="container-lg pt-4">
            <div class="row pb-4">
                <div class="col-sm-6">
                    <property-amenities :property.sync="$root.property"/>
                </div>
                <div class="col-sm-6">
                    <property-appointment/>
                </div>
            </div>
            <hr>
        </div>
        <property-photos :properties.sync="$root.properties" :property.sync="$root.property"/>
        <global-map v-if="$root.propertyDataFetched" :properties.sync="$root.properties" :property.sync="$root.property" showPopups/>
        <property-neighborhood 
            v-if="$root.nrData?.additionalData?.REPORTDATA?.categories && $root.nrData.additionalData.REPORTDATA.categories.length > 0" 
            :nrData.sync="$root.nrData" 
            :nrRestaurants.sync="$root.nrRestaurants"/>
        <property-contact :user=$root.user />
    </div>
` ,

        data() {
            return {

            }
        },
        async created() {
            this.$root.getAllProperties(this.$root.userId)

            await Promise.all([
                this.$root.getProperty(this.$root.propertyId),
                this.$root.getNhrData(this.$root.propertyId)
            ])
        }
    }
app.component('property', objProperty); const objAgentContact = { template: `
    <div class="col-md-4">
        <div class="contact-form-container">
            <div v-if="!success">
                <h2 class="form-title">Request Your Homebuyer Consultation Today</h2>
                <form  class="contact-form" @submit.prevent="submitForm">
                    <div class="form-group">
                        <input type="text" v-model="form.firstName" class="form-field mb-3" placeholder="First Name" required>
                    </div>
                    <div class="form-group">
                        <input type="text" v-model="form.lastName" class="form-field mb-3" placeholder="Last Name" required>
                    </div>
                    <div class="form-group">
                        <input type="tel" v-model="form.phone" class="form-field mb-3" placeholder="Phone Number" required>
                    </div>
                    <div class="form-group">
                        <input type="email" v-model="form.email" class="form-field mb-3" placeholder="Email" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100 submit-btn" :style="$root.buttonPrimaryStyle">Submit</button>
                    <p class="form-disclaimer">* By submitting this form you opt-in to receive text messages and emails.</p>
                </form>
            </div>
            <div v-else>
                <h3 class="text-success">Success!</h3>
                <p>Your information has been submitted. An agent will contact you shortly.</p>
            </div>
        </div>
    </div>
` ,

        data() {
            return { 
                form: {
                    firstName: '',
                    lastName: '',
                    phone: '',
                    email: ''
                },
                success: false
            }
        },
        methods: {
            async submitForm(e) {
                e.preventDefault()
                let data;
                if(this.validateForm()) {
                    try {
                        const response = await fetch(`/api/backend.cfc?method=contactConnectAgent&userId=${this.$root.userId}${this.$root.isDevelopment?'&development=1':''}`, {
                            method: 'POST', 
                            body: JSON.stringify(this.form)
                        });
                        data = await response.json();
    
                        if (data.success) {
                            this.clearForm();
                            this.success = true;
                            this.$root.showToast({ message: 'Thank you! An agent will contact you shortly.', color: 'success' });
                        } else {
                            this.$root.showToast({ message: 'Failed to send message. Please try again.', color: 'danger' });
                        }
                    } catch (error) {
                        console.error('Error submitting form:', error);
                        this.$root.showToast({ message: 'An error occurred. Please try again.', color: 'danger' });
                    }
                }
            },
            validateForm() {
                if (
                    this.form.firstName !== '' &&
                    this.form.lastName !== '' &&
                    this.form.phone !== '' &&
                    this.form.email !== ''
                ) {
                    return true
                }
                else return false
            },
            clearForm() {
                this.form.firstName = '';
                this.form.lastName = '';
                this.form.phone = '';
                this.form.email = '';
            }
        }
    }
app.component('agent-contact', objAgentContact); const objFooterMain = { template: `
    <footer>
        <div class="container-lg">
            <div class="d-flex flex-column justify-content-center py-5">
                <img class="logo mb-3" style="display: block; margin: 0 auto;" :src="$root.theme.horizontalLogo" :alt="$root.theme.name">
                <div class="d-flex" style="max-width: 600px; margin: 0 auto;">
                    <img src="/images/eh_logo_white.svg" alt="Equal Housing" style="margin-right: 1rem;">
                    <p class="disclaimer">{{ $root.user.orgPrintDisclaimer }}</p>
                </div>
            </div>
        </div>
    </footer>
` ,


    }
app.component('footer-main', objFooterMain); const objGlobalMap = { template: `
    <div class="py-4">
        <div id="mapContainer" :style="{ width: width, height: height }"></div>
    </div>
` ,

    props: {
        properties: {
            type: Array,
            required: true,
            default: []
        },
        property: {
            type: Object,
            required: false,
            default: {}
        },
        width: {
            type: String,
            required: false,
            default: '100%'
        },
        height: {
            type: String,
            required: false,
            default: '480px'
        },
        zoomOutToShowAllProperties: {
            type: Boolean,
            required: false,
            default: false
        },
        showPopups: {
            type: Boolean,
            required: false,
            default: false
        }
    },
    data() {
        return {
            accessToken: this.$root.MAPBOX_ACCESS_TOKEN,
            propertyLng: 0,
            propertyLat: 0,
            map: null,
            nav: null,
            popup: null
        };
    },
    computed: {
        renderMap: function() {
            return this.createMap(this.map, this.nav, this.popup)
        }
    },
    methods: {
        createMap(map, nav, popup) {
            let vm = this

            let layer = {
                id: '', // set dynamically below
                type: 'symbol',
                source: {
                    type: 'geojson',
                    data: {
                        type: 'FeatureCollection',
                        features: []
                    }
                },
                layout: {
                    'icon-image': '', // set dynamically below
                    'icon-allow-overlap': true,
                    'icon-size': 0.5
                },
                paint: {
                    'icon-color': '#1469ab'
                }
            }

            let homeLayer = JSON.parse(JSON.stringify(layer)) // deep clone
            homeLayer.id = 'home'
            homeLayer.layout['icon-image'] = 'listedHomeMarker'

            let pointsLayer = JSON.parse(JSON.stringify(layer)) // deep clone
            pointsLayer.id = 'points'
            pointsLayer.layout['icon-image'] = 'listedMarker'

            const bounds = new mapboxgl.LngLatBounds();

            for (var i = 0; i < this.properties.length; i++) {
                let path = `${this.properties[i].isLc ? '' : 'https://property.listinginfo.com/'}${this.$root.user.appUserId}/property/${this.properties[i].propertyId}${this.$root.isDevelopment?'?development=1':''}`
                let htmlTemplate = `
                    <div onclick="goToPage('${path}', '${this.$root.$route.query.ca}', ${this.properties[i].isLc?true:false})" style="color:black;cursor:pointer;">
                        <img style="width: 50%; float: left;" src="${this.properties[i].exteriorPhotoURL}"></img>
                        <div style="float: left; padding-left: 10px;">
                            <span style="display: inline-block">$${this.$root.numberWithCommas(this.properties[i].price)}</span><br>
                            <span style="display: inline-block">${this.properties[i].bedrooms} bd, ${this.properties[i].bathrooms} ba</span><br>
                            <span style="display: inline-block">${this.properties[i].sqft} sqft</span>
                            ${this.properties[i].soldDate?'<br><span style="display: inline-block;color:red;"><b>SOLD</b></span>':''}
                        </div>
                        <div class="${Object.keys(this.$root.colorThemeBg)[0]} ${Object.keys(this.$root.colorThemeOverText)[0]}" style="width: 100%; float: left; text-align: center;">${this.properties[i].address}</div>
                    </div>`
                let feature = {
                    type: 'Feature',
                    properties: {
                        description: htmlTemplate,
                        url: `${this.properties[i].isLc ? this.$root.localUrlHrefBase : 'https://property.listinginfo.com/'}${this.$root.user.userId}/property/${this.properties[i].propertyId}`,
                        icon: '' // set dynamically below
                    },
                    geometry: {
                        type: 'Point',
                        coordinates: [parseFloat(this.properties[i].lng), parseFloat(this.properties[i].lat)]
                    }
                }

                // Add coordinates to bounds
                bounds.extend([parseFloat(this.properties[i].lng), parseFloat(this.properties[i].lat)]);

                if (this.property?.propertyId) {
                    if ((this.properties[i].propertyId == this.property.propertyId)) {
                        feature.properties.icon = 'listedHomeMarker'
                        homeLayer.source.data.features.push(feature)
                    }
                    else {
                        feature.properties.icon = 'listedMarker'
                        pointsLayer.source.data.features.push(feature)
                    }
                }
                else {
                    if (this.properties[i].soldDate == '') {
                        feature.properties.icon = 'listedHomeMarker'
                        homeLayer.source.data.features.push(feature)
                    }
                    else {
                        feature.properties.icon = 'listedMarker'
                        pointsLayer.source.data.features.push(feature)
                    }
                }
            }

            map.on('load', function() {
                map.addControl(nav, "top-left");
                map.loadImage('/images/map-marker.png', (error, image) => {
                    if (error) throw error;
                    map.addImage('listedMarker', image);
                    map.addLayer(pointsLayer);
                });

                map.loadImage('/images/map-marker-house.png', (error, image) => {
                    if (error) throw error;
                    // Add the loaded image to the style's sprite with the ID 'kitten'.
                    map.addImage('listedHomeMarker', image);
                    map.addLayer(homeLayer);

                    // Fit bounds if property is not set and bounds is not empty
                    if (vm.zoomOutToShowAllProperties && !bounds.isEmpty()) {
                        map.fitBounds(bounds, {
                            padding: 50,
                            maxZoom: 14,
                            duration: 1000
                        });
                    }
                });

                if (vm.showPopups) {
                    map.on('mouseenter', 'points', (e) => {
                        map.getCanvas().style.cursor = 'pointer'

                        var features = map.queryRenderedFeatures(e.point, {
                            layers: ['points']
                        })

                        if (!features.length) {
                            return
                        }

                        var coordinates = e.features[0].geometry.coordinates.slice();
                        var description = e.features[0].properties.description;

                        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                            coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
                        }

                        popup.setLngLat(coordinates)
                            .setHTML(description)
                            .addTo(map);
                    });

                    map.on('mouseleave', 'points', function() {
                        map.getCanvas().style.cursor = ''
                    });

                    map.on('mouseenter', 'home', (e) => {
                        map.getCanvas().style.cursor = 'pointer'

                        var features = map.queryRenderedFeatures(e.point, {
                            layers: ['home']
                        })

                        if (!features.length) {
                            return
                        }

                        var coordinates = e.features[0].geometry.coordinates.slice();
                        var description = e.features[0].properties.description;

                        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                            coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
                        }

                        popup.setLngLat(coordinates)
                            .setHTML(description)
                            .addTo(map);
                    });

                    map.on('mouseleave', 'home', function() {
                        map.getCanvas().style.cursor = ''
                    });
                }
            });
        }
    },
    created() {
        if (!this.property.propertyId) {
            this.propertyLng = this.properties[0] && this.properties[0].lng ? this.properties[0].lng : 0
            this.propertyLat = this.properties[0] && this.properties[0].lat ? this.properties[0].lat : 0
        }
        else {
            this.propertyLng = this.property.lng ? this.property.lng : 0
            this.propertyLat = this.property.lat ? this.property.lat : 0
        }
    },
    mounted() {
        mapboxgl.accessToken = this.accessToken

        // Initialize map components
        this.map = new mapboxgl.Map({
            container: 'mapContainer',
            style: 'mapbox://styles/mapbox/light-v9',
            center: [this.propertyLng, this.propertyLat],
            zoom: 10
        });

        this.nav = new mapboxgl.NavigationControl();
        this.popup = new mapboxgl.Popup({
            closeButton: true,
            closeOnClick: false
        });

        // Wait for next tick to ensure DOM is ready
        this.$nextTick(() => {
            if (this.properties && this.properties.length > 0) {
                this.renderMap;
            }
        });
    },
    watch: {
        properties: {
            handler(newVal) {
                if (newVal && newVal.length > 0 && this.map) {
                    // Clear existing layers
                    if (this.map.getLayer('home')) this.map.removeLayer('home');
                    if (this.map.getLayer('points')) this.map.removeLayer('points');
                    if (this.map.getSource('home')) this.map.removeSource('home');
                    if (this.map.getSource('points')) this.map.removeSource('points');

                    // Re-render the map
                    this.$nextTick(() => {
                        this.renderMap;
                    });
                }
            },
            immediate: true,
            deep: true
        }
    }
}
app.component('global-map', objGlobalMap); const objGlobalToastAlert = { template: `
    <div id="custom-toast-alert" class="toast align-items-center text-white border-0" 
        :class="{'bg-primary': $root.toast.color == 'primary','bg-success': $root.toast.color == 'success','bg-danger': $root.toast.color == 'danger','bg-dark': !colors.includes($root.toast.color)}" 
        role="alert" 
        aria-live="assertive" 
        aria-atomic="true">
        <div class="d-flex">
            <div id="toast-message" class="toast-body">
                {{ $root.toast.message }}
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" data-bs-target="custom-toast-alert" aria-label="Close"></button>
        </div>
    </div>
` ,

    data(){
        return {
            colors: [
                'primary',
                'success',
                'danger'
            ]
        }
    }
}
app.component('global-toast-alert', objGlobalToastAlert); const objGlobalToastContainer = { template: `
    <div class="toast-container position-fixed p-3 end-0 bottom-0">
        <global-toast-alert/>
    </div>
` ,

    
}
app.component('global-toast-container', objGlobalToastContainer); const objNavigationMain = { template: `
    <nav class="navbar navbar-dark navbar-expand-lg" data-bs-theme="dark">
        <div class="container-lg">
            <a @click="routeToUserProfile()" style="cursor:pointer"><img :src="$root.theme.horizontalLogo" :alt="$root.theme.name" class="navbar-brand logo"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <div class="search-container" v-if="$route.name === 'agentprofile'">
                        <div class="search-box">
                            <input
                            type="text"
                            v-model="searchQuery"
                            placeholder="Search Agent's Listings"
                            class="search-input"
                            @keyup.enter="performSearch">
                            <button class="search-btn" @click="performSearch">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                        </div>
                </li>
                <li class="nav-item" v-if="$route.name === 'property'">
                    <h1 class="address" v-if="$root.property?.address">
                        {{ $root.property.address }}, {{ $root.property.city }}, {{ $root.property.state }} {{ $root.property.zip }}
                    </h1>
                </li>
                <li class="nav-item" v-else-if="$route.name === 'agentprofile'">
                    <h1 class="address" >
                        {{ $root.user.firstName }} {{ $root.user.lastName }}{{ $root.user.title ? ' - '+$root.user.title : '' }}
                    </h1>
                </li>
            </ul>
            </div>
        </div>
    </nav>
` ,

    name: 'NavigationMain',
    data() {
        return {
            searchQuery: ''
        }
    },
    methods: {
        performSearch() {
            if (this.searchQuery.trim()) {
                // Navigate to the agent's profile with search query
                let query = {
                    q: this.searchQuery
                }
                if (this.$root.isDevelopment) query.development = 1

                this.$router.push({
                    path: `/${this.$root.userId}`,
                    query: query
                });
            }
        },
        routeToUserProfile() {
            // Navigate to the agent's profile
            let query = {}
            if (this.$root.isDevelopment) query.development = 1

            this.$router.push({
                path: `/${this.$root.userId}`,
                query: query
            });
        }
    },
    watch: {
        '$route.query.q': {
            immediate: true,
            handler(newVal) {
                if (newVal) {
                    this.searchQuery = newVal;
                }
            }
        }
    }
}
app.component('navigation-main', objNavigationMain); const objPropertyAmenities = { template: `
    <div>
        <div v-if="amenitiesAvailable.length > 0">
            <h2 class="section-header">Amenities</h2>
            <div class="d-flex flex-wrap amenities">
                <div v-for="(amenity, index) in amenitiesAvailable" :key="index">
                    <p><span v-if="index > 0" class="mx-3">|</span>{{ amenity }}</p>
                </div>
            </div>
        </div>
        <button :style="$root.buttonSecondaryStyle" class="button-secondary mt-4" @click="scrollToContact">Contact for more information</button>
    </div>
` ,

        props: {
            property: {
                type: Object,
                required: true,
                default: {}
            }
        },
        computed: {
            amenitiesAvailable() {
                let amenities = []

                if (this.property.garage) amenities.push(`${this.property.garage} Garage`)
                if (this.property.pool) amenities.push(`Pool`)
                if (this.property.yearBuilt) amenities.push(`Built in ${this.property.yearBuilt}`)
                if (this.property.roofStyle) amenities.push(`${this.property.roofStyle} Roof`)
                if (this.property.cooling) amenities.push(`${this.property.cooling} Cooling`)
                if (this.property.heating) amenities.push(`${this.property.heating} Heating`)
                if (this.property.stories) amenities.push(`${this.property.stories} ${this.property.stories == 1 ? 'Story' : 'Stories'}`)

                return amenities
            }
        },
        methods: {
            scrollToContact() {
                const contactSection = document.getElementById('agent-contact');
                if (contactSection) {
                    contactSection.scrollIntoView({ behavior: 'smooth' });
                }
            }
        }
    }
app.component('property-amenities', objPropertyAmenities); const objPropertyAppointment = { template: `
    <div>
        <div class="appointment">
            <h2 class="appointment-header">Schedule an Appointment</h2>
            <div class="py-3 mx-auto">
                <div class="container time-button-container">
                    <div v-for="(row, rowIndex) in intervalRows" class="row time-button-row">
                        <template v-for="(cell, cellIndex) in row">
                            <button 
                                class="col btn btn-hover-shadow time-button animate-time-button" 
                                :style="datetime.selectedTime == cell ? $root.buttonPrimaryStyle : 'btn-light'"
                                @click="setSelectedTime(cell, $event)"
                            >
                                {{cell}}
                            </button>
                        </template>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <button :style="$root.buttonPrimaryStyle" class="button-primary" @click="triggerPropUpdate()" data-bs-toggle="modal" data-bs-target="#appointmentModal">Schedule Appointment</button>
                </div>
            </div>
        </div>
        
        <property-appointmentmodal :datetime.sync="datetime" />
    </div>
` ,

    data(){
        return {
            datetime:{
                selectedDate: '1900-01-01',
                selectedTime: '12:15 PM'
            },
            intervals: [],
            intervalStart: 45,
            selectedIndex: 4,
            
        }
    },
    methods: {
        setInitialDate() {
            let today = new Date()
            let day = String(today.getDate()).padStart(2, '0')
            let month = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
            let year = today.getFullYear()
            let date = `${year}-${month}-${day}`
            this.datetime.selectedDate = date
            if (document.getElementById("selectedDate")) document.getElementById("selectedDate").value = date
        },
        setSelectedTime(value, event) {
            this.datetime.selectedTime = value
            let index = this.intervals.indexOf(value);
            this.intervalStart = index-4;
        },
        triggerPropUpdate() {
            // trick an update to the child component with .sync
            this.datetime.selectedDate = ''
            if (document.getElementById("selectedDate")) this.datetime.selectedDate = document.getElementById("selectedDate").value
        },
        getIntervals(){
            let currentTime = new Date();
            currentTime.setHours(0,0,0,0);
            for(i = 0; i < 96; i++){
                let hours = currentTime.getHours();
                let minutes = currentTime.getMinutes();
                let ampm = hours >= 12 ? 'PM' : 'AM';
                hours = hours % 12;
                hours = hours ? hours : 12;
                minutes = minutes < 10 ? '0' + minutes : minutes;
                let interval = hours + ':' + minutes + ' ' + ampm;
                this.intervals.push(interval);
                currentTime.setTime(currentTime.getTime() + 15 * 60 * 1000);
            }
        }
    },
    mounted() {
        this.setInitialDate();
        this.getIntervals();
    },
    computed:{
        intervalPeriod(){
            if(this.intervalStart < 0){
                let temparr1;
                let temparr2;
                temparr1 = this.intervals.slice(this.intervals.length + this.intervalStart)
                temparr2 = this.intervals.slice(0, this.intervalStart + 9);
                let combinedarr = temparr1.concat(temparr2)
                return combinedarr;
            }
            else if(this.intervalStart > 86){
                let temparr1;
                let temparr2;
                temparr1 = this.intervals.slice(this.intervalStart, this.intervals.length)
                temparr2 = this.intervals.slice(0, 9 - temparr1.length);
                let combinedarr = temparr1.concat(temparr2)
                return combinedarr;
            }   
            else{
                return this.intervals.slice(this.intervalStart, this.intervalStart+9);
            }
        },
        intervalRows(){
            let row1 = []
            let row2 = []
            let row3 = []
            for(let i = 0; i<9; i++){
                if(i<3){
                    row1.push(this.intervalPeriod[i]);
                }
                else if(i<6){
                    row2.push(this.intervalPeriod[i]);
                }
                else{
                    row3.push(this.intervalPeriod[i]);
                }
            }
            let rows = [row1,row2,row3];
            return rows;
        }
    }
}
app.component('property-appointment', objPropertyAppointment); const objPropertyAppointmentmodal = { template: `
    <div class="modal fade" id="appointmentModal" tabindex="-1" aria-labelledby="appointmentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content appointment-modal-content">
                <div v-if="!success" class="modal-body">
                    <h2 class="form-title">Schedule a Showing or Send Custom Message</h2>
                    <form id="appointmentContactAgent" ref="appointmentContactAgent" @submit="contactAgent($event)">
                        <input type="text" id="modalFullname" class="form-field mb-3" placeholder="Full Name" v-model="form.fullname" required />
                        <input type="text" id="modalPhone" class="form-field mb-3" placeholder="Phone Number" v-model="form.phone" required />
                        <input type="email" id="modalEmail" class="form-field mb-3" placeholder="Email" v-model="form.email" required />
                        <textarea id="modalQuestion" class="form-field" cols="30" rows="10" placeholder="Question" v-model="form.question" required />
                    </form>
                    <button v-if="!submittingForm && !showingMessage" :style="$root.buttonPrimaryStyle" type="submit" form="appointmentContactAgent" value="Submit">Contact Agent</button>
                    <p class="form-disclaimer">* By submitting this form you opt-in to receive text messages and emails.</p>
                    <div v-if="submittingForm && !showingMessage" class="form-loading">
                        <div class="form-submit-loader"></div>
                    </div>
                    <div v-if="!submittingForm && showingMessage" class="form-message" :class="messageColor">{{ message }}</div>
                </div>
                <div v-else class="modal-body">
                    <h3 class="text-success">Success!</h3>
                    <p>Your information has been submitted. An agent will contact you shortly.</p>
                </div>
            </div>
        </div>
    </div>
` ,

    data(){
        return {
            form: {
                fullname: '',
                phone: '',
                email: '',
                question: ''
            },
            submittingForm: false,
            showingMessage: false,
            messageColor: { 'text-danger': true },
            message: '',
            success: false
        }
    },
    props: {
        datetime: {
            type: Object,
            required: true,
            default: () => ({
                selectedDate: '1900-01-01',
                selectedTime: '11:00'
            })
        }
    },
    created() {
        this.updateQuestion();
    },
    methods: {
        formatDate(dateString) {
            if (!dateString) return '';

            // Parse the date components
            const [year, month, day] = dateString.split('-').map(num => parseInt(num, 10));

            // Create a date in the local timezone (with time set to noon to avoid day boundary issues)
            const date = new Date(year, month - 1, day, 12, 0, 0);

            // Get the property's timezone
            const timeZone = this.getPropertyTimezone();

            // Format the date using the determined timezone
            const options = {
                month: 'numeric',
                day: 'numeric',
                year: '2-digit',
                timeZone: timeZone
            };

            try {
                // Use Intl formatter with the property's timezone
                return new Intl.DateTimeFormat('en-US', options).format(date);
            } catch (error) {
                // Fallback to simple formatting if Intl formatter fails
                const displayMonth = date.getMonth() + 1;
                const displayDay = date.getDate();
                const displayYear = date.getFullYear().toString().slice(-2);
                return `${displayMonth}/${displayDay}/${displayYear}`;
            }
        },
        getTimezoneAbbreviation(timeZone) {
            // Common timezone abbreviations for US timezones
            const timezoneMap = {
                'America/New_York': 'ET',
                'America/Chicago': 'CT',
                'America/Denver': 'MT',
                'America/Phoenix': 'MST', // Arizona doesn't observe DST
                'America/Los_Angeles': 'PT',
                'America/Anchorage': 'AKT',
                'Pacific/Honolulu': 'HST'
            };

            return timezoneMap[timeZone] || 'ET'; // Default to Eastern Time if not found
        },
        getPropertyTimezone() {
            // Default timezone for US properties
            let timeZone = 'America/New_York';

            // Try to determine timezone based on property location if available
            if (this.$root.property && this.$root.property.state) {
                // Map states to timezones (simplified approach)
                const stateToTimezone = {
                    'CA': 'America/Los_Angeles',
                    'WA': 'America/Los_Angeles',
                    'OR': 'America/Los_Angeles',
                    'NV': 'America/Los_Angeles',
                    'AZ': 'America/Phoenix',
                    'MT': 'America/Denver',
                    'CO': 'America/Denver',
                    'NM': 'America/Denver',
                    'WY': 'America/Denver',
                    'UT': 'America/Denver',
                    'ID': 'America/Denver',
                    'TX': 'America/Chicago',
                    'OK': 'America/Chicago',
                    'KS': 'America/Chicago',
                    'NE': 'America/Chicago',
                    'SD': 'America/Chicago',
                    'ND': 'America/Chicago',
                    'MN': 'America/Chicago',
                    'IA': 'America/Chicago',
                    'MO': 'America/Chicago',
                    'AR': 'America/Chicago',
                    'LA': 'America/Chicago',
                    'MS': 'America/Chicago',
                    'AL': 'America/Chicago',
                    'FL': 'America/New_York',
                    'GA': 'America/New_York',
                    'SC': 'America/New_York',
                    'NC': 'America/New_York',
                    'VA': 'America/New_York',
                    'WV': 'America/New_York',
                    'OH': 'America/New_York',
                    'PA': 'America/New_York',
                    'NY': 'America/New_York',
                    'ME': 'America/New_York',
                    'VT': 'America/New_York',
                    'NH': 'America/New_York',
                    'MA': 'America/New_York',
                    'RI': 'America/New_York',
                    'CT': 'America/New_York',
                    'NJ': 'America/New_York',
                    'DE': 'America/New_York',
                    'MD': 'America/New_York',
                    'DC': 'America/New_York',
                    'KY': 'America/New_York',
                    'TN': 'America/New_York',
                    'IN': 'America/New_York',
                    'MI': 'America/New_York',
                    'IL': 'America/Chicago',
                    'WI': 'America/Chicago',
                    'HI': 'Pacific/Honolulu',
                    'AK': 'America/Anchorage'
                };

                const state = this.$root.property.state.toUpperCase();
                if (stateToTimezone[state]) {
                    timeZone = stateToTimezone[state];
                }
            }

            return timeZone;
        },
        updateQuestion() {
            const formattedDate = this.formatDate(this.datetime.selectedDate);
            const timeZone = this.getPropertyTimezone();
            const timeZoneAbbr = this.getTimezoneAbbreviation(timeZone);

            this.form.question = `I would like to schedule an appointment on ${formattedDate} at ${this.datetime.selectedTime} ${timeZoneAbbr}.`;
        },
        getTimezoneName(timeZone) {
            const timezoneNames = {
                'America/New_York': 'Eastern Time',
                'America/Chicago': 'Central Time',
                'America/Denver': 'Mountain Time',
                'America/Phoenix': 'Mountain Standard Time',
                'America/Los_Angeles': 'Pacific Time',
                'America/Anchorage': 'Alaska Time',
                'Pacific/Honolulu': 'Hawaii-Aleutian Standard Time'
            };

            return timezoneNames[timeZone] || 'Eastern Time';
        },
        async contactAgent(event) {
            event.preventDefault()
            let data;
            if (this.validateForm()) {
                this.submittingForm = true
                const response = await fetch(`/api/backend.cfc?method=scheduleConnectAppointment&propertyId=${this.$root.propertyId}${this.$root.isDevelopment?'&development=1':''}`, {
                    method: 'POST',
                    body: JSON.stringify(this.form)
                })
                data = await response.json()

                if (data.success == true) {
                    this.messageColor = { 'text-success': true }
                    this.submittingForm = false
                    this.message = 'A Realtor will contact you shortly.'
                    this.showingMessage = true
                    setTimeout(() => {
                        this.showingMessage = false
                        this.$root.hideModalById('appointmentModal')
                    }, 500)

                    let fullname = this.form.fullname
                    let phone = this.form.phone
                    let email = this.form.email

                    this.clearForm()
                    this.success = true;
                    // this.$root.showToast({message: 'A Realtor will contact you shortly.', color: 'success'})
                    // this.$root.hideModalById('appointmentModal')

                    let names = fullname.split(' ')
                    let firstName = names[0]
                    let lastName = names.length > 1 ? names[names.length-1] : ''
                    this.$root.submitForm(firstName, lastName, phone, email)
                }else {
                    this.messageColor = { 'text-danger': true }
                    this.submittingForm = false
                    this.message = 'Failed to send communincation please try again.'
                    this.showingMessage = true
                    setTimeout(() => {
                        this.showingMessage = false
                    }, 1000)
                    // this.$root.showToast({message: 'Failed to send communication please try again.', color: 'danger'})
                    // this.$root.hideModalById('appointmentModal')
                }
            }
        },
        validateForm() {
            if (
                this.form.fullname !== '' &&
                this.form.phone !== '' &&
                this.form.email !== '' &&
                this.form.question !== ''
            ) {
                return true
            }
            else return false
        },
        clearForm() {
            this.form.fullname = ''
            this.form.phone = ''
            this.form.email = ''
            this.form.question = ''
        }
    },
    watch: {
        datetime: {
            handler() {
                this.updateQuestion();
            },
            deep: true,
            immediate: true
        }
    }
}
app.component('property-appointmentmodal', objPropertyAppointmentmodal); const objPropertyContact = { template: `
    <div class="contact" id="agent-contact">
        <div class="container-lg py-5">
            <div class="row contact-row align-items-center justify-content-between">
                <div class="col-sm-6">
                    <div v-if="!user" class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <div v-if="user" class="agent-details">
                        <div v-if="!$root.property && !$root.propertyDataFetched" class="skeleton-text"></div>
                        <p v-else class="property-address mb-4">{{ $root.property.address }}, {{ $root.property.city }}, {{ $root.property.state }} {{ $root.property.zip }}</p>
                        <h2 class="rep-label mb-4">Represented by:</h2>
                        <div class="agent-row d-flex align-items-center">
                            <div v-if="!img">
                                <div class="agent-photo skeleton-image" @click="navigateToAgentProfile" style="cursor: pointer;"></div>
                            </div>
                            <img v-else :src="img" class="agent-photo" @click="navigateToAgentProfile" style="cursor: pointer;">
                            <div>
                                <p class="name mb-3">{{ user.firstName }} {{ user.lastName }}</p>
                                <p class="mb-2">{{ user.title }}</p>
                                <p class="mb-2">{{  user.mlsLicense }}</p>
                                <p class="mb-2"><a style="text-decoration: none; color: #fff;" :href="'tel:' + user.phoneNumber">{{ $root.formatPhone(user.phoneNumber) }}</a></p>
                                <p><a style="text-decoration: none; color: #fff;" :href="'mailto:' + user.emailAddress">Email Me</a></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 d-flex justify-content-end">
                    <div v-if="!success">
                        <form class="agent-contact-form" @submit="contactAgent($event)">
                            <div class="d-flex align-items-center justify-content-between">
                                <h2 class="contact-form-title">Get in Touch</h2>
                                <img class="contact-logo" :src="$root.theme.verticalLogo" :alt="$root.theme.name">
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-6">
                                    <div class="contact-form-item">
                                        <label>First Name *</label>
                                        <input type="text" class="contact-field" v-model="form.firstName" required>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="contact-form-item">
                                        <label>Last Name *</label>
                                        <input type="text" class="contact-field" v-model="form.lastName" required>
                                    </div>
                                </div>
                            </div>
                            <div class="contact-form-item mb-3">
                                <label>Phone Number *</label>
                                <input type="text" class="contact-field" v-model="form.phone" required>
                            </div>
                            <div class="contact-form-item">
                                <label>Email *</label>
                                <input type="text" class="contact-field" v-model="form.email" required>
                            </div>
                            <button type="submit" :style="$root.buttonPrimaryStyle" class="button-primary w-100 mt-5">Send Inquiry</button>
                            <p class="form-disclaimer">* By submitting this form you opt-in to receive text messages and emails.</p>
                            <div v-if="!submittingForm && showingMessage" class="form-message" :class="messageColor">{{ message }}</div>
                        </form>
                    </div>
                    <div v-else class="agent-contact-form">
                        <h3 class="text-success">Success!</h3>
                        <p>Your information has been submitted. An agent will contact you shortly.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
` ,

    props: {
        user: {
            type: Object,
            required: true,
            default: {}
        }
    },
    data(){
        return {
            form: {
                firstName: '',
                lastName: '',
                phone: '',
                email: '',
            },
            submittingForm: false,
            showingMessage: false,
            messageColor: { 'text-danger': true },
            s3BaseUrl: 'https://lptprint.s3.amazonaws.com/',
            success: false
        }
    },
    methods: {
        async contactAgent(e) {
            e.preventDefault()
            let data;
            if(this.validateForm()) {
                try {
                    const response = await fetch(`/api/backend.cfc?method=contactConnectAgent&userId=${this.$root.userId}${this.$root.isDevelopment?'&development=1':''}`, {
                        method: 'POST', 
                        body: JSON.stringify(this.form)
                    });
                    data = await response.json();

                    if (data.success) {
                        this.clearForm();
                        this.success = true;
                        this.$root.showToast({ message: 'Thank you! An agent will contact you shortly.', color: 'success' });
                    } else {
                        this.$root.showToast({ message: 'Failed to send message. Please try again.', color: 'danger' });
                        this.messageColor = { 'text-danger': true }
                        this.submittingForm = false
                        this.message = 'Failed to send communincation please try again.'
                        this.showingMessage = true
                        setTimeout(() => {
                            this.showingMessage = false
                        }, 1000)
                    }
                } catch (error) {
                    console.error('Error submitting form:', error);
                    this.$root.showToast({ message: 'An error occurred. Please try again.', color: 'danger' });
                }
            }
        },
        validateForm() {
            if (
                this.form.firstName !== '' &&
                this.form.lastName !== '' &&
                this.form.phone !== '' &&
                this.form.email !== ''
            ) {
                return true
            }
            else return false
        },
        clearForm() {
            this.form.firstName = ''
            this.form.lastName = ''
            this.form.phone = ''
            this.form.email = ''
            this.form.question = ''
        },
        navigateToAgentProfile() {
            if (this.$root.userId) {
                this.$router.push({
                    path: `/${this.$root.userId}${this.$root.isDevelopment?'?development=1':''}`
                });
            }
        }
    },
    computed: {
        img(){
            if(typeof this.user.userPhoto !== 'undefined' && this.user.userPhoto != ''){
                return this.s3BaseUrl + this.user.userPhoto;
            }
            else if(typeof this.user.imgurl !=='undefined' && this.user.imgurl != 'https://cdn.filestackcontent.com/' && this.user.imgurl != ''){
                return this.user.imgurl;
            }
            else{
                return '/images/default-agent-photo.svg'
            }
        }
    }
}
app.component('property-contact', objPropertyContact); const objPropertyHero = { template: `
    <div>
        <div class="property-hero">
            <div class="hero-container">
                <div v-if="!heroImage" class="skeleton-image hero-background">
                    <div class="d-flex justify-content-center" style="padding-top: 20%;">
                        <div class="spinner-border" role="status">
                            <span class="sr-only"></span>
                        </div>
                    </div>
                </div>
                <img v-else :src="heroImage" class="hero-background">
                <div class="overlay">
                    <div class="container-lg">
                        <div class="info container-lg">
                            <h2 class="price mb-3" :style="priceFontStyle">{{ formattedPrice }}</h2>
                            <h1 class="address">{{ formattedAddress }}</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-lg mt-4" v-if="$root.isMobile">
            <h1 style="color: #000;" class="address text-center">{{ formattedAddress }}</h1>
            <hr>
            <p class="text-center">Offered at:</p>
            <h2 class="price mb-3" :style="priceFontStyle">{{ formattedPrice }}</h2>
            <hr>
        </div>
    </div>
` ,

        props: {
            propertyParsedPhotos: {
                type: Array,
                required: true,
                default: []
            }
        },
        computed: {
            heroImage() {
                return this.propertyParsedPhotos[0];
            },
            formattedPrice() {
                return this.$root.property.price && `$${this.$root.numberWithCommas(this.$root.property.price)}`
            },
            formattedAddress() {
                let vm = this;
                if(vm.$root.property.address && vm.$root.property.city && vm.$root.property.state && vm.$root.property.zip) {
                    return `${vm.$root.property.address}, ${vm.$root.property.city} , ${vm.$root.property.state} ${vm.$root.property.zip}`
                }
            },
            priceFontStyle() {
                if(this.$root.isMobile && this.$root.property.price) {
                    let string = this.$root.property.price.toString()
                    let length = string.length;
                    if(length >= 8 ) {
                        return { fontSize: "calc(50px + 1vw)" }
                    } else {
                        return { fontSize: "calc(60px + 1vw)"}
                    }
                }
            }
        }
    }
app.component('property-hero', objPropertyHero); const objPropertyNeighborhood = { template: `
    <div class="container-lg text-center py-5">
        <h2 class="section-header mb-3">What's Nearby</h2>
        <div class="row">
            <div class="place col-sm-2">
                <i class="bi bi-cup-hot"></i>
                <p class="name">Coffee</p>
                <p class="distance">{{ nrData.COFFEESHOPMILES }}</p>
            </div>
            <div class="place col-sm-2">
                <i class="bi bi-hospital"></i>
                <p class="name">Hospital</p>
                <p class="distance">{{ nrData.HOSPITALMILES }}</p>
            </div>
            <div class="place col-sm-2">
                <i class="bi bi-airplane-engines"></i>
                <p class="name">Airport</p>
                <p class="distance">{{ nrData.AIRPORTMILES }}</p>
            </div>
            <div class="place col-sm-2">
                <img src="/images/dry-cleaners.svg" alt="Dry Cleaners">
                <p class="name">Dry Cleaners</p>
                <p class="distance">{{ nrData.DRYCLEANERSMILES }}</p>
            </div>
            <div class="place col-sm-2">
                <i class="bi bi-fuel-pump"></i>                
                <p class="name">Gas Station</p>
                <p class="distance">{{ nrData.GASMILES }}</p>
            </div>
            <div class="place col-sm-2">
                <i class="bi bi-cart2"></i>                
                <p class="name">Grocery Store</p>
                <p class="distance">{{ nrData.GROCERYSTOREMILES }}</p>
            </div>
            <div class="place col-sm-2">
                <img src="/images/gym.svg" alt="Gym">
                <p class="name">Gym</p>
                <p class="distance">{{ nrData.GYMMILES }}</p>
            </div>
            <div class="place col-sm-2">
                <i class="bi bi-film"></i>                
                <p class="name">Movie Theater</p>
                <p class="distance">{{ nrData.MOVIETHEATERMILES }}</p>
            </div>
            <div class="place col-sm-2">
                <i class="bi bi-book"></i>                
                <p class="name">Library</p>
                <p class="distance">{{ nrData.PUBLICLIBRARYMILES }}</p>
            </div>
            <div class="place col-sm-2">
                <i class="bi bi-prescription"></i>                
                <p class="name">Pharmacy</p>
                <p class="distance">{{ nrData.PHARMACYMILES }}</p>
            </div>
            <div class="place col-sm-2">
                <i class="bi bi-mailbox-flag"></i>                
                <p class="name">Post Office</p>
                <p class="distance">{{ nrData.POSTOFFICEMILES }}</p>
            </div>
            <div class="place col-sm-2">
                <i class="bi bi-cash-coin"></i>                
                <p class="name">ATM</p>
                <p class="distance">{{ nrData.ATMMILES }}</p>
            </div>
        </div>
        <div v-if="$root.nrData?.restauranttotal && $root.nrData.restauranttotal > 0" class="restaurants mb-4">
            <h2 class="section-header">Restaurants in the Area</h2>
            <div class="d-flex justify-content-between flex-wrap restaurants">
                <div class="restaurant d-flex flex-column align-items-center text-center" v-for="(restaurant, index) in nrRestaurants" :key="index">
                    <p class="count">{{ restaurant.COUNT }}</p>
                    <p class="label">{{ restaurant.DISPLAYTEXT }}</p>
                </div>
            </div>
        </div>
    </div>
` ,

        props: {
            nrData: {
                type: Object,
                required: true,
                default: {}
            },
            nrRestaurants: {
                type: Array,
                required: true,
                default: []
            }
        },
        data() {
            return {
            }
        },
    }
app.component('property-neighborhood', objPropertyNeighborhood); const objPropertyOverview = { template: `
    <div class="container-lg pt-5">
        <h2 v-if="overviewsAvailable.length > 0 || property.longDesc" class="section-header">Overview</h2>
        <div v-if="overviewsAvailable.length > 0">
            <div class="d-flex overview-info pb-4">
                <div v-for="(overview, index) in overviewsAvailable" :key="index">
                    <p><span v-if="!$root.isMobile && index > 0" class="mx-3">|</span>{{ overview }}</p>
                </div>
            </div>
            <hr>
        </div>
        <div class="pt-4" v-if="property.longDesc">
            <p class="pb-4" style="white-space: pre-wrap;">{{  property.longDesc }}</p>
            <hr>
        </div>
    </div>
` ,

    props: {
        property: {
            type: Object,
            required: true,
            default: {}
        }
    },
    computed: {
        overviewsAvailable() {
            let overviews = []

            if (this.property.price && !this.$root.isMobile) overviews.push(`${this.formattedPrice}`)
            if (this.property.bedrooms) overviews.push(`${this.property.bedrooms} Bedrooms`)
            if (this.property.bathrooms) overviews.push(`${this.property.bathrooms} Bathrooms`)
            if (this.property.sqft) overviews.push(`${this.property.sqft} SQ FT`)
            if (this.property.lotSqft) overviews.push(`${this.property.lotSqft} LOT SQ FT`)

            return overviews
        },
        formattedPrice() {
            return `$${this.$root.numberWithCommas(this.$root.property.price)}`
        },
    }
}
app.component('property-overview', objPropertyOverview); const objPropertyPhotos = { template: `
    <div class="container-lg py-4">
        <h2 class="section-header">Photos</h2>
        <div v-if="!$root.propertiesDataFetched && $root.propertyParsedPhotos.length == 0" class="row">
            <div class="col-sm-3">
                <div class="skeleton-image"></div>
            </div>
            <div class="col-sm-3">
                <div class="skeleton-image"></div>
            </div>
            <div class="col-sm-3">
                <div class="skeleton-image"></div>
            </div>
            <div class="col-sm-3">
                <div class="skeleton-image"></div>
            </div>
        </div>
        <div v-else class="row">
            <div v-for="(photo, index) in $root.propertyParsedPhotos" class="col-sm-3" :key="index">
                <img :src="photo" alt="property-photo" class="gallery-photo" @click="openPhotoViewer(index)" style="cursor: pointer;">
            </div>
        </div>

        <property-photoviewer
            :show="showPhotoViewer"
            :photos="$root.propertyParsedPhotos"
            :initial-index="selectedPhotoIndex"
            @close="closePhotoViewer"
        />
    </div>
` ,

    data() {
        return {
            showPhotoViewer: false,
            selectedPhotoIndex: 0
        }
    },
    methods: {
        openPhotoViewer(index) {
            this.selectedPhotoIndex = index
            this.showPhotoViewer = true
        },
        closePhotoViewer() {
            this.showPhotoViewer = false
        }
    }
}
app.component('property-photos', objPropertyPhotos); const objPropertyPhotoviewer = { template: `
    <div v-if="show" class="photo-viewer-modal" @click.self="close">
        <div class="modal-content">
            <button class="close-button" @click="close">&times;</button>
            <button class="nav-button prev" @click="prevPhoto" v-if="currentIndex > 0">&lt;</button>
            <button class="nav-button next" @click="nextPhoto" v-if="currentIndex < photos.length - 1">&gt;</button>
            <img :src="photos[currentIndex]" alt="property-photo" class="modal-photo">
            <div class="photo-counter">{{ currentIndex + 1 }} / {{ photos.length }}</div>
        </div>
    </div>
` ,

    name: 'photoviewer',
    props: {
        show: {
            type: Boolean,
            required: true
        },
        photos: {
            type: Array,
            required: true
        },
        initialIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            currentIndex: this.initialIndex
        }
    },
    methods: {
        close() {
            this.$emit('close')
        },
        prevPhoto() {
            if (this.currentIndex > 0) {
                this.currentIndex--
            }
        },
        nextPhoto() {
            if (this.currentIndex < this.photos.length - 1) {
                this.currentIndex++
            }
        }
    },
    watch: {
        initialIndex(newVal) {
            this.currentIndex = newVal
        }
    }
}
app.component('property-photoviewer', objPropertyPhotoviewer);