<script setup>
import axios from '@axios';
import '@vendor/js/bootstrap';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const authentication = ref(false)
const getStarted = ref(false)
const isTopLoadingVisible = ref(true);
const isNavbarOpen = ref(false);
const selectMenu = ref('');
const isMemeber = ref(false);
const isStarted = ref(false);
const seetingPlanLogo = ref();
// const isLogin = ref(false)
// const isTopLoadingVisible = ref(false);
const user_role = ref();
const padding = ref('90px 0px');
const isContent = ref();
const scrollFunction = () => {
  const scrollPosition = window.scrollY || document.documentElement.scrollTop;
  // console.log("scrollPosition", scrollPosition);
  if (scrollPosition > 1) {
    padding.value = '90px 0px';
  } else {
    padding.value = '90px 0px';
  }
};

const redirectRoute = computed(() => {
  user_role.value = localStorage.getItem('user_role');
  console.log("user_role", user_role.value);
  if (user_role.value === 'agent') {
    return '/provider/dashboard';
  } else if (user_role.value === 'patient') {
    return '/overview';
  } else {
    // Default route or handle other cases
    return '/';
  }
});
// Attach scroll event listener
onMounted(async () => {

  const baseUrl = window.location.hostname;

  if (baseUrl === 'localhost') {
    isContent.value = 'd-block';
  } else {
    isContent.value = 'd-none';
  }
  const selectedSidebarMenu = localStorage.getItem('selectedSidebarMenu');
  if (selectedSidebarMenu == 'memberLogin') {
    isMemeber.value = true;
    isStarted.value = false;
  } else {
    isMemeber.value = false;
    isStarted.value = true;
  }
  // iselectedMenu.value = true;
  setTimeout(() => {
    isTopLoadingVisible.value = false;
  }, 500);
  window.addEventListener('scroll', scrollFunction);
  let setting = await axios.post('/api/settings', {})
  // console.log(setting.data)
  seetingPlanLogo.value = '/assets/logo/' + setting.data.logo
});

// function closeNavbar() {
//   alert('false');
//   isNavbarOpen.value = false;
// }

// function toggleNavbar() {
//   alert('Test');
//   if (isNavbarOpen.value == true)
//     isNavbarOpen.value = false
//   else
//     isNavbarOpen.value = true
//   // isNavbarOpen.value = !isNavbarOpen.value;
// }


// Remove scroll event listener on component destroy
onBeforeUnmount(() => {
  window.removeEventListener('scroll', scrollFunction);
});

const selectnav = (selectnav) => {

  if (selectnav == 'isMemeber') {
    localStorage.setItem('selectedSidebarMenu', 'memberLogin');
    isMemeber.value = true;
    isStarted.value = false;
  } else {
    localStorage.setItem('selectedSidebarMenu', 'getStarted');
    isStarted.value = true;
    isMemeber.value = false;

  }


}
onBeforeMount(() => initialize());
const initialize = () => {
  let token = localStorage.getItem('access_token');
  let isLogin = localStorage.getItem('isLogin');
  authentication.value = false;
  getStarted.value = true;
  console.log("authentication", authentication.value);
  console.log("token", token);

  if (token && isLogin != 'false') {
    authentication.value = true;
    getStarted.value = false;
  }
};
const getStartedFun = () => {
  isTopLoadingVisible.value = true
  router.replace(route.query.to && route.query.to != '/' ? String(route.query.to) : '/plans')
};
const gotoDashboard = () => {
  user_role.value = localStorage.getItem('user_role');
  if (user_role.value === 'agent') {
    router.push('/provider/dashboard');
  } else if (user_role.value === 'patient') {
    router.push('/overview');
  } else {
    router.push('/');
  }
};

