<template>
  <div>
    <q-header
      class="bg-white text-grey-9 shadow-3"
      style="border-bottom: 5px solid #ff6600 !important;"
    >
      <div class>
        <q-toolbar>
          <q-toolbar-title>
            <router-link to="/" color="primary">
              <img src="statics/mainlogo.gif" class="img-size" />
            </router-link>
          </q-toolbar-title>
          <div class="q-pa-sm">
            <router-link
              to="/login"
              class="q-ma-sm text-secondary no-underline text-subtitle1 on-hover"
              v-if="!isLoggedIn"
            >
              <i class="fas fa-sign-in-alt"></i>
              Sign in
            </router-link>

            <q-btn
              to="/cart"
              dense
              flat
              round
              icon="local_grocery_store"
              size="md"
              class="q-ma-sm text-secondary"
            >
              <q-badge color="deep-orange-6" floating>{{totalCartItems}}</q-badge>
            </q-btn>
            <q-btn
              dense
              flat
              round
              icon="notifications"
              size="md"
              class="q-ma-sm text-secondary"
              v-if="isLoggedIn"
            >
              <q-badge color="deep-orange-6" floating>12</q-badge>
            </q-btn>
            <!-- <q-btn dense flat round icon="person"  size="md" class="q-ma-sm"/> -->
            <q-btn dense flat rounded v-if="isLoggedIn">
              <q-avatar circled size="35px">
                <img :src="authUserImageUrl" />
              </q-avatar>
              <q-icon name="arrow_drop_down" size="14px" />

              <q-menu auto-close>
                <q-list dense class="db-menu">
                  <q-item>
                    <q-item-section class="flex flex-center">
                      <q-avatar class="q-pa-xs" circled size="40px">
                        <img :src="authUserImageUrl" />
                      </q-avatar>
                      <span class="text-h6 q-pt-sm">{{authUser.fname}} {{authUser.lname}}</span>
                      <span class="text-caption q-pb-sm">{{authUser.email}}</span>
                    </q-item-section>
                  </q-item>
                  <q-separator class="bg-amber-10" inset />
                  <q-item clickable class="GL__menu-link menu-link" :to="{name:'qbank-welcome'}">
                    <q-icon
                      name="dashboard"
                      size="21px"
                      class="q-pa-sm q-pr-md"
                    />

                    <q-item-section>Dashboard</q-item-section>
                  </q-item>
                  <q-separator class="bg-amber-10" inset />

                  <q-item clickable class="GL__menu-link" to="/faqs">
                    <q-icon name="help" size="21px" class="q-pa-sm q-pr-md" />

                    <q-item-section>Help</q-item-section>
                  </q-item>
                  <q-item clickable class="GL__menu-link">
                    <q-icon name="exit_to_app" size="21px" class="q-pa-sm q-pr-md" />

                    <q-item-section @click="signout">Sign out</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
            <q-btn
              dense
              flat
              round
              color="secondary"
              icon="menu"
              size="lg"
              @click="toggleSideBarMenu"
            />
          </div>
        </q-toolbar>
      </div>
    </q-header>
    <q-drawer v-model="isSideBarMenuActive" side="right" behavior="mobile">
      <div class="menu-bg full-height" style="margin-top: 0px;">
        <q-btn
          dense
          flat
          round
          icon="clear"
          color="white"
          class="float-right"
          size="lg"
          @click="toggleSideBarMenu"
        />
        <div class="q-pt-xl">
          <div class="row">
            <div class="col-6">
              <ul class="menu-items">
                <li class="q-px-xs q-py-sm">
                  <a href>MOH</a>
                </li>
                <li class="q-px-xs q-py-sm">
                  <a href>DHA</a>
                </li>
                <li class="q-px-xs q-py-sm">
                  <a href>HAAD</a>
                </li>
                <li class="q-px-xs q-py-sm">
                  <a href>SLE</a>
                </li>
                <li class="q-px-xs q-py-sm">
                  <a href>MOH OMAN</a>
                </li>
                <li class="q-px-xs q-py-sm">
                  <a href>USMLE</a>
                </li>
                <li class="q-px-xs q-py-sm">
                  <a href>PLAB</a>
                </li>
                <li class="q-px-xs q-py-sm">
                  <a href>AMC</a>
                </li>
              </ul>
            </div>
            <div class="col-6">
              <ul class="menu-items">
                <li class="q-px-xs q-py-sm">
                  <a href>MCCEE</a>
                </li>
                <li class="q-px-xs q-py-sm">
                  <a href>MCCQE</a>
                </li>
                <li class="q-px-xs q-py-sm">
                  <a href>MRCP</a>
                </li>
                <li class="q-px-xs q-py-sm">
                  <a href>MRCOG</a>
                </li>
                <li class="q-px-xs q-py-sm">
                  <a href>FCPS</a>
                </li>
                <li class="q-px-xs q-py-sm">
                  <a href>PM&amp;DC</a>
                </li>
                <li class="q-px-xs q-py-sm">
                  <a href>MCPS</a>
                </li>
              </ul>
            </div>
          </div>
          <q-separator inset color="light-blue-9" />
          <ul class="menu-items-first">
            <li class="q-px-xs q-py-sm">
              <a href>About Us</a>
            </li>
          </ul>
        </div>
      </div>
    </q-drawer>
  </div>
