<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-md">My Education</div>

      <q-card class="q-pa-md">
        <q-form @submit="onSubmit" @reset="onReset">
          <div class="row">
            <div class="col-12 text-h6 q-py-md">Academic Degree</div>
            <div class="col-12 col-md-3 q-pa-xs">
              <q-input
                dense
                outlined
                v-model="degname"
                label="Degree name *"
                hint="Please enter your degree name"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please type something']"
              />
            </div>
            <div class="col-12 col-md-4 q-pa-xs">
              <q-input
                dense
                outlined
                v-model="uniname"
                label="College/University Name *"
                hint="Please enter your College/University name"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please type something']"
              />
            </div>
            <div class="col-12 col-md-3 q-pa-xs">
              <q-select
                dense
                outlined
                v-model="passingYear1"
                :options="filterOptYears"
                label="Passing Year"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please select passing year']"
              />
            </div>
            <div class="col-12 col-md-2 q-mt-xs">
              <q-btn color="primary" class="full-width">Add Degree</q-btn>
            </div>
            <div class="text-subtitle q-py-md">
              <b class="text-red-4">Note:</b> Must provide details for atleast last academic degree.
            </div>
          </div>
          <div class="row">
            <div class="col-12 col-md-4 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">USMLE Step 1, USMLE Step 2 CK</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="q-pa-sm text-left text-subitle2 bg-white">
                        <b>Institute:</b> ABC MEDICAL COLLEGE
                      </q-card-section>
                      <q-separator />

                      <q-card-section class="q-pa-sm text-left text-subitle2 bg-white">
                        <b>Passing year:</b> 2010
                      </q-card-section>
                    </div>
                  </q-slide-transition>
                </q-card>
              </div>
            </div>
            <div class="col-12 col-md-4 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"
                  >Fellow of College of Physicians and Surgeons Pakistan (FCPS)</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="q-pa-sm text-left text-subitle2 bg-white">
                        <b>Institute:</b> DOW UNIVERSITY HOSPITAL
                      </q-card-section>
                      <q-separator />

                      <q-card-section class="q-pa-sm text-left text-subitle2 bg-white">
                        <b>Passing year:</b> 2008
                      </q-card-section>
                    </div>
                  </q-slide-transition>
                </q-card>
              </div>
            </div>
          </div>
          <q-separator class="q-my-lg" inset />
          <div class="row">
            <div class="col-12 text-h6 q-py-lg">Medical Licensing Exam (if any)</div>
            <div class="col-12 col-md-6 q-mt-xs">
              <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>

              <!-- <label class="text-caption q-py-sm text-bold">Category/Doctype/Topics</label> -->
              <!-- <q-list bordered class="rounded-borders">
                        <q-expansion-item 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-3 q-pa-xs">
              <!-- <label class="text-caption q-py-sm text-bold">Exam Passing Year</label> -->

              <q-select
                dense
                outlined
                v-model="passingYear2"
                :options="filterOptYears"
                label="Passing Year"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please select passisng year']"
              />
            </div>
            <div class="col-12 col-md-2 q-mt-xs">
              <q-btn color="primary" class="full-width">Add Exam</q-btn>
            </div>
          </div>
          <div class="row">
            <div class="col-12 col-md-4 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 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">
                        <b>Passing year:</b> 2010
                      </q-card-section>
                    </div>
                  </q-slide-transition>
                </q-card>
              </div>
            </div>
            <div class="col-12 col-md-4 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 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">
                        <b>Passing year:</b> 1995
                      </q-card-section>
                    </div>
                  </q-slide-transition>
                </q-card>
              </div>
            </div>
          </div>
          <q-separator class="q-my-lg" inset />
          <div class="row">
            <div class="col-12 text-h6 q-py-lg">Tutoring Experience (if any)</div>
            <div class="col-12 col-md-12">
              <q-input
                dense
                v-model="text"
                outlined
                rows="4"
                type="textarea"
                label="Tutoring Experience *"
                hint="Please enter your tutoring experience"
                placeholder="For example: 'Total three years teaching experience as Asst. professor in a recognized medical college in Dubai. I have extensive tutoring experience for various USMLE Step CK subjects. I have also helped students to gain their residency program after USMLE. Have worked with a local medical community institute and contributed regularly with my live lectures for medical professionals seeking carrer in middle east.'"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please type something']"
              />
            </div>
          </div>
          <div class="col-12 col-md-12 q-py-md">
            <q-btn
              type="submit"
              color="secondary"
              size="md"
              label="Update"
              @click="accept =! accept"
            />
          </div>
        </q-form>
      </q-card>
    </div>
  </transition>
</template>

<script>
const stringOptions = ["Whatsapp", "imo", "Viber", "Wechat", "Line"];
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 gender = ["Male", "Female"];
const living = ["Pakistan", "UAE", "USA", "India", "KSA"];
const birth = ["Pakistan", "UAE", "USA", "India", "KSA"];
export default {
  data() {
    return {
       dbMenues: "tutor",
      right: false,
      link: "profile1",
      left: false,
      model: null,
      group: null,
      expanded1: false,
      expanded2: false,
      step: 1,
      time: "",
      degname: null,
      uniname: null,
      email: null,
      phone: null,
      countrybirth: null,
      countrylive: null,
      gender: null,
      findus: null,
      text: 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: "",
      color: "primary",
      options: [],
      passingYear1: [],
      passingYear2: []
    };
  },
  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! 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;
}

/* .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>