const isUserAuthenticate = () => {

  user_role.value = localStorage.getItem('user_role');
  if (user_role.value === 'agent') {
    router.push('/provider/dashboard');
  } else if (user_role.value === 'patient') {
    router.push('/overview');
  } else {
    window.location.href = window.location.origin;
  };
}
</script>
<template>
  <nav class="layout-navbar py-0" id="navbar" :style="{ padding }">
    <VProgressLinear indeterminate color="primary" v-if="isTopLoadingVisible"
      style="position: fixed; z-index: 99999999; top: 0;" />
    <div class="">
      <div class="navbar navbar-expand-lg landing-navbar px-3 px-md-4">
        <!-- Menu logo wrapper: Start -->
        <div class="navbar-brand app-brand demo d-flex py-0 py-lg-2 me-4">
          <!-- Mobile menu toggle: Start-->
          <button class="navbar-toggler border-0 px-0 me-2" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation">
            <i class="ti ti-menu-2 ti-sm align-middle" @click="isNavbarOpen = true"></i>
          </button>
          <!-- Mobile menu toggle: End-->

          <div class="app-brand-link cursor-pointer">
            <span class="app-brand-logo demo">
              <VImg :src="seetingPlanLogo" width="250" height="100" @click="isUserAuthenticate"></VImg>
              <!-- <svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z"
                  fill="#7367F0" />
                <path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd"
                  d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z" fill="#161616" />
                <path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd"
                  d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z" fill="#161616" />
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
                  fill="#7367F0" />
              </svg> -->
            </span>
            <!-- <span class="app-brand-text demo menu-text fw-bold ms-2 ps-1">HGH</span> -->
          </div>
        </div>
        <!-- Menu logo wrapper: End -->
        <!-- Menu wrapper: Start -->
        <div class="collapse navbar-collapse landing-nav-menu" :class="{ 'show': isNavbarOpen }"
          id="navbarSupportedContent">
          <button class="navbar-toggler border-0 text-heading position-absolute end-0 top-0 scaleX-n1-rtl" type="button"
            @click="toggleNavbar" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="ti ti-x ti-sm"></i>
          </button>
          <ul class="navbar-nav me-auto">
            <div class="app-brand-link  d-lg-none d-block-sm cursor-pointer"
              style="text-align: center;display: inline-block;">
              <VImg :src="seetingPlanLogo" width="250" height="50" class="logo-img" @click="isUserAuthenticate"></VImg>
              <!-- <span class="app-brand-logo text-center demo" style="text-align: center;display: inline-block;">
                <svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z"
                    fill="#7367F0" />
                  <path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd"
                    d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z" fill="#161616" />
                  <path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd"
                    d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z" fill="#161616" />
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
                    fill="#7367F0" />
                </svg>
              </span> -->
              <!-- <span class="app-brand-text demo menu-text fw-bold ms-2 ps-1">HGH</span> -->
            </div>
            <li class="nav-item mt-2" :class="{ 'selectedMenu': isMemeber }" v-if="getStarted"
              @click="[isNavbarOpen = false, selectnav('isMemeber')]">
              <router-link class="nav-link fw-medium" to="/login">
                <VIcon icon="mdi-user" size="20" class="me-0 d-lg-none d-block-sm" />
                Member
                Login
              </router-link>
            </li>
            <li class="nav-item d-block d-sm-none selectedMenu" v-if="authentication" @click="isNavbarOpen = false">
              <!-- <router-link class="nav-link fw-medium" :to="redirectRoute"> -->
              <VBtn @click="gotoDashboard()">
                <VIcon icon="tabler-smart-home" size="20" class="me-0  d-lg-none d-block-sm" />
                Dashboard
              </VBtn>
              <!-- </router-link> -->
            </li>
            <div :class="isContent">
              <li class="nav-item d-lg-none d-block" :class="{ 'selectedMenu': isStarted }" v-if="getStarted"
                @click="[isNavbarOpen = false, selectnav('isStarted')]">
                <router-link class="nav-link fw-medium" to="/plans">
                  <VIcon icon="tabler-arrow-bar-to-right" size="20" class="me-2" />Get
                  Started
                </router-link>
              </li>
            </div>

          </ul>
        </div>
        <div class="landing-menu-overlay d-lg-none" @click="isNavbarOpen = false"></div>
        <!-- Menu wrapper: End -->
        <!-- Toolbar: Start -->
        <ul class="navbar-nav flex-row align-items-center ms-auto d-none d-lg-block">
          <!-- Style Switcher -->
          <!-- <li class="nav-item dropdown-style-switcher dropdown me-2 me-xl-0">
              <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                <i class="ti ti-sm"></i>
              </a>
              <ul class="dropdown-menu dropdown-menu-end dropdown-styles">
                <li>
                  <a class="dropdown-item" href="javascript:void(0);" data-theme="light">
                    <span class="align-middle"><i class="ti ti-sun me-2"></i>Light</span>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);" data-theme="dark">
                    <span class="align-middle"><i class="ti ti-moon me-2"></i>Dark</span>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);" data-theme="system">
                    <span class="align-middle"><i class="ti ti-device-desktop me-2"></i>System</span>
                  </a>
                </li>
              </ul>
            </li> -->
          <!-- / Style Switcher-->

          <!-- navbar button: Start -->
          <!-- <li class="nav-item loginButton" v-show="loginButton">
              <router-link to="/login" class="pr-5">
                  Login
                </router-link>
            </li> -->

          <li class="nav-item dashboard" v-show="authentication">
            <!-- <router-link :to="redirectRoute"> -->
            <VBtn block class="text-capitalize text-white" @click="gotoDashboard()">
              Dashboard
            </VBtn>
            <!-- </router-link> -->
          </li>
          <li class="loginButton rounded-pill waves-effect waves-light" v-show="getStarted">
            <!-- <router-link to="/plans"> -->
            <!-- <VBtn block class="text-capitalize text-white" @click="getStartedFun()">
              Get Started
            </VBtn> -->
            <!-- </router-link> -->
          </li>

        </ul>
      </div>
    </div>
  </nav>
