<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm bg-white ">
      <div class="text-h5 q-pb-md">Offer New Course</div>
      <div class="q-pa-lg rounded-borders shadow-2">
        <div>
          <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
            <div class="row">
              <div class="col-12 col-md-12 q-pa-sm">
                <q-input
                  dense
                  outlined
                  v-model="courseName"
                  label="Course name *"
                  hint="Please enter course name"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please inpur course name']"
                />
              </div>
              <div class="col-12 col-md-6 q-pa-sm">
                <q-input
                  dense
                  outlined
                  v-model="duration"
                  number
                  mask="####"
                  label="Total Duration in day(s) *"
                  hint="Please input Total Duration in day(s)"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Duration must be a number and greater than zero.']"
                />
              </div>
              <div class="col-12 col-md-6 q-pa-sm">
                <q-input
                  dense
                  outlined
                  v-model="startdate"
                  mask="date"
                  label="Start Date *"
                  hint="Please pick a Start Date or type YYYY/MM/DD"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please pick a start date']"
                >
                  <template v-slot:append>
                    <q-icon name="event" class="cursor-pointer">
                      <q-popup-proxy
                        ref="qDateProxy"
                        transition-show="scale"
                        transition-hide="scale"
                      >
                        <q-date v-model="startdate" @input="() => $refs.qDateProxy.hide()" />
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </div>
              <div class="col-12 col-md-6 q-pa-sm">
                <q-input
                  dense
                  outlined
                  v-model="lastdate"
                  mask="date"
                  label="Last Registration Date *"
                  hint="Please pick a Last Registration Date or type YYYY/MM/DD"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please pick last registration date']"
                >
                  <template v-slot:append>
                    <q-icon name="event" class="cursor-pointer">
                      <q-popup-proxy
                        ref="qDateProxy"
                        transition-show="scale"
                        transition-hide="scale"
                      >
                        <q-date v-model="lastdate" @input="() => $refs.qDateProxy.hide()" />
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </div>
              <div class="col-12 col-md-6 q-pa-sm">
                <q-select
                  dense
                  outlined
                  v-model="nature"
                  :options="filterOptNature"
                  label="Nature *"
                  hint="Please select nature"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please input nature']"
                />
              </div>
              <div class="col-12 col-md-6 q-pa-sm">
                <q-select
                  dense
                  outlined
                  v-model="classsize"
                  :options="filterOptClassSize"
                  label="Class Size *"
                  hint="Please select class size"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please input class size (max: 6)']"
                />
              </div>
              <div class="col-12 col-md-6 q-pa-sm">
                <q-select
                  dense
                  outlined
                  v-model="mode"
                  :options="filterOptMode"
                  label="Mode *"
                  hint="Please select mode of learning"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please select mode']"
                />
              </div>
              <div class="col-12 col-md-6 q-pa-sm">
                <q-select
                  dense
                  outlined
                  v-model="level"
                  :options="filterOptLevel"
                  label="Level *"
                  hint="Please select level"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please select level']"
                />
              </div>
              <div class="col-12 col-md-6 q-pa-sm">
                <q-select
                  dense
                  outlined
                  v-model="lang"
                  :options="filterOptLang"
                  label="Instruction Language *"
                  hint="Please select Language"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please select language']"
                />
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-6 q-pa-sm">
                <q-input
                  dense
                  v-model="courseDetails"
                  outlined
                  rows="4"
                  type="textarea"
                  label="Course Details *"
                  hint="Please enter course details"
                  placeholder="Write details about this course"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please type course details here']"
                />
              </div>
              <div class="col-12 col-md-6 q-pa-sm">
                <q-input
                  dense
                  v-model="teachingMode"
                  outlined
                  rows="4"
                  type="textarea"
                  label="Teaching Mode *"
                  hint="Please enter teaching mode"
                  placeholder="Describe in detail about your teaching strategies / methodologies you will use to accomplish both course content goals and active engagement on the part of student(s)?"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please type teaching mode here']"
                />
              </div>
            </div>

            <div class="row">
              <div class="col-12 col-md-6 q-pa-sm">
                <label class="text-caption text-bold text-grey-8 q-pa-sm">What Student Will Learn</label>
                <q-editor
                  min-height="15vh"
                  v-model="editor"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please type teaching mode here']"
                  :definitions="{
                            bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'}
                        }"
                />
              </div>
              <div class="col-12 col-md-6 q-pa-sm">
                <label class="text-caption text-bold text-grey-8 q-pa-sm">More Features</label>
                <div class="q-pb-sm">
                  <q-checkbox v-model="note" label="Study Note" />
                  <q-checkbox v-model="mock" label="Mock Test" />
                </div>

                <q-input
                  dense
                  v-model="otherText"
                  outlined
                  rows="4"
                  type="textarea"
                  label="Other (if any)"
                  hint="Please enter other if any"
                  placeholder="Other (if any)"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please type other']"
                />
              </div>
            </div>
            <q-separator class="q-my-lg" inset />
            <div class="text-h6 text-grey-8 q-pb-md">Course Timings</div>
            <div class="row">
              <div class="col-12 col-md-5 q-pa-sm">
                <q-select
                  dense
                  outlined
                  v-model="model"
                  :options="filterOptDays"
                  label="Days"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please select day']"
                />
              </div>
              <div class="col-12 col-md-5 q-pa-sm">
                <q-input
                  color="primary"
                  outlined
                  dense
                  v-model="inputValue"
                  label="Start time - End time"
                  mask="##:## - ##:##"
                  class="text-body1"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please select timing']"
                >
                  <template v-slot:append>
                    <q-icon name="far fa-clock" class="cursor-pointer">
                      <q-popup-proxy
                        v-model="showScroller2"
                        anchor="top right"
                        self="bottom middle"
                      >
                        <q-scroller
                          v-model="value"
                          view="time-range"
                          text-color="white"
                          color="primary"
                          inner-text-color="grey-8"
                          inner-color="white"
                          :style="scrollerPopupStyle150"
                          @close="() => { showScroller2 = false }"
                        />
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </div>
              <div class="col-12 col-md-2 q-mt-xs">
                <q-btn color="primary" class="full-width">Add Time</q-btn>
              </div>
            </div>
            <div class="row">
              <div v-for="n in 4" :key="n" class="col-12 col-md-3 col-xs-12 q-pa-xs text-center">
                <q-chip
                  removable
                  v-model="daystime"
                  @remove="log('daystime')"
                  color="grey"
                  text-color="white"
                  class="q-pa-md"
                >Monday 02:30 to 4:30</q-chip>
              </div>
            </div>
            <q-separator class="q-my-lg" inset />
            <div class="text-h6 text-grey-8 q-pb-md">Course Content</div>
            <div class="row">
              <div class="col-12 col-md-3 q-mt-sm">
                <div class="text-bold text-grey-8 q-py-xs q-pt-sm">Category/Exam/Doctype/Topic</div>
                <q-select dense outlined label>
                  <q-menu>
                    <q-list dense class="scroll" style="height: 100px;width:200px;">
                      <q-item clickable>
                        <q-item-section>Physician</q-item-section>
                        <q-item-section side>
                          <q-icon name="keyboard_arrow_right" />
                        </q-item-section>

                        <q-menu anchor="top middle" self="top left">
                          <q-list style="height: 100px;overflow-y:scroll;">
                            <q-item v-for="n in 5" :key="n" dense clickable>
                              <q-item-section>MOH UAE</q-item-section>
                              <q-item-section side>
                                <q-icon name="keyboard_arrow_right" />
                              </q-item-section>
                              <q-menu auto-close anchor="top middle" self="top left">
                                <q-list style="height: 100px;overflow-y:scroll;">
                                  <q-item v-for="n in 5" :key="n" dense clickable>
                                    <q-item-section>Internal Medicine</q-item-section>
                                  </q-item>
                                </q-list>
                              </q-menu>
                            </q-item>
                          </q-list>
                        </q-menu>
                      </q-item>
                      <q-item clickable>
                        <q-item-section>Dentistry</q-item-section>
                        <q-item-section side>
                          <q-icon name="keyboard_arrow_right" />
                        </q-item-section>

                        <q-menu anchor="top middle" self="top left">
                          <q-list style="height: 100px;overflow-y:scroll;">
                            <q-item v-for="n in 3" :key="n" dense clickable>
                              <q-item-section>USMLE Step 1</q-item-section>
                              <q-item-section side>
                                <q-icon name="keyboard_arrow_right" />
                              </q-item-section>
                              <q-menu auto-close anchor="top middle" self="top left">
                                <q-list style="height: 100px;overflow-y:scroll;">
                                  <q-item v-for="n in 8" :key="n" dense clickable>
                                    <q-item-section>General Practitioner</q-item-section>
                                  </q-item>
                                </q-list>
                              </q-menu>
                            </q-item>
                          </q-list>
                        </q-menu>
                      </q-item>
                      <q-item clickable>
                        <q-item-section>Pharmacy</q-item-section>
                        <q-item-section side>
                          <q-icon name="keyboard_arrow_right" />
                        </q-item-section>

                        <q-menu anchor="top middle" self="top left">
                          <q-list style="height: 100px;overflow-y:scroll;">
                            <q-item v-for="n in 8" :key="n" dense clickable>
                              <q-item-section>DHA</q-item-section>
                              <q-item-section side>
                                <q-icon name="keyboard_arrow_right" />
                              </q-item-section>
                              <q-menu auto-close anchor="top middle" self="top left">
                                <q-list class="scroll" style="height: 100px;">
                                  <q-item v-for="n in 5" :key="n" dense clickable>
                                    <q-item-section>Surgery</q-item-section>
                                  </q-item>
                                </q-list>
                              </q-menu>
                            </q-item>
                          </q-list>
                        </q-menu>
                      </q-item>
                      <q-item clickable>
                        <q-item-section>Nursing</q-item-section>
                        <q-item-section side>
                          <q-icon name="keyboard_arrow_right" />
                        </q-item-section>

                        <q-menu anchor="top middle" self="top left">
                          <q-list style="height: 100px;overflow-y:scroll;">
                            <q-item v-for="n in 4" :key="n" dense clickable>
                              <q-item-section>MOH UAE</q-item-section>
                              <q-item-section side>
                                <q-icon name="keyboard_arrow_right" />
                              </q-item-section>
                              <q-menu auto-close anchor="top middle" self="top left">
                                <q-list style="height: 100px;overflow-y:scroll;">
                                  <q-item v-for="n in 6" :key="n" dense clickable>
                                    <q-item-section>Internal Medicine</q-item-section>
                                  </q-item>
                                </q-list>
                              </q-menu>
                            </q-item>
                          </q-list>
                        </q-menu>
                      </q-item>
                    </q-list>
                  </q-menu>
                </q-select>
              </div>

              <div class="col-12 col-md-3 q-pa-md">
                <div class="text-bold text-grey-8 q-pb-xs">Topics *</div>

                <q-select
                  dense
                  outlined
                  v-model="topics"
                  use-input
                  use-chips
                  multiple
                  input-debounce="0"
                  @new-value="createValue"
                  :options="filterOptTopic"
                  @filter="filterFn"
                  style="width: auto;"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please select topics']"
                />
              </div>
              <div class="col-12 col-md-3 q-pa-md">
                <div class="text-bold text-grey-8 q-pb-xs">Sub topics *</div>

                <q-select
                  dense
                  outlined
                  v-model="subtopics"
                  use-input
                  use-chips
                  multiple
                  input-debounce="0"
                  @new-value="createValue"
                  :options="filterOptSubtopic"
                  @filter="filterFn"
                  style="width: auto;"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please select subtopics']"
                />
              </div>
              <div class="col-12 col-md-3 q-pa-md q-mt-lg">
                <q-btn color="primary" class="full-width">
                  <div>Add Expertise</div>
                </q-btn>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-12 q-mt-md">
                <q-markup-table>
                  <thead>
                    <tr>
                      <th class="text-left">TOPIC</th>
                      <th class="text-right">SUBTOPIC</th>
                      <th class="text-right">CREDIT HOURS</th>
                      <th class="text-right">ACTION</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="text-left">Internal Medicine</td>
                      <td class="text-right">Cardiovascular</td>
                      <td class="text-right">
                        <q-input dense outlined v-model="crhr" name="crhr" v-on:input= "update_crhr" number mask="####" />
                      </td>
                      <td class="text-right">
                        <q-icon
                          clickable
                          size="sm"
                          class="text-blue-5 hoverable cursor-pointer"
                          name="delete"
                        />
                      </td>
                    </tr>
                    <tr>
                      <td class="text-left">Internal Medicine</td>
                      <td class="text-right">Gastro</td>
                      <td class="text-right">
                        <q-input dense outlined v-model="crhr2" name="crhr2" v-on:input= "update_crhr2" number mask="####" />
                      </td>
                      <td class="text-right">
                        <q-icon
                          clickable
                          size="sm"
                          class="text-blue-5 hoverable cursor-pointer"
                          name="delete"
                        />
                      </td>
                    </tr>
                    <tr>
                      <td class="text-left">Internal Medicine</td>
                      <td class="text-right">Infactious Deseases</td>
                      <td class="text-right">
                        <q-input dense outlined v-model="crhr3" name="crhr3" v-on:input= "update_crhr3" number mask="####" />
                      </td>
                      <td class="text-right">
                        <q-icon
                          clickable
                          size="sm"
                          class="text-blue-5 hoverable cursor-pointer"
                          name="delete"
                        />
                      </td>
                    </tr>
                  </tbody>
                </q-markup-table>
              </div>
              <div class="col-12 col-md-12 col-xs-12 q-pa-lg text-center">
                <div class="text-body1 text-bold text-grey-9">
                  Total Credit Hours Of This Course:
                   
                  <span class="text-blue q-pa-sm">{{ result() }}</span>
                </div>
              </div>
              <div class="col-12 col-md-8 q-pa-sm">
                <q-input
                  dense
                  outlined
                  v-model="fee"
                  number
                  mask="####"
                  label="Fee (USD/Student) *"
                  hint="( Auto calculated as per your hourly rate ) i.e. $500"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Fee must be number and in rage of 5 to 100000']"
                />
              </div>
              <div class="col-12 col-md-4 q-pa-sm">
                <q-input
                  dense
                  outlined
                  v-model="discount"
                  number
                  mask="####"
                  label="Discount (if any) *"
                  hint="Please input Discount i.e. $10"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Discount must be number and in rage of 5 to 100000']"
                />
              </div>
            </div>
            <q-separator class="q-my-lg" inset />
            <div class="text-h6 text-grey-8 q-pb-md">Course Introductory Video</div>
            <div class="row">
              <div class="col-12 col-md-12">
                <q-card class="my-card">
                  <q-card-section>
                    <div class="q-pa-md" style="display: none;">
                      <q-video :ratio="16/9" src="https://www.youtube.com/embed/P_B-ZZ705zo" />
                    </div>

                    <div class="flex flex-center q-py-lg">
                      <q-file
                        color="white"
                        class="bg-primary rounded-borders text-white"
                        outline
                        filled
                        v-model="model"
                        label="Upload Video"
                        style="width: 160px"
                        lazy-rules
                        :rules="[ val => val && val.length > 0 || 'Select video to upload']"
                      >
                        <template v-slot:prepend>
                          <q-icon color="white" name="cloud_upload" />
                        </template>
                      </q-file>
                    </div>
                    <q-linear-progress size="25px" :value="progress1" color="secondary">
                      <div class="absolute-full flex flex-center">
                        <q-badge color="white" text-color="secondary" :label="progressLabel1" />
                      </div>
                    </q-linear-progress>
                  </q-card-section>
                </q-card>
              </div>
            </div>
            <q-list class="q-my-lg">
              <q-expansion-item
                bordered
                group="somegroup"
                label="Why upload a video?"
                header-class="bg-grey-2 text-grey-8 q-mb-sm"
                expand-icon-class="text-grey-8"
              >
                <q-card class="bg-white">
                  <q-card-section class="q-pa-xs">
                    <ul>
                      <li>Helpfull for students to judge your expertise.</li>
                      <li>More interactive &amp; result oriented.</li>
                      <li>Plan your video keeping in view that why should student chose your course.</li>
                    </ul>
                  </q-card-section>
                </q-card>
              </q-expansion-item>

              <q-expansion-item
                group="somegroup"
                label="Read the instructions"
                header-class="bg-grey-2 text-grey-8 q-mb-sm"
                expand-icon-class="text-grey-8"
              >
                <q-card class="bg-white">
                  <q-card-section class="q-pa-xs">
                    <ul>
                      <li>Create a 60 - second introductory video.</li>
                      <li>Record your video in a natural daylight, avoiding lightening issue.</li>
                      <li>Record in a quiet space free of echoes, pops or white noise.</li>
                      <li>While recording, speak directly into the camera as if you were speaking to a student.</li>
                      <li>For PC users. Open VLC player then File > Open Capture Device.</li>
                      <li>For MAC users. Go to Quicktime Player then File > New Movie Recording.</li>
                      <li>Send us only those videos you created by yourself to avoid copyright issues.</li>
                    </ul>
                  </q-card-section>
                </q-card>
              </q-expansion-item>
              <q-expansion-item
                group="somegroup"
                label="What Happens Next?"
                header-class="bg-grey-2 text-grey-8 q-mb-sm"
                expand-icon-class="text-grey-8"
              >
                <q-card class="bg-white">
                  <q-card-section class="q-pa-xs">
                    <ul>
                      <li>Once you create and save course, if qualified, your course will be published at our website for free and you will be notified accordingly.</li>
                      <li>Students will be able to enroll for your course online till your above defined last registration date.</li>
                      <li>If no student enrollment is made till last registration date then no course will be started.</li>
                      <li>If ONLY single or more than one student enrollment is made then tutor will be required to start course at its scheduled time.</li>
                    </ul>
                  </q-card-section>
                  <q-separator inset />
                </q-card>
              </q-expansion-item>
              <div class="q-pt-md">
                <span class="text-red">NOTE:</span> It is highly advisible to upload a course introductory video to maximize your earning,
              </div>
            </q-list>
            <div class="col-12 col-md-12 q-py-md">
              <q-btn
                type="submit"
                color="secondary"
                size="md"
                label="Create Course"
                @click="accept =! accept"
              />
            </div>
          </q-form>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
