<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-xs">Create Test</div>
      <div class="q-pa-md q-gutter-sm">
        <q-breadcrumbs>
          <q-breadcrumbs-el icon="home" to="/tutor/welcome" />
          <q-breadcrumbs-el label="All Tests" to="/all-tests" />
          <q-breadcrumbs-el label="Create Test" to="/create-test" />
        </q-breadcrumbs>
      </div>
      <div class="row">
        <div class="col-12 col-md-12 col-sm-12 col-xs-12">
          <q-card class="my-card">
            <q-card-section>
              <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
                <div class="q-pa-md">
                  <div class="row">
                    <div class="col-12 col-md-6 q-pa-xs">
                      <q-input
                        dense
                        outlined
                        ref="testname"
                        v-model="testname"
                        label="Test Name *"
                        hint="Please input Test Name"
                        lazy-rules
                        :rules="[ val => val && val.length > 0 || 'Please type Test Name']"
                      />
                    </div>
                    <div class="col-12 col-md-6 q-pa-xs">
                      <q-select
                        outlined
                        dense
                        ref="doctypemodel"
                        saperator
                        v-model="doctypemodel"
                        :options="doctype"
                        label="Please select Category/Exam/Doctype"
                        lazy-rules
                        :rules="[ val => val && val.length > 0 || 'Please select Category/Exam/Doctype']"
                      />
                    </div>
                    <div class="col-12 col-md-12 q-pa-xs q-my-md">
                      <q-input
                        dense
                        ref="text"
                        v-model="text"
                        outlined
                        rows="4"
                        type="textarea"
                        label="Test Description *"
                        hint="Please enter test description"
                        placeholder="Briefly describe details about this test"
                        lazy-rules
                        :rules="[ val => val && val.length > 0 || 'Please type est description']"
                      />
                    </div>
                  </div>
                </div>

                <div class="row q-px-md">
                  <div class="col-4 col-md-4 col-xs-6 q-pa-sm">
                    <q-toggle
                      v-model="timed"
                      checked-icon="check"
                      color="primary"
                      label="Timed"
                      unchecked-icon="clear"
                    />
                  </div>
                  <div class="col-4 col-md-4 col-xs-6 q-pa-sm">
                    <q-toggle
                      v-model="tutored"
                      checked-icon="check"
                      color="primary"
                      label="Tutored"
                      unchecked-icon="clear"
                    />
                  </div>
                </div>
                <div class="q-pa-md">
                  <div class="row">
                    <div class="col-12 col-md-6 q-pa-xs">
                      <q-select
                        outlined
                        dense
                        saperator
                        ref="topic"
                        v-model="topic"
                        :options="options"
                        option-value="id"
                        option-label="desc"
                        option-disable="inactive"
                        label="Please select Topics"
                      />
                    </div>
                    <div class="col-12 col-md-4 q-pa-xs">
                      <q-select
                        dense
                        outlined
                        ref="qlevel"
                        v-model="qlevel"
                        :options="filterOptQlevel"
                        label="Question Level *"
                        hint="Please select question level"
                        lazy-rules
                        :rules="[ val => val && val.length > 0 || 'Please select question level']"
                      />
                    </div>
                    <div class="col-12 col-md-2 q-pa-xs">
                      <q-btn
                        disable-off
                        color="primary"
                        type="submit"
                        icon-right="search"
                        label="Search"
                      />
                    </div>
                  </div>
                </div>
              </q-form>
            </q-card-section>

            <div class="row q-px-md">
              <div class="col-12 col-md-12 col-xs-12 q-pa-sm">
                <q-card>
                  <q-table
                    :data="data"
                    :columns="columns"
                    row-key="name"
                    :selected-rows-label="getSelectedString"
                    selection="multiple"
                    :selected.sync="selected"
                  />
                </q-card>
              </div>
            </div>
            <q-separator class="q-mt-lg" inset />

            <div class="text-h5 q-pa-lg">
              Showing Added Questions
              <q-badge color="secondary">22</q-badge>
            </div>
            <q-card-section>
              <q-markup-table>
                <thead>
                  <tr>
                    <th class="text-left">QUESTION</th>
                    <th class="text-left"></th>
                    <th class="text-left">LEVEL</th>
                    <th class="text-right">ACTION</th>
                  </tr>
                </thead>
                <tbody v-for="n in 3" :key="n">
                  <tr>
                    <td class="text-left">
                      <div
                        class="ellipsis"
                        style="width:500px;"
                      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi ducimus doloremque dignissimos quisquam officiis velit. Assumenda laborum ad alias quod in quidem, minus cum accusantium deleniti sed blanditiis rerum. Quisquam?</div>
                    </td>
                    <td>
                      <a href="/#/q-review">More Details</a>
                    </td>
                    <td>{{level[n]}}</td>
                    <td class="text-right">
                      <q-btn flat dense round>
                        <q-icon
                          clickable
                          size="sm"
                          @click="medium = true"
                          class="text-red hoverable cursor-pointer"
                          name="close"
                        />
                      </q-btn>
                    </td>
                  </tr>
                  <q-separator style="width:0%" inset />
                </tbody>
              </q-markup-table>
              <q-separator class="q-mt-lg" inset />
              <div class="col-12 col-md-12 q-py-md text-center">
                <q-btn color="secondary" size="md" label="Save" />
                <div class="q-pt-md">
                  <span class="text-red">NOTE:</span> Question limit is minimum 5 and maximum 100
                </div>
              </div>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