</template>
<style>
@import "@vendor/css/pages/front-page.css";

@media (min-width: 575.98px) {
  .learnmore-nav {
    border-start-end-radius: 0 !important;
    border-start-start-radius: 0 !important;
    box-shadow: 0 15px 17px #cccc !important;
    inset-block-start: 96% !important;
    transform: translate(-100%) !important;
  }
}

.logo-img {
  position: relative;
  display: block;
  margin: 0 auto;
}


.dropdown-menu {
  inline-size: 300px !important;
}

#navbar {
  position: fixed;
  inline-size: 100%;
  transition: 0.4s;

  top: 0;

  /* z-index: 999; */
}

/*  */
.section-py {
  padding-block: 5rem;
  padding-inline: 0;
}

@media (max-width: 1199.98px) {
  .section-py {
    padding-block: 4rem;
    padding-inline: 0;
  }
}

@media (max-width: 768px) {
  .section-py {
    padding-block: 3rem;
    padding-inline: 0;
  }

  .selectedMenu {
    background-color: #e6e2ff !important;
    border-radius: 7px !important;
    color: #fff8f8 !important;
  }

  .selectedMenu a {
    color: #5764ed !important;
  }
}

.first-section-pt {
  padding-block-start: 8.84rem;
}

@media (max-width: 1199.98px) {
  .first-section-pt {
    padding-block-start: 7.5rem;
  }
}

.card[class*="card-hover-border-"] {
  transition: all 0.2s ease-in-out;
}

.section-title {
  position: relative;
  z-index: 1;
  font-weight: 700;
}

.section-title::after {
  position: absolute;
  z-index: -1;
  background: url("./assets/img/front-pages/icons/section-title-icon.png") no-repeat left bottom;
  background-size: contain;
  block-size: 100%;
  content: "";
  inline-size: 120%;
  inset-block-end: 0;
  inset-inline-start: -12%;
}

.light-style body {
  background-color: #fff;
}

.dark-style body {
  background-color: #2f3349;
}

nav.layout-navbar {
  z-index: 999 !important;
  backdrop-filter: unset !important;
  block-size: auto !important;
}

nav.layout-navbar::after {
  position: absolute;
  display: block;
  block-size: 100%;
  content: "";
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
}

nav.layout-navbar.navbar-active::after {
  backdrop-filter: saturate(100%) blur(6px);
}

.navbar.landing-navbar {
  border-width: 2px;
  border-style: solid;
  border-radius: 0.5rem;
  background-color: white !important;
  box-shadow: none;
  margin-block-start: 1rem;
  padding-block: 0.75rem;
  transform: unset !important;
  transition: all 0.2s ease-in-out;
}

.navbar.landing-navbar .navbar-nav .nav-link {
  padding-block: 0.5rem;
  padding-inline: 0.9375rem;
}

@media (max-width: 1199.98px) {
  .navbar.landing-navbar .navbar-nav .nav-link {
    font-size: 18px;
    padding-inline: 0.5rem;
  }
}