const stringOptions = ["Whatsapp", "imo", "Viber", "Wechat", "Line"];
const topic = ["Internal Medicine", "Surgery", "Pediatrics", "Obs & Gyane"];
const subtopic = ["Hamatology", "Cardiovascular", "GIT", "Infactious desease"];
const fee = [
  "$ 5",
  "$ 10",
  "$ 15",
  "$ 20",
  "$ 25",
  "$ 30",
  "$ 35",
  "$ 40",
  "$ 45",
  "$ 50"
];
const days = ["Sunday", "Monday", "Tuesday", "Thirsday", "Friday", "Saturday"];
const year = ["2010", "2011", "2012", "2013", "2014", "2015"];

const nature = ["One on One", "Group"];
const mode = ["Live Online"];
const level = ["Beginner", "Intermediate", "Advance"];
const lang = ["English", "Arabic", "French", "Hindi / Urdu"];
const classsize = ["1", "2", "3", "4", "5", "6"];
const birth = ["Pakistan", "UAE", "USA", "India", "KSA"];
export default {
  data() {
    return {
      model: null,
      topics: null,
      subtopics: null,
      note: false,
      mock: false,
      time: "",
      courseName: null,
      duraton: null,
      fee: null,
      discount: null,
      crhr: 0,
      crhr2: 0,
      crhr3: 0,
      nature: null,
      classsize: null,
      mode: null,
      level: null,
      lang: null,
      courseDetails: null,
      teachingMode: null,
      editor: null,
      otherText: null,
      accept: false,
      daystime: true,
      progress1: 0.9,
      
      filterOptTopic: topic,
      filterOptSubtopic: subtopic,
      filterOptFee: fee,
      filterOptDays: days,
      filterOptYears: year,
      filterOptNature: nature,
      filterOptMode: mode,
      filterOptClassSize: classsize,
      filterOptLevel: level,
      filterOptLang: lang,
      filterOptBirth: birth,
      showScroller2: false,
      value: "",
      inputValue: "",
      date: "",
      startdate: "",
      lastdate: "",
      options: [],
     
    };
  },
  computed: {
    progressLabel1() {
      return (this.progress1 * 100).toFixed(2) + "%";
    },
    scrollerPopupStyle150() {
      if (this.$q.screen.lt.sm) {
        return {
          width: "90vw",
          height: "70vh"
        };
      } else {
        return {
          maxHeight: "200px",
          height: "200px",
          width: "250px"
        };
      }
    },
    

  },
  methods: {
    update_crhr: function (event) {
      this.crhr = event.target.value;
    },
    update_crhr2: function (event) {
      this.crhr2 = event.target.value;
    },
    update_crhr3: function (event) {
      this.crhr3 = event.target.value;
    },
    result: function () {

      return parseInt(this.crhr) + parseInt(this.crhr2) + parseInt(this.crhr3);
    },
    onSubmit() {
      if (this.accept !== true) {
        this.$q.notify({
          color: "red-5",
          textColor: "white",
          icon: "warning",
          message: "Something went wrong! Form not submitted"
        });
      } else {
        this.$q.notify({
          color: "green-4",
          textColor: "white",
          icon: "cloud_done",
          message: "Submitted"
        });
      }
    },

    onReset() {
      this.name = null;
      this.age = null;
      this.accept = false;
    },
    reset() {
      this.daystime = true;
    },
    createValue(val, done) {
      if (val.length > 0) {
        const model = (this.model || []).slice();

        val
          .split(/[,;|]+/)
          .map(v => v.trim())
          .filter(v => v.length > 0)
          .forEach(v => {
            if (stringOptions.includes(v) === false) {
              stringOptions.push(v);
            }
            if (model.includes(v) === false) {
              model.push(v);
            }
          });

        done(null);
        this.model = model;
      }
    },

    filterFn(val, update) {
      update(() => {
        if (val === "") {
          this.filterOptions = stringOptions;
        } else {
          const needle = val.toLowerCase();
          this.filterOptions = stringOptions.filter(
            v => v.toLowerCase().indexOf(needle) > -1
          );
        }
      });
    }
  },
  watch: {
    value(val) {
      const type = Object.prototype.toString.call(this.value);
      if (type === "[object Array]") {
        this.inputValue = `${val[0]} - ${val[1]}`;
      }
    },
    inputValue(val) {
      const parts = val.split(" - ");
      if (parts[0] !== this.value[0] || parts[1] !== this.value[1]) {
        this.value[0] = parts[0];
        this.value[1] = parts[1];
      }
    }
  }
};
</script>

<style lang="css">
.q-uploader__file--img {
  height: 300px !important;
  min-width: 200px !important;
}

.my-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .q-stepper__tab {
    display: none;
  }
}
</style>
