<template>
  <div v-if="loading">
    <div class="q-pa-md q-py-lg">
      <q-skeleton height="40px" square style="width: 200px;" />
    </div>
    <div class="row">
      <div class="col-12 col-md-12 col-sm-12 col-xs-12">
        <div class="q-ma-md q-pa-md q-py-lg bg-grey-3">
          <q-skeleton height="40px" square />
        </div>
        <div class="q-ma-md q-pa-md q-py-lg bg-grey-3">
          <q-skeleton height="auto" square style="width: 100%;">
            <div class="q-pa-md">
              <q-markup-table>
                <thead>
                  <tr>
                    <th class="text-left" style="width: 15px">
                      <q-skeleton animation="blink" type="text" />
                    </th>
                    <th class="text-right">
                      <q-skeleton animation="blink" type="text" />
                    </th>
                    <th class="text-right" style="width: 20px">
                      <q-skeleton animation="blink" type="text" />
                    </th>
                    <th class="text-right">
                      <q-skeleton animation="blink" type="text" />
                    </th>
                    <th class="text-right">
                      <q-skeleton animation="blink" type="text" />
                    </th>
                    <th class="text-right">
                      <q-skeleton animation="blink" type="text" />
                    </th>
                    <th class="text-center" style="width: 50px">
                      <q-skeleton animation="blink" type="text" />
                    </th>
                  </tr>
                </thead>

                <tbody>
                  <tr v-for="n in 5" :key="n">
                    <td class="text-left">
                      <q-skeleton animation="blink" type="text" width="15px" />
                    </td>
                    <td class="text-right">
                      <q-skeleton animation="blink" type="text" width="50px" />
                    </td>
                    <td class="text-right">
                      <q-skeleton animation="blink" type="text" width="20px" />
                    </td>
                    <td class="text-right">
                      <q-skeleton animation="blink" type="text" width="50px" />
                    </td>
                    <td class="text-right">
                      <q-skeleton animation="blink" type="text" width="60px" />
                    </td>
                    <td class="text-right">
                      <q-skeleton animation="blink" type="text" width="50px" />
                    </td>
                    <td class="text-center">
                      <q-skeleton animation="blink" type="text" width="50px" />
                    </td>
                  </tr>
                </tbody>
              </q-markup-table>
            </div>
            <div class="col-12 col-md-12 col-sm-12 col-xs-12 q-pa-xl flex flex-center">
              <q-skeleton type="rect" width="200px" />
            </div>
          </q-skeleton>
        </div>
      </div>
    </div>
  </div>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden" v-else>
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-md">Test Analysis</div>
      <div class="row flex flex-center">
        <div class="col-12 col-md-12">
          <div class>
            <q-card class="my-card q-mb-md">
              <q-card-section>
                <div class="q-gutter-xs">
                  <q-btn @click="filter_by=0;" :outline="filter_by==0" color="primary" label="All" />
                  <q-btn
                    @click="filter_by=1;"
                    :outline="filter_by==1"
                    color="primary"
                    label="Correct"
                  />
                  <q-btn
                    @click="filter_by=2;"
                    :outline="filter_by==2"
                    color="primary"
                    label="Incorrect"
                  />
                  <q-btn
                    @click="filter_by=5;"
                    :outline="filter_by==5"
                    color="primary"
                    label="Flaged"
                  />
                  <q-btn
                    @click="filter_by=4;"
                    :outline="filter_by==4"
                    color="primary"
                    label="Favourate"
                  />
                  <q-btn
                    @click="filter_by=3;"
                    :outline="filter_by==3"
                    color="primary"
                    label="Not Attempted"
                  />
                </div>
              </q-card-section>
            </q-card>

            <q-card class="my-card">
              <q-card-section>
                <div class="text-body1">
                  Showing Analysis For Test #
                  <router-link
                    :to="{
                            name: 'qbank-test-app',
                            params: { test_id: test.id }
                         }"
                    class="no-underline text-blue-5 cursor-pointer q-pa-xs"
                  ><strong>{{test.id}}</strong></router-link>
                </div>
              </q-card-section>
              <q-card-section class="q-ma-xs">
                <q-markup-table>
                  <thead>
                    <tr>
                      <th class="text-left text-uppercase">s.no</th>
                      <th class="text-left text-uppercase">q.id</th>
                      <th class="text-left text-uppercase">topic</th>
                      <th class="text-left text-uppercase">subtopic</th>
                      <th class="text-center text-uppercase">result</th>
                      <th class="text-center text-uppercase">attachment</th>
                      <th class="text-center text-uppercase">ACTION</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item,index) in testQuestions" :key="item.id">
                      <td class="text-left">{{serialNo+index+1}}</td>
                      <td class="text-left">{{item.question_id}}</td>
                      <td class="text-left">{{item.topic.name}}</td>
                      <td class="text-left">{{item.subtopic.name}}</td>
                      <td class="text-center">
                        <q-icon size="sm" :name="questionStatus(item)" class="text-bold" />
                      </td>
                      <td class="text-center">
                        <q-icon
                          v-if="hasAttachment(item,0)"
                          size="xs"
                          color="negative"
                          class="text-bold"
                          name="favorite"
                        />
                        <q-icon
                          v-if="hasAttachment(item,1)"
                          size="xs"
                          color="secondary"
                          class="text-bold"
                          name="flag"
                        />
                        <q-icon
                          v-if="hasAttachment(item,2)"
                          size="xs"
                          color="primary"
                          class="text-bold"
                          name="create"
                        />
                      </td>
                      <td class="text-center">
                        <router-link
                          :to="{
                                name: 'qbank-test-app',
                                params: { test_id: test.id, question_index: serialNo+index }
                                }"
                          class="no-underline text-blue-5 cursor-pointer q-pa-xs"
                        >Review</router-link>
                      </td>
                    </tr>
                  </tbody>
                </q-markup-table>
                <div class="q-pa-lg flex flex-center">
                  <q-pagination
                    v-model="currentPage"
                    :max="totalPages"
                    input
                    input-class="text-orange-10"
                  />
                </div>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { skeleton } from "../../mixins/SkeletonMixin.js";
