<template>
  <div>
    <div class="container-fluid px-lg-4" style="position:fixed; z-index:2;">
      <div class="header d-flex flex-column flex-fill flex-md-row justify-content-between pt-3">
        <div class="header__logo pt-md-1 pt-lg-1">
          <nuxt-link class="navbar-brand" to="/">
            <div class="text-center text-md-start">
              <img src="/mindboostlogo.svg" height="35" class="img " alt="imae">
            </div>
          </nuxt-link>
        </div>
        <div class="header__title text-center">
          <a class="text-decoration-none fs-3 fw-bolder" aria-current="page" href="#">
            <span class="mx-2">
              <component :is="currentSoundscapeSVG" />
            </span>
            {{ title }}
          </a>
        </div>
        <div class="header__nav col-3 d-md-block ">
          <div class="navbar-controls">
            <ul class="nav px-1 py-1 " style="border-radius: 6px;background-color: #f5f5f5">
              <li class="nav-item mx-1">
                <a
                  v-if="!isPlaying()"
                  id="foucused-icon"
                  :class="{'router-link-exact-active': true}"
                  class="nav-link nav-icons "
                  style="padding: 5px 8px"
                  @click.prevent="playSound"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 19 20" fill="none">
                    <path d="M2.69824 0.055674C1.5521 0.101019 0.5 1.0361 0.5 2.29591V17.7041C0.5 19.3839 2.37138 20.486 3.84082 19.6719L17.7451 11.9678C19.2568 11.1301 19.2568 8.86988 17.7451 8.03224L3.84082 0.328135C3.47346 0.124617 3.08029 0.0405589 2.69824 0.055674ZM2.71582 1.53321C2.84512 1.53266 2.98064 1.56618 3.11328 1.63966L17.0186 9.34376C17.5678 9.64811 17.5678 10.3519 17.0186 10.6563L3.11328 18.3604C2.58272 18.6543 2 18.3104 2 17.7041V2.29591C2 1.99278 2.14535 1.75582 2.35742 1.63087C2.46346 1.5684 2.58652 1.53377 2.71582 1.53321Z" fill="#030504" fill-opacity="0.4" />
                  </svg>
                </a>
                <a
                  v-else
                  id="foucused-icon"
                  :class="{'router-link-exact-active': false}"
                  class="nav-link nav-icons "
                  style="padding: 5px 8px"
                  @click.prevent="playSound"
                >
                  <svg
                    width="20"
                    height="24"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M 7.9999805 4.5 A 0.49999499 0.49999499 0 0 0 7.5 4.9999805 L 7.5 19.00002 A 0.49999499 0.49999499 0 0 0 7.9999805 19.5 A 0.49999499 0.49999499 0 0 0 8.5000195 19.00002 L 8.5000195 4.9999805 A 0.49999499 0.49999499 0 0 0 7.9999805 4.5 z M 16.00002 4.5 A 0.49999499 0.49999499 0 0 0 15.49998 4.9999805 L 15.49998 19.00002 A 0.49999499 0.49999499 0 0 0 16.00002 19.5 A 0.49999499 0.49999499 0 0 0 16.5 19.00002 L 16.5 4.9999805 A 0.49999499 0.49999499 0 0 0 16.00002 4.5 z "
                    />
                  </svg>

                </a>
              </li>

              <li class="nav-item dropdown ">
                <a class="nav-link  nav-icons  " style="padding: 5px 8px" aria-current="page" data-bs-toggle="dropdown" href="#">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24" fill="none">
                    <path d="M8.07207 0.952443C7.8077 0.958068 7.59582 1.17557 7.59957 1.43994V14.3999C7.59957 14.9999 7.6802 15.5681 7.98395 16.0349C8.2877 16.5018 8.8502 16.7999 9.51957 16.7999V20.2499C8.96457 20.4506 8.55957 20.9793 8.55957 21.5999C8.55957 22.3893 9.2102 23.0399 9.99957 23.0399C10.7889 23.0399 11.4396 22.3893 11.4396 21.5999C11.4396 20.9793 11.0346 20.4506 10.4796 20.2499V16.7999C11.0964 16.7999 11.6346 16.5018 11.9514 16.0499C12.2702 15.5962 12.3996 15.0206 12.3996 14.3999V1.43994C12.4014 1.26744 12.3114 1.10619 12.1614 1.01807C12.0114 0.931818 11.8277 0.931818 11.6777 1.01807C11.5277 1.10619 11.4377 1.26744 11.4396 1.43994V14.3999C11.4396 14.8818 11.3289 15.2662 11.1677 15.4968C11.0046 15.7293 10.8227 15.8399 10.4796 15.8399H9.51957C9.08645 15.8399 8.93082 15.7293 8.7902 15.5118C8.6477 15.2943 8.55957 14.9024 8.55957 14.3999V1.43994C8.56145 1.31057 8.51082 1.18494 8.41895 1.09307C8.32707 1.00119 8.20145 0.950568 8.07207 0.952443ZM3.0377 3.83619C2.91207 3.83807 2.79394 3.89057 2.7077 3.98057C0.27582 6.41244 0.27582 10.3724 2.7077 12.8043C2.8277 12.9299 3.0077 12.9806 3.17457 12.9374C3.34332 12.8943 3.47457 12.7612 3.5177 12.5943C3.5627 12.4256 3.51207 12.2474 3.38645 12.1274C1.3202 10.0593 1.3202 6.72557 3.38645 4.65932C3.52895 4.52057 3.5702 4.31057 3.49332 4.12869C3.41645 3.94494 3.23644 3.82869 3.0377 3.83619ZM16.9464 4.08182C16.7514 4.08182 16.5771 4.19994 16.5039 4.38182C16.4308 4.56182 16.4739 4.76994 16.6146 4.90494C18.6789 6.97119 18.6789 10.3068 16.6146 12.3731C16.4889 12.4931 16.4383 12.6731 16.4814 12.8399C16.5246 13.0087 16.6577 13.1399 16.8246 13.1831C16.9933 13.2281 17.1714 13.1774 17.2914 13.0518C19.7252 10.6181 19.7252 6.65994 17.2914 4.22619C17.2014 4.13432 17.0777 4.08182 16.9464 4.08182ZM4.3952 5.19182C4.26957 5.19557 4.15144 5.24807 4.0652 5.33807C2.38144 7.02182 2.38144 9.76494 4.0652 11.4468C4.1852 11.5724 4.3652 11.6231 4.53207 11.5799C4.70082 11.5368 4.83207 11.4037 4.8752 11.2368C4.9202 11.0681 4.86957 10.8899 4.74395 10.7699C3.4277 9.45369 3.4277 7.33307 4.74395 6.01682C4.88645 5.87807 4.9277 5.66807 4.85082 5.48619C4.77395 5.30244 4.59395 5.18619 4.3952 5.19182ZM15.5889 5.43932C15.3939 5.43932 15.2196 5.55744 15.1446 5.73932C15.0714 5.91932 15.1146 6.12744 15.2552 6.26244C16.5714 7.57869 16.5714 9.69932 15.2552 11.0156C15.1296 11.1356 15.0789 11.3156 15.1239 11.4824C15.1671 11.6512 15.2983 11.7824 15.4671 11.8256C15.6339 11.8706 15.8139 11.8199 15.9339 11.6943C17.6177 10.0106 17.6177 7.26744 15.9339 5.58557C15.8439 5.49182 15.7202 5.43932 15.5889 5.43932ZM5.7527 6.54932C5.62707 6.55307 5.50895 6.60557 5.4227 6.69557C4.48895 7.62932 4.48895 9.15744 5.4227 10.0893C5.5427 10.2149 5.7227 10.2656 5.88957 10.2224C6.05832 10.1793 6.18957 10.0462 6.2327 9.87932C6.2777 9.71057 6.22707 9.53244 6.10145 9.41244C5.5352 8.84432 5.5352 7.94057 6.10145 7.37432C6.24395 7.23557 6.2852 7.02557 6.20832 6.84369C6.13144 6.65994 5.95145 6.54369 5.7527 6.54932ZM14.2314 6.79682C14.0364 6.79869 13.8621 6.91682 13.7871 7.09682C13.7139 7.27869 13.7571 7.48494 13.8977 7.62182C14.4639 8.18807 14.4639 9.09182 13.8977 9.65807C13.7721 9.77807 13.7214 9.95807 13.7664 10.1249C13.8096 10.2937 13.9408 10.4249 14.1096 10.4681C14.2764 10.5131 14.4564 10.4624 14.5764 10.3368C15.5102 9.40307 15.5102 7.87682 14.5764 6.94307C14.4864 6.84932 14.3627 6.79869 14.2314 6.79682ZM9.99957 21.1199C10.2696 21.1199 10.4796 21.3299 10.4796 21.5999C10.4796 21.8699 10.2696 22.0799 9.99957 22.0799C9.72957 22.0799 9.51957 21.8699 9.51957 21.5999C9.51957 21.3299 9.72957 21.1199 9.99957 21.1199Z" fill="#030504" fill-opacity="0.4" />
                  </svg>
                </a>
                <ul class="dropdown-menu home-dropdown dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
                  <li>
                    <nuxt-link id="lagoonLinkHomebar" :class="{'drop-active':form.soundscape=='Lagoon'}" class="dropdown-item py-2 text-muted fw-bold fs-6 " @click="saveSetting('Lagoon', 'soundscape')">
                      {{ t('Lagoon') }}
                      <span class="float-end">
                        <WaveSVG />
                      </span>
                    </nuxt-link>
                  </li>
                  <li>
                    <a id="tropicsLinkHomebar" :class="{'drop-select':form.soundscape=='x'}" class="dropdown-item text-muted fw-bold fs-6 py-2" @click="saveSetting('x', 'soundscape')">
                      {{ t('Tropics') }}
                      <span class="float-end">
                        <TropicsSVG />
                      </span>
                    </a>
                  </li>
                  <li>
                    <nuxt-link id="forestLinkHomebar" :class="{'drop-select':form.soundscape=='Forest'}" class="dropdown-item text-muted fw-bold fs-6 py-2" @click="saveSetting('Forest', 'soundscape')">
                      {{ t('Forest') }}
                      <span class="float-end">
                        <ForestSVG />
                      </span>
                    </nuxt-link>
                  </li>
                  <li>
                    <nuxt-link id="meadowLinkHomebar" :class="{'drop-select':form.soundscape=='Meadow'}" class="dropdown-item text-muted fw-bold fs-6 py-2" @click="saveSetting('Meadow', 'soundscape')">
                      {{ t('Meadow') }}
                      <span class="float-end">
                        <MeadowSVG />
                      </span>
                    </nuxt-link>
                  </li>
                </ul>
              </li>
              <li class="nav-item mx-1  dropdown">
                <a
                  class="nav-link nav-icons  "
                  style="padding: 5px 8px"
                  data-bs-auto-close="outside"
                  data-bs-toggle="dropdown"
                  href="#"
                  :title="t('Headphones specifications')"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 22 24" fill="none">
                    <path d="M11.0004 0.47998C5.4519 0.47998 0.92043 4.77028 0.92043 10.08C0.856824 10.0791 0.793674 10.0908 0.734649 10.1146C0.675625 10.1383 0.621903 10.1735 0.576605 10.2181C0.531308 10.2628 0.495338 10.316 0.470787 10.3747C0.446236 10.4334 0.433594 10.4964 0.433594 10.56C0.433594 10.6236 0.446236 10.6866 0.470787 10.7453C0.495338 10.8039 0.531308 10.8572 0.576605 10.9018C0.621903 10.9465 0.675625 10.9817 0.734649 11.0054C0.793674 11.0291 0.856824 11.0409 0.92043 11.04H1.88043C1.94404 11.0409 2.00719 11.0291 2.06621 11.0054C2.12524 10.9817 2.17896 10.9465 2.22426 10.9018C2.26955 10.8572 2.30552 10.8039 2.33007 10.7453C2.35462 10.6866 2.36727 10.6236 2.36727 10.56C2.36727 10.4964 2.35462 10.4334 2.33007 10.3747C2.30552 10.316 2.26955 10.2628 2.22426 10.2181C2.17896 10.1735 2.12524 10.1383 2.06621 10.1146C2.00719 10.0908 1.94404 10.0791 1.88043 10.08C1.88043 9.91324 1.89685 9.75035 1.90668 9.58592C1.97363 9.61 2.0451 9.6189 2.11592 9.61196C2.18673 9.60503 2.25512 9.58245 2.31613 9.54584C2.37714 9.50923 2.42926 9.45952 2.4687 9.4003C2.50814 9.34107 2.53392 9.27383 2.54418 9.20342C2.70278 8.30776 3.42671 6.80505 4.79699 5.57623C6.16728 4.34741 8.16847 3.35998 10.9517 3.35998C13.7349 3.35998 15.7361 4.34741 17.1064 5.57623C18.4767 6.80505 19.2006 8.30776 19.3592 9.20342C19.3707 9.2827 19.4018 9.35784 19.4498 9.422C19.4977 9.48616 19.561 9.5373 19.6338 9.57076C19.7066 9.60422 19.7866 9.61893 19.8665 9.61355C19.9464 9.60818 20.0237 9.58288 20.0914 9.53998C20.1031 9.71946 20.1204 9.89773 20.1204 10.08C20.0568 10.0791 19.9937 10.0908 19.9347 10.1146C19.8756 10.1383 19.8219 10.1735 19.7766 10.2181C19.7313 10.2628 19.6953 10.316 19.6708 10.3747C19.6462 10.4334 19.6336 10.4964 19.6336 10.56C19.6336 10.6236 19.6462 10.6866 19.6708 10.7453C19.6953 10.8039 19.7313 10.8572 19.7766 10.9018C19.8219 10.9465 19.8756 10.9817 19.9347 11.0054C19.9937 11.0291 20.0568 11.0409 20.1204 11.04H21.0804C21.144 11.0409 21.2072 11.0291 21.2662 11.0054C21.3252 10.9817 21.379 10.9465 21.4243 10.9018C21.4696 10.8572 21.5055 10.8039 21.5301 10.7453C21.5546 10.6866 21.5673 10.6236 21.5673 10.56C21.5673 10.4964 21.5546 10.4334 21.5301 10.3747C21.5055 10.316 21.4696 10.2628 21.4243 10.2181C21.379 10.1735 21.3252 10.1383 21.2662 10.1146C21.2072 10.0908 21.144 10.0791 21.0804 10.08C21.0804 4.77028 16.549 0.47998 11.0004 0.47998ZM11.0004 1.43998C14.9107 1.43998 18.2181 3.76325 19.5204 7.01811C19.0986 6.29404 18.5119 5.54723 17.7476 4.86186C16.2191 3.49111 13.9645 2.39998 10.9517 2.39998C7.93889 2.39998 5.6843 3.49111 4.15574 4.86186C3.55428 5.40123 3.06686 5.97857 2.67918 6.55311C4.10045 3.54398 7.27854 1.43998 11.0004 1.43998ZM0.92043 12V13.3462H0.951368C0.664895 13.6177 0.44043 14.0639 0.44043 14.6747C0.44043 15.1667 0.578073 15.8774 0.802305 16.7531C1.02654 17.6288 1.34281 18.641 1.71824 19.6106C2.09368 20.5802 2.52498 21.5046 3.00262 22.2178C3.48025 22.931 4.00733 23.52 4.76043 23.52C5.37357 23.52 5.81461 23.1402 6.03918 22.7503V22.7494C6.06026 22.7128 6.07016 22.6823 6.08606 22.6481C6.2838 22.7089 6.50363 22.7372 6.73949 22.7372C7.02194 22.7372 7.30006 22.6572 7.51387 22.4915C7.72767 22.3259 7.86177 22.0936 7.93668 21.8559C8.08649 21.3806 8.05007 20.8531 7.95356 20.2762C7.76052 19.1225 7.27091 17.7692 6.87449 16.7203C6.47725 15.6685 6.12135 14.6762 5.69512 13.9022C5.482 13.5152 5.25182 13.1784 4.96106 12.9187C4.67029 12.6591 4.29583 12.48 3.88668 12.48C3.36613 12.48 2.89718 12.7053 2.63699 13.0837C2.62622 13.0994 2.6208 13.1174 2.61074 13.1334C2.43266 13.0471 2.19275 12.96 1.88043 12.96V12H0.92043ZM20.1204 12V12.96C19.8081 12.96 19.5682 13.0471 19.3901 13.1334C19.3801 13.1174 19.3746 13.0994 19.3639 13.0837C19.1037 12.7053 18.6347 12.48 18.1142 12.48C17.705 12.48 17.3306 12.6591 17.0398 12.9187C16.749 13.1784 16.5189 13.5152 16.3057 13.9022C15.8795 14.6762 15.5236 15.6685 15.1264 16.7203C14.73 17.7692 14.2403 19.1225 14.0473 20.2762C13.9508 20.8531 13.9144 21.3806 14.0642 21.8559C14.1391 22.0936 14.2732 22.3259 14.487 22.4915C14.7008 22.6572 14.9789 22.7372 15.2614 22.7372C15.4969 22.7372 15.7163 22.7087 15.9139 22.6481C15.9299 22.6826 15.9403 22.7134 15.9617 22.7503C16.1863 23.1402 16.6273 23.52 17.2404 23.52C17.9935 23.52 18.5206 22.931 18.9982 22.2178C19.4759 21.5046 19.9072 20.5802 20.2826 19.6106C20.6581 18.641 20.9743 17.6288 21.1986 16.7531C21.4228 15.8774 21.5604 15.1667 21.5604 14.6747C21.5604 14.0639 21.336 13.6177 21.0495 13.3462H21.0804V12H20.1204ZM3.88668 13.44C4.03457 13.44 4.15563 13.4875 4.32074 13.635C4.48585 13.7824 4.67154 14.0336 4.85418 14.3653C5.21947 15.0286 5.57633 16.0004 5.97637 17.0597C6.36763 18.0949 6.83792 19.426 7.00668 20.4347C7.09106 20.939 7.08544 21.3619 7.02074 21.5672C6.98839 21.6698 6.95448 21.7101 6.92606 21.7322C6.89763 21.7542 6.85833 21.7772 6.73949 21.7772C6.39542 21.7772 6.30195 21.7301 6.21449 21.6525C6.12703 21.5748 6.01056 21.379 5.84981 21.0234C5.54352 20.346 5.00116 18.8189 4.54387 17.5894C4.31722 16.98 4.04965 16.245 3.82481 15.6019C3.60009 14.9591 3.41391 14.3824 3.37012 14.1928V14.1919C3.3095 13.9276 3.35352 13.7362 3.42824 13.6275C3.50309 13.5186 3.61091 13.44 3.88668 13.44ZM18.1142 13.44C18.39 13.44 18.4978 13.5186 18.5726 13.6275C18.6475 13.7363 18.6918 13.9278 18.6307 14.1928C18.587 14.3824 18.4008 14.9591 18.1761 15.6019C17.9512 16.245 17.6836 16.98 17.457 17.5894C16.9997 18.8188 16.4571 20.3456 16.1511 21.0234C15.9903 21.379 15.8738 21.5748 15.7864 21.6525C15.6989 21.7301 15.6054 21.7772 15.2614 21.7772C15.1425 21.7772 15.1032 21.7542 15.0748 21.7322C15.0464 21.7101 15.0125 21.6698 14.9801 21.5672C14.9154 21.3619 14.9098 20.939 14.9942 20.4347C15.1629 19.426 15.6332 18.0949 16.0245 17.0597C16.4245 16.0004 16.7814 15.0286 17.1467 14.3653C17.3293 14.0336 17.515 13.7824 17.6801 13.635C17.8452 13.4875 17.9663 13.44 18.1142 13.44ZM1.88043 13.92C2.06945 13.92 2.14079 13.9561 2.24512 14.0147C2.28247 14.0356 2.33716 14.073 2.39137 14.1075C2.39944 14.2073 2.41152 14.3078 2.43449 14.4075C2.43449 14.4078 2.43449 14.4081 2.43449 14.4084C2.50797 14.727 2.69021 15.2665 2.91824 15.9187C3.14628 16.571 3.41547 17.3099 3.64387 17.924C4.09665 19.1415 4.6238 20.6411 4.97512 21.4181C5.07725 21.644 5.17427 21.8488 5.29668 22.035C5.29211 22.0493 5.28281 22.0695 5.27887 22.0819C5.2479 22.1791 5.22983 22.2319 5.20762 22.2703C5.13163 22.4024 4.93996 22.56 4.76043 22.56C4.61353 22.56 4.21061 22.2973 3.79949 21.6834C3.38838 21.0696 2.97218 20.1923 2.61262 19.2637C2.25305 18.3351 1.94682 17.3527 1.73231 16.515C1.51779 15.6772 1.40043 14.9555 1.40043 14.6747C1.40043 14.2124 1.52754 14.0885 1.63199 14.0109C1.73644 13.9334 1.90014 13.92 1.88043 13.92ZM20.1204 13.92C20.1007 13.92 20.2644 13.9334 20.3689 14.0109C20.4733 14.0885 20.6004 14.2124 20.6004 14.6747C20.6004 14.9555 20.4831 15.6772 20.2686 16.515C20.054 17.3527 19.7478 18.3351 19.3882 19.2637C19.0287 20.1923 18.6125 21.0696 18.2014 21.6834C17.7903 22.2973 17.3873 22.56 17.2404 22.56C17.0609 22.56 16.8693 22.4024 16.7932 22.2703C16.771 22.2319 16.753 22.1791 16.722 22.0819C16.7181 22.0695 16.7088 22.0493 16.7042 22.035C16.8266 21.8488 16.9236 21.644 17.0257 21.4181C17.3763 20.6416 17.9042 19.1416 18.357 17.924C18.5854 17.3099 18.8546 16.571 19.0826 15.9187C19.3107 15.2665 19.4929 14.727 19.5664 14.4084C19.5664 14.4081 19.5664 14.4078 19.5664 14.4075C19.5893 14.3078 19.6014 14.2073 19.6095 14.1075C19.6637 14.073 19.7184 14.0356 19.7557 14.0147C19.8601 13.9561 19.9314 13.92 20.1204 13.92Z" fill="#030504" fill-opacity="0.4" />
                  </svg>
                </a>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
                  <li>
                    <div id="accordionFlushExample" class="accordion accordion-flush p-0 m-0">
                      <div class="accordion-item">
                        <h4 id="flush-headingOne" class="accordion-header">
                          <button
                            class="accordion-button accordion-button-homebar text-muted fs-6 fw-bold py-2 px-3 m-0 collapsed"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#flush-collapseOne"
                            aria-expanded="false"
                            aria-controls="flush-collapseOne"
                          >
                            {{ t('Headphones Type') }}
                          </button>
                        </h4>
                        <div id="flush-collapseOne" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                          <div class="accordion-body p-0 m-0">
                            <ul class="nav flex-column home-dropdown">
                              <li class="nav-item">
                                <a :class="{'drop-active':form.headphone_type=='In-ear'}" class="nav-link  text-decoration-none text-muted" aria-current="page" href="#" @click.prevent="saveSetting('In-ear','headphone')">In-Ear  <span class="float-end">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="14" viewBox="0 0 20 14" fill="none">
                                    <path d="M5.86326 0.60383C5.69013 0.609264 5.51657 0.627075 5.34451 0.657737C4.88569 0.739501 4.4352 0.912309 4.02107 1.18117L3.30544 1.64524C2.71774 2.02688 2.27864 2.55432 2.00544 3.14758C1.98493 3.14951 1.96412 3.14938 1.94373 3.15227H1.94294C1.75699 3.17883 1.57619 3.24528 1.41404 3.35071C-0.00156889 4.27007 -0.428929 6.152 0.481226 7.54055C1.39142 8.92916 3.28901 9.29666 4.70466 8.37727C4.74672 8.34996 4.78281 8.3166 4.82107 8.28508V12.3999C4.82107 13.1684 5.45259 13.7999 6.22107 13.7999H6.62107C7.38955 13.7999 8.02107 13.1684 8.02107 12.3999V7.17571C9.63509 6.08744 10.0866 3.89546 9.01638 2.26321H9.0156L8.98826 2.22102C8.27851 1.13851 7.07518 0.565795 5.86326 0.60383ZM14.1367 0.60383C12.9248 0.565795 11.7215 1.13853 11.0117 2.22102L10.9844 2.26321H10.9836C9.91334 3.89546 10.3649 6.08744 11.9789 7.17571V12.3999C11.9789 13.1684 12.6104 13.7999 13.3789 13.7999H13.7789C14.5474 13.7999 15.1789 13.1684 15.1789 12.3999V8.28508C15.2171 8.3166 15.2532 8.34996 15.2953 8.37727C16.7109 9.29666 18.6085 8.92916 19.5187 7.54055C20.4289 6.152 20.0015 4.27007 18.5859 3.35071C18.4238 3.24528 18.243 3.17883 18.057 3.15227H18.0562C18.0358 3.14937 18.015 3.14951 17.9945 3.14758C17.7213 2.55435 17.2822 2.02688 16.6945 1.64524L15.9789 1.18117C15.5648 0.912309 15.1143 0.739501 14.6554 0.657737C14.4834 0.627075 14.3098 0.609264 14.1367 0.60383ZM6.02576 1.39836C6.92104 1.41207 7.79198 1.85474 8.31951 2.6593V2.66008L8.34763 2.70227C9.19089 3.98939 8.82915 5.69986 7.53513 6.54055L7.38201 6.63977L6.81951 7.00539C6.34418 7.31393 5.81229 7.45778 5.28591 7.45539C5.29385 7.39239 5.29784 7.3285 5.29607 7.26399C5.28081 6.71556 5.13096 5.85253 4.51638 4.91555C3.95274 4.05623 3.29846 3.58927 2.80857 3.33508C3.02187 2.93601 3.33186 2.58227 3.74138 2.31633L4.45701 1.85149C4.94251 1.53628 5.48859 1.39014 6.02576 1.39836ZM13.9742 1.39836C14.5114 1.39014 15.0574 1.53628 15.5429 1.85149L16.2586 2.31633C16.6681 2.58227 16.9781 2.93601 17.1914 3.33508C16.7015 3.58927 16.0472 4.05623 15.4836 4.91555C14.869 5.85253 14.7191 6.71556 14.7039 7.26399C14.7021 7.32823 14.7062 7.39186 14.714 7.45461C14.1877 7.457 13.6558 7.31393 13.1804 7.00539L12.6179 6.63977L12.4648 6.54055H12.464C11.1704 5.69974 10.8092 3.98923 11.6523 2.70227L11.6531 2.70149L11.6804 2.66008V2.6593C12.208 1.85474 13.0789 1.41207 13.9742 1.39836ZM6.67966 2.22961C6.56437 2.22145 6.44581 2.24642 6.33826 2.30852L5.29841 2.90852C5.01161 3.07412 4.91328 3.44125 5.07888 3.72805C5.24448 4.01485 5.61161 4.11318 5.89841 3.94758L6.93826 3.34758C7.22506 3.18198 7.32339 2.81485 7.15779 2.52805C7.05429 2.3488 6.87182 2.24322 6.67966 2.22961ZM13.3203 2.22961C13.1281 2.24322 12.9457 2.3488 12.8422 2.52805C12.6766 2.81485 12.7749 3.18198 13.0617 3.34758L14.1015 3.94758C14.3883 4.11318 14.7555 4.01485 14.9211 3.72805C15.0867 3.44125 14.9883 3.07412 14.7015 2.90852L13.6617 2.30852C13.5541 2.24642 13.4356 2.22145 13.3203 2.22961ZM2.05544 3.94367C2.15001 3.93026 2.24566 3.94415 2.33044 3.9843H2.33123C2.72151 4.16819 3.32214 4.55465 3.84685 5.35461C4.37147 6.15443 4.48413 6.85669 4.49607 7.28586C4.49887 7.38806 4.46868 7.48582 4.40935 7.57102C4.37312 7.62294 4.32668 7.66905 4.26951 7.70617C3.20676 8.39638 1.81658 8.11847 1.14998 7.10149C0.48333 6.08444 0.787183 4.71203 1.84998 4.0218C1.91401 3.98016 1.98405 3.95398 2.05544 3.94367ZM17.8031 3.94367C17.8493 3.93687 17.8966 3.93706 17.9437 3.94367C18.0154 3.95391 18.0857 3.98003 18.15 4.0218C19.2128 4.71203 19.5166 6.08444 18.85 7.10149C18.1834 8.11847 16.7932 8.39638 15.7304 7.70617C15.6733 7.66905 15.6268 7.62294 15.5906 7.57102C15.5313 7.48582 15.5011 7.38806 15.5039 7.28586C15.5158 6.85669 15.6285 6.15443 16.1531 5.35461C16.6778 4.55465 17.2784 4.16819 17.6687 3.9843H17.6695C17.7118 3.96429 17.7569 3.95048 17.8031 3.94367ZM2.01951 5.4218C1.92048 5.42359 1.82564 5.46204 1.75334 5.52973C1.68104 5.59741 1.63641 5.68951 1.6281 5.78821C1.59915 6.08549 1.66547 6.39728 1.83982 6.66477V6.66555C2.01442 6.93255 2.27361 7.11937 2.55779 7.21242C2.60816 7.23057 2.66166 7.23841 2.71512 7.2355C2.76858 7.23258 2.82091 7.21897 2.86901 7.19546C2.91711 7.17195 2.96 7.13903 2.99514 7.09864C3.03028 7.05825 3.05696 7.01121 3.07359 6.96032C3.09022 6.90944 3.09647 6.85573 3.09196 6.80238C3.08746 6.74903 3.07229 6.69713 3.04736 6.64975C3.02242 6.60237 2.98823 6.56048 2.94682 6.52656C2.9054 6.49264 2.85759 6.46737 2.80623 6.45227C2.68261 6.41179 2.58191 6.33754 2.51013 6.22805C2.43888 6.11874 2.41154 5.99546 2.42419 5.86555C2.43041 5.80907 2.42453 5.75191 2.40693 5.69789C2.38933 5.64386 2.36043 5.5942 2.32214 5.55222C2.28385 5.51023 2.23706 5.47688 2.18488 5.4544C2.13269 5.43191 2.07632 5.4208 2.01951 5.4218ZM17.9687 5.4218C17.9129 5.42245 17.8578 5.43478 17.8071 5.458C17.7563 5.48121 17.7109 5.5148 17.6739 5.5566C17.6369 5.59839 17.609 5.64747 17.5921 5.70068C17.5752 5.75389 17.5697 5.81005 17.5758 5.86555C17.5884 5.99546 17.5611 6.11874 17.4898 6.22805C17.418 6.33754 17.3173 6.41179 17.1937 6.45227C17.1424 6.46737 17.0946 6.49264 17.0531 6.52656C17.0117 6.56048 16.9775 6.60237 16.9526 6.64975C16.9277 6.69713 16.9125 6.74903 16.908 6.80238C16.9035 6.85573 16.9097 6.90944 16.9264 6.96032C16.943 7.01121 16.9697 7.05825 17.0048 7.09864C17.04 7.13903 17.0828 7.17195 17.1309 7.19546C17.179 7.21897 17.2314 7.23258 17.2848 7.2355C17.3383 7.23841 17.3918 7.23057 17.4422 7.21242C17.7263 7.11937 17.9855 6.93255 18.1601 6.66555V6.66477C18.3345 6.39728 18.4008 6.08549 18.3719 5.78821C18.3634 5.68751 18.3171 5.59375 18.2423 5.52578C18.1675 5.45781 18.0698 5.42066 17.9687 5.4218ZM7.22107 7.69602V12.3999C7.22107 12.7362 6.95739 12.9999 6.62107 12.9999H6.22107C5.88475 12.9999 5.62107 12.7362 5.62107 12.3999V8.23977C6.17397 8.18959 6.72271 8.01196 7.22107 7.69602ZM12.7789 7.69602C13.2772 8.01196 13.826 8.18959 14.3789 8.23977V12.3999C14.3789 12.7362 14.1152 12.9999 13.7789 12.9999H13.3789C13.0426 12.9999 12.7789 12.7362 12.7789 12.3999V7.69602Z" fill="#030504" fill-opacity="0.8" />
                                  </svg></span></a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link text-muted" :class="{'drop-active':form.headphone_type=='Over-ear'}" href="#" @click.prevent="saveSetting('Over-ear','headphone')">Over-Ear <span class="float-end">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                    <path d="M9.99906 0.399902C5.37528 0.399902 1.59906 3.97515 1.59906 8.3999C1.54605 8.39915 1.49343 8.40895 1.44424 8.42871C1.39505 8.44848 1.35028 8.47782 1.31254 8.51504C1.27479 8.55226 1.24481 8.59661 1.22435 8.64551C1.20389 8.69441 1.19336 8.74689 1.19336 8.7999C1.19336 8.85291 1.20389 8.90539 1.22435 8.9543C1.24481 9.0032 1.27479 9.04755 1.31254 9.08477C1.35028 9.12198 1.39505 9.15133 1.44424 9.17109C1.49343 9.19086 1.54605 9.20065 1.59906 9.1999H2.39906C2.45206 9.20065 2.50469 9.19086 2.55387 9.17109C2.60306 9.15133 2.64783 9.12198 2.68558 9.08477C2.72333 9.04755 2.7533 9.0032 2.77376 8.9543C2.79422 8.90539 2.80475 8.85291 2.80475 8.7999C2.80475 8.74689 2.79422 8.69441 2.77376 8.64551C2.7533 8.59661 2.72333 8.55226 2.68558 8.51504C2.64783 8.47782 2.60306 8.44848 2.55387 8.42871C2.50469 8.40895 2.45206 8.39915 2.39906 8.3999C2.39906 8.26095 2.41274 8.12521 2.42093 7.98818C2.47673 8.00825 2.53628 8.01566 2.5953 8.00989C2.65431 8.00411 2.7113 7.98529 2.76214 7.95478C2.81298 7.92428 2.85641 7.88285 2.88928 7.8335C2.92215 7.78415 2.94363 7.72811 2.95218 7.66943C3.08435 6.92305 3.68762 5.67079 4.82952 4.64678C5.97143 3.62276 7.63909 2.7999 9.95843 2.7999C12.2778 2.7999 13.9454 3.62276 15.0873 4.64678C16.2292 5.67079 16.8325 6.92305 16.9647 7.66943C16.9743 7.7355 17.0002 7.79812 17.0402 7.85159C17.0801 7.90506 17.1329 7.94767 17.1935 7.97555C17.2542 8.00343 17.3208 8.01569 17.3874 8.01121C17.454 8.00673 17.5185 7.98565 17.5748 7.9499C17.5846 8.09947 17.5991 8.24803 17.5991 8.3999C17.5461 8.39915 17.4934 8.40895 17.4442 8.42871C17.3951 8.44848 17.3503 8.47782 17.3125 8.51504C17.2748 8.55226 17.2448 8.59661 17.2244 8.64551C17.2039 8.69441 17.1934 8.74689 17.1934 8.7999C17.1934 8.85291 17.2039 8.90539 17.2244 8.9543C17.2448 9.0032 17.2748 9.04755 17.3125 9.08477C17.3503 9.12198 17.3951 9.15133 17.4442 9.17109C17.4934 9.19086 17.5461 9.20065 17.5991 9.1999H18.3991C18.4521 9.20065 18.5047 9.19086 18.5539 9.17109C18.6031 9.15133 18.6478 9.12198 18.6856 9.08477C18.7233 9.04755 18.7533 9.0032 18.7738 8.9543C18.7942 8.90539 18.8048 8.85291 18.8048 8.7999C18.8048 8.74689 18.7942 8.69441 18.7738 8.64551C18.7533 8.59661 18.7233 8.55226 18.6856 8.51504C18.6478 8.47782 18.6031 8.44848 18.5539 8.42871C18.5047 8.40895 18.4521 8.39915 18.3991 8.3999C18.3991 3.97515 14.6228 0.399902 9.99906 0.399902ZM9.99906 1.1999C13.2576 1.1999 16.0138 3.13596 17.0991 5.84834C16.7475 5.24495 16.2586 4.62261 15.6217 4.05146C14.3479 2.90918 12.4691 1.9999 9.95843 1.9999C7.44777 1.9999 5.56894 2.90918 4.29515 4.05146C3.79393 4.50094 3.38775 4.98206 3.06468 5.46084C4.24908 2.95324 6.89748 1.1999 9.99906 1.1999ZM1.59906 9.9999V11.1218H1.62484C1.38611 11.348 1.19906 11.7199 1.19906 12.2288C1.19906 12.6388 1.31376 13.2311 1.50062 13.9608C1.68748 14.6906 1.95104 15.5341 2.2639 16.3421C2.57676 17.1501 2.93618 17.9204 3.33421 18.5147C3.73224 19.1091 4.17147 19.5999 4.79906 19.5999C5.31001 19.5999 5.67754 19.2834 5.86468 18.9585V18.9577C5.88225 18.9273 5.8905 18.9018 5.90374 18.8733C6.06853 18.924 6.25172 18.9476 6.44828 18.9476C6.68365 18.9476 6.91542 18.8809 7.09359 18.7429C7.27176 18.6048 7.38351 18.4112 7.44593 18.2132C7.57078 17.8171 7.54043 17.3775 7.45999 16.8968C7.29913 15.9353 6.89112 14.8076 6.56078 13.9335C6.22974 13.057 5.93316 12.2301 5.57796 11.5851C5.40036 11.2626 5.20855 10.9819 4.96624 10.7655C4.72394 10.5491 4.41189 10.3999 4.07093 10.3999C3.63714 10.3999 3.24635 10.5877 3.02953 10.903C3.02055 10.9161 3.01603 10.9311 3.00765 10.9444C2.85925 10.8725 2.65933 10.7999 2.39906 10.7999V9.9999H1.59906ZM17.5991 9.9999V10.7999C17.3388 10.7999 17.1389 10.8725 16.9905 10.9444C16.9821 10.9311 16.9776 10.9161 16.9686 10.903C16.7518 10.5877 16.361 10.3999 15.9272 10.3999C15.5862 10.3999 15.2742 10.5492 15.0319 10.7655C14.7896 10.9819 14.5977 11.2626 14.4202 11.5851C14.065 12.2301 13.7684 13.057 13.4373 13.9335C13.107 14.8076 12.699 15.9353 12.5381 16.8968C12.4577 17.3775 12.4273 17.8171 12.5522 18.2132C12.6146 18.4112 12.7264 18.6048 12.9045 18.7429C13.0827 18.8809 13.3145 18.9476 13.5498 18.9476C13.7461 18.9476 13.929 18.9238 14.0936 18.8733C14.1069 18.9021 14.1157 18.9277 14.1334 18.9585C14.3206 19.2834 14.6881 19.5999 15.1991 19.5999C15.8266 19.5999 16.2659 19.1091 16.6639 18.5147C17.0619 17.9204 17.4214 17.1501 17.7342 16.3421C18.0471 15.5341 18.3106 14.6906 18.4975 13.9608C18.6844 13.2311 18.7991 12.6388 18.7991 12.2288C18.7991 11.7199 18.612 11.348 18.3733 11.1218H18.3991V9.9999H17.5991ZM4.07093 11.1999C4.19417 11.1999 4.29506 11.2395 4.43265 11.3624C4.57024 11.4853 4.72498 11.6946 4.87718 11.971C5.18159 12.5238 5.47897 13.3336 5.81234 14.2163C6.13839 15.079 6.5303 16.1883 6.67093 17.0288C6.74125 17.4491 6.73656 17.8015 6.68265 17.9726C6.65569 18.0581 6.62743 18.0917 6.60374 18.1101C6.58006 18.1284 6.5473 18.1476 6.44828 18.1476C6.16154 18.1476 6.08366 18.1084 6.01078 18.0437C5.93789 17.9789 5.84083 17.8157 5.70687 17.5194C5.45163 16.9549 4.99967 15.6824 4.61859 14.6577C4.42972 14.1499 4.20674 13.5374 4.01937 13.0015C3.83211 12.4658 3.67696 11.9853 3.64046 11.8272V11.8265C3.58995 11.6062 3.62663 11.4467 3.6889 11.3562C3.75127 11.2654 3.84112 11.1999 4.07093 11.1999ZM15.9272 11.1999C16.157 11.1999 16.2468 11.2654 16.3092 11.3562C16.3716 11.4469 16.4085 11.6064 16.3577 11.8272C16.3212 11.9853 16.166 12.4658 15.9787 13.0015C15.7914 13.5374 15.5684 14.1499 15.3795 14.6577C14.9985 15.6823 14.5463 16.9545 14.2912 17.5194C14.1573 17.8157 14.0602 17.9789 13.9873 18.0437C13.9145 18.1084 13.8366 18.1476 13.5498 18.1476C13.4508 18.1476 13.4181 18.1284 13.3944 18.1101C13.3707 18.0917 13.3424 18.0581 13.3155 17.9726C13.2615 17.8015 13.2569 17.4491 13.3272 17.0288C13.4678 16.1883 13.8597 15.079 14.1858 14.2163C14.5191 13.3336 14.8165 12.5238 15.1209 11.971C15.2731 11.6946 15.4279 11.4853 15.5655 11.3624C15.7031 11.2395 15.8039 11.1999 15.9272 11.1999ZM2.39906 11.5999C2.55657 11.5999 2.61602 11.63 2.70296 11.6788C2.73409 11.6963 2.77966 11.7274 2.82484 11.7562C2.83157 11.8393 2.84163 11.9231 2.86077 12.0062C2.86077 12.0064 2.86077 12.0067 2.86077 12.0069C2.922 12.2724 3.07387 12.722 3.2639 13.2655C3.45393 13.8091 3.67826 14.4249 3.86859 14.9366C4.24591 15.9512 4.6852 17.2008 4.97796 17.8483C5.06307 18.0366 5.14392 18.2073 5.24593 18.3624C5.24212 18.3743 5.23437 18.3912 5.23109 18.4015C5.20528 18.4825 5.19023 18.5265 5.17171 18.5585C5.10839 18.6686 4.94867 18.7999 4.79906 18.7999C4.67664 18.7999 4.34087 18.581 3.99828 18.0694C3.65568 17.5579 3.30885 16.8268 3.00921 16.053C2.70958 15.2792 2.45438 14.4605 2.27562 13.7624C2.09685 13.0643 1.99906 12.4628 1.99906 12.2288C1.99906 11.8436 2.10498 11.7403 2.19203 11.6757C2.27907 11.611 2.41548 11.5999 2.39906 11.5999ZM17.5991 11.5999C17.5826 11.5999 17.719 11.611 17.8061 11.6757C17.8931 11.7403 17.9991 11.8436 17.9991 12.2288C17.9991 12.4628 17.9013 13.0643 17.7225 13.7624C17.5437 14.4605 17.2885 15.2792 16.9889 16.053C16.6893 16.8269 16.3424 17.5579 15.9998 18.0694C15.6572 18.581 15.3215 18.7999 15.1991 18.7999C15.0494 18.7999 14.8897 18.6686 14.8264 18.5585C14.8079 18.5265 14.7928 18.4825 14.767 18.4015C14.7637 18.3912 14.756 18.3743 14.7522 18.3624C14.8542 18.2073 14.935 18.0366 15.0202 17.8483C15.3123 17.2012 15.7522 15.9513 16.1295 14.9366C16.3199 14.4249 16.5442 13.8091 16.7342 13.2655C16.9242 12.722 17.0761 12.2724 17.1373 12.0069C17.1373 12.0067 17.1373 12.0064 17.1373 12.0062C17.1565 11.9231 17.1665 11.8393 17.1733 11.7562C17.2185 11.7274 17.264 11.6963 17.2952 11.6788C17.3821 11.63 17.4415 11.5999 17.5991 11.5999Z" fill="#030504" fill-opacity="0.8" />
                                  </svg></span> </a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div id="accordionFlushExample1" class="accordion accordion-flush p-0 m-0">
                      <div class="accordion-item">
                        <h4 id="flush-headingOne" class="accordion-header">
                          <button
                            class="accordion-button accordion-button-homebar text-muted fs-6 fw-bold py-2 px-3 m-0 collapsed"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#flush-collapseOne1"
                            aria-expanded="false"
                            aria-controls="flush-collapseOne"
                          >
                            ANC
                          </button>
                        </h4>
                        <div id="flush-collapseOne1" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample1">
                          <div class="accordion-body p-0 m-0">
                            <ul class="nav flex-column home-dropdown">
                              <li class="nav-item">
                                <a :class="{'drop-active':form.anc_type==='no'||form.anc_type==='No'}" class="nav-link text-decoration-none text-muted" aria-current="page" href="#" @click.prevent="saveSetting('no','anc')">No
                                  <span class="float-end">

                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><g clip-path="url(#clip0_143_324)"><path d="M5.16262 2.38755C5.14543 2.39067 5.12825 2.39536 5.11262 2.40005C4.92668 2.44224 4.79543 2.60942 4.80012 2.80005V17.2C4.79856 17.3438 4.87356 17.4782 4.99856 17.5516C5.12356 17.6235 5.27668 17.6235 5.40168 17.5516C5.52668 17.4782 5.60168 17.3438 5.60012 17.2V2.80005C5.60481 2.68442 5.55793 2.57349 5.47512 2.49536C5.39075 2.41567 5.27668 2.37661 5.16262 2.38755ZM14.7626 2.38755C14.7454 2.39067 14.7282 2.39536 14.7126 2.40005C14.5267 2.44224 14.3954 2.60942 14.4001 2.80005V17.2C14.3986 17.3438 14.4736 17.4782 14.5986 17.5516C14.7236 17.6235 14.8767 17.6235 15.0017 17.5516C15.1267 17.4782 15.2017 17.3438 15.2001 17.2V2.80005C15.2048 2.68442 15.1579 2.57349 15.0751 2.49536C14.9907 2.41567 14.8767 2.37661 14.7626 2.38755ZM2.76262 5.98755C2.74543 5.99067 2.72825 5.99536 2.71262 6.00005C2.52668 6.04224 2.39543 6.20942 2.40012 6.40005V13.6C2.39856 13.7438 2.47356 13.8782 2.59856 13.9516C2.72356 14.0235 2.87668 14.0235 3.00168 13.9516C3.12668 13.8782 3.20168 13.7438 3.20012 13.6V6.40005C3.20481 6.28442 3.15793 6.17349 3.07512 6.09536C2.99075 6.01567 2.87668 5.97661 2.76262 5.98755ZM17.1626 5.98755C17.1454 5.99067 17.1282 5.99536 17.1126 6.00005C16.9267 6.04224 16.7954 6.20942 16.8001 6.40005V13.6C16.7986 13.7438 16.8736 13.8782 16.9986 13.9516C17.1236 14.0235 17.2767 14.0235 17.4017 13.9516C17.5267 13.8782 17.6017 13.7438 17.6001 13.6V6.40005C17.6048 6.28442 17.5579 6.17349 17.4751 6.09536C17.3907 6.01567 17.2767 5.97661 17.1626 5.98755ZM7.56262 6.38755C7.54543 6.39067 7.52825 6.39536 7.51262 6.40005C7.32668 6.44224 7.19543 6.60942 7.20012 6.80005V10V13.2C7.19856 13.3438 7.27356 13.4782 7.39856 13.5516C7.52356 13.6235 7.67668 13.6235 7.80168 13.5516C7.92668 13.4782 8.00168 13.3438 8.00012 13.2V6.80005C8.00481 6.68442 7.95793 6.57349 7.87512 6.49536C7.79075 6.41567 7.67668 6.37661 7.56262 6.38755ZM12.3626 6.38755C12.3454 6.39067 12.3282 6.39536 12.3126 6.40005C12.1267 6.44224 11.9954 6.60942 12.0001 6.80005V13.2C11.9986 13.3438 12.0736 13.4782 12.1986 13.5516C12.3236 13.6235 12.4767 13.6235 12.6017 13.5516C12.7267 13.4782 12.8017 13.3438 12.8001 13.2V6.80005C12.8048 6.68442 12.7579 6.57349 12.6751 6.49536C12.5907 6.41567 12.4767 6.37661 12.3626 6.38755ZM0.362622 8.38755C0.345434 8.39067 0.328247 8.39536 0.312622 8.40005C0.126684 8.44224 -0.00456587 8.60942 0.000121649 8.80005V11.2C-0.00144085 11.3438 0.0735592 11.4782 0.198559 11.5516C0.323559 11.6235 0.476684 11.6235 0.601684 11.5516C0.726684 11.4782 0.801684 11.3438 0.800122 11.2V8.80005C0.804809 8.68442 0.757934 8.57349 0.675122 8.49536C0.590747 8.41567 0.476684 8.37661 0.362622 8.38755ZM9.96262 8.38755C9.94543 8.39067 9.92825 8.39536 9.91262 8.40005C9.72668 8.44224 9.59543 8.60942 9.60012 8.80005V11.2C9.59856 11.3438 9.67356 11.4782 9.79856 11.5516C9.92356 11.6235 10.0767 11.6235 10.2017 11.5516C10.3267 11.4782 10.4017 11.3438 10.4001 11.2V8.80005C10.4048 8.68442 10.3579 8.57349 10.2751 8.49536C10.1907 8.41567 10.0767 8.37661 9.96262 8.38755ZM19.5626 8.38755C19.5454 8.39067 19.5282 8.39536 19.5126 8.40005C19.3267 8.44224 19.1954 8.60942 19.2001 8.80005V11.2C19.1986 11.3438 19.2736 11.4782 19.3986 11.5516C19.5236 11.6235 19.6767 11.6235 19.8017 11.5516C19.9267 11.4782 20.0017 11.3438 20.0001 11.2V8.80005C20.0048 8.68442 19.9579 8.57349 19.8751 8.49536C19.7907 8.41567 19.6767 8.37661 19.5626 8.38755Z" fill="#030504" fill-opacity="0.8" /><rect
                                      x="1.82617"
                                      y="0.907189"
                                      width="24.343"
                                      height="1.3"
                                      rx="0.65"
                                      transform="rotate(45 1.82617 0.907189)"
                                      fill="#333534"
                                      stroke="white"
                                      stroke-width="0.5"
                                    />
                                    </g><defs><clipPath id="clip0_143_324"><rect width="20" height="20" fill="white" /></clipPath></defs></svg></span>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link text-muted" href="#" :class="{'drop-active':form.anc_type==='yes'||form.anc_type==='Yes'}" @click.prevent="saveSetting('yes','anc')">{{ t('Yes') }}<span class="float-end">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16" fill="none">
                                    <path d="M5.16262 0.387549C5.14543 0.390674 5.12825 0.395362 5.11262 0.400049C4.92668 0.442237 4.79543 0.609424 4.80012 0.800049V15.2C4.79856 15.3438 4.87356 15.4782 4.99856 15.5516C5.12356 15.6235 5.27668 15.6235 5.40168 15.5516C5.52668 15.4782 5.60168 15.3438 5.60012 15.2V0.800049C5.60481 0.684424 5.55793 0.573487 5.47512 0.495361C5.39075 0.415674 5.27668 0.376612 5.16262 0.387549ZM14.7626 0.387549C14.7454 0.390674 14.7282 0.395362 14.7126 0.400049C14.5267 0.442237 14.3954 0.609424 14.4001 0.800049V15.2C14.3986 15.3438 14.4736 15.4782 14.5986 15.5516C14.7236 15.6235 14.8767 15.6235 15.0017 15.5516C15.1267 15.4782 15.2017 15.3438 15.2001 15.2V0.800049C15.2048 0.684424 15.1579 0.573487 15.0751 0.495361C14.9907 0.415674 14.8767 0.376612 14.7626 0.387549ZM2.76262 3.98755C2.74543 3.99067 2.72825 3.99536 2.71262 4.00005C2.52668 4.04224 2.39543 4.20942 2.40012 4.40005V11.6C2.39856 11.7438 2.47356 11.8782 2.59856 11.9516C2.72356 12.0235 2.87668 12.0235 3.00168 11.9516C3.12668 11.8782 3.20168 11.7438 3.20012 11.6V4.40005C3.20481 4.28442 3.15793 4.17349 3.07512 4.09536C2.99075 4.01567 2.87668 3.97661 2.76262 3.98755ZM17.1626 3.98755C17.1454 3.99067 17.1282 3.99536 17.1126 4.00005C16.9267 4.04224 16.7954 4.20942 16.8001 4.40005V11.6C16.7986 11.7438 16.8736 11.8782 16.9986 11.9516C17.1236 12.0235 17.2767 12.0235 17.4017 11.9516C17.5267 11.8782 17.6017 11.7438 17.6001 11.6V4.40005C17.6048 4.28442 17.5579 4.17349 17.4751 4.09536C17.3907 4.01567 17.2767 3.97661 17.1626 3.98755ZM7.56262 4.38755C7.54543 4.39067 7.52825 4.39536 7.51262 4.40005C7.32668 4.44224 7.19543 4.60942 7.20012 4.80005V8.00005V11.2C7.19856 11.3438 7.27356 11.4782 7.39856 11.5516C7.52356 11.6235 7.67668 11.6235 7.80168 11.5516C7.92668 11.4782 8.00168 11.3438 8.00012 11.2V4.80005C8.00481 4.68442 7.95793 4.57349 7.87512 4.49536C7.79075 4.41567 7.67668 4.37661 7.56262 4.38755ZM12.3626 4.38755C12.3454 4.39067 12.3282 4.39536 12.3126 4.40005C12.1267 4.44224 11.9954 4.60942 12.0001 4.80005V11.2C11.9986 11.3438 12.0736 11.4782 12.1986 11.5516C12.3236 11.6235 12.4767 11.6235 12.6017 11.5516C12.7267 11.4782 12.8017 11.3438 12.8001 11.2V4.80005C12.8048 4.68442 12.7579 4.57349 12.6751 4.49536C12.5907 4.41567 12.4767 4.37661 12.3626 4.38755ZM0.362622 6.38755C0.345434 6.39067 0.328247 6.39536 0.312622 6.40005C0.126684 6.44224 -0.00456587 6.60942 0.000121649 6.80005V9.20005C-0.00144085 9.3438 0.0735592 9.47817 0.198559 9.55161C0.323559 9.62349 0.476684 9.62349 0.601684 9.55161C0.726684 9.47817 0.801684 9.3438 0.800122 9.20005V6.80005C0.804809 6.68442 0.757934 6.57349 0.675122 6.49536C0.590747 6.41567 0.476684 6.37661 0.362622 6.38755ZM9.96262 6.38755C9.94543 6.39067 9.92825 6.39536 9.91262 6.40005C9.72668 6.44224 9.59543 6.60942 9.60012 6.80005V9.20005C9.59856 9.3438 9.67356 9.47817 9.79856 9.55161C9.92356 9.62349 10.0767 9.62349 10.2017 9.55161C10.3267 9.47817 10.4017 9.3438 10.4001 9.20005V6.80005C10.4048 6.68442 10.3579 6.57349 10.2751 6.49536C10.1907 6.41567 10.0767 6.37661 9.96262 6.38755ZM19.5626 6.38755C19.5454 6.39067 19.5282 6.39536 19.5126 6.40005C19.3267 6.44224 19.1954 6.60942 19.2001 6.80005V9.20005C19.1986 9.3438 19.2736 9.47817 19.3986 9.55161C19.5236 9.62349 19.6767 9.62349 19.8017 9.55161C19.9267 9.47817 20.0017 9.3438 20.0001 9.20005V6.80005C20.0048 6.68442 19.9579 6.57349 19.8751 6.49536C19.7907 6.41567 19.6767 6.37661 19.5626 6.38755Z" fill="#030504" fill-opacity="0.8" />
                                  </svg></span></a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>

              <li class="nav-item">
                <a class="nav-link nav-icons" style="padding: 6px 8px;cursor: pointer" data-bs-target="#adaptive-modal" data-bs-toggle="modal" :title="t('Adaptive soundscape')">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 20" fill="none">
                    <path d="M6.19515 0.864961C6.17452 0.868712 6.1539 0.874336 6.13515 0.879961C5.91202 0.930586 5.75452 1.13121 5.76015 1.35996V18.64C5.75827 18.8125 5.84827 18.9737 5.99827 19.0618C6.14827 19.1481 6.33202 19.1481 6.48202 19.0618C6.63202 18.9737 6.72202 18.8125 6.72015 18.64V1.35996C6.72577 1.22121 6.66952 1.08809 6.57015 0.994336C6.4689 0.898711 6.33202 0.851836 6.19515 0.864961ZM17.7151 0.864961C17.6945 0.868712 17.6739 0.874336 17.6551 0.879961C17.432 0.930586 17.2745 1.13121 17.2801 1.35996V18.64C17.2783 18.8125 17.3683 18.9737 17.5183 19.0618C17.6683 19.1481 17.852 19.1481 18.002 19.0618C18.152 18.9737 18.242 18.8125 18.2401 18.64V1.35996C18.2458 1.22121 18.1895 1.08809 18.0901 0.994336C17.9889 0.898711 17.852 0.851836 17.7151 0.864961ZM3.31515 5.18496C3.29452 5.18871 3.2739 5.19434 3.25515 5.19996C3.03202 5.25059 2.87452 5.45121 2.88015 5.67996V14.32C2.87827 14.4925 2.96827 14.6537 3.11827 14.7418C3.26827 14.8281 3.45202 14.8281 3.60202 14.7418C3.75202 14.6537 3.84202 14.4925 3.84015 14.32V5.67996C3.84577 5.54121 3.78952 5.40809 3.69015 5.31434C3.5889 5.21871 3.45202 5.17184 3.31515 5.18496ZM20.5951 5.18496C20.5745 5.18871 20.5539 5.19434 20.5351 5.19996C20.312 5.25059 20.1545 5.45121 20.1601 5.67996V14.32C20.1583 14.4925 20.2483 14.6537 20.3983 14.7418C20.5483 14.8281 20.732 14.8281 20.882 14.7418C21.032 14.6537 21.122 14.4925 21.1201 14.32V5.67996C21.1258 5.54121 21.0695 5.40809 20.9701 5.31434C20.8689 5.21871 20.732 5.17184 20.5951 5.18496ZM9.07515 5.66496C9.05452 5.66871 9.0339 5.67434 9.01515 5.67996C8.79202 5.73059 8.63452 5.93121 8.64015 6.15996V13.84C8.63827 14.0125 8.72827 14.1737 8.87827 14.2618C9.02827 14.3481 9.21202 14.3481 9.36202 14.2618C9.51202 14.1737 9.60202 14.0125 9.60015 13.84V6.15996C9.60577 6.02121 9.54952 5.88809 9.45015 5.79434C9.3489 5.69871 9.21202 5.65184 9.07515 5.66496ZM14.8351 5.66496C14.8145 5.66871 14.7939 5.67434 14.7751 5.67996C14.552 5.73059 14.3945 5.93121 14.4001 6.15996V13.84C14.3983 14.0125 14.4883 14.1737 14.6383 14.2618C14.7883 14.3481 14.972 14.3481 15.122 14.2618C15.272 14.1737 15.362 14.0125 15.3601 13.84V6.15996C15.3658 6.02121 15.3095 5.88809 15.2101 5.79434C15.1089 5.69871 14.972 5.65184 14.8351 5.66496ZM0.435146 8.06496C0.414521 8.06871 0.393896 8.07434 0.375146 8.07996C0.152021 8.13059 -0.00547904 8.33121 0.000145979 8.55996V11.44C-0.00172902 11.6125 0.0882711 11.7737 0.238271 11.8618C0.388271 11.9481 0.572021 11.9481 0.722021 11.8618C0.872021 11.7737 0.962021 11.6125 0.960146 11.44V8.55996C0.965771 8.42121 0.909521 8.28809 0.810146 8.19434C0.708896 8.09871 0.572021 8.05184 0.435146 8.06496ZM11.9551 8.06496C11.9345 8.06871 11.9139 8.07434 11.8951 8.07996C11.672 8.13059 11.5145 8.33121 11.5201 8.55996V11.44C11.5183 11.6125 11.6083 11.7737 11.7583 11.8618C11.9083 11.9481 12.092 11.9481 12.242 11.8618C12.392 11.7737 12.482 11.6125 12.4801 11.44V8.55996C12.4858 8.42121 12.4295 8.28809 12.3301 8.19434C12.2289 8.09871 12.092 8.05184 11.9551 8.06496ZM23.4751 8.06496C23.4545 8.06871 23.4339 8.07434 23.4151 8.07996C23.192 8.13059 23.0345 8.33121 23.0401 8.55996V11.44C23.0383 11.6125 23.1283 11.7737 23.2783 11.8618C23.4283 11.9481 23.612 11.9481 23.762 11.8618C23.912 11.7737 24.002 11.6125 24.0001 11.44V8.55996C24.0058 8.42121 23.9495 8.28809 23.8501 8.19434C23.7489 8.09871 23.612 8.05184 23.4751 8.06496Z" fill="#030504" fill-opacity="0.4" />
                  </svg>
                </a>
              </li>
              <li class="nav-item mx-1">
                <nuxt-link :to="localePath('setting')" style="padding: 5px 8px" class="nav-link nav-icons   ">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M10.6584 0.959961C10.5447 0.960022 10.4346 1.00049 10.3479 1.07415C10.2612 1.14781 10.2035 1.24988 10.185 1.36215L9.71813 4.22059C9.15672 4.3839 8.6214 4.60425 8.11688 4.87871L5.75813 3.19402C5.66578 3.12808 5.55305 3.09698 5.43995 3.10625C5.32685 3.11552 5.2207 3.16455 5.14031 3.24465L3.27281 5.11027C3.19301 5.19013 3.1439 5.29557 3.13413 5.40804C3.12436 5.52052 3.15454 5.63284 3.21938 5.72527L4.87875 8.09902C4.60006 8.60649 4.37482 9.14484 4.2075 9.71152L1.36125 10.185C1.24932 10.2038 1.1477 10.2617 1.07441 10.3484C1.00113 10.4351 0.960925 10.5449 0.960938 10.6584V13.2984C0.960734 13.4112 1.00027 13.5205 1.07262 13.6071C1.14497 13.6937 1.2455 13.752 1.35656 13.7718L4.20469 14.2762C4.3711 14.8419 4.59491 15.3806 4.87406 15.8887L3.19406 18.239C3.12812 18.3314 3.09702 18.4441 3.10629 18.5572C3.11556 18.6703 3.16459 18.7765 3.24469 18.8568L5.11125 20.7243C5.19094 20.804 5.29613 20.8532 5.4084 20.8631C5.52067 20.8731 5.63286 20.8432 5.72531 20.7787L8.10375 19.1137C8.60976 19.3898 9.1464 19.6118 9.70969 19.7765L10.185 22.6387C10.2037 22.7508 10.2615 22.8527 10.3482 22.9261C10.4349 22.9996 10.5448 23.0399 10.6584 23.04H13.2984C13.4114 23.0401 13.5208 23.0005 13.6074 22.9279C13.694 22.8554 13.7522 22.7546 13.7719 22.6434L14.2809 19.77C14.8419 19.6027 15.376 19.3774 15.8794 19.0996L18.2738 20.7796C18.3662 20.8445 18.4785 20.8747 18.591 20.8649C18.7035 20.8551 18.8089 20.806 18.8888 20.7262L20.7553 18.8578C20.8358 18.7772 20.8849 18.6706 20.894 18.5571C20.9031 18.4435 20.8716 18.3305 20.805 18.2381L19.0978 15.8681C19.3708 15.3671 19.5907 14.8362 19.7541 14.279L22.6425 13.7728C22.7537 13.7531 22.8545 13.6949 22.927 13.6083C22.9996 13.5217 23.0392 13.4123 23.0391 13.2993V10.6593C23.039 10.5456 22.9985 10.4355 22.9249 10.3488C22.8512 10.2621 22.7491 10.2044 22.6369 10.1859L19.7531 9.71434C19.5886 9.1578 19.3681 8.62783 19.095 8.12715L20.7787 5.72809C20.8436 5.63566 20.8738 5.52333 20.864 5.41086C20.8542 5.29838 20.8051 5.19295 20.7253 5.11309L18.8578 3.24652C18.7772 3.16608 18.6706 3.11692 18.5571 3.10782C18.4436 3.09872 18.3305 3.13027 18.2381 3.19684L15.8747 4.89652C15.3711 4.61987 14.8367 4.3958 14.2744 4.22996L13.7719 1.35746C13.7524 1.24605 13.6943 1.14508 13.6077 1.07236C13.521 0.99964 13.4115 0.959834 13.2984 0.959961H10.6584ZM11.0672 1.91996H12.8953L13.3734 4.64902C13.3893 4.74055 13.4315 4.8255 13.4947 4.89356C13.5579 4.96163 13.6396 5.00988 13.7297 5.03246C14.4317 5.2074 15.091 5.4847 15.6928 5.84902C15.7733 5.89777 15.8663 5.92181 15.9603 5.91814C16.0543 5.91448 16.1451 5.88327 16.2216 5.8284L18.4678 4.21402L19.7606 5.50684L18.1612 7.7859C18.1078 7.86193 18.0776 7.95182 18.0743 8.04468C18.071 8.13754 18.0947 8.22937 18.1425 8.30902C18.5032 8.90947 18.7768 9.56462 18.9516 10.2628C18.9743 10.3537 19.0232 10.436 19.0922 10.4995C19.1611 10.5629 19.2472 10.6048 19.3397 10.62L22.0791 11.0681V12.8962L19.3341 13.3781C19.2425 13.3943 19.1575 13.4368 19.0896 13.5004C19.0217 13.5639 18.9738 13.6459 18.9516 13.7362C18.7788 14.4335 18.5051 15.0886 18.1444 15.689C18.096 15.7695 18.0722 15.8623 18.076 15.9562C18.0799 16.05 18.1111 16.1406 18.1659 16.2168L19.7878 18.4678L18.495 19.7615L16.2197 18.165C16.1433 18.1114 16.0529 18.0813 15.9597 18.0783C15.8665 18.0754 15.7744 18.0996 15.6947 18.1481C15.0959 18.5124 14.4359 18.791 13.7363 18.9684C13.6466 18.991 13.5653 19.039 13.5023 19.1067C13.4392 19.1744 13.3971 19.2589 13.3809 19.35L12.8963 22.08H11.0653L10.6134 19.3621C10.5981 19.2697 10.556 19.1838 10.4923 19.115C10.4287 19.0462 10.3463 18.9975 10.2553 18.975C9.55289 18.8018 8.89061 18.5249 8.28469 18.1612C8.20514 18.1136 8.11349 18.09 8.02082 18.0933C7.92815 18.0966 7.83843 18.1267 7.7625 18.18L5.505 19.7615L4.21125 18.4659L5.80688 16.2356C5.86141 16.1592 5.89234 16.0684 5.89584 15.9746C5.89933 15.8808 5.87525 15.788 5.82656 15.7078C5.45887 15.1002 5.18079 14.438 5.00531 13.7325C4.98286 13.6426 4.93489 13.5611 4.86719 13.4979C4.79949 13.4347 4.71494 13.3925 4.62375 13.3762L1.92094 12.8962V11.0653L4.62188 10.6162C4.71421 10.6009 4.80005 10.5589 4.86884 10.4955C4.93763 10.432 4.98637 10.3498 5.00906 10.259C5.18605 9.55107 5.464 8.88895 5.83031 8.28277C5.87862 8.20319 5.90274 8.11128 5.89975 8.01823C5.89675 7.92519 5.86676 7.83502 5.81344 7.75871L4.23656 5.50496L5.53125 4.21121L7.76906 5.81059C7.84519 5.86487 7.93552 5.89574 8.02895 5.89941C8.12238 5.90307 8.21485 5.87937 8.295 5.83121C8.89772 5.46922 9.56154 5.19456 10.2647 5.02215C10.3561 4.99965 10.4389 4.95077 10.5027 4.88159C10.5665 4.81242 10.6086 4.726 10.6238 4.63309L11.0672 1.91996ZM12 8.15996C9.88491 8.15996 8.16 9.88487 8.16 12C8.16 14.115 9.88491 15.84 12 15.84C14.1151 15.84 15.84 14.115 15.84 12C15.84 9.88487 14.1151 8.15996 12 8.15996ZM12 9.11996C13.5963 9.11996 14.88 10.4037 14.88 12C14.88 13.5962 13.5963 14.88 12 14.88C10.4037 14.88 9.12 13.5962 9.12 12C9.12 10.4037 10.4037 9.11996 12 9.11996Z" fill="#030504" fill-opacity="0.4" />
                  </svg>
                </nuxt-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <AdaptiveModal
    v-model:adaptive-soundscape="adaptiveSoundscape"
    @update:adaptive-soundscape="handleAdaptiveSoundscapeChange"
  />