@media (min-width: 992px) {
  .navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown>.dropdown-menu {
    inset-block-start: 100%;
    inset-inline-start: 50% !important;
    max-inline-size: 1300px;
    transform: translateX(-50%);
  }

  .ul-button {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown>.dropdown-menu {
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .ul-button {
    display: block;
  }
}

.navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown>.dropdown-menu .mega-dropdown-link {
  padding-inline: 0;
}

.navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown>.dropdown-menu .mega-dropdown-link i {
  font-size: 0.625rem;
}

.navbar.landing-navbar .navbar-nav .nav-item .nav-img-col,
.navbar.landing-navbar .navbar-nav .nav-item .nav-img-col img {
  border-radius: 0.625rem;
}

@media (max-width: 991.98px) {
  .navbar.landing-navbar .landing-menu-overlay {
    position: fixed;
    z-index: 9998;
    display: none;
    background-color: #fff;
    block-size: 100%;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    transition: all 0.2s ease-in-out;
  }

  .navbar.landing-navbar .landing-nav-menu {
    position: fixed;
    z-index: 9999;
    display: block !important;
    padding: 1rem;
    block-size: 100%;
    inline-size: 80%;
    inset-block-start: 0;
    inset-inline-start: -100%;
    max-inline-size: 300px;
    overflow-y: auto;
    transition: all 0.3s ease-in-out;
  }

  .navbar.landing-navbar .landing-nav-menu.show {
    inset-inline-start: 0;
  }

  .navbar.landing-navbar .landing-nav-menu.show~.landing-menu-overlay {
    display: block;
  }
}

.light-style .layout-navbar .navbar.landing-navbar {
  border-color: rgba(255, 255, 255, 68%);
  background: #fff;
}

.light-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link {
  color: #5d596c;
}

.light-style .layout-navbar .navbar.landing-navbar .navbar-nav .show>.nav-link,
.light-style .layout-navbar .navbar.landing-navbar .navbar-nav .active>.nav-link,
.light-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.show,
.light-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.active {
  color: #7367f0 !important;
}

@media (max-width: 991.98px) {
  .light-style .layout-navbar .navbar.landing-navbar .landing-nav-menu {
    background-color: #fff !important;
  }
}

.light-style .layout-navbar.navbar-active .navbar.landing-navbar {
  background: #fff;
  box-shadow: 0 0.125rem 0.25rem rgba(165, 163, 174, 30%);
}

.light-style .layout-navbar .menu-text {
  color: #5d596c;
}

.dark-style .layout-navbar .navbar.landing-navbar {
  border-color: rgba(255, 255, 255, 8%);
  background-color: rgba(255, 255, 255, 4%);
}

.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link {
  color: #cfd3ec;
}

.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .show>.nav-link,
.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .active>.nav-link,
.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.show,
.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.active {
  color: #7367f0 !important;
}





@media (max-width: 992px) {
  .collapse>ul>li.nav-item:hover {
    background-color: #e6e2ff !important;
    border-radius: 7px !important;

  }

  .collapse>ul>li>a:hover {
    color: #5764ed !important;
  }

  .dark-style .layout-navbar .navbar.landing-navbar .landing-nav-menu {
    background-color: #2f3349;
  }


}

.dark-style .layout-navbar .navbar .menu-text {
  color: #cfd3ec;
}

.dark-style .layout-navbar.navbar-active .navbar.landing-navbar {
  border-color: #2f3349;
  background: #2f3349;
  box-shadow: 0 0.125rem 0.25rem rgba(15, 20, 34, 40%);
}

@media (min-width: 992px) {


  .navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown>.dropdown-menu {
    transform: translateX(50%);
  }
}

.landing-footer .footer-link {
  transition: all 0.2s ease-in-out;
}

.landing-footer .footer-link:hover {
  opacity: 0.8;
}

.landing-footer .footer-top {
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;

  /* border-start-end-radius: 3.75rem; */

  /* border-start-start-radius: 3.75rem; */
  padding-block: 3.5rem;
  padding-inline: 0;
}

.light-style .landing-footer .footer-link,
.light-style .landing-footer .footer-text {
  color: #d3d4dc;
}

div#navbarSupportedContent {
  background-color: white;
}


@media (max-width: 991px) {
  .landing-footer .footer-top {
    padding-block: 3rem;
    padding-inline: 0;
  }

  div#navbarSupportedContent {
    background-color: white;
  }
}

@media (min-width: 992px) {
  .landing-footer .footer-logo-description {
    color: #d3d4dc;
    max-inline-size: 322px;
  }

  /* div#navbarSupportedContent {
    display: none !important;
  } */
}

p.footer-text.footer-logo-description.mb-4 {
  color: #d3d4dc;
}

.landing-footer .footer-form {
  max-inline-size: 22.25rem;
}

.landing-footer .footer-form input {
  border-color: #434968;
  background-color: #25293c;
  color: #d3d4dc;
}

.landing-footer .footer-form input:hover:not([disabled], [focus]) {
  border-color: #434968;
}

.landing-footer .footer-form input::placeholder {
  color: rgba(211, 212, 220, 50%);
}

.landing-footer .footer-form label {
  color: rgba(211, 212, 220, 50%);
}

.light-style .landing-footer .footer-link,
.light-style .landing-footer .footer-text {
  color: #d3d4dc;
}

.light-style .landing-footer .footer-title {
  color: #fff;
}

.light-style .landing-footer .footer-top {
  background-image: url("/assets/img/front-pages/backgrounds/footer-bg-light.png");
}

.light-style .landing-footer .footer-bottom {
  background-color: #282c3e;
}

.dark-style .landing-footer .footer-link,
.dark-style .landing-footer .footer-text {
  color: #b6bee3;
}

.dark-style .landing-footer .footer-title {
  color: #cfd3ec;
}

.dark-style .landing-footer .footer-top {
  background-image: url("/assets/img/front-pages/backgrounds/footer-bg-dark.png");
}

/* @media (max-width: 991.98px){
  .light-style .layout-navbar .navbar.landing-navbar .landing-nav-menu {
    background-color: #fff;
  }
} */

.dark-style .landing-footer .footer-bottom {
  background-color: #171925;
}

.app-brand-logo.demo {
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  width: 150px !important;
  height: 30px;
}
</style>
