<template>
  <div>
    <!-- <button type="button" id="mobile-nav-toggle">
      <i class="fa fa-bars"></i>
    </button>-->
    <div>
      <header
        id="header"
        style="width: 100%; position: fixed; top: 0px; z-index: 50;"
      >
        <div class="container">
          <div class="row justify-content-center">
            <div id="logo" class="col-md-3 col-xs-4 pull-left">
              <a href="/">
                <img
                  class="img-fluid"
                  src="/img/logos/UVProp.png"
                  alt="UVProp logo"
                  style="height: 100px;"
                />
              </a>
            </div>
            <div id="topbar" class="col-md-9">
              <div class="container clearFix">
                <div class="social-links">
                  <a href="mailto:info@univateproperties.co.za">
                    <i class="fa fa-envelope"></i>
                  </a>
                  <a
                    href="https://www.facebook.com/univateproperties/"
                    target="_blank"
                  >
                    <i class="fa fa-facebook"></i>
                  </a>
                  <a href="#">
                    <i class="fa fa-youtube"></i>
                  </a>
                  <a href="tel:012 941 8497">
                    <i class="fa fa-phone"></i>
                    <span class="phoneIconDetail">+27 (0)12 941 8497</span>
                  </a>
                  <a href="#" data-toggle="modal" data-target="#bondcal">
                    <i class="fa fa-calculator" aria-hidden="true"></i>
                    <span class="bondCalculatorDetail">Bond Calculator</span>
                  </a>
                  <router-link to="/property/list">
                    <i class="fa fa-home"></i>
                    <span class="listProp">List Property</span>
                  </router-link>
                </div>
              </div>

              <nav id="nav-menu-container" class="mt-2">
                <ul class="nav-menu sf-js-enabled sf-arrows">
                  <li style="margin-left: -20px;">
                    <router-link to="/property/commercial">
                      Commercial
                    </router-link>
                    <!-- <div
                      @mouseover="commercialClass = 'ts-display'"
                      @mouseleave="commercialClass = 'no-display'"
                    ></div>
                    <a href="#" class="sf-with-ul">
                      Commercial
                    </a>
                    <ul style="margin-top:-10px; text-align:left" :class="commercialClass">
                      <li>
                      </li>
                      <hr />
                      <li>
                        <a href="#" @click="routerGoTo('/property/commercial/new/Sale')">To Sell</a>
                      </li>
                      <li>
                        <a href="#" @click="routerGoTo('/property/commercial/new/Rental')"
                          >To Rent</a
                        >
                      </li>
                    </ul>-->
                  </li>
                  <li class="mx-1">
                    <router-link to="/property/residential">
                      Residential
                    </router-link>
                    <!-- <div
                      @mouseover="residentialClass = 'ts-display'"
                      @mouseleave="residentialClass = 'no-display'"
                    ></div>
                    <a href="#" class="sf-with-ul">
                      Residential
                    </a>
                    <ul style="margin-top:-10px; text-align:left" :class="residentialClass">
                      <li>
                        <router-link to="/property/residential">To Buy / To Rent</router-link>
                      </li>
                      <hr />
                      <li>
                        <a href="#" @click="routerGoTo('/property/residential/new/Sale')"
                          >To Sell</a
                        >
                      </li>
                      <li>
                        <a href="#" @click="routerGoTo('/property/residential/new/Rental')"
                          >To Rent</a
                        >
                      </li>
                    </ul>-->
                  </li>
                  <li class="menu-has-children mx-1">
                    <div
                      @mouseover="timeShareClass = 'ts-display'"
                      @mouseleave="timeShareClass = 'no-display'"
                    ></div>
                    <a href="#" class="sf-with-ul">Timeshare</a>
                    <ul
                      style="margin-top: -10px; text-align: left;"
                      :class="timeShareClass"
                    >
                      <li>
                        <router-link to="/timeshare/buy">To Buy</router-link>
                      </li>
                      <li>
                        <router-link to="/timeshare/sell">To Sell</router-link>
                      </li>
                      <li>
                        <router-link to="/timeshare/faq">FAQ</router-link>
                      </li>
                      <li>
                        <hr />
                        <router-link to="/timeshare/myWeeks">
                          My Timeshare Weeks
                        </router-link>
                      </li>
                    </ul>
                  </li>
                  <!-- <li class="menu-has-children">
                    <div
                      @mouseover="propertiesClass = 'ts-display'"
                      @mouseleave="propertiesClass = 'no-display'"
                    ></div>
                    <a href="#" class="sf-with-ul">
                      Properties
                    </a>
                    <ul style="margin-top:-10px;text-align:left" :class="propertiesClass">
                      <li>
                        <router-link to="/property/Search">Search</router-link>
                      </li>
                      <li>
                        <router-link to="/property/new/Sale">To Sell</router-link>
                      </li>
                      <li>
                        <router-link to="/property/new/Rental">To Rent</router-link>
                      </li>
                      <li v-if="isLoggedIn">
                        <hr />
                        <router-link to="/properties">My Properties</router-link>
                      </li>
                    </ul>
                  </li>-->
                  <li class="menu-has-children mx-1">
                    <div
                      @mouseover="propManClass = 'ts-display'"
                      @mouseleave="propManClass = 'no-display'"
                    ></div>
                    <a href="#" class="sf-with-ul">Property Management</a>
                    <ul
                      style="margin-top: -10px; text-align: left;"
                      :class="propManClass"
                    >
                      <li>
                        <router-link to="/propertyManagement">
                          Sectional Title and HOA Management
                        </router-link>
                      </li>
                      <li>
                        <router-link to="/rentalPropertyManagement">
                          Rental Property Portfolio Management
                        </router-link>
                      </li>
                    </ul>
                  </li>
                  <li class="menu-has-children mx-1">
                    <div
                      @mouseover="aboutClass = 'ts-display'"
                      @mouseleave="aboutClass = 'no-display'"
                    ></div>
                    <a href="#" class="sf-with-ul">About</a>
                    <ul
                      style="margin-top: -10px; text-align: left;"
                      :class="aboutClass"
                    >
                      <li>
                        <router-link to="/about/us">About Us</router-link>
                      </li>
                      <li>
                        <router-link to="/about/timeshare">
                          About Timeshare Resales
                        </router-link>
                      </li>
                    </ul>
                  </li>
                  <li class="mx-1">
                    <router-link to="/share/contact">Contact Us</router-link>
                  </li>
                  <li v-if="USER" class="menu-has-children mx-1">
                    <div
                      @mouseover="userClass = 'ts-display'"
                      @mouseleave="userClass = 'no-display'"
                    ></div>

                    <a href="#" class="sf-with-ul">{{ NAME }}</a>
                    <ul
                      style="margin-top: -10px; text-align: left;"
                      :class="userClass"
                    >
                      <!-- <li v-if="ROLE === 'Super Admin'">
                        <router-link to="/property/list">List Property</router-link>
                      </li>
                      <li v-if="ROLE === 'Super Admin'">
                        <router-link to="/status/list">Status</router-link>
                      </li>-->
                      <li class="menu-has-children">
                        <div
                          @mouseover="submenu1Class = 'ts-display'"
                          @mouseleave="submenu1Class = 'no-display'"
                        ></div>
                        <a href="#" class="sf-with-ul">Property</a>
                        <ul
                          style="
                            margin-top: -10px;
                            text-align: left;
                            width: 250px;
                          "
                          :class="submenu1Class"
                        >
                          <li>
                            <router-link to="/property/list">
                              List My Property
                            </router-link>
                          </li>
                          <li>
                            <router-link to="/PropertyAdmin">
                              Property Admin
                            </router-link>
                          </li>
                        </ul>
                      </li>
                      <li
                        v-if="ROLE === 'Super Admin'"
                        class="menu-has-children"
                      >
                        <div
                          @mouseover="submenu1Class = 'ts-display'"
                          @mouseleave="submenu1Class = 'no-display'"
                        ></div>
                        <a href="#" class="sf-with-ul">TimeShare</a>
                        <ul
                          style="
                            margin-top: -10px;
                            text-align: left;
                            width: 250px;
                          "
                          :class="submenu1Class"
                        >
                          <li v-if="ROLE === 'Super Admin'">
                            <router-link to="/status/timeshareAdmin">
                              Timeshare Week Admin
                            </router-link>
                          </li>
                          <li v-if="ROLE === 'Super Admin'">
                            <router-link to="/status/tenderWeekAdmin">
                              Tender Week Management
                            </router-link>
                          </li>
                        </ul>
                      </li>

                      <hr v-if="ROLE === 'Super Admin'" />
                      <li
                        v-if="ROLE === 'Super Admin'"
                        class="menu-has-children"
                      >
                        <div
                          @mouseover="submenu1Class = 'ts-display'"
                          @mouseleave="submenu1Class = 'no-display'"
                        ></div>
                        <a href="#" class="sf-with-ul">Website Setup</a>
                        <ul
                          style="
                            margin-top: -10px;
                            text-align: left;
                            width: 250px;
                          "
                          :class="submenu1Class"
                        >
                          <li>
                            <router-link to="/contactUsLog">
                              Contact Us Log
                            </router-link>
                          </li>
                          <li>
                            <router-link to="/contactUsSource/list">
                              Contact Us Source
                            </router-link>
                          </li>
                          <li>
                            <router-link to="/termsConditions">
                              Edit Terms & Conditions
                            </router-link>
                          </li>
                          <li>
                            <router-link to="/emailTemplates">
                              Email Templates
                            </router-link>
                          </li>
                          <li>
                            <router-link to="/emailRecipient">
                              Email Recipients
                            </router-link>
                          </li>
                          <li>
                            <router-link to="/enquireNowLog">
                              Enquire Now Log
                            </router-link>
                          </li>
                          <li>
                            <router-link to="/fees">Fees</router-link>
                          </li>
                          <li>
                            <router-link to="/propertyTypes/list">
                              Property Types
                            </router-link>
                          </li>
                          <li>
                            <router-link to="/userDefinedGroups/list">
                              Property User Defined Groups
                            </router-link>
                          </li>
                          <li>
                            <router-link to="/status/list">Status</router-link>
                          </li>
                          <li>
                            <router-link to="/unitConfiguration/list">
                              Unit Configuration
                            </router-link>
                          </li>

                          <li>
                            <router-link to="/status/userManagementPage">
                              User Management & Access
                            </router-link>
                          </li>
                        </ul>
                      </li>
                      <!-- <li v-if="ROLE === 'Super Admin'" class="menu-has-children">
                        <div
                          @mouseover="submenu1Class = 'ts-display'"
                          @mouseleave="submenu1Class = 'no-display'"
                        ></div>
                        <a href="#" class="sf-with-ul">Logs</a>
                        <ul
                          style="margin-top:-10px;text-align:left;width:250px"
                          :class="submenu1Class"
                        >
                          <li>
                            <router-link to="/status/changeLogPage">Change Logs</router-link>
                          </li>
                          <li>
                            <router-link to="/searchLog">Search Logs</router-link>
                          </li>
                        </ul>
                      </li> -->
                      <hr />
                      <li v-if="ROLE === 'Super Admin'">
                        <router-link to="/Offers">Offers</router-link>
                      </li>
                      <!-- <li v-if="ROLE === 'Super Admin'">
                        <router-link to="/Carousel">Carousel</router-link>
                      </li>-->
                      <li>
                        <router-link to="/user/updateProfileInfo">
                          Update Info
                        </router-link>
                      </li>
                      <li v-if="ROLE === 'Super Admin'">
                        <router-link to="/payments">Payments</router-link>
                      </li>
                      <li v-if="ROLE === 'Super Admin'">
                        <router-link to="/campaignUpload">
                          Landing Pages / Campaignes
                        </router-link>
                      </li>
                      <li v-if="ROLE === 'Super Admin'">
                        <router-link to="/landingPages">
                          Landing Pages * / Campaignes
                        </router-link>
                      </li>
                      <li v-if="ROLE === 'Designer'">
                        <router-link to="/campaignUpload">
                          Landing Pages / Campaignes
                        </router-link>
                      </li>
                      <li>
                        <router-link
                          class="btn-white-border p-2"
                          to="/user/login"
                        >
                          Logout
                        </router-link>
                      </li>
                    </ul>
                  </li>

                  <li v-if="!USER">
                    <router-link
                      class="btn-white-border p-2 ml-1 mr-1"
                      to="/user/login"
                    >
                      Login
                    </router-link>
                  </li>

                  <li v-if="!USER">
                    <router-link
                      class="btn-white-border p-2 ml-1 mr-1"
                      to="/user/register"
                    >
                      Register
                    </router-link>
                  </li>
                  <!-- <li v-if="!isLoggedIn" class="menu-has-children">
                    <div
                      @mouseover="registerClass = 'ts-display'"
                      @mouseleave="registerClass = 'no-display'"
                    ></div>
                    <a href="#" class="sf-with-ul btn-solid-blue pt-2 pb-1" style="height:39px;">
                      Register
                    </a>
                    <ul style="margin-top:-10px;" :class="registerClass">
                      <li>
                        <router-link to="/user/register">Register</router-link>
                      </li>
                      <li>
                        <router-link to="/user/registeragency">Agency Registration</router-link>
                      </li>
                    </ul>
                  </li>-->
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </header>
    </div>
    <div
      class="modal fade"
      id="bondcal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="modal-bondcal"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content pt-4">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>

          <div class="modal-body pt-3">
            <bondCalculator />
          </div>
        </div>
        <!-- modal-content -->
      </div>
      <!-- modal-dialog -->
    </div>
    <!-- modal -->
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from 'vuex'
import Log from '../../assets/Log'
import bondCalculator from '../misc/bondCaclculator'

