<template>
  <q-layout class="containers" view="hHh lpR lFf">
    <q-header elevated reveal class="text-white q-py-none" style="background: #111;">
      <div class="containers">
        <q-toolbar class="q-py-xs q-px-lg">
          <q-btn class="hide" dense flat round icon="menu" @click="left = !left" />
          <q-toolbar-title class="q-py-xs">
            <q-btn to="/">
              <img src="statics/logo.png" height="40" />
            </q-btn>
          </q-toolbar-title>

          <div
            v-if="$q.screen.gt.sm"
            class="no-underline GL__toolbar-link q-ml-xs q-gutter-xl text-body2 text-weight-normal row items-center no-wrap"
          >
            <a href="javascript:void(0)" class="text-white">
              Course
              <q-icon class="i-rotate" name="keyboard_arrow_right" />
              <q-menu anchor="bottom left" self="top left">
                <q-list class="q-pt-lg" style="background: #24292e;color:#ffffff;">
                  <q-item v-for="n in 1" :key="n" dense clickable to="/hiwcourse">
                    <q-item-section>How it works</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </a>
            <a href="javascript:void(0)" class="text-white">
              Qbank
              <q-icon class="i-rotate" name="keyboard_arrow_right" />
              <q-menu anchor="bottom left" self="top left">
                <q-list class="q-pt-lg" style="background: #24292e;color:#ffffff;">
                  <q-item v-for="n in 1" :key="n" dense clickable to="/hiwqbank">
                    <q-item-section>How it works</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </a>
            <a href="javascript:void(0)" class="text-white">
              Tutor
              <q-icon class="i-rotate" name="keyboard_arrow_right" />
              <q-menu anchor="bottom left" self="top left">
                <q-list class="q-pt-lg" style="background: #24292e;color:#ffffff;">
                  <q-item v-for="n in 1" :key="n" dense clickable to="/hiwtutor">
                    <q-item-section>How it works</q-item-section>
                  </q-item>
                  <q-item v-for="n in 1" :key="n" dense clickable to="/hiwbecomeatutor">
                    <q-item-section>Become A Tutor</q-item-section>
                  </q-item>
                  <q-item v-for="n in 1" :key="n" dense clickable to="/tips">
                    <q-item-section>Creat Course Tips</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </a>
            <!-- <a href="javascript:void(0)" class="text-white">
                        Info
            </a>-->
            <a href="javascript:void(0)" class="text-white">
              Info
              <q-icon class="i-rotate" name="keyboard_arrow_right" />
              <q-menu anchor="bottom left" self="top left">
                <q-list
                  dense
                  class="q-pt-lg"
                  style="min-width: auto;background: #24292e;color:#ffffff;"
                >
                  <q-item clickable>
                    <q-item-section>MOH UAE GP 1</q-item-section>
                    <q-item-section side>
                      <q-icon name="keyboard_arrow_right" />
                    </q-item-section>
                    <q-menu anchor="top right" self="top left">
                      <q-list style="min-width: auto;background: #24292e;color:#ffffff;">
                        <q-item v-for="n in 1" :key="n" dense clickable to="/info">
                          <q-item-section>MOH Info</q-item-section>
                        </q-item>
                      </q-list>
                    </q-menu>
                  </q-item>
                  <q-item clickable>
                    <q-item-section>MOH UAE GP 1</q-item-section>
                    <q-item-section side>
                      <q-icon name="keyboard_arrow_right" />
                    </q-item-section>
                    <q-menu anchor="top right" self="top left">
                      <q-list style="min-width: auto;background: #24292e;color:#ffffff;">
                        <q-item v-for="n in 3" :key="n" dense clickable>
                          <q-item-section>Submenu Label</q-item-section>
                        </q-item>
                      </q-list>
                    </q-menu>
                  </q-item>
                </q-list>
              </q-menu>
            </a>
          </div>

          <q-space />

          <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
            <q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications" />

            <q-btn dense flat no-wrap>
              <q-avatar circled size="40px">
                <img src="statics/avtr.png" />
              </q-avatar>
              <q-icon name="arrow_drop_down" size="16px" />

              <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="50px">
                        <img src="statics/avtr.png" />
                      </q-avatar>
                      <span class="text-h6">Asim Khan</span>
                      <span class="text-caption">user@docexams.com</span>
                    </q-item-section>
                  </q-item>
                  <q-separator class="bg-grey-8" />
                  <q-item clickable class="GL__menu-link">
                    <q-icon name="person" size="21px" class="q-pa-sm q-pr-md" />
                    <q-item-section>Tutor Dashboard</q-item-section>
                  </q-item>
                  <q-item clickable class="GL__menu-link">
                    <q-icon name="menu_book" size="21px" class="q-pa-sm q-pr-md" />

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

                    <q-item-section>Qbank Dashboard</q-item-section>
                  </q-item>
                  <q-separator class="bg-grey-8" />
                  <q-item clickable class="GL__menu-link">
                    <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>Sign out</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
            <q-btn class="hidee" dense flat round icon="sort" @click="right = !right" />
          </div>
        </q-toolbar>
      </div>
    </q-header>

    <q-drawer v-model="left" side="left" overlay behavior="mobile" elevated>
      <div class="fit bg-grey-9">
        <div class="q-pa-none bg-grey-9 text-white" style="max-width: auto">
          <q-list class="text-h6">
            <q-expansion-item
              :content-inset-level="1"
              expand-separator
              icon="menu_book"
              label="Course"
            >
              <q-item clickable v-ripple>
                <q-item-section>Course-1</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Course-2</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Course-3</q-item-section>
              </q-item>
            </q-expansion-item>
            <q-expansion-item :content-inset-level="1" expand-separator icon="person" label="Tutor">
              <q-item clickable v-ripple>
                <q-item-section>Tutor-1</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Tutor-2</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Tutor-3</q-item-section>
              </q-item>
            </q-expansion-item>
            <q-expansion-item :content-inset-level="1" expand-separator icon="school" label="Qbank">
              <q-item clickable v-ripple>
                <q-item-section>Qbank-1</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Qbank-2</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Qbank-3</q-item-section>
              </q-item>
            </q-expansion-item>
            <q-expansion-item :content-inset-level="1" expand-separator icon="info" label="Info">
              <q-expansion-item label="Info 1" :content-inset-level="0.5">
                <q-item clickable v-ripple to="/info">
                  <q-item-section>Info-1-1</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>Info-1-2</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>Info-1-3</q-item-section>
                </q-item>
              </q-expansion-item>

              <q-expansion-item label="Info 2" :content-inset-level="0.5">
                <q-item clickable v-ripple>
                  <q-item-section>Info-1-1</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>Info-2-2</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>Info-2-3</q-item-section>
                </q-item>
              </q-expansion-item>
            </q-expansion-item>
          </q-list>
        </div>
      </div>
    </q-drawer>
    <q-drawer show-if-above v-model="right" side="left">
    <q-drawer v-model="right" side="left">
      <div class="full-width bg-grey-1 q-ma-md">
        <div class="col-3 col-md-3 hide">
          <q-card class="q-ma-sm q-mr-md q-mt-lg no-shadow">
            <q-card-section>
              <div>
                <div class="text-h6 text-grey-8">Exams</div>
                <q-option-group
                  :options="examsoptions"
                  label="Notifications"
                  type="radio"
                  v-model="radiogroup"
                />
                <q-btn
                  color="primary"
                  flat
                  v-on:click="isMore = !isMore"
                >{{ isMore ? '+ Show More' : '- Show Less' }}</q-btn>

                <q-separator class="q-my-md" inset />
              </div>
              <div>
                <div class="text-h6 text-grey-8 q-py-md">Specialities</div>
                <q-select
                  dense
                  outlined
                  v-model="model"
                  :options="options"
                  label="Select Specialities"
                />
                <q-separator class="q-my-lg" inset />
              </div>
              <div class="show">
                <div class="text-h6 text-grey-8">Subscription Plans</div>
                <q-option-group
                  :options="planoptions"
                  label="Subscription"
                  type="checkbox"
                  v-model="subscription"
                />
                <q-separator class="q-my-md" inset />
              </div>
              <div class="showw">
                <div class="text-h6 text-grey-8">Topics</div>
                <q-option-group
                  :options="topicsoptions"
                  label="Notifications"
                  type="checkbox"
                  v-model="checkboxgroup"
                />
                <q-btn
                  color="primary"
                  flat
                  v-on:click="isMore = !isMore"
                >{{ isMore ? '+ Show More' : '- Show Less' }}</q-btn>

                <q-separator class="q-my-md" inset />
              </div>
              <div class="show">
                <div class="text-h6 text-grey-8">Tution Fee / Per Hour</div>
                <q-badge class="q-pa-md text-grey-8 text-body1" color="grey-1">
                  <span>$ {{ standard.min }}</span>
                  <span class="q-px-xl">To</span>
                  <span>$ {{ standard.max }}</span>
                </q-badge>

                <q-range v-model="standard" :min="0" :max="50" />
                <q-separator class="q-my-md" inset />
              </div>
              <div class="showw">
                <div class="text-h6 text-grey-8">Course Fee</div>
                <q-badge class="q-pa-md text-grey-8 text-body1" color="grey-1">
                  <span>$ {{ coursefee.min }}</span>
                  <span class="q-px-xl">To</span>
                  <span>$ {{ coursefee.max }}</span>
                </q-badge>

                <q-range v-model="coursefee" :min="5" :max="4000" />
                <q-separator class="q-my-md" inset />
              </div>
              <div>
                <div class="text-h6 text-grey-8">Nature</div>
                <q-option-group
                  :options="natureoptions"
                  label="Nature"
                  type="radio"
                  v-model="nature"
                />
                <q-separator class="q-my-md" inset />
              </div>
              <div class="show">
                <div class="text-h6 text-grey-8">Gender</div>
                <q-option-group
                  :options="genderoptions"
                  label="Notifications"
                  type="radio"
                  v-model="gender"
                />
                <q-separator class="q-my-md" inset />
              </div>
              <div>
                <div class="text-h6 text-grey-8">Class Timings</div>
                <q-option-group
                  :options="daysoptions"
                  label="Availability"
                  type="checkbox"
                  v-model="days"
                />
                <q-separator class="q-my-md" inset />
              </div>
              <div class="show">
                <div class="text-h6 text-grey-8">Availability</div>
                <q-option-group
                  :options="daysoptions"
                  label="Availability"
                  type="checkbox"
                  v-model="days"
                />
                <q-separator class="q-my-md" inset />
              </div>
              <div>
                <div class="text-h6 text-grey-8">Level</div>
                <q-option-group
                  :options="leveloptions"
                  label="Level"
                  type="checkbox"
                  v-model="level"
                />
                <q-separator class="q-my-md" inset />
              </div>
              <div>
                <div class="text-h6 text-grey-8">Languages</div>
              <q-option-group
                :options="langoptions"
                label="Languages"
                type="checkbox"
                v-model="languages"
              />
              <q-separator class="q-my-md" inset />
              </div>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
