<template>
  <div>
    <div class="bg-white menu-margin">
      <q-list class="text-grey-8 bg-grey-3 shadow" v-if="dbMenues =='tutor'">
        <q-item
          clickable
          v-ripple
          :active="link === 'welcome'"
          @click="link = 'welcome'"
          active-class="my-menu-link"
          to="/"
        >
          <q-item-section avatar>
            <q-icon name="house" />
          </q-item-section>

          <q-item-section>Welcome</q-item-section>
        </q-item>
        <q-expansion-item
          group="somegroup"
          label="My Profile"
          icon="person"
          :content-inset-level="0"
        >
          <q-item
            clickable
            v-ripple
            :active="link === 'profile1'"
            @click="link = 'profile1'"
            active-class="my-menu-link"
            to="/tutor/g-info"
          >
            <q-item-section>General Info</q-item-section>
            <q-item-section avatar>
              <q-icon color="secondary" name="check_circle" />
            </q-item-section>
          </q-item>
          <q-item
            clickable
            v-ripple
            :active="link === 'profile2'"
            @click="link = 'profile2'"
            active-class="my-menu-link"
            to="/avail"
          >
            <q-item-section>Info &amp; Availibility</q-item-section>
            <q-item-section avatar>
              <q-icon color="secondary" name="check_circle" />
            </q-item-section>
          </q-item>
          <q-item
            clickable
            v-ripple
            :active="link === 'profile3'"
            @click="link = 'profile3'"
            active-class="my-menu-link"
            to="/edu"
          >
            <q-item-section>My Education</q-item-section>
            <q-item-section avatar>
              <q-icon color="warning" name="info" />
            </q-item-section>
          </q-item>
          <q-item
            clickable
            v-ripple
            :active="link === 'profile4'"
            @click="link = 'profile4'"
            active-class="my-menu-link"
            to="/video"
          >
            <q-item-section>Introductory Video</q-item-section>
            <q-item-section avatar>
              <q-icon color="secondary" name="check_circle" />
            </q-item-section>
          </q-item>
          <q-item
            clickable
            v-ripple
            :active="link === 'profile5'"
            @click="link = 'profile5'"
            active-class="my-menu-link"
            to="/document"
          >
            <q-item-section>Document Verification Info</q-item-section>
            <q-item-section avatar>
              <q-icon color="warning" name="info" />
            </q-item-section>
          </q-item>
        </q-expansion-item>

        <q-item
          clickable
          v-ripple
          :active="link === 'req'"
          @click="link = 'req'"
          active-class="my-menu-link"
          to="/tutor/myrequest"
        >
          <q-item-section avatar>
            <q-icon name="mail" />
          </q-item-section>

          <q-item-section>My Request(s)</q-item-section>
        </q-item>
        <q-expansion-item
          group="somegroup"
          label="Courses"
          icon="book"
          :content-inset-level="0"
          active-class="my-menu-link"
        >
          <q-item
            clickable
            v-ripple
            :active="link === 'course1'"
            @click="link = 'course1'"
            active-class="my-menu-link"
            to="/tutor/offer-course"
          >
            <q-item-section>Offer New Course</q-item-section>
          </q-item>
          <q-item
            clickable
            v-ripple
            :active="link === 'course2'"
            @click="link = 'course2'"
            active-class="my-menu-link"
            to="/tutor/manage-course"
          >
            <q-item-section>Manage Course</q-item-section>
          </q-item>
          <q-item
            clickable
            v-ripple
            :active="link === 'course3'"
            @click="link = 'course3'"
            active-class="my-menu-link"
            to="/tutor/course-progress"
          >
            <q-item-section>Progress</q-item-section>
          </q-item>
        </q-expansion-item>
        <q-expansion-item
          group="somegroup"
          label="Questions"
          icon="help"
          :content-inset-level="0"
          active-class="my-menu-link"
        >
          <q-item
            clickable
            v-ripple
            :active="link === 'q1'"
            @click="link = 'q1'"
            active-class="my-menu-link"
            to="/all-q"
          >
            <q-item-section>All Questions</q-item-section>
          </q-item>
          <q-item
            clickable
            v-ripple
            :active="link === 'q2'"
            @click="link = 'q2'"
            active-class="my-menu-link"
            to="/insert-q"
          >
            <q-item-section>Insert Question</q-item-section>
          </q-item>
        </q-expansion-item>
        <q-expansion-item
          group="somegroup"
          label="Tests"
          icon="help"
          :content-inset-level="0"
          active-class="my-menu-link"
        >
          <q-item
            clickable
            v-ripple
            :active="link === 'q1'"
            @click="link = 'q1'"
            active-class="my-menu-link"
            to="/all-tests"
          >
            <q-item-section>All Tests</q-item-section>
          </q-item>
          <q-item
            clickable
            v-ripple
            :active="link === 'q2'"
            @click="link = 'q2'"
            active-class="my-menu-link"
            to="/create-test"
          >
            <q-item-section>Create Test</q-item-section>
          </q-item>
        </q-expansion-item>

        <q-item
          clickable
          v-ripple
          :active="link === 'group'"
          @click="link = 'group'"
          active-class="my-menu-link"
          to="/tutgroups"
        >
          <q-item-section avatar>
            <q-icon name="group" />
          </q-item-section>

          <q-item-section>Tutoring Groups</q-item-section>
        </q-item>
        <q-item
          clickable
          v-ripple
          :active="link === 'classroom'"
          @click="link = 'classroom'"
          active-class="my-menu-link"
          to="/tutor/classroom"
        >
          <q-item-section avatar>
            <q-icon name="help" />
          </q-item-section>
          <q-item-section>My Classroom</q-item-section>
        </q-item>
        <q-item
          clickable
          v-ripple
          :active="link === 'testi'"
          @click="link = 'testi'"
          active-class="my-menu-link"
          to="/tutor/stdtesti"
        >
          <q-item-section avatar>
            <q-icon name="mode_comment" />
          </q-item-section>

          <q-item-section>Testimonials</q-item-section>
        </q-item>

        <q-item
          clickable
          v-ripple
          :active="link === 'pay'"
          @click="link = 'pay'"
          active-class="my-menu-link"
          to="/pay"
        >
          <q-item-section avatar>
            <i class="fas fa-dollar-sign" style="font-size: 24px;padding: 5px;"></i>
          </q-item-section>

          <q-item-section>Payments</q-item-section>
        </q-item>
      </q-list>

      <q-list class="text-grey-8 bg-grey-3 shadow-2"  v-if="dbMenues =='course'">
        <q-item
         
          clickable
          v-ripple
          :active="link === 'welcome2'"
          @click="link = 'welcome2'"
          active-class="my-menu-link"
          to="/"
        >
          <q-item-section avatar>
            <q-icon name="house" />
          </q-item-section>

          <q-item-section>Welcome</q-item-section>
        </q-item>
        <q-item
         
          clickable
          v-ripple
          :active="link === 'profile1'"
          @click="link = 'profile1'"
          active-class="my-menu-link"
          to="/course/my-profile"
        >
          <q-item-section avatar>
            <q-icon name="person" />
          </q-item-section>

          <q-item-section>My Profile</q-item-section>
        </q-item>

        <q-item
         
          clickable
          v-ripple
          :active="link === 'proposal'"
          @click="link = 'proposal'"
          active-class="my-menu-link"
          to="/course/proposals"
        >
          <q-item-section avatar>
            <q-icon name="cached" class="text-bold" />
          </q-item-section>

          <q-item-section>Proposal</q-item-section>
        </q-item>

        <q-item
         
          clickable
          v-ripple
          :active="link === 'progress'"
          @click="link = 'progress'"
          active-class="my-menu-link"
          to="/course/progress"
        >
          <q-item-section avatar>
            <q-icon name="trending_up" class="text-bold" />
          </q-item-section>

          <q-item-section>Progress</q-item-section>
        </q-item>
        <q-item
         
          clickable
          v-ripple
          :active="link === 'classroom'"
          @click="link = 'classroom'"
          active-class="my-menu-link"
          to="/course/classroom"
        >
          <q-item-section avatar>
            <q-icon name="desktop_mac" />
          </q-item-section>
          <q-item-section>Classroom</q-item-section>
        </q-item>
        <q-item
         
          clickable
          v-ripple
          :active="link === 'recording'"
          @click="link = 'recording'"
          active-class="my-menu-link"
          to="/course/recording"
        >
          <q-item-section avatar>
            <q-icon name="videocam" />
          </q-item-section>

          <q-item-section>Recording</q-item-section>
        </q-item>

        <q-item
         
          clickable
          v-ripple
          :active="link === 'tests'"
          @click="link = 'tests'"
          active-class="my-menu-link"
          to="/course/test"
        >
          <q-item-section avatar>
            <q-icon name="description" />
          </q-item-section>

          <q-item-section>Tests</q-item-section>
        </q-item>
        <q-item
         
          clickable
          v-ripple
          :active="link === 'reports'"
          @click="link = 'reports'"
          active-class="my-menu-link"
          to="/course/reports"
        >
          <q-item-section avatar>
            <q-icon name="pie_chart" />
          </q-item-section>

          <q-item-section>Reports</q-item-section>
        </q-item>
      </q-list>
      <q-list class="text-grey-8 bg-grey-3 shadow-2" v-if="dbMenues =='qbank'">
          <q-item
            clickable
            v-ripple
            :active="link === 'welcome3'"
            @click="link = 'welcome3'"
            active-class="my-menu-link"
            :to="{name:'qbank-welcome'}"
          >
            <q-item-section avatar>
              <q-icon name="house" />
            </q-item-section>

            <q-item-section>Welcome</q-item-section>
          </q-item>
          <q-item
            clickable
            v-ripple
            :active="link === 'profile'"
            @click="link = 'profile'"
            active-class="my-menu-link"
           :to="{name:'qbank-profile'}"
          >
            <q-item-section avatar>
              <q-icon name="person" />
            </q-item-section>

            <q-item-section>My Profile</q-item-section>
          </q-item>

          <q-item
            clickable
            v-ripple
            :active="link === 'create'"
            @click="link = 'create'"
            active-class="my-menu-link"
           :to="{name:'qbank-create-test'}"
          >
            <q-item-section avatar>
              <!-- <q-icon name="cached" class="text-bold" /> -->
              <i class="fas fa-edit" style="font-size: 20px;"></i>
            </q-item-section>

            <q-item-section>Create Test</q-item-section>
          </q-item>

          <q-item
            clickable
            v-ripple
            :active="link === 'alltest'"
            @click="link = 'alltest'"
            active-class="my-menu-link"
           :to="{name:'qbank-all-tests'}"
          >
            <q-item-section avatar>
              <q-icon name="description" />
            </q-item-section>

            <q-item-section>All Tests</q-item-section>
          </q-item>

          <q-item
            clickable
            v-ripple
            :active="link === 'reports'"
            @click="link = 'reports'"
            active-class="my-menu-link"
            :to="{name:'qbank-reports'}"
          >
            <q-item-section avatar>
              <q-icon name="pie_chart" />
            </q-item-section>

            <q-item-section>Reports</q-item-section>
          </q-item>
        </q-list>
    </div>
    <div class="q-pa-md" style="max-width: auto">
      <q-list bordered class="shadow-2">
        <q-expansion-item
          icon="help"
          label="Help Topics"
          header-class="text-grey-8 bg-grey-3"
          expand-icon-class="text-grey-8"
        >
          <q-card class="bg-grey-2">
            <q-card-section style="padding: 0 !important;margin: 5px;">
              <q-expansion-item
                group="somegroup"
                label="How Does Qbank Work?"
                header-class="text-grey-8"
                style="border:1px solid #d1d1d1;margin: 5px;"
              >
                <q-card>
                  <q-card-section>DocExams Qbank is an easy to use web based application which facilitates, analyzes and demonstrate your preparation and results similar to what actually appears in exam. You can demonstrate the working in Qbank free trial.</q-card-section>
                </q-card>
              </q-expansion-item>

              <q-expansion-item
                group="somegroup"
                label="How Can I Sign Up / Register?"
                header-class="text-grey-8"
                style="border:1px solid #d1d1d1;margin: 5px;"
              >
                <q-card>
                  <q-card-section>Simply, click Register button at the top right corner of the home page. A sign up page will display, fill out and click to registration button below.</q-card-section>
                </q-card>
              </q-expansion-item>

              <q-expansion-item
                group="somegroup"
                label="Who Can Create/Offer A Course?"
                header-class="text-grey-8"
                style="border:1px solid #d1d1d1;margin: 5px;"
              >
                <q-card>
                  <q-card-section>
                    If you have successfully registered yourself as a tutor then you are eligible to create/offer your course at DocExams.com for free. Create new course and maximize your earning. Here is how easy it is.
                    <p>If you have registered yourself as a tutor at DocExams.com then you can simply start your lucrative tutoring career through registering yourself as one of our tutor for free.</p>
                  </q-card-section>
                </q-card>
              </q-expansion-item>

              <q-expansion-item
                group="somegroup"
                label="What Payment Methods Can I Use?"
                header-class="text-grey-8"
                style="border:1px solid #d1d1d1;margin: 5px;"
              >
                <q-card>
                  <q-card-section>We accept payments from all major credit cards, paypal, western union and bank transfer. For western union and bank transfer or for any payment issue, kindly contact our support via email or WhatsApp, Imo and other social contacts with the details of Qbank you are willing to purchase.</q-card-section>
                </q-card>
              </q-expansion-item>
              <div style="margin:5px;">
                <q-btn dense outline color="primary" class="full-width">More FAQs</q-btn>
              </div>
            </q-card-section>
          </q-card>
        </q-expansion-item>
      </q-list>
    </div>
  </div>
</template>

<script>
export default {
  props: ["dbMenues"],
  data() {
    return {
      link: "proposal",
      left: false,
      right: false,
    };
  }
};
</script>

<style lang="scss" scoped>
.my-menu-link {
  color: white;
  background: #04b1ed;
}
.menu-margin {
  margin: 16px 16px;
}
.shadow {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12);
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .shadow {
    box-shadow: none;
  }
  .menu-margin {
    margin: 0 0;
  }
}
</style>