export default {
  mixins: [skeleton],
  data() {
    return {
      current: 3,
      totalPgs: 5,
      test: {
        data_test: [],
      },
      filter_by: 0,
      customData: [],
      loading: null,
      currentPage: 1,
      pageSize: 5,
      baseTestAnalysisUrl: `/get-test-analysis`,
      testId: this.$route.params.id,
      search: "",
      percentage: 0,
      totalItems: 0,
      totalPages: 0,
    };
  },
  computed: {
    testQuestions: function () {
      let data = [];
      switch (this.filter_by) {
        case 1:
          data = this.test.data_test.filter((e) => {
            return e.isAnswerCorrect == true;
          });
          break;
        case 2:
          data = this.test.data_test.filter((e) => {
            return (
              e.isAnswerCorrect == false &&
              e.selectedAnswer != "" &&
              e.selectedAnswer != null
            );
          });
          break;
        case 3:
          data = this.test.data_test.filter((e) => {
            return e.selectedAnswer == "" || e.selectedAnswer == null;
          });
          break;
        case 4:
          data = this.test.data_test.filter((e) => {
            return e.isFavorited == true;
          });
          break;
        case 5:
          data = this.test.data_test.filter((e) => {
            return e.isFlagged == true;
          });

          break;
        default:
          data = this.test.data_test;
      }
      this.totalItems = data.length;
      this.totalPages = Math.ceil(this.totalItems / this.pageSize);
      let startIndex = (this.currentPage - 1) * this.pageSize;
      let endIndex = Math.min(startIndex + this.pageSize, this.totalItems);
      return data.slice(startIndex, endIndex);
    },
    serialNo() {
      return (this.currentPage - 1) * this.pageSize;
    },
  },
  mounted() {
    this.getTestAnalysis();
  },
  methods: {
    getTestAnalysis() {
      axios
        .get(this.baseTestAnalysisUrl + `/${this.testId}/${this.pageSize}`)
        .then((response) => {
          console.log(response.data);
          this.test = response.data;
          this.hideSkeletonLoader();
        })
        .catch((e) => {
          this.hideSkeletonLoader();
        });
    },
    questionStatus(item) {
      if (item.selectedAnswer != "" && item.selectedAnswer != null) {
        return item.isAnswerCorrect
          ? `fas fa-check-circle`
          : `fas fa-times-circle`;
      } else {
        return `fa fa-minus`;
      }
    },
    hasAttachment(item, type) {
      switch (type) {
        case 0:
          return item.isFavorited;
        case 1:
          return item.isFlagged;
        case 2:
          return item.questionNote && item.questionNote != "";
      }
    },
    reviewQuestion: function (index) {
      this.$router.push({
        name: "qbank-test-app",
        params: { test_id: this.test.id, question_index: index },
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

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

.show {
  display: inline;
}

a {
  text-decoration: none;
  color: #04b1ed;
  font-weight: 400;
}

@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>