export default {
  components: {
    bondCalculator,
  },
  data() {
    return {
      hover: false,
      timeShareClass: 'no-display',
      propertiesClass: 'no-display',
      aboutClass: 'no-display',
      userClass: 'no-display',
      registerClass: 'no-display',
      commercialClass: 'no-display',
      residentialClass: 'no-display',
      propManClass: 'no-display',
      submenu1Class: 'no-display',
    }
  },
  methods: {
    ...mapActions('authentication', ['logout']),
    ...mapActions('fees', ['retrieveListingFee']),
    ...mapActions('myWeeks', ['getWeekCount']),
    showDropDown() {
      if (!this.hover) {
        this.timeShareClass = 'ts-display'
      }
    },
    routerGoTo(goTo) {
      this.$emit('routerGoTo', goTo)
    },
  },
  mounted() {
    this.retrieveListingFee()
    console.log(localStorage.getItem('user'))
    if (localStorage.getItem('user') !== null) {
      this.getWeekCount(JSON.parse(localStorage.getItem('user')).id)
    }
  },
  computed: {
    ...mapState('authentication', [
      'user',
      'flag',
      'status',
      'person',
      'token',
    ]),
    ...mapState('myWeeks', ['weekCount']),
    isLoggedIn() {
      return Log.isLoggedIn()
    },
    NAME() {
      return Log.getPerson().name
    },
    USER() {
      var userObj = {}
      if (!this.user) {
        userObj = JSON.parse(localStorage.getItem('user'))
      } else {
        userObj = this.user
      }

      return userObj
    },
    ROLE() {
      var userObj = JSON.parse(localStorage.getItem('user'))
      return userObj.role
    },
    // eslint-disable-next-line vue/return-in-computed-property
    Logout() {
      this.logout().then((res) => {
        console.log('something')
      })
      //return this.logout();
    },
  },
}
</script>

<style lang="scss" scoped>
.subItem {
  background-color: white;
  margin-top: -10px;
}

.no-display {
  display: none;
}

.ts-display {
  display: block;
}

.phoneIconDetail {
  margin-left: 3px;
}

.bondCalculatorDetail {
  margin-left: 3px;
}

.listProp {
  margin-left: 3px;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .phoneIconDetail {
    display: none;
  }

  .bondCalculatorDetail {
    display: none;
  }

  .listProp {
    display: none;
  }

  #header {
    min-height: 120px;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  #header {
    min-height: 145px;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  #header {
    height: 170px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  #header {
    height: 165px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  #header {
    height: 120px;
  }
}
</style>
