<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-md">Insert Question</div>
      <div class="q-pa-md q-gutter-sm">
        <q-breadcrumbs>
          <q-breadcrumbs-el icon="home" to="/welcome" />
          <q-breadcrumbs-el label="All Questions" to="/all-q" />
          <q-breadcrumbs-el label="Insert Question" to="/insert-q" />
        </q-breadcrumbs>
      </div>
      <div class="shadow-2 q-pa-lg rounded-borders">
        <div class="text-h6 text-grey-8">General Info</div>
        <q-form @submit="onSubmit" @reset="onReset">
          <div class="row">
            <div class="col-12 col-md-4 q-pa-sm">
              <q-select
                dense
                outlined
                v-model="reference"
                :options="filterOptReference"
                label="Reference *"
                hint="Please select reference"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please select reference from the list']"
              />
            </div>
            <div class="col-12 col-md-4 q-pa-sm">
              <q-input
                dense
                outlined
                v-model="refdetails"
                label="Reference Details *"
                hint="Please input reference details"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please type reference details']"
              />
            </div>
            <div class="col-12 col-md-4 q-pa-sm">
              <q-select
                dense
                
                outlined
                v-model="qtype"
                :options="filterOptQtype"
                label="Question Type *"
                hint="Please select question type i.e. BCQs, MCQs"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please select question type']"
              />
            </div>
            <div class="col-12 col-md-4 q-pa-sm">
              <q-select
                dense
                outlined
                v-model="difficult"
                :options="filterOptDifficult"
                label="Difficulty Level *"
                hint="Please select Difficulty Level"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please select Difficulty Level']"
              />
            </div>
            <div class="col-12 col-md-4 q-pa-sm">
              <q-select
                dense
                outlined
                v-model="timed"
                :options="filterOptTimed"
                label="Time Allowed *"
                hint="Please select Time Allowed in minute(s)"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please select Time Allowed']"
              />
            </div>
          </div>
          <q-separator class="q-my-lg" inset />
          <div class="text-h6 text-grey-8">Question Section</div>
          <div class="row">
            <div class="col-12 col-md-12 q-pa-sm">
              <q-card class="my-card" flat bordered>
                <q-card-section horizontal>
                  <q-card-section>
                    <div class="text-subtitle1 text-grey-8 q-py-sm">Question Image(s) (If any)</div>
                    <q-btn outline color="primary">Upload Image</q-btn>
                  </q-card-section>

                  <q-separator vertical />

                  <q-card-section horizontal class="flex reverse-wrap">
                    <q-banner rounded class="bg-white" v-for="n in 6" :key="n">
                      <q-btn round flat icon="close" class="closebtn" />
                      <template v-slot:avatar>
                        <img
                          :src="'statics/Final-imgs/'+imgs[n]"
                          alt="question images"
                          style="width: 100px; height: 64px"
                        />
                      </template>
                    </q-banner>
                  </q-card-section>
                </q-card-section>
              </q-card>
            </div>
            <div class="col-12 col-md-12 q-pa-sm">
              <label class="text-caption text-bold text-grey-8 q-pa-sm">Question</label>
              <q-editor v-model="editor" min-height="8rem" placeholder="Type question here.." />
            </div>
          </div>
          <q-separator class="q-my-lg" inset />
          <div class="text-h6 text-grey-8">Explanation Section</div>
          <div class="row">
            <div class="col-12 col-md-12 q-pa-sm">
              <q-card class="my-card" flat bordered>
                <q-card-section horizontal>
                  <q-card-section>
                    <div class="text-subtitle1 text-grey-8 q-py-sm">Explanation Image(s) (If any)</div>
                    <q-btn outline color="primary">Upload Image</q-btn>
                  </q-card-section>

                  <q-separator vertical />

                  <q-card-section horizontal class="flex reverse-wrap">
                    <q-banner rounded class="bg-white" v-for="n in 2" :key="n">
                      <q-btn round flat icon="close" class="closebtn" />
                      <template v-slot:avatar>
                        <img
                          :src="'statics/Final-imgs/'+imgs[n]"
                          alt="question images"
                          style="width: 100px; height: 64px"
                        />
                      </template>
                    </q-banner>
                  </q-card-section>
                </q-card-section>
              </q-card>
            </div>
            <div class="col-12 col-md-12 q-pa-sm">
              <label class="text-caption text-bold text-grey-8 q-pa-sm">Explanation</label>
              <q-editor v-model="editor" min-height="8rem" placeholder="Type explanation here.." />
            </div>
          </div>

          <q-separator class="q-my-lg" inset />

          <div class="text-h6 text-grey-8 q-pb-md">Answer(s) Section</div>
          <div class="row">
            <div class="col-12 col-md-7 q-mt-sm">
              <div class="col-12 col-md-7 q-pa-sm">
                <q-input
                  dense
                  outlined
                  v-model="refdetails"
                  label="Add Answer Choices *"
                  hint="Please input Add Answer Choices"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please type Add Answer Choices']"
                />
              </div>
            </div>

            <div class="col-12 col-md-2 q-pa-md text-bold text-grey-8">
              <q-checkbox v-model="note" label="Is Correct" />
            </div>
            <div class="col-12 col-md-3 q-pa-md">
              <q-btn color="primary" class="full-width">
                <div>Add Answer</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">ANSWER CHOICE</th>
                    <th class="text-left">CORRECT</th>
                    <th class="text-right">ACTION</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class>Cardiovascular</td>
                    <td class="text-left">Correct</td>
                    <td class="text-right">
                      <q-icon
                        clickable
                        size="sm"
                        class="text-blue-5 hoverable cursor-pointer"
                        name="delete"
                      />
                    </td>
                  </tr>
                  <tr>
                    <td class>Gastro</td>
                    <td class="text-left">Incorrect</td>
                    <td class="text-right">
                      <q-icon
                        clickable
                        size="sm"
                        class="text-blue-5 hoverable cursor-pointer"
                        name="delete"
                      />
                    </td>
                  </tr>
                  <tr>
                    <td class>Infactious Deseases</td>
                    <td class="text-left">Incorrect</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>
          <q-separator class="q-my-lg" inset />

          <q-list class="q-my-lg">
            <q-expansion-item
              bordered
              group="somegroup"
              label="Physician/MOH UAE/General Practitioner (GP)"
              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-sm">
                  <q-badge
                    outline
                    color="primary"
                    class="text-body2 q-ma-xs"
                    v-for="n in 3"
                    :key="n"
                  >
                    <!-- <q-checkbox v-model="doctypemodel[n]" label="{{doctype[n]}}" /> -->
                    <q-radio v-model="selection[n]" val="teal" color="primary" />
                    {{doctype[n]}}
                  </q-badge>
                </q-card-section>
              </q-card>
            </q-expansion-item>

            <q-expansion-item
              group="somegroup"
              label="Physician/MOH UAE/Internal Medicine"
              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">
                  <q-badge
                    outline
                    color="primary"
                    class="text-body2 q-ma-xs"
                    v-for="n in 3"
                    :key="n"
                  >
                    <q-checkbox v-model="selection[n]" val="teal" color="primary" />

                    {{doctype[n]}}
                    <!-- <q-radio v-model="selection[n]" val="teal" color="primary" />{{doctype[n]}} -->
                  </q-badge>
                </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 Question" @click="accept =! accept" />
          </div>
        </q-form>
      </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 gender = ["Male", "Female"];