</template>

<script>
import { mapActions } from 'pinia'
import WaveSVG from './svg/homebar/WaveSVG.vue'
import TropicsSVG from './svg/homebar/TropicsSVG.vue'
import ForestSVG from './svg/homebar/ForestSVG.vue'
import MeadowSVG from './svg/homebar/MeadowSVG.vue'
// import TropicsTitleSVG from './svg/sounds/TropicsTitleSVG.vue'
// import ForestTitleSVG from './svg/sounds/ForestTitleSVG.vue'
// import MeadowTitleSVG from './svg/sounds/MeadowTitleSVG.vue'
import AdaptiveModal from './AdaptiveModal.vue'
import { useUserStore } from '~/stores/user'
import { HeadsetType } from '~/stores/interfaces/HeadsetType'
import { ANC } from '~/stores/interfaces/ANC'
import { useAudioStore } from '~/stores/audio'

export default {
  name: 'HomeBar',
  components: {
    WaveSVG,
    TropicsSVG,
    ForestSVG,
    MeadowSVG,
    AdaptiveModal
  },
  props: {
    title: {
      type: String,
      default: 'Homebar'
    }
  },
  emits: ['update:soundscape', 'update:adaptive'],
  setup () {
    const { t } = useI18n()
    const localePath = useLocalePath()
    return { t, localePath }
  },
  data () {
    return {
      adaptiveSounscape: true,
      form: {
        soundscape: '',
        headphone_type: '',
        anc_type: '',
        adaptive_sound_scape: ''
      }
    }
  },
  computed: {
    currentSoundscapeSVG () {
      const soundscape = this.form.soundscape
      useNuxtApp().$logger.log('2. Current soundscape:', soundscape)
      switch (soundscape) {
        case 'Lagoon':
          return WaveSVG
        case 'x':
          return TropicsTitleSVG
        case 'Forest':
          return ForestTitleSVG
        case 'Meadow':
          return MeadowTitleSVG
        default:
          return WaveSVG
      }
    }
  },
  mounted () {
    this.fetchSettings()
    this.updateActiveSoundscape()
    window.addEventListener('keydown', event => this.handleKeyDown(event))
    navigator.mediaSession.setActionHandler('play', this.playSound())
  },
  methods: {
    ...mapActions(useUserStore, ['updateHeadsetType', 'updateANC', 'logout']),
    ...mapActions(useAudioStore, ['isPlaying', 'setPlaying']),
    handleAdaptiveSoundscapeChange (newValue) {
      this.adaptiveSoundscape = newValue
      this.saveSetting(newValue, 'adaptivesoundscap')
      useNuxtApp().$logger.log('Adaptive soundscape setting saved lets change the index page')
    },
    updateActiveSoundscape () {
      const soundscape = this.form.soundscape
      switch (soundscape) {
        case 'Lagoon':
          document.getElementById('lagoonLinkHomebar').classList.add('active')
          break
        case 'x':
          document.getElementById('tropicsLinkHomebar').classList.add('active')
          break
        case 'Forest':
          document.getElementById('forestLinkHomebar').classList.add('active')
          break
        case 'Meadow':
          document.getElementById('meadowLinkHomebar').classList.add('active')
          break
      }
    },

    updateAdaptiveState () {
      const adaptive = this.form.adaptive_sound_scape
      this.$emit('update:adaptive', adaptive)
    },
    playSound () {
      this.setPlaying(!this.isPlaying())
    },
    fetchSettings () {
      this.$axios.post('/api/fetch-settings').then(({ data }) => {
        if (data.success) {
          this.form = data.setting
          this.$emit('update:soundscape', this.form.soundscape)
          if (data.setting.adaptive_sound_scape === 'yes' || data.setting.adaptive_sound_scape === 'Yes') {
            this.adaptiveSounscape = true
          } else {
            this.adaptiveSounscape = false
          }
        }
      }).catch(() => {
        if (useUserStore().offlineMode) { // Offline mode active
          this.$toast.warn('Offline mode is active. Your changes will be temporarily.')
        } else {
          this.$toast.error('Something went wrong while saving... try again later')
          // this.logout()
          // this.$router.push(this.localePath('/auth/login'))
        }
      })
    },

    saveSetting (value, type) {
      if (type === 'soundscape') {
        // useNuxtApp().$logger.log('VALUE VALUE' + value)
        this.form.soundscape = value
        this.$emit('update:soundscape', value)
      }
      if (type === 'headphone') {
        this.form.headphone_type = value
        if (value === 'In-ear') { this.updateHeadsetType(HeadsetType.InEar) } else { this.updateHeadsetType(HeadsetType.OverEar) }
      }
      if (type === 'anc') {
        this.form.anc_type = value
        if (value === 'yes' || value === 'Yes') { this.updateANC(ANC.Yes) } else { this.updateANC(ANC.No) }
      }
      if (type === 'adaptivesoundscap') {
        if (this.adaptiveSounscape === true) {
          this.form.adaptive_sound_scape = 'no'
        } else {
          this.form.adaptive_sound_scape = 'yes'
        }
      }

      this.$axios.post('/api/update-setting', this.form).then(({ data }) => {
        if (data.success) {
          // this.$toast.success(data.message)
          this.form = data.setting
          if (type === 'soundscape') {
            this.updateActiveSoundscape()
            this.updateAdaptiveState()
          }
        }
      }).catch((e) => {
        useNuxtApp().$logger.log('error', { e })
        this.$toast.error('save: something went wrong while saving...')
      })
    }
  }
}
</script>
<style>
.header__logo{
  width: 30%;
}
.header__nav {
  width: 30%;
  max-width: unset;
}

