<template>
  <div v-if="loading">
    <div class="q-pa-md">
      <q-card flat bordered>
        <q-item>
          <q-item-section>
            <q-item-label class="row q-py-md">
              <q-skeleton type="QRadio" class="q-mr-sm" width="20px" height="20px" />
              <q-skeleton type="text" animation="fade" width="100px" />
            </q-item-label>
            <q-item-label class="row q-py-md">
              <q-skeleton type="QRadio" class="q-mr-sm" width="20px" height="20px" />
              <q-skeleton type="text" animation="fade" width="110px" />
            </q-item-label>
            <q-item-label class="row q-py-md">
              <q-skeleton type="QRadio" class="q-mr-sm" width="20px" height="20px" />
              <q-skeleton type="text" animation="fade" width="120px" />
            </q-item-label>
            <q-item-label class="row q-py-md">
              <q-skeleton type="QRadio" class="q-mr-sm" width="20px" height="20px" />
              <q-skeleton type="text" animation="fade" width="140px" />
            </q-item-label>
            <q-item-label class="row q-py-md">
              <q-skeleton type="QRadio" class="q-mr-sm" width="20px" height="20px" />
              <q-skeleton type="text" animation="fade" width="90px" />
            </q-item-label>
            <q-item-label class="row q-py-md">
              <q-skeleton type="QRadio" class="q-mr-sm" width="20px" height="20px" />
              <q-skeleton type="text" animation="fade" width="130px" />
            </q-item-label>
            <q-item-label class="row q-py-md">
              <q-skeleton type="QRadio" class="q-mr-sm" width="20px" height="20px" />
              <q-skeleton type="text" animation="fade" width="130px" />
            </q-item-label>
            <q-item-label class="q-py-lg">
              <q-skeleton type="QInput" width="100%" height="40px" />
            </q-item-label>
            <q-item-label class="row q-py-md">
              <q-skeleton type="text" animation="fade" width="90%" height="40px" />
            </q-item-label>
            <q-item-label class="row q-py-md">
              <q-skeleton type="QToggle" class="q-mr-sm" width="20px" height="20px" />
              <q-skeleton type="text" animation="fade" width="130px" />
            </q-item-label>
            <q-item-label class="row q-py-md">
              <q-skeleton type="QToggle" class="q-mr-sm" width="20px" height="20px" />
              <q-skeleton type="text" animation="fade" width="130px" />
            </q-item-label>
            <q-item-label class="row q-py-md">
              <q-skeleton type="QToggle" class="q-mr-sm" width="20px" height="20px" />
              <q-skeleton type="text" animation="fade" width="130px" />
            </q-item-label>
            <q-item-label class="row q-py-md">
              <q-skeleton type="QToggle" class="q-mr-sm" width="20px" height="20px" />
              <q-skeleton type="text" animation="fade" width="130px" />
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-card>
    </div>
  </div>

  <div v-else>
    <q-card class="q-ma-sm q-mr-md q-mt-lg shadow-none">
      <q-card-section>
        <div class="text-h6 text-grey-8">Exams</div>
        <div v-for="exam in examsFiltersList" :key="exam.id">
          <q-radio v-model="searchform.exam" :val="exam.name" :name="exam.name">{{exam.name}}</q-radio>
        </div>
        <span v-show="exams.length==0">No Exams Availiable..</span>
        <q-btn
          color="primary"
          flat
          @click="examFilterExpand=!examFilterExpand"
          v-show="exams.length>8"
        >{{ examFilterExpand ? '+ Show More' : '- Show Less' }}</q-btn>

        <q-separator class="q-my-md" inset />
        <div class="text-h6 text-grey-8 q-py-md">Specialities</div>
        <q-select
          dense
          outlined
          v-model="searchform.speciality"
          :options="specialitiesList"
          placeholder="Select Specialities"
          emit-value
          map-options
        />

        <div>
          <div class="text-h6 text-grey-8">Subscription Plans</div>
          <div v-for="(t,index) in qbankPlans" :key="t.id">
            <q-checkbox
              v-model="planOptions[index]"
              :value="false"
              @input="tooglePlanSelection($event,t.id,index)"
               ref="p"
            >{{t.name}}</q-checkbox>
          </div>

          <q-separator class="q-my-md" inset />
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<script>
export default {
  props: ["searchform", "appliedFilters"],
  data() {
    return {
      exams: [],
      examFilterExpand: false,
      qbankPlans: [],
      planOptions: [],
      specialities: [],
      loading: true,
    };
  },
  mounted() {
    this.loadFiltersData();
  },
  computed: {
    examsFiltersList: function () {
      if (this.examFilterExpand) {
        return this.exams;
      } else {
        return this.exams.slice(0, 8);
      }
    },
    specialitiesList: function () {
      return this.specialities.map((v, i) => {
        return { label: v.name, value: v.id };
      });
    },
  },
  methods: {
    loadFiltersData() {
      let t = this;
      Promise.all([axios.get("/getPeriods"), axios.get("/exams-list")]).then(
        (res) => {
          t.qbankPlans = res[0].data;
          t.qbankPlans.forEach((e) => {
            t.planOptions.push(false);
          });

          t.exams = res[1].data;

          if (t.exams.length > 0) {
            t.fetchExamsSpecialities(t.exams[0].name);
          } else {
            this.loading = false;
          }
        }
      );
    },
    fetchExamsSpecialities: function (exam) {
      let t = this;
      axios.get("/exams-doctypes/" + exam).then((response) => {
        t.specialities = response.data;
        if (this.$route.query.exam) {
          if (this.$route.query.exam == exam) {
            this.searchform.speciality = parseInt(
              this.$route.query.doctype_id,
              10
            );
          }
        }
        this.loading = false;
      });
    },
    tooglePlanSelection: function (checked, plan, index) {
      if (checked) {
        if (!this.searchform.plans.includes(plan)) {
          this.searchform.plans.push(plan);

          let t = this.appliedFilters.find((el) => {
            return el.id == plan && el.type == "plan";
          });
          if (!t) {
            this.appliedFilters.push({
              id: plan,
              name: this.qbankPlans[index].name,
              type: "plan",
              index: index,
              show: true,
            });
          }
        }
      } else {
        if (this.searchform.plans.includes(plan)) {
          this.$emit("removePlanFromFilters", plan);
        }else{
          this.planOptions[index]=false;
          // this.$refs.p[index].$el.ariaChecked=false
          // this.$refs.p[index].toggle();
        }
      }
    },
  },
  watch: {
  
  },
};
</script>

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

.show {
  display: inline;
}
.click-fx {
  background: grey;
}
.click-fx:hover {
  background: #1976d2 !important;
}
.hoverable {
  transition: all 0.5s ease;
  border: 1px solid #dddddd;
  border-radius: 5px !important;
}

.l-h {
  line-height: 3.5;
}
.hoverable:hover {
  /* filter: grayscale(100%); */

  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12);
  /* border-radius: 5px; */
  vertical-align: top;
  background: #fff;
  position: relative;
  transition: all 0.5s ease;
}

.hover-fx {
  transition: all 0.3s ease-out;
}

.hover-fx:hover {
  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2),
    0 14px 21px 2px rgba(0, 0, 0, 0.14), 0 5px 26px 4px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease-in;
}
.circle {
  border-radius: 50%;
}

a {
  text-decoration: none;
  color: #04b1ed;
  font-weight: 400;
}
.list ul {
  list-style: none;
}
.list ul li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.list ul li:not(:last-child):after {
  content: "\27A4";
  color: #04b1ed;
  font-size: 14px;
  padding: 10px 5px;
}

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

  .show {
    display: none;
  }
  .shadow-none {
    box-shadow: none;
  }
}

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