const reference = [
  "Kaplan Medical Bank Step 1",
  "Kaplan medical USMLE Step 1 Qbook",
  "Bhatias Dentogist MCQs in DENTISTRY",
  "Unknown"
];
const images = [
  "4.jpg",
  "5.jpg",
  "6.jpg",
  "7.jpg",
  "1.jpg",
  "2.jpg",
  "3.jpg",
  "8.jpg",
  "9.jpg",
  "7.jpg"
];
const difficult = ["Easy", "Normal", "Hard"];
const timed = ["1", "2", "3"];
const lang = ["English", "Arabic", "French", "Hindi / Urdu"];
const qtype = ["BCQs", "MCQs", "T/F", "Other"];
const birth = ["Pakistan", "UAE", "USA", "India", "KSA"];
const doctypelist = [
  "",
  "Internal Medicine/Neuromuscular",
  "Internal Medicine/Respiratory",
  "Surgery/Urology"
];
const doctypemodel = ["doctype1", "doctype2", "doctype3", "doctype4"];
export default {
  data() {
    return {
      model: null,
      topics: null,
      editor: null,
      subtopics: null,
      expanded1: false,
      expanded2: false,
      note: false,
      doctype: doctypelist,
      doctypemodal: false,
      mock: false,
      thumbnail: true,
      step: 1,
      time: "",
      fname: null,
      lname: null,
      refdetails: null,
      email: null,
      phone: null,
      crhr: null,
      crhr2: null,
      crhr3: null,
      countrybirth: null,
      countrylive: null,
      gender: null,
      reference: null,
      qtype: null,
      difficult: null,
      timed: null,
      lang: null,
      findus: null,
      text: null,
      accept: false,
      daystime: true,
      progress1: 0.9,
      filterOptions: stringOptions,
      filterOptTopic: topic,
      filterOptSubtopic: subtopic,
      filterOptFee: fee,
      filterOptDays: days,
      filterOptYears: year,
      filterOptGender: gender,
      filterOptReference: reference,
      filterOptDifficult: difficult,
      filterOptQtype: qtype,
      filterOptTimed: timed,
      filterOptLang: lang,
      filterOptBirth: birth,
      showScroller2: false,
      value: "",
      imgs: images,
      inputValue: "",
      date: "",
      startdate: "",
      lastdate: "",
      selection: ["teal", "red"],
      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! 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>
.closebtn {
  color: transparent;
}
.closebtn:hover {
  color: red;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .instructions ul {
    padding: 0;
    margin-left: 0px;
    margin-right: 5px;
  }
}
</style>
