const objCities = { template: `
    <div class="cities__wrapper">
        <div class="cities__sidebar">
            <div v-if="!$root.propertiesByCityFetched" class="spinner-border text-secondary" role="status">
            </div>
            <div v-if="$root.propertiesByCityFetched && $root.propertiesByCity.length > 0">
                <property-card 
                    v-for="(property, index) in fetchedProperties" 
                    :key="index"
                    :imgSrc="property.exteriorPhotoURL"
                    :price="property.price"
                    :address="property.address"
                    :bedCount="property.bedrooms"
                    :bathCount="property.bathrooms"
                    :sqft="property.sqft"
                    :sold="property.soldDate"
                >
                </property-card>
            </div>
        </div>
        <div class="cities__map">
            <div v-if="!$root.propertiesByCityFetched" class="spinner-border text-secondary" role="status">
            </div>
            <global-map
                v-if="$root.propertiesByCityFetched == true && $root.propertiesByCity.length"
                showAllProperties
                :properties.sync="$root.propertiesByCity"
                :user.sync="$root.user"
                :height="'calc(100vh - 63px)'"
            >
            </global-map>
        </div>
    </div>
` ,

  props:{
    userId:{
      type:String,
      required:true

    },
    searchString:{
      type:String,
      required: true
    }
  },
    async created() {
        
        this.$nextTick(() => {
            if (this.userId) {
            this.$root.propertySearch(this.userId, this.searchString);
            }
        });
    },
    computed: {
        fetchedProperties() {
            return this.$root.propertiesByCity;
        },
    }

}
app.component('cities', objCities); const objCity = { template: `
  <div class="home__bg">
    <div class="home__agents-section" v-if="$root.agentsFetched && $root.pagedAgents.length > 0">
      <h1>LPT Realty Agents in {{ this.$root.capitalizeFirstLetter(this.$route.params.searchString) }}</h1>
      <div class="home__agents-wrapper">
        <agent-card
            v-for="agent in $root.pagedAgents"
            :key="agent.userId"
            :agent="agent"
            :linkTo="'/'+agent.userId"
        >
        </agent-card>
      </div>
      <div class="home__buttons-wrapper" v-if="$root.agents.length > this.limit">
        <p>Showing page {{ page }} of {{ totalPages }}</p>
        <button @click="handlePrevious" :disabled="page - 1 === 0" :class="{'btn pagination disabled' : page === 0, 'btn pagination': page !== 0}"><i class="bi bi-caret-left-fill"></i></button>
        <button @click="handleNext" :disabled="page === totalPages" :class="{'btn pagination disabled' : page === totalPages, 'btn pagination': page !== totalPages}"><i class="bi bi-caret-right-fill"></i></button>
      </div>
    </div>
    <!-- Empty State -->
    <div v-if="$root.agentsFetched && $root.pagedAgents.length == 0" class="section__empty">
      <p>No agents found.</p>
    </div>
    <div class="home__info">
      <div class="content">
        <h1>What Sets LPT Realty Above the Rest</h1>
        <p>Whether you're trying to buy your dream home or selling your current one, LPT Realty's number one priority is to help find you the best deal possible while providing exceptional customer service. LPT Realty agents are armed with best in class technology and marketing tools to help you make informed decisions about buying or selling your home, and are there for you every step of the way.</p>
      </div>
    </div>
  </div>
` ,

  data() {
    return {
      limit: 15,
      skip: 0,
      page: 1
    }
  },
  props: {
    searchString: String
  },
  async created() {
    window.scrollTo(0, 0);
    if(!this.$root.isNumeric(this.$route.params.searchString)){
      await this.$root.getAgentsByCitySearch(this.$route.params.searchString);
    } else {
      this.goToPage('') // route to 404
    }

  },
  methods:{
    goToPage(path) {
      // KEEP IN MIND: this function is duplicated above the Vue.app create (for base JS map click event)
      let baseUrl = window.location.origin
      let currentpath = window.location.pathname
      let url = `${baseUrl}${currentpath}#/${path}`
      if (this.$route.query.ca) {
        url += `?ca=${this.$route.query.ca}`
      }
      window.location.href = url
      // window.location.reload(true)
    },
    handleNext() {
      this.page = this.page += 1;
      this.$root.pagedAgents = this.$root.pagination(this.$root.agents, this.page)
    },
    handlePrevious() {
      if (this.page > 0) {
        this.page = this.page - 1;
        this.$root.pagedAgents = this.$root.pagination(this.$root.agents, this.page)
      }
    },
  },
  computed: {
    roundedPages() {
      if(this.$root.agentsFetched){
        return Math.floor(this.$root.agents.length / this.limit)
      } else {
        return 0
      }

    },
    fullPages() {
      return this.roundedPages * this.limit;
    },
    remainder() {
      return this.$root.agentsToPaginate - this.fullPages;
    },
    totalPages() {
      return this.roundedPages
    }
  }
}
app.component('city', objCity); const objHome = { template: `
  <div class="home__bg">
    <div v-if="!$root.showAgentProfile" class="home">
      <!-- Hero -->
      <div class="home__hero">
        <div class="home__hero-content">
          <h1 class="home__header">{{ title }}</h1>
          <p class="home__hero-subtext">Use the search to find a dedicated LPT Realty agent in your area.</p>
          <div class="home__search-section">
            <input type="search" v-model="searchString" placeholder="Search agents by name or zip code" @keyup.enter="startSearch()"/>
            <button class="btn secondary" @click="startSearch()">Search</button>
          </div>
        </div>
      </div>
      <!-- Agents -->
      <div class="home__agents-section" v-if="$root.agentsFetched && $root.pagedAgents.length > 0">
          <h1>LPT Realty Agent Results</h1>
          <div class="home__agents-wrapper">
            <agent-card
              v-for="agent in $root.pagedAgents"
              :key="agent.userId"
              :agent="agent"
              :linkTo="'/'+agent.userId"
            >
            </agent-card>
          </div>
          <div class="home__buttons-wrapper" v-if="$root.agents.length > this.limit">
            <p>Showing page {{ page }} of {{ totalPages }}</p>
            <button @click="handlePrevious" :disabled="page - 1 === 0" :class="{'btn pagination disabled' : page === 0, 'btn pagination': page !== 0}"><i class="bi bi-caret-left-fill"></i></button>
            <button @click="handleNext" :disabled="page === totalPages" :class="{'btn pagination disabled' : page === totalPages, 'btn pagination': page !== totalPages}"><i class="bi bi-caret-right-fill"></i></button>
          </div>
      </div>
      <!-- Empty State -->
      <div v-if="$root.agentsFetched && $root.pagedAgents.length == 0" class="section__empty">
        <p>No agents found.</p>
      </div>
      
      <div class="home__info">
        <div class="content">
          <h1>What Sets LPT Realty Above the Rest</h1>
          <p>Whether you're trying to buy your dream home or selling your current one, LPT Realty's number one priority is to help find you the best deal possible while providing exceptional customer service. LPT Realty agents are armed with best in class technology and marketing tools to help you make informed decisions about buying or selling your home, and are there for you every step of the way.</p>
        </div>
      </div>
      <div class="home__difference">
        <div class="content">
          <h1>The LPT Realty Difference</h1>
          <div class="diff-row">
              <div class="diff-item" v-for="(item, index) in differences" :key="index">
                <img :src="item.img" :alt="item.title" class="diff-img" />
                <h3>{{ item.title }}</h3>
                <p>{{ item.paragraph }}</p>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="$root.showAgentProfile" class="home">
      <div class="agent-detail__wrapper">
        <div v-if="$root.userFetched === true">
          <agent-form :user="$root.user"></agent-form>
          <div class="agent-detail__locations-section">
            <div v-if="!$root.propertiesFetched">
              <div class="spinner-border text-secondary" role="status">
              </div>
            </div>
            <div v-if="$root.propertiesFetched && $root.properties.length">
              <global-map
                  showAllProperties
                  :properties.sync="$root.properties"
                  :key="$root.mapKey"
              ></global-map>
            </div>
            <div v-if="$root.propertiesFetched && $root.properties.length === 0">
              <p>No properties to display</p>
            </div>
            <h1>Cities</h1>
            <ul class="agent-detail__cities">
              <li v-for="(city, index) in filteredCities" :key="index">
                <a @click="startCitySearch(city)">{{ city }}</a>
              </li>
            </ul>
          </div>
        </div>
        <div v-if="!$root.userFetched" class="spinner-border text-secondary" role="status">
        </div>
      </div>
    </div>
  </div>
` ,

    data() {
      return {
        title: 'Find Your Local Neighborhood Expert',
        limit: 15,
        skip: 0,
        page: 1,
        displayUrl:'',
        searchString: '',
        differences: [
          {
            title: 'Exceptional Customer Service',
            img: '/assets/images/support.svg',
            paragraph: 'Our dedicated LPT Realty agents are available around the clock and happy to answer any questions you might have'
          },
          {
            title: 'Latest Technology Tools',
            img: '/assets/images/technology.svg',
            paragraph: 'LPT Realty agents are armed with state of the art technology designed to give you a seamless customer experience'
          },
          {
            title: 'Best In Class Marketing',
            img: '/assets/images/marketing.svg',
            paragraph: 'All LPT Realty agents have access to a proven marketing system including print materials and a branded website for all listings'
          }
        ]
      }
    },
    async created() {
        if (!this.$route.matched[0].name || this.$route.matched[0].name == '404-regex') {
            this.$root.goToPage('') // route to 404
        } else {
            await this.$root.initiateCookie()
            this.$root.scrollToElementById('lptagentdirectory') // scroll to top
            this.$root.insertLeadAction(2)
        }
    },
    computed: {
      fetchedAgents() {
        return this.$root.agents
      },
      filteredCities() {
        let cities = this.$root.properties.map(address => {
            let parts = address.city.split(" ");
            let city = "";
            let first = true;
            for(let part of parts){
                if(!first) city += " ";
                else first = false;
                city += part.substring(0, 1).toUpperCase() +  part.toLowerCase().substring(1, part.length);
            }
            return city;
        });
        let uniqueCities = cities.filter((item, pos) => {
            return cities.indexOf(item) == pos
        });
        return uniqueCities.sort();
      },
      roundedPages() {
        if(this.$root.agentsFetched){
          return Math.ceil(this.$root.agents.length / this.limit)
        } else {
          return 0
        }

      },
      fullPages() {
        return this.roundedPages * this.limit;
      },
      remainder() {
        return this.$root.agentsToPaginate - this.fullPages;
      },
      totalPages() {
        return this.roundedPages
      }
    },
    watch: {
      searchString(newValue, oldValue) {
        if (newValue.length == 0) {
          // this.$root.getAllAgents(0,12);
          this.$root.agentsFetched = false;
          this.$root.pagedAgents.length = 0;
        }
      }
    },
    methods: {
      handleNext() {
        this.page++;
        this.$root.pagedAgents = this.$root.pagination(this.$root.agents, this.page)
      },
      handlePrevious() {
        if (this.page > 0) {
          this.page--;
          this.$root.pagedAgents = this.$root.pagination(this.$root.agents, this.page)
        }
      },
      async startSearch() {
          let parsedSearchString = this.searchString.trim() 
          parsedSearchString = parsedSearchString.replaceAll(/[^A-Za-z0-9\s]/g, '')
          parsedSearchString = parsedSearchString.replaceAll(/\s+/g, '+');
          await this.$root.getAgentsBySearchString(parsedSearchString);
          this.page = 1
        },
      startCitySearch(city) {
        let parsedSearchString = city.trim()
        let path = `${this.$root.user.userId}/search/${parsedSearchString}`
        this.$root.goToPage(path, true)
      }
    }
}
app.component('home', objHome); const objNotFound = { template: `
    <div class="notfound__wrapper">
        <h1>404</h1>
        <p>Sorry, the page you are looking for does not exist</p>
    </div>
` ,


}
app.component('notfound', objNotFound); const objPrivacy = { template: `
    <div class="privacy__wrapper">
        <h1>Privacy Policy/Terms and Conditions</h1>
        <h3>Information Collected</h3>
        <p><em>&ldquo;Personal Information&rdquo;</em> includes, but not limited to:</p>
        <ul>
            <li>Name</li>
            <li>Physical Address</li>
            <li>Email Address</li>
            <li>Telephone Number</li>
            <li>Current Occupation, title, and company/organization name</li>
            <li>Demographic information including Date of birth, nationality and country or residence</li>
            <li>Realtor License Number and Real Estate Experience</li>
        </ul>
        <p><em>&ldquo;Usage  Information&rdquo;</em> is any information that does not reveal your specific identity.  This information includes, but not limited to:</p>
        <ul>
            <li>Browser, device, and operating system information</li>
            <li>Internet Protocol (“IP) address</li>
            <li>App usage data</li>
            <li>Information collected through cookies and other technologies</li>
            <li>Demographic information and other information provided by you that does not reveal your specific identity</li>
        </ul>
        <h3>Our Communication With You (Telephone Consumer Protection Act Consent)</h3>
        <p>By submitting your Personal Information, you are providing your express written consent to receive communications from us.  Communications from us include, but not limited to:</p>
        <ul>
            <li>Telephone Calls through Landline Phones and Cellular Phones</li>
            <li>E-Mails</li>
            <li>Text Messages including SMS and MMS</li>
            <li>Postal Mail</li>
            <li>Fax</li>
        </ul>
        <p>We may use an automatic telephone dialing system (“Dialer”), which may employ an artificial or pre-recorded voice (“Auto Voicemail”), auto text messages (“RoboTexts”), or artificial or prerecorded voices (“Prerecorded Messages”).  Your carrier’s standard rates and charges may apply.  How often we send you communications may vary.  Communications with you may be on a recorded line.  By submitting your Personal Information, you represent and warrant that you are at least 18 years of age, you have not registered on a national or statewide Do Not Call list, you are the account holder for the email addresses and phone numbers you provided, and the email addresses and phone numbers you provided are accurate.</p>
        <h3>Disclosure of Information</h3>
        <p>We may disclose Personal and Usage Information:</p>
        <ul>
            <li>To our Subsidiaries and Affiliates </li>
            <li>To our third-party service providers and business partners</li>
            <li>To comply with applicable law and regulations</li>
            <li>To cooperate with public and government authorities</li>
            <li>To cooperate with law enforcement</li>
            <li>For other legal reasons</li>
        </ul>
        <h3>How Information is Collected</h3>
        <p>We collect Personal and Usage Information from the following sources:</p>
        <ul>
            <li>Information we receive from you as a result of your use of our services.</li>
            <li>Information we receive from you, or on your behalf, through forms you complete, or through your communication to us</li>
            <li>Information we receive from you when creating a User Account</li>
            <li>Information we receive from your computer or mobile device</li>
            <li>Information we receive from our third-party service providers, business partners, subsidiaries, or affiliates</li>
            <li>Information we receive from other sources, as permitted by applicable laws, rules and regulations</li>
            <li>Information we receive from you, even if we have not requested such information and the information is not information that we normally collect</li>
        </ul>
        <h3>Security</h3>
        <p>We seek to use reasonable organizational, technical and administrative measures to protect Personal Information with our organization.  While we use said measures to protect your confidential information and provide suitable security, please be aware that no security measures are perfect or impenetrable.  We do not and cannot guarantee or warrant that any information transmitted through the Internet is secure, or that such transmissions are free from delay, interruption, interception or error.</p>
        <h3>Opt-Out</h3>
        <p>You may Opt-Out from receiving (i) marketing related emails from us; (ii) our sharing of your Personal Information with our affiliates for their direct marketing purposes; or (iii) our sharing of your Personal Information with our third-party business partners for their direct marketing purposes.  To Opt-Out, please contact us at help@lpt.com.  We will comply with your request(s) as soon as reasonably practicable.</p>
        <h3>Retention Period</h3>
        <p>We retain Personal Information and Usage Information for as long as needed, in our sole discretion, and in accordance with applicable law.</p>
        <h3>Third Party Services</h3>
        <p>This Privacy Policy does not address, and we are not responsible for, the privacy, information or other practices of any third parties.</p>
        <h3>Transfer of Information</h3>
        <p>We reserve the right to transfer your Personal Information, as well as any information about or from you, in connection with the merger, sale or other disposition of all or part of our business and/or assets. We cannot make any representations regarding the use or transfer of your information that we may have in the event of our bankruptcy, reorganization, insolvency, receivership, or an assignment for the benefit of creditors. You expressly agree and consent to the use and/or transfer of your information in connection with a sale or transfer of some or all of our assets.  We are not responsible for any breach of security by any third parties or for any actions of any third parties that receive any of the information that is disclosed to us.</p>
        <h3>Use of Services by Minors</h3>
        <p>Our Services are not directed to individuals under the age of 18.  We do not knowingly collect or solicit Personal from individuals under the age of 18.  Please email us at help@lpt.com if you believe we collected Personal Information from an individual under the age of 18.</p>
        <h3>Your Consent to Future Changes</h3>
        <p>We may change the website, Terms of Use, and this Privacy Policy at any time.  If we change this Privacy Policy, the changes will become effective immediately on posting the updated or revised Privacy Policy on this web page.</p>
        <h3>Contacting Us</h3>
        <p>If you have questions about this Privacy Policy, please contact us at help@lpt.com.</p>
    </div>
` ,

  async created() {
    window.scrollTo(0, 0);
  }
}
app.component('privacy', objPrivacy); const objZip = { template: `
  <div class="home__bg">
    <div class="home__agents-section" v-if="$root.agentsFetched && $root.pagedAgents.length > 0">
      <h1>LPT Realty Agents in the {{this.$route.params.searchString}} area</h1>
      <div class="home__agents-wrapper">
        <agent-card
            v-for="agent in $root.pagedAgents"
            :key="agent.userId"
            :agent="agent"
            :linkTo="'/'+agent.userId"
        >
        </agent-card>
      </div>
      <div class="home__buttons-wrapper" v-if="$root.agents.length > this.limit">
        <p>Showing page {{ page }} of {{ totalPages }}</p>
        <button @click="handlePrevious" :disabled="page - 1 === 0" :class="{'btn pagination disabled' : page === 0, 'btn pagination': page !== 0}"><i class="bi bi-caret-left-fill"></i></button>
        <button @click="handleNext" :disabled="page === totalPages" :class="{'btn pagination disabled' : page === totalPages, 'btn pagination': page !== totalPages}"><i class="bi bi-caret-right-fill"></i></button>
      </div>
    </div>
    <!-- Empty State -->
    <div v-if="$root.agentsFetched && $root.pagedAgents.length == 0" class="section__empty">
      <p>No agents found.</p>
    </div>
    <div class="home__info">
      <div class="content">
        <h1>What Sets LPT Realty Above the Rest</h1>
        <p>Whether you're trying to buy your dream home or selling your current one, LPT Realty's number one priority is to help find you the best deal possible while providing exceptional customer service. LPT Realty agents are armed with best in class technology and marketing tools to help you make informed decisions about buying or selling your home, and are there for you every step of the way.</p>
      </div>
    </div>
  </div>
` ,

  data() {
    return {
      limit: 15,
      skip: 0,
      page: 1
    }
  },
  props: {
    searchString: String
  },
  async created() {
    window.scrollTo(0, 0);
    if(this.$root.isNumeric(this.$route.params.searchString)){
      await this.$root.getAgentsBySearchString(this.$route.params.searchString);
    } else {
      this.$root.goToPage('') // route to 404
    }
  },
  methods:{
    handleNext() {
      this.page = this.page += 1;
      this.$root.pagedAgents = this.$root.pagination(this.$root.agents, this.page)
    },
    handlePrevious() {
      if (this.page > 0) {
        this.page = this.page - 1;
        this.$root.pagedAgents = this.$root.pagination(this.$root.agents, this.page)
      }
    },
  },
  computed: {
    roundedPages() {
      if(this.$root.agentsFetched){
        return Math.floor(this.$root.agents.length / this.limit)
      } else {
        return 0
      }

    },
    fullPages() {
      return this.roundedPages * this.limit;
    },
    remainder() {
      return this.$root.agentsToPaginate - this.fullPages;
    },
    totalPages() {
      return this.roundedPages
    }
  }
}
app.component('zip', objZip); const objAgentCard = { template: `
    <router-link :to="linkTo">
        <div class="agent__card">
            <div class="agent__row">
                <img v-if="agent.userPhoto !== null && agent.userPhoto !== ''" :src="'https://cdn.filestackcontent.com/AgK1e5A5SmaT4ljERP7otz/resize=height:165/https://lptprint.s3.amazonaws.com/' + agent.userPhoto" />
                <img v-else src="/assets/images/default-photo.png" />
                <div class="agent__user-info">
                    <h3 class="name">{{ agent.userFirstName + ' ' + agent.userLastName }}</h3>
                    <p class="info">{{ agent.brokerageName }}</p>
                    <p class="info">{{ agent.userTitle }}</p>
                </div>
            </div>
            <div class="agent__contact">
                <a :href="'mailto:' + agent.userEmail" class="email">
                    <span class="icon"><i class="bi bi-envelope-fill"></i></span>
                    <span>Email Me</span>
                </a>
                <div class="divider"></div>
                <a :href="'tel:+1' + agent.userPhone" class="phone">
                    <span class="icon"><i class="bi bi-telephone-fill"></i></span>
                    <span>{{ formattedPhone }}</span>
                </a>
            </div>
        </div>
    </router-link>
` ,

    data() {
        return {
        }
    },
    props: {
        linkTo: String,
        agent: {
            userFirstName: String,
            userLastName: String,
            userEmail: String,
            userPhone: String,
            userLogo: String,
            userPhoto: String,
            brokerageName: String,
            userTitle: String
        }
    },
    computed: {
        formattedPhone() {
            const number = this.agent.userPhone;
            if (!number) {
                return 'Unknown'
            } else {
                const numToString = number.toString();
                if (numToString.length === 10) {
                    const areaCode = numToString.substring(0,3);
                    const firstDigits = numToString.substring(3,6);
                    const restDigits = numToString.substring(6,numToString.length);
                    return `(${areaCode}) ${firstDigits}-${restDigits}`;
                } else {
                    return 'Invalid phone provided';
                
                }
            }
        }
    }
}
app.component('agent-card', objAgentCard); const objAgentDetail = { template: `
    <div class="agent-detail__wrapper">
        <div v-if="$root.userFetched === true">
            <agent-form :user="$root.user"></agent-form>
            <div class="agent-detail__locations-section">
                <div v-if="!$root.propertiesFetched">
                    <div class="spinner-border text-secondary" role="status">
                    </div>
                </div>
                <div v-if="$root.propertiesFetched && $root.properties.length">
                    <global-map  
                        showAllProperties 
                        :properties.sync="$root.properties"
                        :key="$root.mapKey"
                    ></global-map>
                </div>
                <div v-if="$root.propertiesFetched && $root.properties.length === 0">
                    <p>No properties to display</p>
                </div>
                <h1>Cities</h1>
                <ul class="agent-detail__cities">
                    <li v-for="(city, index) in filteredCities" :key="index">
                        <a @click="startSearch(city)">{{ city }}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div v-if="!$root.userFetched" class="spinner-border text-secondary" role="status">
        </div>
    </div>
` ,

    data() {
        return {
        }
    },
    props: {
       userId: [String, Number]
    },
    async created() {
        window.scrollTo(0, 0);
        await this.$root.getAgentById(this.userId);
        await this.$root.getAllProperties(this.userId);
    },
    computed: {
        filteredCities() {
            let cities = this.$root.properties.map(address => {
                let parts = address.city.split(" ");
                let city = "";
                let first = true;
                for(let part of parts){
                    if(!first) city += " ";
                    else first = false;
                    city += part.substring(0, 1).toUpperCase() +  part.toLowerCase().substring(1, part.length);
                }
                return city;
            });
            let uniqueCities = cities.filter((item, pos) => {
                return cities.indexOf(item) == pos
            });
            return uniqueCities.sort();
        },
    },
    methods: {
        startSearch(city) {
            let parsedSearchString = city.trim()
            // parsedSearchString = parsedSearchString.replaceAll(/[^A-Za-z0-9\s]/g, '')
            // parsedSearchString = parsedSearchString.replaceAll(/\s+/g, '+')
            let path = `${this.$root.user.userId}/search/${parsedSearchString}`
            // console.log(parsedSearchString)
            console.log(path);
            this.$root.goToPage(path)
        }
    }
}
app.component('agent-detail', objAgentDetail); const objAgentForm = { template: `
    <div class="agent-form__form-section-bg">
        <div class="agent-form__form-section">
            <div class="agent-form__agent-info">
                <div class="photo">
                    <img v-if="user.userPhoto !== null && user.userPhoto !== ''" :src="'https://cdn.filestackcontent.com/AgK1e5A5SmaT4ljERP7otz/resize=height:363/https://lptprint.s3.amazonaws.com/' + user.userPhoto" />
                    <img v-else src="/assets/images/default-photo.png" />
                </div>
                <div class="info">
                    <div class="name">
                        <h1>{{ fullName }}</h1>
                        <p>{{ user.brokerageName }}</p>
                        <p>{{ user.userTitle }}</p>
                    </div>
                    <div class="contact">
                        <p>
                          <a :href="'mailto:' + user.userEmail" class="email">
                            <span class="icon"><i class="bi bi-envelope-fill"></i></span>
                            <span>Email Me</span>
                          </a>
                        </p>
                        <p v-if="user.displayUrl">
                            <a :href="'https://' + user.displayUrl" class="email" target="_blank">
                            <span class="icon"><i class="bi bi-laptop-fill"></i></span>
                            <span>{{ user.displayUrl }}</span>
                            </a>
                        </p>
                        <p>
                          <a :href="'tel:+1' + user.userPhone" class="phone">
                            <span class="icon"><i class="bi bi-telephone-fill"></i></span>
                            <span>{{ formattedPhone }}</span>
                          </a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="agent-form__agent-form">
                <div class="agent-form__form-wrapper">
                    <h1 class="agent-form__form-title">Request Home Buyer Consultation with {{ user.userFirstName }}</h1>
                    <form id="applyForm" ref="applyForm" class="agent-form" @submit="submitContact($event)">
                        <input type="text" id="applyFirstname" placeholder="First Name" v-model="form.firstname" required />
                        <input type="text" id="applyLastname" placeholder="Last Name" v-model="form.lastname" required />
                        <input type="phone" id="applyPhone" placeholder="Phone Number" v-model="form.phone" required />
                        <input type="email" id="applyEmail" placeholder="Email" v-model="form.email" required />
                    </form>
                    <button v-if="!submittingForm && !showingMessage" type="submit" class="btn primary" form="applyForm" value="Submit">Submit</button>
                    <div v-if="!submittingForm && showingMessage" class="form-message" :class="messageColor">{{ message }}</div>
                </div>
            </div>
        </div>
    </div>
` ,

    props: {
        user: Object
    },
    data() {
        return {
            form: {
                firstname: '',
                lastname: '',
                phone: '',
                email: ''
            },
            submittingForm: false,
            showingMessage: false,
            messageColor: { 'text-danger': true },
            message: ''
        }
    },
    computed: {
        fullName() {
            return `${this.user.userFirstName} ${this.user.userLastName}`
        },
        formattedPhone() {
            const number = this.user.userPhone;
            if (!number) {
                return 'Unknown'
            } else {
                const numToString = number.toString();
                if (numToString.length === 10) {
                    const areaCode = numToString.substring(0,3);
                    const firstDigits = numToString.substring(3,6);
                    const restDigits = numToString.substring(6,numToString.length);
                    return `(${areaCode}) ${firstDigits}-${restDigits}`;
                } else {
                    return 'Invalid phone provided';
                }
            }
        },
    },
    methods: {
        async submitContact(event) {
            event.preventDefault()

            if (this.validateForm()) {
                this.submittingForm = true
                const response = await fetch(`/api/backend.cfc?method=contactAgent&userId=${this.user.userId}`, {
                    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.form.phone
                    let email = this.form.email

                    this.clearForm()

                    this.$root.submitForm(firstName, lastName, phone, email, this.user.userId)
                }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)
                }
            }
        },
        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-form', objAgentForm); const objFooterMain = { template: `
    <div class="footer-main__bg">
        <div class="footer-main__wrapper">
            <div class="footer-main__group">
                <img src="/assets/images/logo.svg" class="footer-main__image" />
                <p>LPT Realty</p>
<!--                <p>Jennifer Draper, Broker</p>-->
                <a href="tel:+18773662213">(877) 366-2213</a>
                <p class="mt-1">1400 S International Parkway</p>
                <p>Suite 1020</p> 
                <p>Lake Mary, FL 32746</p>
            </div>
            <div class="footer-main__group">
                <h3>Terms</h3>
                <ul>
                    <li class="nav-item">
                        <router-link :to="{ path: '/privacy' }" class="nav-link"><p>Privacy Policy</p></router-link>
                    </li>
                    <li class="nav-item" v-if="$root?.userSub?.isTX">
                        <a class="nav-link" style="font-size: 16px;" target="_blank" :href="'https://lptrealty.com/documents/document.html?method=documentIABSHTML&appUserId='+$root?.userSub?.appUserId">TREC Information About Brokerage Services</a>
                    </li>
                    <li class="nav-item" v-else>
                        <a class="nav-link" style="font-size: 16px;" target="_blank" href="documents/IABS.pdf">TREC Information About Brokerage Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" style="font-size: 16px;" target="_blank" href="documents/consumerProtectionNotice.pdf">TREC Consumer Protection Notice</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
` ,


}
app.component('footer-main', objFooterMain); const objGlobalMap = { template: `
    <div id="mapContainer" :style="{ width: width, height: height }"></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
        },
        user: {
            type: Object,
            required: false,
            default: {}
        }
    },
    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)
        },
        isSubdomain(){
            let domainsplit = window.location.href.split('.');
            if(domainsplit.length == 3 && domainsplit[0] != 'www'){
                return true
            }
            else{
                return false
            }
        }
    }, 
    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.isSubdomain){
                    path = `property/${this.properties[i].propertyId}`;
                }
                else
                {
                    path = `${this.properties[i].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 ${this.properties[i].soldDate || !this.properties[i].isActive ? 'style="display:block; width: fit-content; color: red; font-weight:bold;">'  : 'style="display: block; width: fit-content; color: bold; font-weight: bold; border-bottom: blue solid 1px;">'}${this.properties[i].soldDate || !this.properties[i].isActive ? 'Sold' : 'For Sale'}</span>
                            <span style="display: inline-block">$${this.$root.numberWithCommas(this.properties[i].price)}</span><br>
                            <span style="display: inline-block">${this.properties[i].bedrooms} Bed, ${this.properties[i].bathrooms} Bath</span><br>
                            <span style="display: inline-block">${this.properties[i].sqft} ft&sup2;</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.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 == '' && this.properties[i].isActive) {
                        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/sold-house2.png', (error, image) => {
                    if (error) throw error;
                    map.addImage('listedMarker', image);
                    map.addLayer(pointsLayer);
                });

                map.loadImage('./assets/images/sale-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 objGuiModal = { template: `
    <div class="modal fade" id="appointmentModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body appointment-modal">
                    <h1>Schedule a Showing or Ask a Question</h1>
                    <form id="appointmentContactAgent" ref="appointmentContactAgent" @submit="contactAgent($event)">
                        <input type="text" id="modalFullName" placeholder="Full Name" v-model="form.fullname" required />
                        <input type="text" id="modalPhone" placeholder="Phone Number" v-model="form.phone" required />
                        <input type="email" id="modalEmail" placeholder="Email" v-model="form.email" required />
                        <textarea id="modalQuestion" cols="30" rows="6" placeholder="Question" v-model="form.question" required />
                    </form>
                    <button v-if="!submittingForm && !showingMessage" type="submit" class="btn primary" form="appointmentContactAgent" value="Submit">Submit</button>
                    <div v-if="!submittingForm && showingMessage" class="form-message" :class="messageColor">{{ message }}</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()

            if (this.validateForm()) {
                this.submittingForm = true
                const response = await fetch(`/api/backend.cfc?method=scheduleAppointment&propertyId=${this.$route.params.propertyId}`, {
                    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 = 'A Realtor will contact you shortly.'
                    this.showingMessage = true
                    setTimeout(() => {
                        this.showingMessage = false
                        this.$root.hideModalById('appointmentModal')
                    }, 5000)

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

                    this.clearForm()

                    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
                    }, 5000)
                }
            }
        },
        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('gui-modal', objGuiModal); const objNavigationMain = { template: `
    <nav class="navbar navbar-expand-lg fixed-top nav-menu" role="navigation">
        <div class="nav-menu__wrapper">
            <a class="navbar-brand" href="#">
                <img src="/assets/images/logo.svg" class="navbar__logo"/>
            </a>
        </div>
    </nav>
` ,


}
app.component('navigation-main', objNavigationMain); const objPropertyAppointment = { template: `
    <div class="property-appointment__wrapper">
       <div class="property-appointment__header">
           <h1>Schedule an Appointment</h1>
           <div class="property-appointment__input-row">
               <input type="date" id="selectedDate" v-model="datetime.selectedDate">
               <button class="btn primary" @click="triggerPropUpdate()" data-bs-toggle="modal" data-bs-target="#appointmentModal">Schedule</button>
           </div>
       </div>
       <div class="property-appointment__times">
                <div v-for="(row, rowIndex) in intervalRows">
                    <template v-for="(cell, cellIndex) in row">
                        <div 
                        :class=" ((cellIndex + 1) * (rowIndex + 1)) == selectedIndex ? 'property-appointment__time property-appointment__time--active': 'property-appointment__time',datetime.selectedTime == cell ? $root.colorThemeBtn : {'btn-light':true}" 
                        @click="setSelectedTime(cell, $event)">
                            {{cell}}
                        </div>
                    </template>
                </div>
           <!-- <div v-for="(timeSlot, index) in timeSlots" :key="index" :class="{'property-appointment__time property-appointment__time--active' : datetime.selectedTime === timeSlot, 'property-appointment__time': datetime.selectedTime !== timeSlot}" @click="setTimeSlot(timeSlot)">{{ timeSlot }} {{ getTimeOfDay(timeSlot) }}</div> -->
       </div>
       
       <gui-modal :datetime.sync="datetime"></gui-modal>
    </div>
` ,

    props: {
        property: Object
    },
    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');
            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) {
            console.log('value',value);
            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');
        },
        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(){

        },
        setTimeSlot(timeSlot) {
            this.datetime.selectedTime = timeSlot;
        },
        getTimeOfDay(value) {
            if (value < '12:00') {
                return 'am'
            }
            if (value >= '12:00') {
                return 'pm'
            }
        },
        triggerPropUpdate() {
            console.log(this.datetime)
            // trick an update to the child component with .sync
            this.datetime.selectedDate = ''
            if (document.getElementById("selectedDate")) this.datetime.selectedDate = document.getElementById("selectedDate").value
        }
    },
    mounted() {
        this.setInitialDate();
        this.getIntervals();
        setTimeout(()=>{
            console.log(this.intervals);
        },500)
    },
    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 objPropertyCard = { template: `
    <div class="property-card__wrapper">
        <div class="property-card__banner-wrap">
            <div class="property-card__banner"><span class="icon"><i class="bi bi-geo-alt-fill"></i></span><span>{{sold == '' || sold == false ? 'For Sale' : 'Sold' }}</span></div>
        </div>
        <img :src="imgSrc" class="property-card__image" />
        <div class="content">
            <h3 class="price">{{ formattedPrice }}</h3>
            <p class="address">{{ address }}</p>
            <div class="attributes">
                <div v-for="(item, index) in attributeInfo" :key="index" class="attribute">
                    <img :src="item.img" />
                    <p class="value">{{ item.value }} {{ item.label }}</p>
                </div>
            </div>
        </div>
    </div>
` ,

    props: {
        imgSrc: String,
        price: Number,
        address: String,
        bedCount: String,
        bathCount: String,
        sqft: String,
        sold: {
            type: [Boolean, String],
            default: false
        }
    },
    data() {
        return {
            attributeInfo: [
                { label: 'bed', value: this.bedCount, img: "assets/images/bedicon_blue.svg" },
                { label: 'bath', value: this.bathCount, img: "assets/images/showericon_blue.svg" },
                { label: 'sqft', value: this.sqft, img: "assets/images/sqfticon_blue.svg" }
            ]
        }
    },
    computed: {
        formattedPrice() {
            return `$${this.$root.numberWithCommas(this.price)}`;
        },
    }
}
app.component('property-card', objPropertyCard); const objPropertyCarousel = { template: `
    <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>
` ,

    props: {
        photos: {
            type: Array,
            required: true,
            default: []
        }
    }
}
app.component('property-carousel', objPropertyCarousel); const objPropertyDetail = { template: `
    <div class="property-detail__wrapper">
        <div v-if="connectProperty" style="text-align: center; margin-top: 200px;">
            This propery is currently not in the LPT database and was displayed to provide more detailed information.
            Sorry for any inconvience.
        </div>
        <div v-if="!$root.propertyFetched && !connectProperty" class="section__empty">
            <div class="spinner-border text-secondary" role="status">
            </div>
        </div>
        <div v-if="$root.propertyFetched == true">
            <div class="property-detail__property-info">
                <property-carousel :photos="$root.propertyParsedPhotos"/>
                <h1 v-if="$root.property.soldDate !== ''" class="sold-date fw-bold">Sold on {{ $root.property.soldDate }}</h1>
                <h1 class="property-detail__price">{{ price }}</h1>
                <h2 class="property-detail__address">{{ address }}</h2>
                <div class="property-detail__house-info">
                    <property-icon 
                        v-for="(item, index) in propertyIconData" 
                        :key="index"
                        :name="item.name"
                        :value="item.value"
                        :image="item.icon"
                    >
                    </property-icon>
                </div>
                <div v-if="hasOtherDetails === true" class="property-detail__other-info">
                    <h3>Home Features</h3>
                    <div class="property-detail__info-row">
                        <property-feature
                            v-for="(item, index) in propertyFeatureData"
                            :key="index"
                            :label="item.label"
                            :plural="item.plural"
                            :value="item.value"
                            :icon="item.icon"
                            :isNumber="item.isNumber"
                            :isReversed="item.isReversed"
                        >
                        </property-feature>
                    </div>
                </div>
                <div class="property-detail__long-desc">
                    <p v-if="$root.property.longDesc && $root.property.longDesc !== ''">
                        {{ $root.property.longDesc }}
                    </p>
                </div>
            </div>

            <div v-if="!$root.userFetched" class="section__empty">
                <div class="spinner-border text-secondary" role="status">
                </div>
            </div>

            <agent-form v-if="$root.userFetched == true" :user="$root.user"></agent-form>

            <property-openhouse v-if="$root.property.openHouseDate" 
                :openHouse="$root.property.openHouse" 
                :openHouseDate="$root.property.openHouseDate"
                :openHouseStartTime="$root.property.openHouseStartTime"
                :openHouseEndTime="$root.property.openHouseEndTime"
            ></property-openhouse>
            <div class="property-detail__appointment-section">
                <global-map 
                    v-if="$root.property && $root.propertiesFetched === true" 
                    :properties.sync="$root.properties" 
                    :property.sync="$root.property" 
                    :user.sync="$root.user"
                    width="600px" 
                    height="384px">
                </global-map>
                <property-appointment></property-appointment>
            </div>
        </div>
    </div>
` ,

    props: {
        propertyId: String
    },
    data() {
        return {
            connectProperty: false,
        }
    },
    computed: {
        price() {
            return `$${this.$root.numberWithCommas(this.$root.property.price)}`;
        },
        isSubdomain(){
            let domainsplit = window.location.href.split('.');
            if(domainsplit.length == 3 && domainsplit[0] != 'www'){
                return true
            }
            else{
                return false
            }
        },
        hasOtherDetails() {
            const { heating, cooling, firePlace, stories, yearBuilt, garage } = this.$root.property;
            if (heating !== '' || cooling !== '', firePlace !== '', stories !== '' || yearBuilt !== '' || garage !== '') {
                return true;
            } else {
                return false;
            }
        },
        address() {
            return `${this.$root.property.address}, ${this.$root.property.city}, ${this.$root.property.state} ${this.$root.property.zip}`
        },
        propertyIconData() {
            return [
                { name: 'Bed', value: this.$root.property.bedrooms, icon: '/assets/images/bedicon_blue.svg' },
                { name: 'Bath', value: this.$root.property.bathrooms, icon: '/assets/images/showericon_blue.svg' },
                { name: 'Sqft', value: this.$root.property.sqft, icon: '/assets/images/sqfticon_blue.svg' },
                { name: 'Pool', value: this.$root.property.pool, icon: '/assets/images/poolicon_blue.svg' }
            ]
        },
        propertyFeatureData() {
            return [
                { label: 'Heating', value: this.$root.property.heating, icon: '/assets/images/temp-icon.svg' },
                { label: 'Cooling', value: this.$root.property.cooling, icon: '/assets/images/cooling-icon.svg' },
                { label: 'Fireplace', plural: 'Fireplaces', value: this.$root.property.firePlace, icon: '/assets/images/fireplace-icon.svg', isNumber: true },
                { label: 'Story', plural: 'Stories', value: this.$root.property.stories, icon: '/assets/images/stories-icon.svg', isNumber: true },
                { label: 'Built in', value: this.$root.property.yearBuilt, icon: '/assets/images/calender-icon.png', isReversed: true },
                { label: 'Garage', plural: 'Garages', value: this.$root.property.garage, icon: '/assets/images/garage-icon.svg', isNumber: true }
            ]
        }
    },
    async created() {
            if(typeof this.$route.params.propertyId === 'undefined'){

            }
            else{

                if(this.$route.params.propertyId != '9999999'){
                if(!this.$root.user){
                    await this.$root.getAgentById(this.$route.params.userId);
                }
                if(this.isSubdomain){
                    await this.$root.getProperty(this.$route.params.propertyId);
                    await this.$root.getAllProperties(this.$root.user.userId);
                }
                else{
                    await this.$root.getProperty(this.$route.params.propertyId);
                    await this.$root.getAllProperties(this.$route.params.userId);
                }
                
                }
                else{
                    this.connectProperty = true;
                }
            }
            
        
        
    },

}
app.component('property-detail', objPropertyDetail); const objPropertyFeature = { template: `
    <div v-if="value && value !== '' && value !== 0" class="property-feature__wrapper">
        <p v-if="!isReversed"><span><img :src="icon"></span><span>{{ value }} {{ computedLabel }}</span></p>
        <p v-if="isReversed === true"><span><img :src="icon"></span><span>{{ computedLabel }} {{ value }}</span></p>
    </div>
` ,

    props: {
        label: String,
        plural: String,
        value: String, Number,
        icon: String,
        isNumber: Boolean,
        isReversed: Boolean
    },
    computed: {
        computedLabel() {
            if (this.isNumber === true) {
                if (this.value > 1) {
                    return this.plural;
                } else {
                    return this.label;
                }
            }
            if (!this.isNumber) {
                return this.label;
            }
        }
    }
}
app.component('property-feature', objPropertyFeature); const objPropertyIcon = { template: `
    <div v-if="value !== 0 && value !== ''" class="property-icon__wrapper">
        <img :src="image" />
        <p class="label">{{ value }} {{ name }}</p>
    </div>
` ,

    props: {
        image: String,
        name: String,
        value: String
    },
}
app.component('property-icon', objPropertyIcon); const objPropertyOpenhouse = { template: `
    <div class="property-openhouse__wrapper">
        <h1>Open House</h1>
        <p class="property-openhouse__date">{{ parseOpenHouseDate }}</p>
        <p class="property-openhouse__time" v-if="openHouseStartTime !== '' && openHouseEndTime !== ''">{{ openHouseStartTime + " - " + openHouseEndTime }}</p>
    </div>
` ,

    props: {
        openHouse: String,
        openHouseDate: String,
        openHouseStartTime: String,
        openHouseEndTime: String
    },
    computed: {
        parseOpenHouseDate() {
            return this.$root.parseIsoDateToString(this.openHouseDate)
        }
    }
}
app.component('property-openhouse', objPropertyOpenhouse);