const qlevel = ["All", "Easy", "Normal", "Hard"];
const doctypelist = [
  "Internal Medicine/Neuromuscular",
  "Internal Medicine/Respiratory",
  "Surgery/Urology"
];
export default {
  data() {
    return {
      timed: false,
      tutored: true,
      level: ["All", "Easy", "Medium", "Hard"],
      topic: null,
      doctypemodel: null,
      testname: null,
      text: null,
      qlevel: null,
      filterOptQlevel: qlevel,
      doctype: doctypelist,
      selected: [],

      options: [
        {
          id: "cate",

          desc: "Physician/MOH UAE/General Practitioner (GP)",

          inactive: true
        },

        {
          id: "topics1",

          desc: "Internal Medicine/Neuromuscular"
        },

        {
          id: "topics2",

          desc: "Internal Medicine/Endocrinology"
        },

        {
          id: "topics3",

          desc: "Internal Medicine/Infectious Disease"
        },

        {
          id: "cate2",

          desc: "Physician/MOH UAE/Internal Medicine",

          inactive: true
        },

        {
          id: "topics4",

          desc: "Internal Medicine/Cardiology"
        }
      ],
      columns: [
        {
          name: "desc",
          required: true,
          label: "Question",
          align: "left",
          field: row => row.name,
          format: val => `${val}`,
          sortable: true
        },
        {
          name: "more",
          align: "left",
          label: "",
          field: "more"
        },
        {
          name: "level",
          align: "center",
          label: "Level",
          field: "level",
          sortable: true
        }
      ],
      data: [
        {
          name: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
          more: "More Details",
          level: "Easy"
        },
        {
          name: "Enim, illo! Reiciendis, dolorum incidunt quis assumenda",
          more: "More Details",
          level: "Medium"
        },
        {
          name: "Kamran Khan Lorem ipsum dolor sit amet consectetur",
          more: "More Details",
          level: "Hard"
        }
      ]
    };
  },
  methods: {
    getSelectedString() {
      return this.selected.length === 0
        ? ""
        : `${this.selected.length} record${
            this.selected.length > 1 ? "s" : ""
          } selected of ${this.data.length}`;
    },
    onSubmit() {
      this.$refs.testname.validate();
      this.$refs.doctypemodel.validate();
      this.$refs.text.validate();
      this.$refs.topic.validate();
      this.$refs.qlevel.validate();


      if (this.$refs.testname.hasError || this.$refs.doctypemodel.hasError || this.$refs.text.hasError || this.$refs.topic.hasError || this.$refs.qlevel.hasError) {
        this.formHasError = true;
      } else if (this.accept !== true) {
        this.$q.notify({
          color: "negative",
          message: "You need to accept the license and terms first"
        });
      } else {
        this.$q.notify({
          icon: "done",
          color: "positive",
          message: "Submitted"
        });
      }
    },

    onReset() {
      this.name = null;
      this.age = null;

      this.$refs.name.resetValidation();
      this.$refs.age.resetValidation();
    }
  }
};
</script>

<style lang="css" scoped>
.hide {
  display: none;
}

.show {
  display: inline;
}

a {
  text-decoration: none;
  color: #04b1ed;
  cursor: pointer;
}
.hover img {
  filter: grayscale(100%);
  transition: all 0.5s ease;
}
.hover img:hover {
  filter: grayscale(0%);
  transition: all 0.5s ease;
}
.li-gap li {
  padding: 5px;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .hide {
    display: inline;
  }

  .show {
    display: none;
  }
}

@media only screen and (min-width: 899px) and (max-width: 1280px) {
}
</style>