.header__title a {
  color: white;
}
.nav-icons{
  border-radius: 10px;
  padding: 10px 10px;
}
.nav-icons:focus{
  background-color: #e9c046;
  color: white !important;
  width: 100% !important;
  border-radius: 10px;
  fill: white;
}
.nav-icons:focus svg path {
  fill: white;
}

.fivith-icon.router-link-exact-active{
  content: url('~/assets/image/Vector (4).png');
  background-color: #e9c046;
  border-radius: 5px;
  padding: 10px 10px;
  text-align: center;
}
.accordion-button-homebar::after {
  background-size: 16px;
  background-position-y: 4px;
}

.accordion-button {
  line-height: 24px;
}

.accordion-item .nav-link {
  border-radius: 0;
}

@media only screen and (max-width: 768px) {
  .navbar-logo{
    width: 160px !important;
    padding-bottom: 10px;
  }
}
.drop-active, .drop-select{
  color: white !important;
  background-color: #e9c046;
}

.home-dropdown li::after{
  /* content: ''; */
  border-bottom: 1px solid #f0f0f0;
  display: block;
  width: 87%;
  margin: auto;
}

.home-dropdown li:last-of-type::after{
  border-bottom: none;
}

.dropdown-item:hover {
  border-radius: 0;
  transition: 150ms ease-in-out;
}

.dropdown-active svg{
  filter: invert(1);
}

.navbar-controls {
  max-width: 250px;
  float: right;
}

.navbar-controls .nav {
  justify-content: space-between;
}

@media only screen and (max-width: 768px) {
  .navbar-controls {
    position: fixed;
    bottom: 1.5em;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
  }

  .navbar-controls .nav {
    float: unset;
    background-color: white !important;
  }

  .adaptive {
    padding-bottom: 5em !important;
  }

  .header__logo{
    width: 100%;
  }
  .header__nav {
    width: 100%;
  }

}

@media only screen and (max-width: 576px) {
  .navbar-controls {
    width: 80%;
    max-width: unset;
  }

  .navbar-controls .nav {
    justify-content: space-between;
  }
}

</style>