</template>

<script>
import { Loading } from "quasar";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      left: false,
      right: false,
      menueList: [],
    };
  },
  computed: {
    ...mapGetters("auth", ["isLoggedIn", "authUser", "authUserImageUrl"]),
    ...mapGetters("cart", ["totalCartItems"]),
      ...mapGetters('sidebar', [
      "isSideBarMenuActive",
    ])
  },
  created() {},
  mounted() {
    // this.getMenue();
  },
  methods: {
    getMenue: function () {
      window.axios.get("/menue").then((response) => {
        this.menueList = response.data;
      });
    },
    signout: function () {
      Loading.show();
      this.$store
        .dispatch("auth/logout")
        .then((response) => {
          this.$q.notify({
            type: "success-notify",
            position: "right",
            message: "Success",
            caption: "Logged out Successfully!!",
            actions: [{ label: "Dismiss", color: "yellow", handler: () => {} }],
          });
          Loading.hide();
          this.$router.push({
            name: "login",
          });
        })
        .catch((e) => {
          Loading.hide();
          this.$q.notify({
            type: "error-notify",
            position: "right",
            message: "Failed",
            caption: "Sorry!! Log out Failed",
            actions: [{ label: "Dismiss", color: "yellow", handler: () => {} }],
          });
        });
    },
    toggleSideBarMenu() {
      this.$store.commit("sidebar/toggleSideBar");
    },
  },
};
</script>

<style scoped>
.menu-link {
  font-size: 14px !important;
  color: white !important;
}
.q-item a {
  text-decoration: none;
  color: white;
}
.hide {
  display: none;
}

.show {
  display: inline;
}

.no-underline a {
  text-decoration: none;
  font-size: 1.5em;
}

.no-underline a:hover {
  color: rgb(0, 255, 0) !important;
}

.no-underline a .i-rotate {
  transform: rotate(0deg);
  transition: all 0.5s ease;
}

.no-underline a:hover .i-rotate {
  transform: rotate(90deg);
  transition: all 0.5s ease;
}

.containers {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  width: 100vw;
}
.my-menu-link {
  color: white;
  background: #04b1ed;
}

.h3-title {
  color: #fff;
  font-family: keep calm;
}

.h5-title {
  width: 70%;
}

.slider-l {
  position: absolute;
  z-index: 1030;
  width: 60%;
}

.top-slider {
  background-image: linear-gradient(
    to bottom right,
    black,
    rgba(0, 0, 0, 0.75)
  );
  position: relative;
  min-height: 60vh;
}

.top-slider .img-float {
  width: 50%;
  float: right;
}

.db-menu {
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  width: 20vw;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .hide {
    display: inline;
  }

  .show {
    display: none;
  }

  .h3-title {
    color: #fff;
    font-family: keep calm;
    font-size: 30px;
    line-height: 1;
    text-align: center;
  }

  .h5-title {
    display: none;
  }

  .slider-l {
    width: 100%;
    margin-top: 0%;
  }

  .top-slider {
    width: 100vw;
    min-height: 80vh;
  }

  .img-float {
    float: none;
    clear: both;
    margin-top: 20%;
    height: 60%;
  }

  .q-pt-xl {
    padding-top: 10px !important;
  }

  .q-pl-xl {
    padding-left: 36px !important;
  }

  .db-menu {
    width: 50vw;
  }
}
.containers {
  width: 90%;
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
}
.menu-bg {
  background-color: #00364f;
  /* background-color:#ff6600; */
}
.menu-items,
.menu-items-first {
  list-style: none;
  color: #04b1ed;
  font-size: 18px;
}
.menu-items-first li a {
  color: #04b1ed;
  /* color: #ffe5d2; */
  text-decoration: none;
  text-transform: uppercase;
}
.menu-items li a {
  color: #ffffff;
  text-decoration: none;
}
.menu-items-first li a:hover {
  text-decoration: underline;
}
.menu-items li a:hover {
  text-decoration: underline;
  /* color: #faa770; */
  color: #04b1ed;
}
.no-underline {
  text-decoration: none;
}
.on-hover:hover {
  /* text-decoration-line: underline; */
  color: #ff6600 !important;
}
.img-size {
  width: 22%;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
.img-size {
  width: 100%;
}
}
</style>
