<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-md">Info &amp; Availability</div>
      <q-form  @submit="onSubmit" @reset="onReset" class="q-gutter-md">

      <div class="shadow-2 q-pa-lg rounded-borders">
        <q-list>
          <q-expansion-item
            bordered
            group="somegroup"
            label="Tutoring Expertise"
            header-class="bg-grey-2 text-grey-8 text-bold q-mb-sm"
            expand-icon-class="text-grey-8"
            default-opened
          >
            <q-card class="bg-white">
              <q-card-section>
                <div class="row">
                  <div
                    class="text-body1"
                  >Please ONLY select those exams or topics which you can teach confidently. Otherwise it may result in downgrading your tutoring profile. (i.e. MOH --> GP --> Internal Medicine --> GIT. Renal)</div>
                  <div class="col-12 col-md-12">
                    <div class="text-subtitle1 text-bold text-grey-8">Add your expertise</div>
                  </div>
                  <div class="col-12 col-md-5 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 {{n}}</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>Internal Medicine {{n}}</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>{{filterOptSubtopic[n-1]}}</q-item-section>
                                            </q-item>
                                          </q-list>
                                        </q-menu>
                                      </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 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-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>{{filterOptSubtopic[n-1]}}</q-item-section>
                                            </q-item>
                                          </q-list>
                                        </q-menu>
                                      </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 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-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>{{filterOptSubtopic[n-1]}}</q-item-section>
                                            </q-item>
                                          </q-list>
                                        </q-menu>
                                      </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 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-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>{{filterOptSubtopic[n-1]}}</q-item-section>
                                            </q-item>
                                          </q-list>
                                        </q-menu>
                                      </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-5 q-pa-md">
                                <div class="text-bold text-grey-8 q-pb-xs">Category/Exam/Doctype/Topic</div>
                                <q-list bordered class="rounded-borders">

                                    <q-expansion-item dense expand-separator label="Physician">
                                        <q-expansion-item dense :header-inset-level="1" expand-separator label="MOH UAE">

                                            <q-expansion-item dense switch-toggle-side dense-toggle label="General Practitionar (GP)" :header-inset-level="1" :content-inset-level="2">
                                                <q-card>
                                                    <q-card-section dense>
                                                        <q-list>
                                                            <q-item dense clickable v-ripple>
                                                                <q-item-section dense>
                                                                    <q-item-label dense>Internal Medician</q-item-label>
                                                                </q-item-section>
                                                            </q-item>

                                                            <q-item dense clickable v-ripple>
                                                                <q-item-section>
                                                                    <q-item-label dense>Surgery</q-item-label>
                                                                </q-item-section>
                                                            </q-item>

                                                            <q-item dense clickable v-ripple>
                                                                <q-item-section>
                                                                    <q-item-label dense>Obs &amp; Gynae</q-item-label>
                                                                </q-item-section>
                                                            </q-item>
                                                            <q-item dense clickable v-ripple>
                                                                <q-item-section>
                                                                    <q-item-label dense>Behavioral Scicene</q-item-label>
                                                                </q-item-section>
                                                            </q-item>
                                                        </q-list>

                                                    </q-card-section>
                                                </q-card>
                                            </q-expansion-item>

                                            <q-expansion-item switch-toggle-side dense-toggle label="Yesterday" :header-inset-level="1" :content-inset-level="2">
                                                <q-card>
                                                    <q-card-section dense>
                                                        Lorem ipsum
                                                    </q-card-section>
                                                </q-card>
                                            </q-expansion-item>
                                        </q-expansion-item>
                                    </q-expansion-item>
                                </q-list>
                  </div>-->
                  <div class="col-12 col-md-4 q-pa-md">
                    <div class="text-bold text-grey-8 q-pb-xs">Sub topics *</div>

                    <q-select
                      dense
                      outlined
                      v-model="model"
                      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 something']"
                    />
                  </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">
                    <div class="text-subtitle1 text-bold text-grey-8">Your added expertise</div>
                  </div>
                  <div class="col-12 col-md-6 col-xs-12 q-pa-xs text-center">
                    <div class="items-start q-gutter-sm">
                      <q-card class="my-card bg-grey-2" flat bordered>
                        <div
                          class="text-grey-8 q-pa-xs"
                        >Physician -> MOH UAE General Practitioner (GP) -> Internal Medicine</div>

                        <q-card-actions>
                          <q-btn flat color="grey-4" icon="cancel" />

                          <q-space />

                          <q-btn
                            color="grey"
                            round
                            flat
                            dense
                            :icon="expanded1 ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
                            @click="expanded1 = !expanded1"
                          />
                        </q-card-actions>

                        <q-slide-transition>
                          <div v-show="expanded1">
                            <q-separator />
                            <q-card-section class="text-left text-subitle2 bg-white">
                              <q-chip
                                removable
                                v-model="daystime"
                                @remove="log('expertise')"
                                outline
                                color="primary"
                                class="q-pa-md"
                              >Basic Sciences</q-chip>
                            </q-card-section>
                          </div>
                        </q-slide-transition>
                      </q-card>
                    </div>
                  </div>
                  <div class="col-12 col-md-6 col-xs-12 q-pa-xs text-center">
                    <div class="items-start q-gutter-sm">
                      <q-card class="my-card bg-grey-2" flat bordered>
                        <div
                          class="text-grey-8 q-pa-xs"
                        >Physician -> MOH UAE General Practitioner (GP) -> Internal Medicine</div>

                        <q-card-actions>
                          <q-btn flat color="grey-4" icon="cancel" />

                          <q-space />

                          <q-btn
                            color="grey"
                            round
                            flat
                            dense
                            :icon="expanded2 ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
                            @click="expanded2 = !expanded2"
                          />
                        </q-card-actions>

                        <q-slide-transition>
                          <div v-show="expanded2">
                            <q-separator />
                            <q-card-section class="text-left text-subitle2 bg-white">
                              <q-chip
                                removable
                                v-model="daystime"
                                @remove="log('expertise')"
                                outline
                                color="primary"
                                class="q-pa-md"
                              >Basic Sciences</q-chip>
                            </q-card-section>
                          </div>
                        </q-slide-transition>
                      </q-card>
                    </div>
                  </div>
                  <div class="col-12 col-md-6 col-xs-12 q-pa-xs text-center">
                    <div class="items-start q-gutter-sm">
                      <q-card class="my-card bg-grey-2" flat bordered>
                        <div class="text-grey-8 q-pa-xs">Physician -> Internal Medicine</div>

                        <q-card-actions>
                          <q-btn flat color="grey-4" icon="cancel" />

                          <q-space />

                          <q-btn
                            color="grey"
                            round
                            flat
                            dense
                            :icon="expanded2 ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
                            @click="expanded2 = !expanded2"
                          />
                        </q-card-actions>

                        <q-slide-transition>
                          <div v-show="expanded2">
                            <q-separator />
                            <q-card-section class="text-left text-subitle2 bg-white">
                              <q-chip
                                removable
                                v-model="daystime"
                                @remove="log('expertise')"
                                outline
                                color="primary"
                                class="q-pa-md"
                              >Basic Sciences</q-chip>
                            </q-card-section>
                          </div>
                        </q-slide-transition>
                      </q-card>
                    </div>
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </q-expansion-item>

          <q-expansion-item
            group="somegroup"
            label="Tutoring Fee &amp; Availability"
            header-class="bg-grey-2 text-grey-8 text-bold"
            expand-icon-class="text-grey-8"
            default-opened
          >
            <q-card class="bg-white">
              <q-card-section>
                <div class="row">
                  <div class="col-12 col-md-5">
                    <q-select
                      dense
                      outlined
                      v-model="fee"
                      :options="filterOptFee"
                      label="Expected Fee Per Hour"
                      lazy-rules
                      :rules="[ val => val && val.length > 0 || 'Please select expected Fee/Hr']"
                    />
                    <div
                      class="text-caption q-my-sm"
                    >(Minimum per hour expected fee from a single student in US Dollar i.e. US $ 15)</div>
                  </div>
                </div>
                <q-separator class="q-my-lg" inset />
                <div class="row">
                  <div class="col-12 col-md-5 q-pa-xs">
                    <q-select
                      dense
                      outlined
                      v-model="day"
                      :options="filterOptDays"
                      label="Days"
                      lazy-rules
                      :rules="[ val => val && val.length > 0 || 'Please select something']"
                    />
                  </div>
                  <div class="col-12 col-md-5 q-pa-xs">
                    <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 something']"
                    >
                      <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>
                <div
                  class="text-subtitle q-py-md"
                >Set your available days with timing, when you can offer live lectures.</div>
              </q-card-section>
            </q-card>
          </q-expansion-item>
        </q-list>
        <div class="col-12 col-md-12 q-py-md">
          <q-btn type="submit" color="secondary" size="md" label="Update"  @click="accept =! accept"/>
        </div>

      </div>
      </q-form>
    </div>
  </transition>