const photos = [
  "photo1.jpg",
  "photo2.jpg",
  "photo3.jpg",
  "photo4.jpg",
  "photo5.jpg",
  "photo6.jpg",
  "photo7.jpg",
  "photo8.jpg",
  "photo9.jpg",
  "photo10.jpg",
  "photo11.jpg",
  "photo12.jpg"
];
const stringOptions = [
  "General Practitioner (GP)",
  "Obs &amp; Gynae",
  "Internal Medicine",
  "Surgery",
  "General Dentist",
  "Dermatology",
  "Pediatrics",
  "Orthodontic",
  "Endodontic",
  "Physicians",
  "Physicians"
].reduce((acc, opt) => {
  for (let i = 1; i <= 2; i++) {
    acc.push(opt + " " + i);
  }
  return acc;
}, []);

export default {
  data() {
    return {
      left: false,
      right: false,
      divtag: false,
      standard: {
        min: 0,
        max: 50
      },
      coursefee: {
        min: 5,
        max: 4000
      },
      radiogroup: null,
      checkboxgroup: [],
      isMore: true,
      examsoptions: [
        { label: "MOH UAE", value: "MOH UAE" },
        { label: "HAAD", value: "HAAD" },
        { label: "MOH Oman", value: "MOH Oman" },
        {
          label: "SLE (Saudi Licensing Exam)",
          value: "SLE (Saudi Licensing Exam)"
        },
        { label: "DUCH", value: "DUCH" },
        { label: "MOH Kuwait", value: "MOH Kuwait" }
        // { label: "QCHP", value: "QCHP" },
        // { label: "USMLE", value: "USMLE" },
        // { label: "PLAB", value: "PLAB" },
        // { label: "AMC", value: "AMC" },
        // { label: "MCCEE", value: "MCCEE" },
        // { label: "MCCQE", value: "MCCQE" },
        // { label: "MRCOG", value: "MRCOG" },
        // { label: "MRCP", value: "MRCP" },
        // { label: "MRCS", value: "MRCS" },
        // { label: "FCPS-I", value: "FCPS-I" },
        // { label: "FCPS-II", value: "FCPS-II" },
        // { label: "MCPS", value: "MCPS" },
        // { label: "NBDE (USA)", value: "NBDE (USA)" },
        // { label: "NDEB (Canada)", value: "NDEB (Canada)" },
        // { label: "ORE (UK)", value: "ORE (UK)" },
        // { label: "ADC (Australia)", value: "ADC (Australia)" },
        // { label: "NAPLEX", value: "NAPLEX" }
      ],
      topicsoptions: [
        { label: "Internal Medicine", value: "op1" },
        { label: "Surgery", value: "op2" },
        { label: "Peads", value: "op3" },
        {
          label: "Cardiovascular",
          value: "op4"
        },
        { label: "Gastro", value: "op5" },
        { label: "Git", value: "op6" }
      ],
      daysoptions: [
        { label: "Sunday", value: "op1" },
        { label: "Monday", value: "op2" },
        { label: "Tuesday", value: "op3" },
        { label: "Wednesday", value: "op4" },
        { label: "Thursday", value: "op5" },
        { label: "Friday", value: "op6" },
        { label: "Saturday", value: "op7" }
      ],
       leveloptions: [
        { label: "Beginner", value: "op1" },
        { label: "Intermediate", value: "op2" },
        { label: "Advance", value: "op3" },
      ],
      level: [],
      langoptions: [
        { label: "English", value: "op1" },
        { label: "Arabic", value: "op2" },
        { label: "French", value: "op3" },
        { label: "Hindi / Urdu", value: "op4" }
      ],
      languages: [],
      planoptions: [
        { label: "1 Month", value: "op1" },
        { label: "3 Months", value: "op2" },
        { label: "6 Months", value: "op3" },
        { label: "12 Months", value: "op4" }
      ],
      subscription: [],
      days: [],
      filters: true,
      current: 3,
      model: null,
      options: stringOptions,
      photo: photos,
      topics: [
        "",
        "Internal Medicine",
        "Surgery",
        "Peads",
        "Cardiovascular",
        "Git"
      ],
      gender: null,
      genderoptions: [
        { label: "Male", value: "male" },
        { label: "Female", value: "female" },
        { label: "No Preference", value: "nopreference" }
      ],
      nature: null,
      natureoptions: [
        { label: "One On One", value: "one" },
        { label: "Group", value: "group" }
      ]
    };
  },

  methods: {
    filterFn(val, update, abort) {
      // call abort() at any time if you can't retrieve data somehow

      setTimeout(() => {
        update(
          () => {
            if (val === "") {
              this.options = stringOptions;
            } else {
              const needle = val.toLowerCase();
              this.options = stringOptions.filter(
                v => v.toLowerCase().indexOf(needle) > -1
              );
            }
          },

          // next function is available in Quasar v1.7.4+;
          // "ref" is the Vue reference to the QSelect
          ref => {
            if (val !== "" && ref.options.length > 0) {
              ref.setOptionIndex(-1); // reset optionIndex in case there is something selected
              ref.moveOptionSelection(1, true); // focus the first selectable option and do not update the input-value
            }
          }
        );
      }, 300);
    },

    filterFnAutoselect(val, update, abort) {
      // call abort() at any time if you can't retrieve data somehow

      setTimeout(() => {
        update(
          () => {
            if (val === "") {
              this.options = stringOptions;
            } else {
              const needle = val.toLowerCase();
              this.options = stringOptions.filter(
                v => v.toLowerCase().indexOf(needle) > -1
              );
            }
          },

          // next function is available in Quasar v1.7.4+;
          // "ref" is the Vue reference to the QSelect
          ref => {
            if (
              val !== "" &&
              ref.options.length > 0 &&
              ref.optionIndex === -1
            ) {
              ref.moveOptionSelection(1, true); // focus the first selectable option and do not update the input-value
              ref.toggleOption(ref.options[ref.optionIndex], true); // toggle the focused option
            }
          }
        );
      }, 300);
    },

    abortFilterFn() {
      // console.log('delayed filter aborted')
    },
    reset() {
      this.filters = true;
    }
  }
};
</script>

<style lang="css" scoped>
.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: 100%;
}
.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;
  }
}
</style>
