const objGlobalApplycard = { template: `<div id="template-global-applycard" style="display:contents;">
    <div class="card shadow apply-card">
        <div class="card-body">
            <h3 class="apply-card-h3" :class="$root.colorThemeText">Request Your Homebuyer Consultation Today!</h3>
            <form id="applyForm" ref="applyForm" @submit="submitContact($event)">
                <input type="text" id="applyFirstname" class="form-control apply-card-input" placeholder="First Name" v-model="form.firstname" required />
                <input type="text" id="applyLastname" class="form-control apply-card-input" placeholder="Last Name" v-model="form.lastname" required />
                <input type="tel" id="applyPhone" class="form-control apply-card-input" placeholder="Phone Number" v-model="form.phone" required />
                <input type="email" id="applyEmail" class="form-control apply-card-input" placeholder="Email" v-model="form.email" required />
            </form>
            <button v-if="!submittingForm && !showingMessage" type="submit" class="btn btn-hover-shadow apply-card-button" :class="$root.colorThemeBtn" form="applyForm" value="Submit">Submit</button>
            <div v-if="submittingForm && !showingMessage" class="form-loading">
                <div class="form-submit-loader"></div>
            </div>
            <small style="font-size:xs-small;">* By submitting this form you opt-in to recieve text messages and emails.</small>
            <div v-if="!submittingForm && showingMessage" class="form-message" :class="messageColor">{{ message }}</div>

        </div>
    </div>
</div>` ,

    data(){
        return {
            form: {
                firstname: '',
                lastname: '',
                phone: '',
                email: ''
            },
            submittingForm: false,
            showingMessage: false,
            messageColor: { 'text-danger': true },
            message: ''
        }
    },
    methods: {
        async submitContact(event) {
            event.preventDefault()

            if (this.validateForm()) {
                
                this.submittingForm = true
                let method;
                if(this.$root.isConnect){
                    method = 'contactConnectAgent'
                }
                else{
                    method = 'contactAgent'
                }
                const response = await fetch(`/api/backend.cfc?method=${method}&userId=${this.$root.$route.params.userId}${this.$root.isDevelopment?'&development=1':''}`, {
                    method: 'POST',
                    body: JSON.stringify(this.form)
                })
                let data = await response.json()
                if (data.success === true) {
                    this.messageColor = { 'text-success': true }
                    this.submittingForm = false
                    this.message = 'Thank you! Your information has been received.'
                    this.showingMessage = true
                    setTimeout(() => {
                        this.showingMessage = false
                    }, 5000)
                    let firstName = this.form.firstname
                    let lastName = this.form.lastname
                    let phone = this.extractNumber(this.form.phone)
                    let email = this.form.email
                    this.clearForm()
                    // this.$root.showToast({message: 'Thank you! Your information has been received.', color: 'success'})
                    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
                    }, 5000)
                    // this.$root.showToast({message: 'Failed to send communincation please try again.', color: 'danger'})
                }
            }
        },
        extractNumber(phone){
            let numberPattern = /\d+/g;
            let numbersArray = phone.match(numberPattern);
            let extractedNumbers = numbersArray ? numbersArray.join('') : '';
            return extractedNumbers;
        },
        validateForm() {
            let isValid = false;
            if (
                this.form.firstname !== '' &&
                this.form.lastname !== '' &&
                this.form.phone !== '' &&
                this.form.email !== ''
            ){
                let phoneRegex = /^(1?)(-| ?)(\()?([0-9]{3})(\)|-| |\)-|\) )?([0-9]{3})(-| )?([0-9]{4}|[0-9]{4})$/;
                if(!phoneRegex.test(this.form.phone)){
                    this.messageColor = { 'text-danger': true }
                    this.submittingForm = false
                    this.message = 'Please Enter a Valid Phone Number!'
                    this.showingMessage = true
                    setTimeout(() => {
                        this.showingMessage = false
                    }, 2000)
                    return false;

                }
                let emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ 
                if(emailRegex.test(this.form.emailRegex)){
                    this.messageColor = { 'text-danger': true }
                    this.submittingForm = false
                    this.message = 'Please Enter a Valid Email Address!'
                    this.showingMessage = true;
                    setTimeout(() => {
                        this.showingMessage = false;
                    }, 2000)
                    return false;
                }
                return true;   
            }
            else return false
        },
        clearForm() {
            this.form.firstname = ''
            this.form.lastname = ''
            this.form.phone = ''
            this.form.email = ''
        }
    }
}
app.component('global-applycard', objGlobalApplycard); const objGlobalFooter = { template: `<div id="template-global-footer" style="display:contents;">
    <div id="footer" class="py-5">
        <div class="container-lg">
            <div class="px-lg-5">
                <p class="mt-2 mb-3">{{ $root.user.userDisclaimer ? $root.user.userDisclaimer : $root.user.printDisclaimer }}</p>
                <global-separator/>
                <div class="row">
                    <div class="col">
                        <img class="float-end" alt="Equal House Opportunity" src="/assets/images/equal-housing.jpg" width="67" height="69"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>` ,


}
app.component('global-footer', objGlobalFooter); const objGlobalLeadpopup = { template: `<div id="template-global-leadpopup" style="display:contents;">
    <div class="modal fade" id="leadModal" tabindex="-1" aria-labelledby="leadLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered p-3">
            <div class="modal-content appointment-modal-content">
                <div class="modal-body">
                    <div class="d-flex" style="flex-direction:column;">
                        <h5><b>Listing Agent Direct Property Information</b></h5>
                        <p style="line-height:1.4;font: 17px Roboto; font-weight:500; padding:5px;">
                            This site is not published from Public MLS Data and is provided Directly by the Listing Agent. Enter your name and email and we will send you the listing agent's direct contact information right ot your inbox.
                        </p>
                    </div>
                    <form id="captureForm" ref="captureForm">
                        <label style="font: 15px Roboto;">Full Name</label>
                        <input type="text" id="modalFullname" class="form-control appointment-modal-input" placeholder="Full Name" name="fullname" v-model="form.fullname" required />
                        <label style="font: 15px Roboto;">Email</label>
                        <input type="text" id="modalEmail" class="form-control appointment-modal-input" placeholder="Email Address" name="email" v-model="form.email" required />
                    </form>
                    <button v-if="!submittingForm && !showingMessage" @click="saveLead($event)" class="btn btn-hover-shadow appointment-modal-button" :class="$root.colorThemeBtn" form="appointmentContactAgent" value="Submit">Send Me Details</button>
                    <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>
        </div>
    </div>
</div>` ,

    data(){
        return {
            form: {
                fullname: '',
                email: ''
            },
            submittingForm: false,
            showingMessage: false,
            messageColor: { 'text-danger': true },
            message: ''
        }
    },
    methods: {

        async saveLead(event) {
            event.preventDefault()
            let data;
            if (this.validateForm()) {
                this.submittingForm = true
                if(this.$route.path.includes('connect')){
                    const response = await fetch(`/api/backend.cfc?method=saveDigitalLead&propertyId=${this.$root.$route.params.propertyId}&appUserId=${this.$root.$route.params.userId}${this.$root.isDevelopment?'&development=1':''}`, {
                    method: 'POST',
                    body: JSON.stringify(this.form)
                    })
                    data = await response.json()
                }
                if (data.success == true) {
                    this.message = 'Submitted Successfully';
                    this.messageColor = { 'text-success': true };
                    this.submittingForm = false;
                    this.showingMessage = true;
                    setTimeout(() => {
                        this.$root.hideModalById('leadModal')
                    }, 1000)
                    let names = this.form.fullname.split(' ');
                    let firstName = names[0];
                    let lastName = names.length > 1 ? names[names.length-1] : '';
                    let email = this.form.email;
                    this.clearForm();
                }else {
                    this.messageColor = { 'text-danger': true }
                    this.showingMessage = true;
                    this.submittingForm = false
                    this.message = 'Failed to submit.'
                    this.showingMessage = true
                    setTimeout(() => {
                        this.showingMessage = false
                    }, 1000)
                }
            }
        },
        validateForm() {
            if (
                this.form.fullname !== '' &&
                this.form.email !== ''
            ) {
                return true
            }
            else return false
        },
        clearForm() {
            this.form.fullname = ''
            this.form.email = ''
        }
    }
}
app.component('global-leadpopup', objGlobalLeadpopup); const objGlobalMap = { template: `<div id="template-global-map" style="display:contents;">
    <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: '350px'
        },
        showAllProperties: {
            type: Boolean,
            required: false,
            default: false
        }
    },
    data() {
        return {
            accessToken: this.$root.MAPBOX_ACCESS_TOKEN,
            propertyLng: 0,
            propertyLat: 0
        };
    },
    computed: {
        map: function(){
            return new mapboxgl.Map({
                    container: 'mapContainer', // container ID
                    style: 'mapbox://styles/mapbox/light-v9', // style URL
                    center: [this.propertyLng,this.propertyLat], // starting position [lng, lat]
                    zoom: 10 // starting zoom
                });
        },
        nav: function() {
            return new mapboxgl.NavigationControl();
        },
        popup: function() {
            return new mapboxgl.Popup({
                    closeButton: true,
                    closeOnClick: false
                });
        },
        renderMap: function() {
            return this.createMap(this.map, this.nav, this.popup)
        }
    }, 
    methods: {
        createMap(map, nav, popup) {
            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'

            for (var i = 0; i < this.properties.length; i++) {
                let path = ''
                if (this.$root.isConnect) {
                    path = `${this.$root.user.appUserId}/property/${this.properties[i].propertyId}`
                }
                else {
                    path = `${this.$root.user.userId}/property/${this.properties[i].propertyId}`
                }
                let htmlTemplate = `
                    <div onclick="goToPage('${path}', '${this.$root.$route.query.ca}')" 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>
                        </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.$root.localUrlHrefBase}#/${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)]
                    }
                }

                if (!this.showAllProperties) {
                    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)
                    }
                }
            }

            let showAllProperties = this.showAllProperties

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

                map.loadImage('/assets/images/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);
                });

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

                if (showAllProperties) {
                    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
        this.renderMap
    }
}
app.component('global-map', objGlobalMap); const objGlobalNavbar = { template: `<div id="template-global-navbar" style="display:contents;">
    <nav class="navbar fixed-top navbar-light bg-light shadow top-navbar" role="navigation">
        <div id="top-nav-container" class="container-fluid justify-content-center">
            <a class="navbar-brand me-5" v-if="dataLoaded">
                <div class="logo-container">
                    <img v-if="!$root.isConnect" :src="'https://lptprint.s3.amazonaws.com/' + logo" alt="" class="img-fluid logo" @click="$root.goToRoute('/'+$root.user.userId)">
                    <img v-if="$root.isConnect" :src="logo" alt="" class="img-fluid logo" @click="$root.goToRoute('/'+$root.user.appUserId)">
                </div>
            </a>
            <div id="top-nav-search-container" class="d-flex">
                <input id="top-nav-search" class="form-control me-4 shadow-sm" type="search" placeholder="Search Featured Listings" aria-label="Search" v-model="searchString" @keyup.enter="startSearch()">
                <i class="bi bi-search search-icon" :class="$root.colorThemeText" @click="startSearch()"></i>
                <button v-if="$root.isConnect" id="top-nav-search-all" class="btn btn-hover-shadow me-4" :class="$root.colorThemeBtn" @click="$root.goToRoute('/'+$root.user.appUserId+'/search/all')">Search All Listings</button>
                <button v-if="!$root.isConnect" id="top-nav-search-all" class="btn btn-hover-shadow me-4" :class="$root.colorThemeBtn" @click="$root.goToRoute('/'+$root.user.userId+'/search/all')">Search All Listings</button>
            </div>
            <button id="top-navbar-hamburger" class="navbar-toggler collapsed d-none" type="button" data-bs-toggle="collapse" data-bs-target="#top-navbar-collapse" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="toggler-icon top-bar"></span>
                <span class="toggler-icon middle-bar"></span>
                <span class="toggler-icon bottom-bar"></span>
            </button>
            <div class="collapse navbar-collapse py-5 py-lg-0 shadow" id="top-navbar-collapse">
                <div class="container-lg">
                    <ul class="navbar-nav">
                         <div class="d-flex" v-if="!$root.isConnect">
                            <input id="top-nav-search-collapsed" class="form-control me-4 shadow-sm" type="search" placeholder="Search Featured Listings" aria-label="Search" v-model="searchString" @keyup.enter="startSearch()">
                            <i class="bi bi-search search-icon" :class="$root.colorThemeText" @click="startSearch()"></i>
                            <button id="top-nav-search-all-collapsed" class="btn btn-hover-shadow me-4" :class="$root.colorThemeBtn" @click="$root.goToRoute('/'+$root.user.userId+'/search/all')">Search All Listings</button>
                        </div> 
                        <div class="d-flex" v-if="$root.isConnect">
                            <input id="top-nav-search-collapsed" class="form-control me-4 shadow-sm" type="search" placeholder="Search Featured Listings" aria-label="Search" v-model="searchString" @keyup.enter="startSearch()">
                            <i class="bi bi-search search-icon" :class="$root.colorThemeText" @click="startSearch()"></i>
                            <button id="top-nav-search-all-collapsed" class="btn btn-hover-shadow me-4" :class="$root.colorThemeBtn" @click="$root.goToRoute('/'+$root.user.appUserId+'/search/all')">Search All Listings</button>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
</div>` ,

    data(){
        return {
            searchString: '',
            dataLoaded: false
        }
    },
    props: {
        logo: {
            type: String,
            required: true,
            default: ''
        }
    },
    methods: {
        startSearch() {
            let parsedSearchString = this.searchString.trim()
            parsedSearchString = parsedSearchString.replaceAll(/[^A-Za-z0-9\s]/g, '')
            parsedSearchString = parsedSearchString.replaceAll(/\s+/g, '%20')
            if(!this.$root.isConnect){
                let path = `${this.$root.user.userId}/search/${parsedSearchString}`
                this.$root.goToRoute('/'+path)
            }
            else if(this.$root.isConnect){
                let path = `${this.$root.user.appUserId}/search/${parsedSearchString}`
                this.$root.goToRoute('/'+path)
            }
        }
    },
    mounted(){
        this.dataLoaded = true;
    }
}
app.component('global-navbar', objGlobalNavbar); const objGlobalSeparator = { template: `<div id="template-global-separator" style="display:contents;">
    <div class="separator"></div>
</div>` ,


}
app.component('global-separator', objGlobalSeparator); const objGlobalSimilarCard = { template: `<div id="template-global-similar-card" style="display:contents;">
    <div class="listing-card col-xs-12 col-sm-6 col-md-4">
        <div class="card-banner-wrapper">
            <div class="card-banner-wrapper-inner">
                <div class="card-banner d-flex justify-content-center align-items-center shadow">
                    <img class="me-2" :src="bannerMarkerSource" height="18" width="18">
                    <span class="card-banner-text">{{property.soldDate == '' ? 'For Sale' : 'Sold' }}</span>
                </div>
            </div>
        </div>
        <div class="card-hero">
            <div :id="'listingCards-' + property.propertyId" class="carousel slide" data-interval="false" data-wrap="false" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div v-for="(photo,index) in propertyImagesResized" :key="index" class="carousel-item" :class="{ active: index == 0 }">
                        <img :src="photo == '' || photo.slice(-18) == '.s3.amazonaws.com/' ? '/assets/images/placeholder_noupload.jpg' : photo" class="d-block w-100" alt="...">
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" :data-bs-target="'#listingCards-' + property.propertyId" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" :data-bs-target="'#listingCards-' + property.propertyId" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
        <div class="card-info-container" @click="handleRoute(property.propertyId)">
            <div class="left">
                <div class="price">
                    <span>Listing Price:</span><br><span class="actual-price">{{ formattedPrice }}</span>
                </div>
                <div class="address">
                    <a>
                        <span>{{ property.address }}</span>
                        <br>
                        <span class="city-state-zip">{{ property.city }}, {{ property.state }} {{ property.zip }}</span>
                    </a>
                </div>
            </div>
            <div class="right">
                <div class="beds my-1">
                    <img src="/assets/images/bedicon_blue.svg" height="20" width="20" class="me-1" :class="$root.svgColorThemeFilter">
                    {{ property.bedrooms }} bd
				</div>
				<div class="baths my-1">
                    <img src="/assets/images/showericon_blue.svg" height="20" width="20" class="me-1" :class="$root.svgColorThemeFilter">
                    {{ property.bathrooms }} ba
				</div>
				<div class="footage my-1">
                    <img src="/assets/images/sqfticon_blue.svg" height="20" width="20" class="me-1" :class="$root.svgColorThemeFilter">
                    {{ property.sqft }} sq ft
				</div>
            </div>
        </div>
    </div>
</div>` ,

    props: {
        property: {
            type: Object,
            required: true,
            default: {}
        }
    },
    data(){
        return{
            fileStackBaseUrl: 'https://process.filestackapi.com',
            fileStackKey: this.$root.fileStackKey,
            resizeWidth: 600,
            resizeHeight: 380
        }
    },
    methods:{
        handleRoute(propertyId){
            if(this.$root.isConnect){
                this.$root.goToRoute('/'+this.$root.user.appUserId+'/property/'+propertyId)
            }
            else{
                this.$root.goToRoute('/'+this.$root.user.userId+'/property/'+propertyId)
            }
        }
    },
    computed: {
        formattedPrice() {
            return `$${this.$root.numberWithCommas(this.property.price)}`
        },
        bannerMarkerSource() {
            if (this.$root.$route.params.propertyId) return '/assets/images/rounded-dark.png'
            else if (this.property.soldDate == '') return '/assets/images/house.png'
            else return '/assets/images/rounded-dark.png'
        },
        propertyImagesResized(){
            let arr = [];
            for(var i = 0; i<this.property.photos.length; i++){
                arr.push(`${this.fileStackBaseUrl}/${this.fileStackKey}/resize=width:${this.resizeWidth},height:${this.resizeHeight}/${this.property.photos[i]}`)
            }
            return arr;
        }
    }
}
app.component('global-similar-card', objGlobalSimilarCard); const objGlobalSimilarContainer = { template: `<div id="template-global-similar-container" style="display:contents;">
    <div class="mb-4">
        <div class="row" v-if="$root.$route.params.searchString">
            <div class="col-xs-12" v-for="(property,index) in $root.properties" :key="index">
                <global-similar-card :property="property"/>
            </div>
        </div>
        <div class="row" v-else-if="forPropertyPage">
            <div class="col-xs-12 col-md-6 col-xxl-4" v-for="(property,index) in filteredProperties" :key="index">
                <global-similar-card :property="property" v-if="index < 3"/>
            </div>
        </div>
        <div class="row" v-else>
            <div class="col-xs-12 col-md-6 col-xxl-4" v-for="(property,index) in $root.properties" :key="index">
                <global-similar-card :property="property"/>
            </div>
        </div>
    </div>
</div>` ,

    props: {
        forPropertyPage: {
            type: Boolean,
            required: false,
            default: false
        }
    },
    computed: {
        filteredProperties() {
            let propertyId = this.$root.property.propertyId ? this.$root.property.propertyId : this.$root.property.marketingPropertyId
            if (this.$root.property.propertyId && this.$root.properties[0]) {
                return this.$root.properties.filter(function(item) {
                    return item.propertyId !== propertyId
                })
            }
            else if(this.$root.property.marketingPropertyId && this.$root.properties[0]){
                return this.$root.properties.filter(function(item) {
                    return item.propertyId !== propertyId
                })
            } 
            else return []
        }
    }
}
app.component('global-similar-container', objGlobalSimilarContainer); const objGlobalToastAlert = { template: `<div id="template-global-toast-alert" style="display:contents;">
    <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>
</div>` ,

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

    
}
app.component('global-toast-container', objGlobalToastContainer); const objLayouts404 = { template: `<div id="template-layouts-404" style="display:contents;">
    <div>
        <h2 style="text-align:center;margin-top:15px;">Looks like you are lost. Check URL again.</h2>
        <img src="/assets/images/404.jpg" style="margin:0 auto;display:block;max-width:100%;height:auto;">
    </div>
</div>` ,

}
app.component('layouts-404', objLayouts404); const objLayoutsHome = { template: `<div id="template-layouts-home" style="display:contents;">
    <div class="container py-3">
        <img class="img-responsive" width="250" src="assets/images/listinginfo-logo.png" style="display: block; margin: 0 auto;" alt="logo" />
        <h2 class="text-center">Digital Marketing Done Right!</h2>
        <p>In today's competitive market, the modern real estate agent must be ready to present a comprehensive digital marketing strategy that goes above and beyond the MLS. When a potential client asks what your plan to market their home online is, <b>what are you going to say?</b></p>
        <p><b>With listinginfo.co's Listing Exposure Digital Campaign, you will receive:</b></p>
        <b>-5 Property-Specific Digital Ads</b>
        <p>All ads are designed to feature the seller's home and directs people to your listing's unique website, where every click represents a lead that doesn't have to be shared with any other listing.</p>
        <b>-2 Weeks of Geotargeting</b>
        <p>Each digital ad you run will advertise your seller's home on every device within a 15-mile radius of the property. For maximum exposure, all of our marketing is optimized to be mobile-friendly.</p>
        <b>-2 Weeks of Follow-Up Retargeting</b>
        <p>Our campaigns use tracking pixels to retarget your ads and register approximately 10 impressions per user, building property recognition through repetition.</p>
        <b>-Easy to Read Infographic Reports</b>
        <p>Reports show how many ads were shown, how many times they were displayed, how many websites they were shown on—everything you need to show sellers the full scope of your successful marketing plan.</p>
        <h2 class="text-center">All campaigns guaranteed to register a minimum of 75 clicks and 15,000 impressions!</h2>
        <p class="text-center">*Because this campaign targets non real-estate related websites it is NOT designed to capture leads.</p>
        <p class="text-center">1400 S International Parkway Suite 1020, Lake Mary, FL 32746</p>
        <div class="text-center">
            <router-link to="/privacy">Privacy Policy</router-link>
        </div>
    </div>
</div>` ,


}
app.component('layouts-home', objLayoutsHome); const objLayoutsPrivacy = { template: `<div id="template-layouts-privacy" style="display:contents;">
<div>
    <div class="container">
        <router-link to="/">Go Back</router-link>
    </div>
    <div class="container">
        <h1>Privacy Policy</h1>
        <p>Last updated: November 21, 2016</p>
        <p>Listing Power Tools Inc. ("us", "we", or "our") operates the listinginfo.com website (the "Service").</p>
        <p>This page informs you of our policies regarding the collection, use and disclosure of Personal Information when you use our Service.</p>
        <p>We will not use or share your information with anyone except as described in this Privacy Policy.</p>
        <p>We use your Personal Information for providing and improving the Service. By using the Service, you agree to the collection and use of information in accordance with this policy. Unless otherwise defined in this Privacy Policy, terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, accessible at listinginfo.com</p>
        <p><strong>Information Collection And Use</strong></p>
        <p>While using our Service, we may ask you to provide us with certain personally identifiable information that can be used to contact or identify you. Personally identifiable information may include, but is not limited to, your email address, name, phone number, postal address ("Personal Information").
            We collect this information for the purpose of providing the Service, identifying and communicating with you, responding to your requests/inquiries, servicing your purchase orders, and improving our services.
        </p>
        <p><strong>Log Data</strong></p>
        <p>We may also collect information that your browser sends whenever you visit our Service ("Log Data"). This Log Data may include information such as your computer's Internet Protocol ("IP") address, browser type, browser version, the pages of our Service that you visit, the time and date of your visit, the time spent on those pages and other statistics.</p>
        <p>In addition, we may use third party services such as Google Analytics that collect, monitor and analyze this type of information in order to increase our Service's functionality. These third party service providers have their own privacy policies addressing how they use such information.</p>
        <p><strong>Cookies</strong></p>
        <p>Cookies are files with a small amount of data, which may include an anonymous unique identifier. Cookies are sent to your browser from a web site and transferred to your device. We use cookies to collect information in order to improve our services for you.</p>
        <p>You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent. The Help feature on most browsers provide information on how to accept cookies, disable cookies or to notify you when receiving a new cookie.</p>
        <p>If you do not accept cookies, you may not be able to use some features of our Service and we recommend that you leave them turned on.</p>
        <p><strong>Behavioral Remarketing</strong></p>
        <p>Listing Power Tools Inc. uses remarketing services to advertise on third party web sites to you after you visited our Service. We, and our third party vendors, use cookies to inform, optimize and serve ads based on your past visits to our Service.</p>
        <ul>
            <li>
                <p>Google</p>
                <p>Google AdWords remarketing service is provided by Google Inc.</p>
                <p>You can opt-out of Google Analytics for Display Advertising and customize the Google Display Network ads by visiting the Google Ads Settings page: http://www.google.com/settings/ads</p>
                <p>Google also recommends installing the Google Analytics Opt-out Browser Add-on - https://tools.google.com/dlpage/gaoptout - for your web browser. Google Analytics Opt-out Browser Add-on provides visitors with the ability to prevent their data from being collected and used by Google Analytics.</p>
                <p>For more information on the privacy practices of Google, please visit the Google Privacy & Terms web page: http://www.google.com/intl/en/policies/privacy/</p>
            </li>
            <li>
                <p>Twitter</p>
                <p>Twitter remarketing service is provided by Twitter Inc.</p>
                <p>You can opt-out from Twitter's interest-based ads by following their instructions: https://support.twitter.com/articles/20170405</p>
                <p>You can learn more about the privacy practices and policies of Twitter by visiting their Privacy Policy page: https://twitter.com/privacy</p>
            </li>
            <li>
                <p>Facebook</p>
                <p>Facebook remarketing service is provided by Facebook Inc.</p>
                <p>You can learn more about interest-based advertising from Facebook by visiting this page: https://www.facebook.com/help/164968693837950</p>
                <p>To opt-out from Facebook's interest-based ads follow these instructions from Facebook: https://www.facebook.com/about/ads/#568137493302217</p>
                <p>Facebook adheres the Self-Regulatory Principles for Online Behavioral Advertising established by the Digital Advertising Alliance. You can also opt-out from Facebook and other participating companies through the Digital Advertising Alliance in the USA http://www.aboutads.info/choices/, the Digital Advertising Alliance of Canada in Canada http://youradchoices.ca/ or the European Interactive Digital Advertising Alliance in Europe http://www.youronlinechoices.eu/, or opt-out using your mobile device settings.</p>
                <p>For more information on the privacy practices of Facebook, please visit Facebook's Data Policy: https://www.facebook.com/privacy/explanation</p>
            </li>
            <li>
                <p>Pinterest</p>
                <p>Pinterest remarketing service is provided by Pinterest Inc.</p>
                <p>You can opt-out from Pinterest's interest-based ads by enabling the "Do Not Track" functionality of your web browser or by following Pinterest instructions: http://help.pinterest.com/en/articles/personalization-and-data</p>
                <p>You can learn more about the privacy practices and policies of Pinterest by visiting their Privacy Policy page: https://about.pinterest.com/en/privacy-policy</p>
            </li>
            <li>
                <p>AdRoll</p>
                <p>AdRoll remarketing service is provided by Semantic Sugar, Inc.</p>
                <p>You can opt-out of AdRoll remarketing by visiting this AdRoll Advertising Preferences web page: http://info.evidon.com/pub_info/573?v=1&nt=1&nw=false</p>
                <p>For more information on the privacy practices of AdRoll, please visit the AdRoll Privacy Policy web page: http://www.adroll.com/about/privacy</p>
            </li>
            <li>
                <p>Perfect Audience</p>
                <p>Perfect Audience remarketing service is provided by NowSpots Inc.</p>
                <p>You can opt-out of Perfect Audience remarketing by visiting these pages: Platform Opt-out (http://pixel.prfct.co/coo) and Partner Opt-out (http://ib.adnxs.com/optout).</p>
                <p>For more information on the privacy practices of Perfect Audience, please visit the Perfect Audience Privacy Policy & Opt-out web page: https://www.perfectaudience.com/privacy/index.html</p>
            </li>
            <li>
                <p>AppNexus</p>
                <p>AppNexus remarketing service is provided by AppNexus Inc.</p>
                <p>You can opt-out of AppNexus remarketing by visiting the Privacy & the AppNexus Platform web page: http://www.appnexus.com/platform-policy#choices</p>
                <p>For more information on the privacy practices of AppNexus, please visit the AppNexus Platform Privacy Policy web page: http://www.appnexus.com/platform-policy</p>
            </li>
        </ul>
        <p><strong>Do Not Track Disclosure</strong></p>
        <p>We support Do Not Track ("DNT"). Do Not Track is a preference you can set in your web browser to inform websites that you do not want to be tracked.</p>
        <p>You can enable or disable Do Not Track by visiting the Preferences or Settings page of your web browser.</p>
        <p><strong>Service Providers</strong></p>
        <p>We may employ third party companies and individuals to facilitate our Service, to provide the Service on our behalf, to perform Service-related services and/or to assist us in analyzing how our Service is used.</p>
        <p>These third parties have access to your Personal Information only to perform specific tasks on our behalf and are obligated not to disclose or use your information for any other purpose.</p>
        <p><strong>Compliance With Laws</strong></p>
        <p>We will disclose your Personal Information where required to do so by law or subpoena or if we believe that such action is necessary to comply with the law and the reasonable requests of law enforcement or to protect the security or integrity of our Service.</p>
        <p><strong>Security</strong></p>
        <p>The security of your Personal Information is important to us, and we strive to implement and maintain reasonable, commercially acceptable security procedures and practices appropriate to the nature of the information we store, in order to protect it from unauthorized access, destruction, use, modification, or disclosure.</p>
        <p>However, please be aware that no method of transmission over the internet, or method of electronic storage is 100% secure and we are unable to guarantee the absolute security of the Personal Information we have collected from you.</p>
        <p><strong>Links To Other Sites</strong></p>
        <p>Our Service may contain links to other sites that are not operated by us. If you click on a third party link, you will be directed to that third party's site. We strongly advise you to review the Privacy Policy of every site you visit.</p>
        <p>We have no control over, and assume no responsibility for the content, privacy policies or practices of any third party sites or services.</p>
        <p><strong>Children's Privacy</strong></p>
        <p>Only persons age 18 or older have permission to access our Service. Our Service does not address anyone under the age of 13 ("Children").</p>
        <p>We do not knowingly collect personally identifiable information from children under 13. If you are a parent or guardian and you learn that your Children have provided us with Personal Information, please contact us. If we become aware that we have collected Personal Information from a children under age 13 without verification of parental consent, we take steps to remove that information from our servers.</p>
        <p><strong>Changes To This Privacy Policy</strong></p>
        <p>This Privacy Policy is effective as of November 21, 2016 and will remain in effect except with respect to any changes in its provisions in the future, which will be in effect immediately after being posted on this page.</p>
        <p>We reserve the right to update or change our Privacy Policy at any time and you should check this Privacy Policy periodically. Your continued use of the Service after we post any modifications to the Privacy Policy on this page will constitute your acknowledgment of the modifications and your consent to abide and be bound by the modified Privacy Policy.</p>
        <p>If we make any material changes to this Privacy Policy, we will notify you either through the email address you have provided us, or by placing a prominent notice on our website.</p>
        <p><strong>Contact Us</strong></p>
        <p>If you have any questions about this Privacy Policy, please contact us.</p>
    </div>
</div>
</div>` ,


}
app.component('layouts-privacy', objLayoutsPrivacy); const objLayoutsProfile = { template: `<div id="template-layouts-profile" style="display:contents;">
    <div class="profile-layout-wrapper container">
        <div class="px-lg-5">
            <div class="row">
                <div class="col-sm-12 col-md-8">
                    <profile-agentdetails :user="$root.user"/>
                </div>
                <div class="col-sm-12 col-md-4 profile-apply-card">
                    <global-applycard/>
                </div>
            </div>
            <!--<profile-agentbio v-if="$root.user.userBio !== ''" :agentBio="$root.user.userBio"/>-->
            <div v-if="$root.propertiesDataFetched">
                <global-separator/>
                <profile-maplistcontainer/>
                <global-separator/>
                <profile-citycontainer :properties="$root.properties"/>
            </div>
        </div>
    </div>
</div>` ,

    data(){
        return {
            s3BaseUrl: 'https://lptprint.s3.amazonaws.com/'
        }
    },
    methods: {

    },
    created() {
        this.$root.getAllProperties(this.$root.$route.params.userId)
    }
}
app.component('layouts-profile', objLayoutsProfile); const objLayoutsProperty = { template: `<div id="template-layouts-property" style="display:contents;">
    <div class="property-layout-wrapper container-lg">
        <div class="px-lg-5" v-if="$root.propertyDataFetched">
            <div class="row">
                <div class="col-sm-6">
                    <property-carousel :photos="$root.propertyParsedPhotos"/>
                    <property-navigation/>
                </div>
                <div class="col-sm-6">
                    <property-details :property="$root.property"/>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                <!-- Long Description -->
                <property-description :description="$root.property.longDesc"/>

                <!-- Video -->
                <iframe v-if="$root.videoUrl" width="100%" height="578" :src="$root.videoUrl" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            </div>
            </div>
            <div class="px-2">
                <!-- <div class="row">
                    <div class="col-xs-12">
                        <property-details :property="$root.property"/>
                    </div>
                </div> -->
                <global-separator/>
                <div class="row">
                    <div class="col-xs-12 col-lg-6">
                        <profile-agentdetails :user="$root.user" :isProperty="true" :propertyCount="$root.properties.length" />
                    </div>
                    <div class="col-xs-12 col-lg-6">
                        <div class="property-apply-card float-xs-start float-lg-end">
                            <global-applycard/>
                        </div>
                    </div>
                </div>
                <global-separator/>
                <div v-if="$root.isConnect">
                    <div v-if="!$root.property.expiredOpenHouse && $root.property.openHouse !== ''">
                        <property-openhouse :property="$root.property"/>
                        <global-separator/>
                    </div>
                </div>
                <div v-if="!$root.isConnect">
                    <div v-if="$root.property.openHouse !== '' && openHouseInFuture($root.property.openHouse)">
                        <property-openhouse :property="$root.property"/>
                        <global-separator/>
                    </div>
                </div>
                
                <div class="row" :class="{ 'mb-4': !$root.properties[1] }">
                    <div id="scroll-to-map" class="col-xs-12 col-lg-6" v-if="$root.properties[0]">
                        <global-map :properties.sync="$root.properties" :property.sync="$root.property"/>
                    </div>
                    <div class="col-xs-12 col-lg-6 mt-3 mt-lg-0">
                        <property-appointment/>
                    </div>
                </div>
                <div v-if="$root.properties[1]">
                    <global-separator/>
                    <span id="scroll-to-similar" class="property-section-header">SIMILAR HOMES</span>
                    <global-similar-container forPropertyPage/>
                </div>
            </div>
        </div>
        <global-leadpopup></global-leadpopup>
    </div>
</div>` ,

    data(){
    },
    methods: {

        openHouseInFuture(openhouse){
            const openHouseDate = new Date(openhouse);
            const currentDate = new Date();
            if (openHouseDate > currentDate) {
                return true;
            } else {
                return false;
            }
        }
    },
    async created() {
        await this.$root.getProperty(this.$root.$route.params.propertyId)
        this.$root.getAllProperties(this.$root.$route.params.userId)
    },
    mounted() {
        if (this.$root.getCookie('ca') !== '') {
            this.$root.updatePropertyWebsiteVisits(this.$root.getCookie('ca'))
        }
        const queryParams = new URLSearchParams(window.location.search);
        if (queryParams.get('capture') === 'yes') 
        {
            let myModal = new bootstrap.Modal(document.getElementById('leadModal'), {
                keyboard: false
            });
            myModal.show();            
        }  
    }   
}
app.component('layouts-property', objLayoutsProperty); const objLayoutsSearch = { template: `<div id="template-layouts-search" style="display:contents;">
    <div class="search-layout-wrapper" v-if="$root.propertiesDataFetched">
        <div style="width:100%;height:100%">
            <div class="search-similar-container">
                <div class="container">
                    <global-similar-container v-if="$root.properties[0]"/>
                    <div v-else class="mt-3">No Results for "{{ $root.$route.params.searchString }}"</div>
                </div>
            </div>
            <div class="search-map-container">
                <global-map showAllProperties :properties.sync="$root.properties" :property.sync="$root.properties[0]" :height="'88vh'" :width="'100%'" />
            </div>
        </div>
    </div>
</div>` ,

    data(){
        return {

        }
    },
    methods: {
    },
    async created() {
        if (this.$root.$route.params.searchString == 'all') {
            await this.$root.getAllProperties(this.$root.$route.params.userId)
        } else {
            await this.$root.getPropertiesBySearchString(this.$root.$route.params.userId, this.$root.$route.params.searchString)
        }

    }
}
app.component('layouts-search', objLayoutsSearch); const objProfileAgentbio = { template: `<div id="template-profile-agentbio" style="display:contents;">
    <div class="agent-bio-container container">
        <h2 class="mt-3">Agent Bio:</h2>
        <p>{{ agentBio }}</p>
    </div>
</div>` ,

    props: {
        agentBio: {
            type: String,
            required: true,
            default: ''
        }
    },
    data(){
        return {

        }
    },
    mounted(){
    }
}
app.component('profile-agentbio', objProfileAgentbio); const objProfileAgentdetails = { template: `<div id="template-profile-agentdetails" style="display:contents;">
    <div class="row">
        <div class="left col-xs-12 col-md-4">
            <div class="headshot shadow mb-3">
                <img :src="img" alt="">
            </div>
        </div>
        <div class="right col-xs-12 col-md-8">
            <div class="agent-info">
                <div class="agent-details mb-4">
                    <h2 :class="$root.colorThemeText">{{ fullName }}</h2>
                    <h4 v-if="user.brokerageName && user.brokerageName !== ''">{{ user.brokerageName }}</h4>
                    <h4 v-if="user.userTitle && user.userTitle !== '' || user.title && user.title !== ''">{{ user.userTitle ? user.userTitle : user.title }}</h4>
                </div>
                <div class="agent-contact mb-3">
                    <h4 class="mt-2" :class="$root.colorThemeText">Phone: </h4>
                    <a :href="user.userPhone ? 'tel:+1'+ user.userPhone : 'tel:+1'+ user.phoneNumber" :class="$root.colorThemeText" data-label="phoneNumber"><span><i class="bi bi-telephone-fill mx-1"></i> <span>{{ user.userPhone ? user.userPhone : user.phoneNumber }}</span></span></a>
                    <h4 class="mt-2" :class="$root.colorThemeText">Email: </h4>
                    <a :href="user.userEmail ? 'mailto:' + user.userEmail : 'mailto:' + user.emailAddress" :class="$root.colorThemeText"><span><i class="bi bi-envelope-fill mx-1"></i> <span>{{ user.userEmail ? user.userEmail : user.emailAddress }}</span></span></a>
                    <h4 v-if="isProperty === true" class="mt-2">Properties: {{ propertyCount }}</h4>
                    <a v-if="isProperty === true" @click="$root.goToRoute('/'+userId)" class="agent-view-profile" :class="$root.colorThemeText"><span><i class="bi bi-person-fill mx-1"></i>View Profile</span></a>
                </div>
            </div>
        </div>
        <div>{{user.userBio}}</div>
    </div>
</div>` ,

    props: {
        user: {
            type: Object,
            required: true,
            default: {}
        },
        isProperty : {
            type: Boolean,
            required: false,
            default: false
        },
        propertyCount : {
            type: Number,
            required: false,
            default: 0
        },
    },
    data(){
        return {
            s3BaseUrl: 'https://lptprint.s3.amazonaws.com/'
        }
    },
    computed: {
        fullName: function() {
            if(typeof this.user.userFirstName !== 'undefined'){
                return `${this.user.userFirstName} ${this.user.userLastName}`
            }
            else{
                return `${this.user.firstName} ${this.user.lastName}`
            }
        },
        userId(){
            if(typeof this.user.appUserId === 'undefined'){
                return this.user.userId
            }
            else{
                return this.user.appUserId
            }
        },
        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 '/assets/images/default-profile-image.jpg'
            }
        }
    },
    mounted(){
    }
}
app.component('profile-agentdetails', objProfileAgentdetails); const objProfileCitycontainer = { template: `<div id="template-profile-citycontainer" style="display:contents;">
    <div class="cities">
        <h1>Cities</h1>
        <ul>
            <div class="mt-4"></div>
            <li v-for="(city,index) in filteredCities" :key="index">
                <a :class="$root.colorThemeText" @click="startSearch(city)">{{ city }}</a>
            </li>
        </ul>
        <div class="cities-bottom-padding"></div>
    </div>
</div>` ,

    props: {
        properties: {
            type: Array,
            required: true,
            default: []
        }
    },
    computed: {
        filteredCities() {
            let cities = this.properties.map(property => property.city);
            return cities.filter(function(item, pos) {
                return cities.indexOf(item) == pos
            })
        }
    },
    methods: {
        startSearch(city) {
            let userId = ''
            let pathRoute = 'search'
            if (typeof this.$root.user.appUserId === 'undefined') {
                userId = `${this.$root.user.userId}`
            }
            else {
                userId = `${this.$root.user.appUserId}`
            }

            let parsedSearchString = city.trim()
            parsedSearchString = parsedSearchString.replaceAll(/[^A-Za-z0-9\s]/g, '')
            parsedSearchString = parsedSearchString.replaceAll(/\s+/g, '%20')
            let path = `${userId}/${pathRoute}/${parsedSearchString}`
            this.$root.goToRoute('/'+path);
        }
    }
}
app.component('profile-citycontainer', objProfileCitycontainer); const objProfileMaplistcontainer = { template: `<div id="template-profile-maplistcontainer" style="display:contents;">
    <div class="">
        <div class="row mb-3">
            <div class="col maplist-legend pt-2" v-show="activeTab == 'map'">
                <img src="/assets/images/house.png" height="18" width="18">
                <span class="ms-1">For Sale</span>
                <img src="/assets/images/rounded-dark.png" height="18" width="18" class="ms-3">
                <span class="ms-1">Sold</span>
            </div>
            <div class="col maplist-tabs me-3">
                <ul class="maplist-tab-ul mt-2 float-end">
                    <li class="maplist-tab-li" @click="toggleTab('map')">
                        <a class="maplist-tab-link" :class="activeTab == 'map' ? {...$root.colorThemeBg,...$root.colorThemeOverText} : $root.colorThemeText">Map</a>
                    </li>
                    <li class="maplist-tab-li" @click="toggleTab('list')">
                        <a class="maplist-tab-link" :class="activeTab == 'list' ? {...$root.colorThemeBg,...$root.colorThemeOverText} : $root.colorThemeText">List</a>
                    </li>
                </ul>
            </div>
        </div>
        <global-map :properties.sync="$root.properties" showAllProperties v-show="activeTab == 'map'"/>
        <global-similar-container v-show="activeTab == 'list'"/>
    </div>
</div>` ,

    data(){
        return {
            activeTab: 'map'
        }
    },
    methods: {
        toggleTab(tabName) {
            this.activeTab = tabName
        }
    }
}
app.component('profile-maplistcontainer', objProfileMaplistcontainer); const objPropertyAppointment = { template: `<div id="template-property-appointment" style="display:contents;">
    <div>
        <div class="appointment-top-wrapper py-3 mx-auto">
            <div class="d-flex justify-content-center align-items-center">
                <i class="bi bi-calendar-event me-3 appointment-header-icon"></i><span class="appointment-header-text">Schedule an Appointment</span>
            </div>
            <div class="d-flex justify-content-center my-2">
                <div class="d-flex">
                    <input type="date" id="selectedDate" class="me-3" v-model="datetime.selectedDate" />
                    <button id="appointment-modal-toggler" class="btn btn-hover-shadow appointment-button" :class="$root.colorThemeBtn" @click="triggerPropUpdate()" data-bs-toggle="modal" data-bs-target="#appointmentModal">Schedule Appointment</button>
                </div>
            </div>
        </div>
        <div class="appointment-bottom-wrapper 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" 
                        :class=" ((cellIndex + 1) * (rowIndex + 1)) == selectedIndex ? 'selected-time-button': '',datetime.selectedTime == cell ? $root.colorThemeBtn : {'btn-light':true}" 
                        @click="setSelectedTime(cell, $event)">
                            {{cell}}
                        </button>
                    </template>
                </div>
                <!-- <div class="row time-button-row">
                    <button class="col btn btn-hover-shadow time-button selected-time-button" @click="setSelectedTime('11:00', $event)" :class="datetime.selectedTime == '11:00' ? $root.colorThemeBtn : {'btn-light':true}">11:00 am</button>
                    <button class="col btn btn-hover-shadow time-button" @click="setSelectedTime('11:15', $event)" :class="datetime.selectedTime == '11:15' ? $root.colorThemeBtn : {'btn-light':true}">11:15 am</button>
                    <button class="col btn btn-hover-shadow time-button" @click="setSelectedTime('11:30', $event)" :class="datetime.selectedTime == '11:30' ? $root.colorThemeBtn : {'btn-light':true}">11:30 am</button>
                </div>
                <div class="row time-button-row">
                    <button class="col btn btn-hover-shadow time-button" @click="setSelectedTime('11:45', $event)" :class="datetime.selectedTime == '11:45' ? $root.colorThemeBtn : {'btn-light':true}">11:45 am</button>
                    <button class="col btn btn-hover-shadow time-button" @click="setSelectedTime('12:00', $event)" :class="datetime.selectedTime == '12:00' ? $root.colorThemeBtn : {'btn-light':true}">12:00 pm</button>
                    <button class="col btn btn-hover-shadow time-button" @click="setSelectedTime('12:15', $event)" :class="datetime.selectedTime == '12:15' ? $root.colorThemeBtn : {'btn-light':true}">12:15 pm</button>
                </div>
                <div class="row time-button-row">
                    <button class="col btn btn-hover-shadow time-button" @click="setSelectedTime('12:30', $event)" :class="datetime.selectedTime == '12:30' ? $root.colorThemeBtn : {'btn-light':true}">12:30 pm</button>
                    <button class="col btn btn-hover-shadow time-button" @click="setSelectedTime('12:45', $event)" :class="datetime.selectedTime == '12:45' ? $root.colorThemeBtn : {'btn-light':true}">12:45 pm</button>
                    <button class="col btn btn-hover-shadow time-button" @click="setSelectedTime('13:00', $event)" :class="datetime.selectedTime == '13:00' ? $root.colorThemeBtn : {'btn-light':true}">1:00 pm</button>
                </div> -->
            </div>
        </div>

        
        <property-appointmentmodal :datetime.sync="datetime" />
    </div>
</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;
            
            var timeButtons = document.getElementsByClassName('time-button');
            for (const button of timeButtons) {
                button.classList.remove('selected-time-button')
            }
            event.target.classList.add('selected-time-button');
        },
        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);
            }
        },
        selectInerval(){

        }
    },
    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 id="template-property-appointmentmodal" style="display:contents;">
    <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 class="modal-body">
                    <div class="d-flex">
                        <img src="/assets/images/chaticon.svg" alt="question box icon" height="90" width="100" class="appointment-modal-img" :class="$root.svgColorThemeFilter">
                        <span class="appointment-modal-header">Schedule a Showing or Ask a Question</span>
                    </div>
                    <form id="appointmentContactAgent" ref="appointmentContactAgent" @submit="contactAgent($event)">
                        <input type="text" id="modalFullname" class="form-control appointment-modal-input" placeholder="Full Name" v-model="form.fullname" required />
                        <input type="text" id="modalPhone" class="form-control appointment-modal-input" placeholder="Phone Number" v-model="form.phone" required />
                        <input type="email" id="modalEmail" class="form-control appointment-modal-input" placeholder="Email" v-model="form.email" required />
                        <textarea id="modalQuestion" class="form-control appointment-modal-textarea" cols="30" rows="10" placeholder="Question" v-model="form.question" required />
                    </form>
                    <button v-if="!submittingForm && !showingMessage" type="submit" class="btn btn-hover-shadow appointment-modal-button" :class="$root.colorThemeBtn" form="appointmentContactAgent" value="Submit">Contact Agent</button>
                    <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>
        </div>
    </div>
</div>` ,

    data(){
        return {
            form: {
                fullname: '',
                phone: '',
                email: '',
                question: ''
            },
            submittingForm: false,
            showingMessage: false,
            messageColor: { 'text-danger': true },
            message: ''
        }
    },
    props: {
        datetime: {
            type: Object,
            required: true,
            default: {
                selectedDate: '1900-01-01',
                selectedTime: '11:00'
            }
        }
    },
    methods: {
        async contactAgent(event) {
            event.preventDefault()
            let data;
            if (this.validateForm()) {
                this.submittingForm = true
                if(this.$root.isConnect){
                    const response = await fetch(`/api/backend.cfc?method=scheduleConnectAppointment&propertyId=${this.$root.$route.params.propertyId}${this.$root.isDevelopment?'&development=1':''}`, {
                    method: 'POST',
                    body: JSON.stringify(this.form)
                    })
                    data = await response.json()
                }
                else{
                    const response = await fetch(`/api/backend.cfc?method=scheduleAppointment&propertyId=${this.$root.$route.params.propertyId}`, {
                    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.$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 communincation 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.form.question = `I would like to schedule an appointment on ${this.$root.parseDate(this.datetime.selectedDate)} at ${this.datetime.selectedTime}.`
            },
            deep: true
        }
    }
}
app.component('property-appointmentmodal', objPropertyAppointmentmodal); const objPropertyCarousel = { template: `<div id="template-property-carousel" style="display:contents;">
    <div id="carouselContainer" class="carousel slide ms-auto me-auto" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button v-for="(photo,index) in photos" :key="index" :class="{ active: index == 0 }" 
                type="button" data-bs-target="#carouselContainer" :data-bs-slide-to="index" aria-current="true" :aria-label="'Slide '+index"></button>
        </div>
        <div class="carousel-inner">
            <div v-for="(photo,index) in photos" :key="index" class="carousel-item" :class="{ active: index == 0 }">
                <img :src="photo" class="d-block w-100" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselContainer" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselContainer" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>` ,

    props: {
        photos: {
            type: Array,
            required: true,
            default: []
        }
    }
}
app.component('property-carousel', objPropertyCarousel); const objPropertyDescription = { template: `<div id="template-property-description" style="display:contents;">
    <div class="description-text mt-2" v-if="description !== ''">
        <p>{{ description }}</p>
    </div>
</div>` ,

    props: {
        description: {
            type: String,
            required: true,
            default: ''
        }
    }
}
app.component('property-description', objPropertyDescription); const objPropertyDetailicon = { template: `<div id="template-property-detailicon" style="display:contents;">
    <div class="card detail-icon-card px-0 ms-1 me-1">
        <div class="card-body detail-icon-card-body d-flex flex-column align-items-center px-0 py-2">
            <img :src="imageLocations[icon]" :alt="'listing '+icon+' icon'" height="25" width="25" :class="$root.svgColorThemeFilter">
            <p class="detail-icon-card-amount mt-2 mb-0 mx-auto fw-normal text-center">
                {{ formattedAmount }}
            </p>
        </div>
    </div>
</div>` ,

    data(){
        return {
            imageLocations: {
                bed: '/assets/images/bedicon_blue.svg',
                bath: '/assets/images/showericon_blue.svg',
                sqft: '/assets/images/sqfticon_blue.svg',
                pool: '/assets/images/poolicon_blue.svg'
            }
        }
    },
    props: {
        icon: {
            type: String,
            required: true,
            validator(value) {
                // The value must match one of these strings
                return ['bed', 'bath', 'sqft', 'pool'].includes(value)
            }
        },
        amount: {
            type: [ String, Number ],
            required: true
        }
    },
    computed: {
        formattedAmount() {
            let formattedAmount = this.amount
            if (this.amount == '') formattedAmount = '--'
            if (this.icon == 'bed') return `${formattedAmount} Bed`
            else if (this.icon == 'bath') return `${formattedAmount} Bath`
            else if (this.icon == 'sqft') return `sqft: ${formattedAmount}`
            else if (this.icon == 'pool') return `${formattedAmount} Pool`
            else return `${formattedAmount}`
        }
    }
}
app.component('property-detailicon', objPropertyDetailicon); const objPropertyDetails = { template: `<div id="template-property-details" style="display:contents;">
    <div id="scroll-to-details" class="details-wrapper pt-4">

        <!-- Price / Share button -->
        <div class="row">
            <div class="col">
                <h1 v-if="property.soldDate !== ''" class="sold-date fw-bold">Sold on {{ property.soldDate }}</h1>
                <h1 class="details-price mb-0 fw-bold">{{ formattedPrice }}</h1>
            </div>
            <!--<div class="col">-->
                <!-- share button -->
                <!--<button id="share-button" class="btn btn-hover-shadow me-4 float-end shadow" :class="$root.colorThemeBtn" @click="share()">Share<i class="bi bi-share-fill share-icon ms-2"></i></button>-->
            <!--</div>-->
        </div>

        <!-- Details -->
        <div class="row">
            <h5 class="mt-2 mb-1 fw-bold">{{ property.address }}</h5>
            <p class="details-city-state-zip">{{ property.city }}, {{ property.state }} {{ property.zip }}</p>
        </div>

        <!-- Details (Icons) -->
        <div class="row mb-3">
            <property-detailicon icon="bed" :amount="property.bedrooms"/>
            <property-detailicon icon="bath" :amount="property.bathrooms"/>
            <property-detailicon icon="sqft" :amount="property.sqft"/>
            <property-detailicon icon="pool" :amount="property.pool" v-if="property.pool && property.pool !== '' && property.pool !== 0"/>
        </div>

        <!-- Additional Details -->
        <div class="additional-details">
            <div v-if="property.heating && property.heating !== ''">
                <b>Heating</b> - {{ property.heating }}
            </div>
            <div v-if="property.cooling && property.cooling !== ''">
                <b>Cooling</b> - {{ property.cooling }}
            </div>
            <div v-if="property.firePlace && property.firePlace !== ''">
                <b>Fireplace</b> - {{ property.firePlace }}
            </div>
            <div v-if="property.roofStyle && property.roofStyle !== ''">
                <b>Roof Style</b> - {{ property.roofStyle }}
            </div>
            <div v-if="property.stories && property.stories !== ''">
                <b>Stories</b> - {{ property.stories }}
            </div>
            <div v-if="property.yearBuilt && property.yearBuilt !== ''">
                <b>Year Built</b> - {{ property.yearBuilt }}
            </div>
            <div v-if="property.garage && property.garage !== ''">
                <b>Garage(s)</b> - {{ property.garage }}
            </div>
        </div>
    </div>
</div>` ,

    props: {
        property: {
            type: Object,
            required: true,
            default: {}
        }
    },
    computed: {
        formattedPrice() {
            return `$${this.$root.numberWithCommas(this.property.price)}`
        }
    },
    methods: {
        share() {
            window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}`, 'facebook-share-dialog', 'width=626,height=436')
            return false
        }
    }
}
app.component('property-details', objPropertyDetails); const objPropertyNavigation = { template: `<div id="template-property-navigation" style="display:contents;">
    <nav class="navbar navbar-light shadow-sm" role="navigation">
        <div class="container-fluid justify-content-start">
            <ul class="navbar-nav d-flex flex-row">
                <li class="nav-item me-5">
                    <div class="navigation-nav-link" @click="$root.scrollToElementById('scroll-to-details')">Details</div>
                </li>
                <li class="nav-item me-5" v-if="$root.isConnect && !$root.property.expiredOpenHouse && $root.property.openHouse !== ''">
                    <div class="navigation-nav-link" @click="$root.scrollToElementById('scroll-to-openhouse')">Open House</div>
                </li>
                <li class="nav-item me-5" v-if="!$root.isConnect && $root.property.openHouse !== '' && openHouseInFuture($root.property.openHouse)">
                    <div class="navigation-nav-link" @click="$root.scrollToElementById('scroll-to-openhouse')">Open House</div>
                </li>
                <li class="nav-item me-5" v-if="$root.propertiesDataFetched">
                    <div class="navigation-nav-link" @click="$root.scrollToElementById('scroll-to-map')">Location</div>
                </li>
                <li class="nav-item me-5" v-if="$root.propertiesDataFetched && $root.properties[1]">
                    <div class="navigation-nav-link" @click="$root.scrollToElementById('scroll-to-similar')">Similar Homes</div>
                </li>
            </ul>
        </div>
    </nav>
</div>` ,

    methods: {
        openHouseInFuture(openhouse){
            const openHouseDate = new Date(openhouse);
            const currentDate = new Date();
            if (openHouseDate > currentDate) {
                return true;
            } else {
                return false;
            }
        }
    }
}
app.component('property-navigation', objPropertyNavigation); const objPropertyOpenhouse = { template: `<div id="template-property-openhouse" style="display:contents;">
    <div id="scroll-to-openhouse" class="open-house-wrapper">
        <h5 class="fw-bold open-house">OPEN HOUSE</h5>
        <h6 class="fw-bold ">{{ parseOpenHouseDate }}</h6>

        <p class="open-house-time" v-if="property.openHouseStartTime !== '' && property.openHouseEndTime !== ''">{{ property.openHouseStartTime + " - " + property.openHouseEndTime }}</p>
        <p class="open-house-time" v-else>--</p>
    </div>
</div>` ,

    data(){
        return{
            
        }
    },
    props: {
        property: {
            type: Object,
            required: false,
            default: {},
        }
    },
    computed: {
        parseOpenHouseDate() {
            if(this.$root.isConnect){
                let part = this.property.openHouse.split(' ');
                let string = part[0] + ' ' + part[1] + ' ' + part[2];
                return string;
            }
            else{
                return this.property.openHouse
            }
        }
    },
    methods: {
        
    }
}
app.component('property-openhouse', objPropertyOpenhouse);