</template>

<script>
const stringOptions = ["Whatsapp", "imo", "Viber", "Wechat", "Line"];
const subtopic = [
  "hamatology",
  "cardiovascular",
  "git",
  "infactious desease",
  "Gynae",
  "Behavioural Science"
];
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 gender = ["Male", "Female"];
const living = ["Pakistan", "UAE", "USA", "India", "KSA"];
const birth = ["Pakistan", "UAE", "USA", "India", "KSA"];
export default {
  data() {
    return {
      model: null,
      expanded1: false,
      expanded2: false,
      step: 1,
      time: "",
      fee: null,
      text: null,
      day: null,
      accept: false,
      daystime: true,
      progress1: 0.9,
      filterOptions: stringOptions,
      filterOptSubtopic: subtopic,
      filterOptFee: fee,
      filterOptDays: days,
      filterOptYears: year,
      filterOptGender: gender,
      filterOptLiving: living,
      filterOptBirth: birth,
      showScroller2: false,
      value: "",
      inputValue: "",
      date: "",
      options: [],
      myModel: []
    };
  },
  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: {
    onSubmit() {
      if (this.accept !== true) {
        this.$q.notify({
          color: "red-5",
          textColor: "white",
          icon: "warning",
          message: "Something went wrong! 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;
}

/* .q-stepper__title {
    display: none;
}
.q-stepper__label .q-stepper__line {
    display: none;
} */
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .q-stepper__tab {
    display: none;
  }
}
</style><style lang="css" scoped>
.instructions ul {
  list-style: none;
}

.instructions ul li:before {
  content: "\2713";
  margin-left: -20px;
  margin-right: 10px;
  padding: 5px;
  color: green;
  font-size: 20px;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .instructions ul {
    padding: 0;
    margin-left: 0px;
    margin-right: 5px;
  }
}
</style>
